desmistificando o phonegap (cordova)
TRANSCRIPT
• 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!