Mobile HíbridoLoiane Groner

http://loiane.com @loiane

Me, Myself && I

!

•Gerente de Desenv Projetos

•8+ XP TI

•Java JUG Leader

•Sencha Community Leader

•http://loiane.com

•@loiane

packpub.com ou amazon.com

Android

iOS

Windows Phone

Android

iOS

Windows Phone

• Java • Eclipse (qualquer OS)

100

Android

iOS

Windows Phone

• Java • Eclipse (qualquer OS)

100

• Objective C • Xcode + Mac OS 100

Android

iOS

Windows Phone

• Java • Eclipse (qualquer OS)

100

• Objective C • Xcode + Mac OS 100

• C#/XAML • Visual Studio + Windows 100

Android

iOS

Windows Phone

• Java • Eclipse (qualquer OS)

100

• Objective C • Xcode + Mac OS 100

• C#/XAML • Visual Studio + Windows 100

300

Dev

Mant

CSS

HTMLJavascript

Desenvolvimento Híbrido Mobile

CSS

HTMLJavascript

Desenvolvimento Híbrido Mobile

CSS

HTMLJavascript

Desenvolvimento Híbrido Mobile

Windows Phone

IOS Android

Plataformas diferentes como target

CSS

HTMLJavascript

100

CSS

HTMLJavascript

100

BuildWindows

Phone

IOS

Android5

5

5

CSS

HTMLJavascript

100

BuildWindows

Phone

IOS

Android5

5

5

115

PhoneGap

Acesso Nativo ao Device usando

apenas JavaScript.

“ http://phonegap.com/

App Nativa

Dispositivo

App Híbrida

executa UI e

(alguma) lógica de

negócio

Código Nativo

Interpretador

JavaScript

Ponte

App Nativa

Dispositivo

App Híbrida

executa UI e

(alguma) lógica de

negócio

Código Nativo

Interpretador

JavaScript

Ponte

Web Server

Java/PHP/Ruby/C#

Arquivos Imagens/

Documentos

Banco de Dados

Backend

http://

Lógica de negócio

http://

Desenvolvimento de App Híbrida

Desenvolvimento de App Híbrida

Passo 1: Criar app com HTML/JS/CSS

Desenvolvimento de App Híbrida

Passo 1: Criar app com HTML/JS/CSS

Passo 2: Criar projeto usando API Phonegap e caso seja necessário usar API para acesso nativo

Desenvolvimento de App Híbrida

Passo 1: Criar app com HTML/JS/CSS

Passo 2: Criar projeto usando API Phonegap e caso seja necessário usar API para acesso nativo

Passo 3: Fazer Build e empacotar app

Desenvolvimento de App Híbrida

Passo 1: Criar app com HTML/JS/CSS

Passo 2: Criar projeto usando API Phonegap e caso seja necessário usar API para acesso nativo

Passo 3: Fazer Build e empacotar app

Passo 4: Enviar para App Store, Google Play, Market Place, etc

Phonegap não converte em código

nativo

import android.app.Activity;!import android.content.Intent;!import android.graphics.Bitmap;!import android.os.Bundle;!import android.view.View;!import android.widget.Button;!import android.widget.ImageView;!!public class MyCameraActivity extends Activity {! private static final int CAMERA_REQUEST = 1888; ! private ImageView imageView;!! @Override! public void onCreate(Bundle savedInstanceState) {! super.onCreate(savedInstanceState);! setContentView(R.layout.main);! this.imageView = (ImageView)this.findViewById(R.id.imageView1);! Button photoButton = (Button) this.findViewById(R.id.button1);! photoButton.setOnClickListener(new View.OnClickListener() {!! @Override! public void onClick(View v) {! Intent cameraIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE); ! startActivityForResult(cameraIntent, CAMERA_REQUEST); ! }! });! }!! protected void onActivityResult(int requestCode, int resultCode, Intent data) { ! if (requestCode == CAMERA_REQUEST && resultCode == RESULT_OK) { ! Bitmap photo = (Bitmap) data.getExtras().get("data"); ! imageView.setImageBitmap(photo);! } ! } !}!

- (BOOL) startCameraControllerFromViewController: (UIViewController*) controller! usingDelegate: (id <UIImagePickerControllerDelegate,! UINavigationControllerDelegate>) delegate {! ! if (([UIImagePickerController isSourceTypeAvailable:! UIImagePickerControllerSourceTypeCamera] == NO)! || (delegate == nil)! || (controller == nil))! return NO;! ! ! UIImagePickerController *cameraUI = [[UIImagePickerController alloc] init];! cameraUI.sourceType = UIImagePickerControllerSourceTypeCamera;! ! // Displays a control that allows the user to choose picture or! // movie capture, if both are available:! cameraUI.mediaTypes =! [UIImagePickerController availableMediaTypesForSourceType:! UIImagePickerControllerSourceTypeCamera];! ! // Hides the controls for moving & scaling pictures, or for! // trimming movies. To instead show the controls, use YES.! cameraUI.allowsEditing = NO;! ! cameraUI.delegate = delegate;! ! [controller presentModalViewController: cameraUI animated: YES];! return YES;!}!

// Check to see if the camera is available on the device.!if (PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation.Back) ||! PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation.Front))!{! // Initialize the camera, when available.! if (PhotoCaptureDevice.AvailableSensorLocations.Contains(CameraSensorLocation.Back))! {! // Use the back camera.! System.Collections.Generic.IReadOnlyList<Windows.Foundation.Size> SupportedResolutions = ! PhotoCaptureDevice.GetAvailableCaptureResolutions(CameraSensorLocation.Back);! Windows.Foundation.Size res = SupportedResolutions[0];! this.captureDevice = await PhotoCaptureDevice.OpenAsync(CameraSensorLocation.Back, res);! }! else! {! // Otherwise, use the front camera.! System.Collections.Generic.IReadOnlyList<Windows.Foundation.Size> SupportedResolutions = ! PhotoCaptureDevice.GetAvailableCaptureResolutions(CameraSensorLocation.Front);! Windows.Foundation.Size res = SupportedResolutions[0];! this.captureDevice = await PhotoCaptureDevice.OpenAsync(CameraSensorLocation.Front, res);! }! ...! ...! ...!! //Set the VideoBrush source to the camera.! viewfinderBrush.SetSource(this.captureDevice);!! // The event is fired when the shutter button receives a half press.! CameraButtons.ShutterKeyHalfPressed += OnButtonHalfPress;!! // The event is fired when the shutter button receives a full press.! CameraButtons.ShutterKeyPressed += OnButtonFullPress;!! // The event is fired when the shutter button is released.! CameraButtons.ShutterKeyReleased += OnButtonRelease; }!else!{! // The camera is not available.! this.Dispatcher.BeginInvoke(delegate()! {! // Write message.! txtDebug.Text = "A Camera is not available on this phone.";! });!}!

function capturePicture(){!! navigator.camera.getPicture( cameraSuccess, cameraError, {!! ! quality: 50,!! ! destinationType: destinationType.DATA_URL!! } );!}!

Phonegap não tem componente, não se integra com server

(php, java)

joApp

Wink Toolkit

Phonegap não gera projeto web, gera

projeto nativo que faz uso da API do

phonegap

Processo de build e processo de enviar para apps store é

nativo

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build

Desenvolva

Teste

Build Build

{Híbrido

Não serve para qualquer app

Demo

http://www.sencha.com/apps/

http://phonegap.com/app/

http://phonegap.com/app/fruit-salad/

1

2

3

4

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Loiane Groner loiane.com