Jump Start Adobe Phonegap @ DevRioClaro

41
Adobe Phonegap Jump Start

description

A short Jump Start to mobile development using Adobe Phonegap and Adobe Phonegap Build to ship apps for multiple platforms.

Transcript of Jump Start Adobe Phonegap @ DevRioClaro

Page 1: Jump Start Adobe Phonegap @ DevRioClaro

Adobe PhonegapJump Start

Page 2: Jump Start Adobe Phonegap @ DevRioClaro

Seja bem vindo(a)!Somos um grupo voluntário e

independente de desenvolvedores de software, com o intuito de disseminar

conhecimento e fortalecer a comunidade local

fb.com/devrioclaro

[email protected]

Page 3: Jump Start Adobe Phonegap @ DevRioClaro

www.mappase.com.br

Page 4: Jump Start Adobe Phonegap @ DevRioClaro

www.novatec.com.br

• Livro para sorteio no dia do evento!• 25% de desconto - “DevRioClaro25” (válido até

10/06/2014)

Page 5: Jump Start Adobe Phonegap @ DevRioClaro

www.altabooks.com.br

• Livro para sorteio no dia do evento!

Page 6: Jump Start Adobe Phonegap @ DevRioClaro

www.casadocodigo.com.br

• 2 e-Books para sorteio no dia do evento!• 15% desconto - “DevRioClaro” (valido até 31/05/2014)

Page 7: Jump Start Adobe Phonegap @ DevRioClaro

www.lcm.com.br

• 2 e-Books para sorteio no dia do evento!• Desconto de 40% livro impresso e 10% eBook - “V00031” (válido

até ...)

Page 8: Jump Start Adobe Phonegap @ DevRioClaro

Murilo Beltrame

• Marketing - FACINTER

• Especialista Microsoft (MCTS Web Development/Data Access)

• Entusiasta JavaScript

• Motociclista

• Futuro marido

Page 9: Jump Start Adobe Phonegap @ DevRioClaro

Agenda

• Mobile development

• Phonegap

• Environment

• Workflow

• Demos

Page 10: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment = []

Page 11: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Panorama]

2012 2013 20140

500000

1000000

1500000

2000000

2500000

Vendas globais (em milhares)

PC Ultramobile Tablet Smartphone

Gartner, Worldwide Device Shipments, October, 2013

Page 12: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Panorama]

Vendas 2º Sem. 2013

Participação de Mercado 2º Sem. 2013

Android 187.4 mi 79.3%

iOS 31.2 mi 13.2%

Windows Phone 8.7 mi 3.7%

Outros (BB, Symbian, ... )

3.8%IDC, Worldwide Mobile Phone Tracker, August 7, 2013

Page 13: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Ambiente]

Android (JAVA)• Eclipse• Android SDK• Java SDK

WP (C#)• Windows 8 Pro• WP SDK• Visual Studio

2013

iOS (Objective C)• OS X• XCode

Page 14: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Desenvolvedor]

C#Objective C

Java

Page 15: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Desenvolvedor(es)]

C# Objective C Java

Page 16: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Desenvolvedor]

+ =$$$

Page 17: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Desenvolvedor]

+ =$$$

Page 18: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap = []

Page 19: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap[Eles_dizem]

PhoneGap é um framework gratuito e de código aberto que lhe permite a criação de aplicativos móveis utilizando APIs Web padronizadas para múltiplas plataformas.

Page 20: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap[O_Murilo_diz]

Um jeito de criar um único código HTML, CSS and JS e entregar para múltiplas plataformas

Page 21: Jump Start Adobe Phonegap @ DevRioClaro

Magic?

Page 22: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap[Por_dentro]

• Plugins!

• Plugins são um monte de código especializado para cada plataforma com interface para o JavaScript

• As estruturas dos plugins são padronizadas

• Os códigos dos plugins são especializados por plataforma

• Um monte de plugins (https://build.phonegap.com/plugins)

• Você pode fazer o seu!

Page 23: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap[Nada _muito_mágico]

Sua aplicação web é embutida em projetos de código especializado por plataforma. Desse modo, você precisa ter os ambientes de desenvolvimento de cada plataforma para compilar seu código.

Page 24: Jump Start Adobe Phonegap @ DevRioClaro

MobileDevelopment[Idéia]

Web

Page 25: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap[Dor_de_cabeça]

Page 26: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap[Sem_dor_de_cabeça]

Adobe Phonegap Build – é um serviço que compila seu código na núvem da Adobe

http://build.phonegap.com

Page 27: Jump Start Adobe Phonegap @ DevRioClaro

Phonegap Build significa: não é necessário manter ambiente para cada plataforma.

Amazed Padawan

Page 28: Jump Start Adobe Phonegap @ DevRioClaro

Environment = []

Page 29: Jump Start Adobe Phonegap @ DevRioClaro

Environment[Início]

http://nodejs.org/download/

Page 30: Jump Start Adobe Phonegap @ DevRioClaro

Environment[Você_vai_querer_usar]

http://git-scm.com/downloads

Page 31: Jump Start Adobe Phonegap @ DevRioClaro

Environment[CLI]

npm install –g cordova

Page 32: Jump Start Adobe Phonegap @ DevRioClaro

Workflow = []

Page 33: Jump Start Adobe Phonegap @ DevRioClaro

Workflow[Inicio]

cordova create [nome_do_diretorio] [id_unico_do_app] [nome_do_app]

cordova create hello br.com.murilobeltrame.hellocordova HelloCordova

Page 34: Jump Start Adobe Phonegap @ DevRioClaro

Tenha certeza que seu config.xml está dentro da pasta www

Experienced Padawan

Page 35: Jump Start Adobe Phonegap @ DevRioClaro

Workflow[Git]

Vá para a pasta do aplicativo:

git init

git add .

git commit –am “adding to source control”

git remote add origin [repo_url]

git push –u origin master

Page 36: Jump Start Adobe Phonegap @ DevRioClaro

Workflow[Plugins]

No config.xml

xmlns:gap=http://phonegap.com/ns/1.0

<gap:plugin name=“” version=“” />

Temos documentação!

https://build.phonegap.com/plugins

Page 37: Jump Start Adobe Phonegap @ DevRioClaro

Use o DTD fornecido pelo Phonegap ao invés de o fornecido pela Apache. Você

será mais feliz com ele.

Experienced Padawan

Page 38: Jump Start Adobe Phonegap @ DevRioClaro

Workflow[Manutenção]

git commit –am “descrição da mudança feita”

git push

Page 39: Jump Start Adobe Phonegap @ DevRioClaro

DemoMy first app

Page 40: Jump Start Adobe Phonegap @ DevRioClaro

DemoCordovaPlayground

Fork me on github : http://goo.gl/CJvw4f

Page 41: Jump Start Adobe Phonegap @ DevRioClaro

Thanksmurilobeltrame.com.br

@murilobeltrame

fb.com/murilobeltrame

br.linkedin.com/in/murilobeltrame