• Save
Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5
Upcoming SlideShare
Loading in...5
×
 

Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5

on

  • 3,747 views

Palestra apresentada na UFG em 12 de novembro de 2013

Palestra apresentada na UFG em 12 de novembro de 2013

Statistics

Views

Total Views
3,747
Views on SlideShare
3,222
Embed Views
525

Actions

Likes
14
Downloads
0
Comments
0

4 Embeds 525

http://www.loiane.com 451
http://cloud.feedly.com 66
http://digg.com 6
http://feedly.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5 Iniciando com desenvolvimento híbrido de aplicações mobile com HTML5 Presentation Transcript

  • Desenvolvimento híbrido de apps mobile com HTML5 Loiane Groner http://loiane.com
  • Me, Myself & I •Gerente de Desenv Projetos e Sencha coach @Citibank •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  • packpub.com ou amazon.com
  • Porque Mobile?
  • 2005
  • 2013
  • #changeBrazil
  • Porque Multiplataforma?
  • App Nativa
  • App Nativa Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# App Nativa Arquivos Banco de Imagens/ Dados Documentos UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Backend
  • $99 anuais $25 $0 $19 - $99 anuais
  • Você precisa aprender…
  • Boa Sorte!
  • Acesso Device Nativo Performance Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Parcial Sim* Ótimo Não Sim Cliente Parcial Sim* Ótimo Não Sim Híbrido Sim Sim* Ótimo* Sim Sim*
  • Acesso Device Nativo Performance Tempo Desenvolvimento App Store Cross Platform Sim Sim Caro Sim Não Web Parcial Sim* Ótimo Não Sim Cliente Parcial Sim* Ótimo Não Sim Híbrido Sim Sim* Ótimo* Sim Sim* Interpretado Não é o foco da palestra
  • joApp Wink Toolkit
  • joApp Wink Toolkit
  • Web App
  • Server Side Web Execut a UI e Lógica de negó cio Web Server tp:// ht Java/ PHP/ Ruby/C# Web Browser Arquivos Banco de Imagens/ Dados Documentos Dispositivo um nas dor Ape riza de ren Backend
  • • Tem o JQuery como base
  • • Tem o JQuery como base • Estrutura Multi-Page
  • • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples
  • • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas
  • • Tem o JQuery como base • Estrutura Multi-Page • Sintaxe Simples • Suporte a Temas • Web Page App
  • • JQuery (jquery.com) • JQuery Mobile (jquerymobile.com) • Editor de texto (o de sua preferência!) • WebServer • Browser (Apache/Xampp, IIS, etc) (o de sua preferência!) • Emuladores Phone 8) • Aparelhos (Android, iOS, Blackberry, Windows para testes!*
  • http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
  • • Primeiro Framework HTML5 Mobile do Mercado!
  • • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app
  • • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples
  • • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC
  • • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC • Suporte a Temas (Sass e Compass)
  • • Primeiro Framework HTML5 Mobile do Mercado! • Estrutura Single-Page app • Curva de aprendizado não tão simples • MVC • Suporte a Temas (Sass e Compass) • Web Page App , Client Side App, Hybrid App
  • • Sencha Touch • Sencha • Editor SDK (sencha.com) Cmd (sencha.com) de texto (o de sua preferência!) • WebServer • Browser (Apache/Xampp, IIS, etc) (Safari, Chrome, IE 10) • Emuladores Phone 8) • Aparelhos (Android, iOS, Blackberry, Windows para testes!*
  • $ cd /path/to/sencha-touch-2-sdk $ sencha generate app MyApp /path/to/www/myapp
  • App Client Side Nativa
  • sencha app package run <configFile.json>
  • Client Side Web Web Browser JavaScript Arquivos Imagens/ Documentos Lógica de negó cio Web Server ttp:/ h / Banco de Dados caching UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Java/ PHP/ Ruby/C# Arquivos Banco de Imagens/ Dados Documentos Backend
  • App Híbrida
  • Porque Híbrido?
  • E vos declaro Apps Mobile Híbridas
  • PhoneGap
  • App Híbrida App Nativa Código Nativo Interpretador Lógica de negó cio Web Server / ttp:/ h Java/ PHP/ Ruby/C# :// tp ht Ponte JavaScript UI e de Dispositivo uta gica xec e ) ló ma cio lgu egó (a n Arquivos Banco de Imagens/ Dados Documentos Backend
  • http://nodejs.org/
  • $ sudo npm install -g phonegap
  • $ phonegap create hello com.example.hello HelloWorld
  • $ phonegap build ios     [phonegap] detecting iOS SDK environment...     [phonegap] using the local environment     [phonegap] compiling iOS...     [phonegap] successfully compiled iOS app
  • $ phonegap run android     [phonegap] detecting Android SDK environment...     [phonegap] using the local environment     [phonegap] compiling Android...     [phonegap] successfully compiled Android app     [phonegap] trying to install app onto device     [phonegap] no device was found     [phonegap] trying to install app onto emulator     [phonegap] successfully installed onto emulator
  • Desenvolva Desenvolva Híbrido Teste Teste Build Build { Desenvolva Build Teste Build
  • +
  • http://www.sencha.com/apps/ http://phonegap.com/app/
  • Build Otimizado Agrega Valor!
  • http://browserdiet.com/
  • Demo
  • Threads
  • #FAIL
  • <div id="jogador">
  • http://phonegap.com/app/fruit-salad/
  • http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  • Obrigada! http://loiane.com