desmistificando o phonegap (cordova)

Desmistificando o PhoneGap/Cordova

Loiane Groner http://loiane.com

• 9+ XP TI

• Java, Sencha, Phonegap

• http://loiane.com

• @loiane

• Meus livros:

Loiane Groner

Motivação

Preciso de uma APP

IDE Emulador Store Usuário final

IDE Emulador Store Usuário final

IDE Emulador Store Usuário final

Phonegap

Framework JavaScript open source para desenvolvimento de apps mobile híbridas

Híbrido?

Nativo Web

Como funciona

Seu Código

Web View Nativa (Browser)Seu Código

APIs Nativas

Web View Nativa (Browser)Seu Código

App Nativa: .apk, .ipa, etcAPIs Nativas

Web View Nativa (Browser)Seu Código

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 e emulando localmente

Plugins:

acesso recursos do device

cordova plugin add org.apache.cordova.camera

phonegap plugin add org.apache.cordova.camera

cordova plugin add cordova-plugin-camera

> 5.x

https://www.npmjs.com/package/cordova-plugin-camera

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

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 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; }

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

Trabalhando com Views

Topcoat

DOM

Architecture

UI

Full Stack

<ion-tabs>

<ion-tab title="Home" icon="ion-home"> <ion-nav-view name="home"></ion-nav-view> </ion-tab>

<ion-tab title="About" icon="ion-information"> <ion-nav-view name="about"></ion-nav-view> </ion-tab>

<ion-tab title="Contact" icon="ion-ios7-world"> <ion-nav-view name="contact"></ion-nav-view> </ion-tab>

</ion-tabs>

Fazendo build

Enviando pra App Store

cordova platform add android

Add Plataforma

phonegap platform add android

Phonegap Build

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

Processo de enviar para apps store é nativo

Processo de enviar para apps store é nativo

Exemplos de Apps

http://phonegap.com/app/

http://showcase.ionicframework.com/

http://www.jqmgallery.com/

Quero Aprender!

Topcoat

DOM

Architecture

UI

Full Stack

http://loiane.com

fb.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Obrigada!