Me, Myself && I
!
•Gerente de Desenv Projetos
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•http://loiane.com
•@loiane
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
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://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