MNT2014: Mobile Hibrido com Phonegap

transcript

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

Windows Phone

Android

Windows Phone

• Java • Eclipse (qualquer OS)

Android

Windows Phone

• Objective C • Xcode + Mac OS 100

Android

Windows Phone

• C#/XAML • Visual Studio + Windows 100

Android

Windows Phone

• C#/XAML • Visual Studio + Windows 100

HTMLJavascript

Desenvolvimento Híbrido Mobile

HTMLJavascript

Windows Phone

IOS Android

Plataformas diferentes como target

HTMLJavascript

BuildWindows

Android5

HTMLJavascript

BuildWindows

Android5

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

App Nativa

Dispositivo

App Híbrida

executa UI e

(alguma) lógica de

negócio

Código Nativo

Interpretador

JavaScript

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

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)

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

Build Build

{Híbrido

Não serve para qualquer app

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

http://phonegap.com/app/

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

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Loiane Groner loiane.com

MNT2014: Mobile Hibrido com Phonegap

Technology