Slides da palestra MobileConf 2015: Desmistificando o Phonegap (Cordova) - Rio de Janeiro, 30 de maio de 2015

1. Desmistificando o
PhoneGap/Cordova
Loiane Groner
http://loiane.com

2. • 9+ XPTI
• Ciência da Computação 2008/2
• Java, Sencha, Phonegap
• http://loiane.com
• Livros:
Loiane Groner

3. Motivação

4. Preciso de uma APP

6. IDE Emulador Store
Usuário
final
IDE Emulador Store
Usuário
final
IDE Emulador Store
Usuário
final

8. Phonegap

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

10. Híbrido?

12. Nativo Web

16. Como funciona

17. Seu Código

18. WebView Nativa (Browser)
Seu Código

19. APIs Nativas
WebView Nativa (Browser)
Seu Código

20. App Nativa: .apk, .ipa, etc
APIs Nativas
WebView Nativa (Browser)
Seu Código

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

23. O que instalar

24. Phonegap CLI
Corvova CLI

25. http://nodejs.org/

26. sudo npm install -g cordova
sudo npm install -g phonegap
Linux ou Mac OS

27. npm install -g cordova
npm install -g phonegap
Windows

28. Phonegap
Phonegap Dev App
Phonegap Build
Phonegap Enterprise
Cordova
Comunidade
Código fonte
Plugins
APIs
Ponte com plataforma nativa

29. Criando um projeto

30. phonegap create hello com.loiane.hello HelloWorld
cordova create hello com.loiane.hello HelloWorld

31. Testando e emulando
localmente

33. Plugins:
acesso recursos do device

35. cordova plugin add org.apache.cordova.camera
phonegap plugin add org.apache.cordova.camera

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

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

38. 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="" />

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

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

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

43. Trabalhando com Views

45. Topcoat
DOM
Architecture
UI
Full Stack

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

49. Fazendo build

50. Enviando pra App Store

52. cordova platform add android
Add Plataforma
phonegap platform add android

55. Phonegap Build
apps open source: grátis (github)
apps código privado: pago

61. Processo de enviar para apps store é nativo

62. Processo de enviar para apps store é nativo

63. Exemplos de Apps

64. http://phonegap.com/app/

65. http://showcase.ionicframework.com/

66. http://www.jqmgallery.com/

69. Quero Aprender!

71. Topcoat
DOM
Architecture
UI
Full Stack

72. http://loiane.com
fb.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

73. Obrigada!