faesa computação móvel: introducao a phonegap e cordova

PhoneGap/Cordova

Loiane Groner http://loiane.com

http://loiane.com

• 9+ XP TI

• Ciência da Computação 2008/2

• Java, Sencha, Phonegap

• http://loiane.com

• Livros:

Loiane Groner

http://loiane.com

O que é

Phonegap

Cordova?

Motivação

Preciso de uma APP

IDE Emulador Store Usuário final



Phonegap

Framework open source para desenvolvimento de apps mobile híbridas

Híbrido?

Nativo Web

http://phonegap.com/app/browserquest/

http://phonegap.com/app/browserquest/

Como funciona

Seu Código

Web View Nativa (Browser)Seu Código

APIs Nativas


App Nativa: .apk, .ipa, etcAPIs Nativas


Interface de uma app phonegap

É uma instância do browser nativo

100% largura e altura

Browser nativo (WebView)sem barra de favoritos

sem barra para mudar url

O que instalar

Phonegap CLI Corvova CLI

http://nodejs.org/

sudo npm install -g cordova

sudo npm install -g phonegap

Linux ou Mac OS

npm install -g cordova

npm install -g phonegap

Windows

Phonegap Phonegap Dev App

Phonegap Build Phonegap Enterprise

Cordova Comunidade Código fonte

Plugins APIs

Ponte com plataforma nativa

Criando um projeto

phonegap create hello com.loiane.hello HelloWorld

cordova create hello com.loiane.hello HelloWorld

Testando com Phonegap developer app

Testando com Phonegap Dev app

phonegap serve

Testando e emulando localmente

Trabalhando com Views

Topcoat

DOM

Architecture

UI

Full Stack

Plugins:

acesso recursos do device

cordova plugin add org.apache.cordova.camera

phonegap plugin add org.apache.cordova.camera

function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); }


function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; }


function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage'); smallImage.style.display = 'block'; smallImage.src = "data:image/jpeg;base64," + imageData; }

<button onclick="capturePhoto();">Capturar foto</button> <br> <img style="display:none;" id="smallImage" src="" />

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."; });}

Fazendo build

Enviando pra App Store

Phonegap Build

apps open source: grátis (github)apps código privado: pago

Phonegap não converte seu código HTML5 em código nativo

Phonegap não gera projeto web, gera projeto nativo que encapsula código web


Phonegap não gera projeto web, gera projeto nativo que encapsula código web

App Nativa: .apk, .ipa, etcAPIs Nativas



Phonegap não tem componente, não se integra com server (php, java)

Phonegap não tem componente, não se integra com server (php, java)

Phonegap é Container do código HTML5 e oferece APIs de acesso ao device

Processo de build e processo de enviar para apps store é nativo

Processo de build e processo de enviar para apps store é nativo

Mas e o phonegap dev app e phonegap build?

Não serve pra qualquer app

<div id="jogador">

Não serve pra qualquer app

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

Exemplos de Apps

http://phonegap.com/app/

http://showcase.ionicframework.com/

http://www.jqmgallery.com/

Quero Aprender!

Topcoat

DOM

Architecture

UI

Full Stack

Noções beeeem básicas

Estudante de Computação

Meus próximos 5 anos…


Meus próximos 5 anos… E daqui a 20 anos…

Bacharel


Meus próximos 5 anos… E daqui a 20 anos…

Bacharel

Programador:Profissional que mais se atualiza

Workshop 21 março

Phonegap/Cordova

http://loiane.com

fb.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

http://loiane.com

http://loianegroner.com

https://github.com/loiane

http://www.youtube.com/user/Loianeg

Obrigada!

faesa computação móvel: introducao a phonegap e cordova

Technology