MNT2014: Mobile Hibrido com Phonegap

1,622 views

Published on

Palestra apresentada no dia 29 de março de 2014 no 2 encontro das mulheres na tecnologia, em Goiânia - GO.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
1,622
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
31
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

MNT2014: Mobile Hibrido com Phonegap

  1. 1. Mobile Híbrido Loiane Groner http://loiane.com @loiane
  2. 2. Me,Myself && I ! •Gerente de Desenv Projetos •8+ XP TI •Java JUG Leader •Sencha Community Leader •http://loiane.com •@loiane
  3. 3. packpub.com ou amazon.com
  4. 4. Android iOS Windows Phone
  5. 5. Android iOS Windows Phone • Java • Eclipse (qualquer OS) 100
  6. 6. Android iOS Windows Phone • Java • Eclipse (qualquer OS) 100 • Objective C • Xcode + Mac OS 100
  7. 7. Android iOS Windows Phone • Java • Eclipse (qualquer OS) 100 • Objective C • Xcode + Mac OS 100 • C#/XAML • Visual Studio + Windows 100
  8. 8. Android iOS Windows Phone • Java • Eclipse (qualquer OS) 100 • Objective C • Xcode + Mac OS 100 • C#/XAML • Visual Studio + Windows 100 300 Dev Mant
  9. 9. CSS HTMLJavascript Desenvolvimento Híbrido Mobile
  10. 10. CSS HTMLJavascript Desenvolvimento Híbrido Mobile
  11. 11. CSS HTMLJavascript Desenvolvimento Híbrido Mobile Windows Phone IOS Android Plataformas diferentes como target
  12. 12. CSS HTMLJavascript 100
  13. 13. CSS HTMLJavascript 100 Build Windows Phone IOS Android5 5 5
  14. 14. CSS HTMLJavascript 100 Build Windows Phone IOS Android5 5 5 115
  15. 15. PhoneGap
  16. 16. Acesso Nativo ao Device usando apenas JavaScript. “ http://phonegap.com/
  17. 17. App Nativa Dispositivo App Híbrida executa UI e (alguma) lógica de negócio Código Nativo Interpretador JavaScript Ponte
  18. 18. 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://
  19. 19. Desenvolvimento de App Híbrida
  20. 20. Desenvolvimento de App Híbrida Passo 1: Criar app com HTML/JS/CSS
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Phonegap não converte em código nativo
  25. 25. 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);! } ! } ! }!
  26. 26. - (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;! }!
  27. 27. // 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.";! });! }!
  28. 28. function capturePicture(){! ! navigator.camera.getPicture( cameraSuccess, cameraError, {! ! ! quality: 50,! ! ! destinationType: destinationType.DATA_URL! ! } );! }!
  29. 29. Phonegap não tem componente,não se integra com server (php,java)
  30. 30. joApp WinkToolkit
  31. 31. Phonegap não gera projeto web,gera projeto nativo que faz uso da API do phonegap
  32. 32. Processo de build e processo de enviar para apps store é nativo
  33. 33. Desenvolva Teste Build Desenvolva Teste Build
  34. 34. Desenvolva Teste Build Desenvolva Teste Build Desenvolva Teste Build Build {Híbrido
  35. 35. Não serve para qualquer app
  36. 36. Demo
  37. 37. http://www.sencha.com/apps/ http://phonegap.com/app/
  38. 38. http://phonegap.com/app/fruit-salad/
  39. 39. 1
  40. 40. 2
  41. 41. 3
  42. 42. 4
  43. 43. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  44. 44. Loiane Groner loiane.com

×