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

1. Mobile Híbrido
Loiane Groner
http://loiane.com
@loiane

2. Me,Myself && I
!
•Gerente de Desenv Projetos
•8+ XP TI
•Java JUG Leader
•Sencha Community Leader
•http://loiane.com
•@loiane

3. packpub.com ou
amazon.com

7. Android
iOS
Windows
Phone

8. Android
iOS
Windows
Phone
• Java
• Eclipse (qualquer OS)
100

9. Android
iOS
Windows
Phone
• Java
• Eclipse (qualquer OS)
100
• Objective C
• Xcode + Mac OS
100

10. Android
iOS
Windows
Phone
• Java
• Eclipse (qualquer OS)
100
• Objective C
• Xcode + Mac OS
100
• C#/XAML
• Visual Studio + Windows 100

11. Android
iOS
Windows
Phone
• Java
• Eclipse (qualquer OS)
100
• Objective C
• Xcode + Mac OS
100
• C#/XAML
• Visual Studio + Windows 100
300
Dev
Mant

12. CSS
HTMLJavascript
Desenvolvimento Híbrido Mobile

13. CSS
HTMLJavascript
Desenvolvimento Híbrido Mobile

14. CSS
HTMLJavascript
Desenvolvimento Híbrido Mobile
Windows
Phone
IOS Android
Plataformas diferentes
como target

16. CSS
HTMLJavascript
100

17. CSS
HTMLJavascript
100
Build
Windows
Phone
IOS
Android5
5
5

18. CSS
HTMLJavascript
100
Build
Windows
Phone
IOS
Android5
5
5
115

19. PhoneGap

20. Acesso Nativo ao
Device usando
apenas
JavaScript.
“
http://phonegap.com/

21. App Nativa
Dispositivo
App Híbrida
executa UI e
(alguma) lógica de
negócio
Código Nativo
Interpretador
JavaScript
Ponte

22. 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://

23. Desenvolvimento de App Híbrida

24. Desenvolvimento de App Híbrida
Passo 1: Criar app com HTML/JS/CSS

25. 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

26. 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

27. 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

29. Phonegap não
converte em código
nativo

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

31. - (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;!
}!

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

33. function capturePicture(){!
! navigator.camera.getPicture( cameraSuccess, cameraError, {!
! ! quality: 50,!
! ! destinationType: destinationType.DATA_URL!
! } );!
}!

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

36. joApp
WinkToolkit

37. Phonegap não gera
projeto web,gera
projeto nativo que
faz uso da API do
phonegap

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

41. Desenvolva
Teste
Build
Desenvolva
Teste
Build

42. Desenvolva
Teste
Build
Desenvolva
Teste
Build
Desenvolva
Teste
Build Build
{Híbrido

45. Não serve para
qualquer app

46. Demo

47. http://www.sencha.com/apps/
http://phonegap.com/app/

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

50. 1

58. 2

59. 3

61. 4

64. http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

65. Loiane Groner
loiane.com