Native Javascript apps with Phonegap - De Keijzer
Upcoming SlideShare
Loading in...5
×
 

Native Javascript apps with Phonegap - De Keijzer

on

  • 357 views

Slides from Martin De Keijzer talk @ codemotion rome 2014

Slides from Martin De Keijzer talk @ codemotion rome 2014

Statistics

Views

Total Views
357
Views on SlideShare
347
Embed Views
10

Actions

Likes
3
Downloads
5
Comments
0

2 Embeds 10

https://twitter.com 9
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Native Javascript apps with Phonegap - De Keijzer Native Javascript apps with Phonegap - De Keijzer Presentation Transcript

  • Phonegap Martin de Keijzer Codemotion- April 11, 2014 - The Netherlands Native Javascript apps with
  • Introduction 2
  • About me Martin de Keijzer Dutch web developer 3 @Martin1982 PHPBenelux Board Member Working for Ibuildings http://www.martindekeijzer.nl
  • What is PhoneGap? 4
  • 5 What is PhoneGap A way to wrap your HTML app as a native application.
  • 6 What is PhoneGap A way to bridge ‘Native’ functionality to a Javascript API
  • 7 Mission PhoneGap’s mission is for PhoneGap to cease to exist!
  • 8 Cordova, PhoneGap WTF?!?!?
  • History class 9
  • PhoneGap Pre-Adobe 10 by
  • PhoneGap acquisistion by Adobe 11 Acquired by Donated to
  • Acquisition by Adobe 12 “PhoneGap” “Callback” “Cordova”
  • PhoneGap now 13 Where changes get committed
  • PhoneGap now 14 PhoneGap releases, still identical to Apache Cordova
  • In conclusion 15 You’ll use PhoneGap!
  • 16 Running PhoneGap Getting ready for lift-off
  • Getting the PhoneGap software 17 sudo npm install -g phonegap
  • Creating a project 18 phonegap create <projectname>
  • Running the scaffold 19 phonegap run ios
  • Your app 20 Copy your html/css/javascript to the ‘www’ folder always include an index.html in the root REMEMBER: Files run from a filesystem not a webserver!
  • PhoneGap per platform commands 21 install - install a platform SDK to the project run - run your project on a certain platform build - build a distributable package for a platform
  • When the web just doesn’t suffice Plug-ins 22
  • Plugin management Add a new plugin: phonegap plugin add org.apache.cordova.inappbrowser ! ! ! List added plugin(s): phonegap plugin ls ! ! ! ! Remove a plugin: phonegap plugin remove org.apache.cordova.inappbrowser 23
  • 24 Notification •Alert •Confirmation •Beep •Vibrate
  • Notification navigator.notification.vibrate(2500); 25
  • 26 Camera, Capture & Media Use the device’s library, camera and microphone to work with local audio, video and images.
  • Camera, Capture & Media function onSuccess(imageData) { // Do stuff with the image! } function onFail(message) { alert('Failed to get the picture: ' + message); } var cameraPopoverHandle = navigator.camera.getPicture(onSuccess, onFail, { destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY }); ! // Reposition the popover if the orientation changes. window.onorientationchange = function() { var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, 0); cameraPopoverHandle.setPosition(cameraPopoverOptions); } 27
  • 28 Contacts Access the user’s contact list
  • Contacts // Wait for device API libraries to load // document.addEventListener("deviceready", onDeviceReady, false); ! // device APIs are available // function onDeviceReady() { var options = new ContactFindOptions(); options.filter=""; filter = ["displayName","organizations"]; navigator.contacts.find(filter, onSuccess, onError, options); } 29
  • 30 InAppBrowser The browser opened by window.open() Extremely useful to open external links!
  • InAppBrowser var ref = window.open('http://apache.org', '_blank', ‘location=yes'); ! // close InAppBrowser after 5 seconds setTimeout(function() { ref.close(); }, 5000); 31
  • 32 Full API Documentation http://docs.phonegap.com
  • Why reinvent the wheel User plugins 33
  • 34 Pick what you want http://plugins.cordova.io/#/_browse/all
  • Go Pro Create your own plugins 35 Disclaimer: Native knowledge is a requirement
  • Let’s take it easy PhoneGap build 36
  • 37 PhoneGap build to the rescue! http://build.phonegap.com
  • 38 PhoneGap build in a nutshell
  • 39 Getting started OR
  • 40 Getting started
  • 41 Getting started OR Repository that represents
 “www” Zip-file that represents
 “www”
  • 42 Getting started
  • 43 The power of PhoneGap Build Title Code Metadata Test
  • 44 Build statusses Grey: Still building, be patient Blue-ish: Build succeeded, click to download Red: Build error, action required
  • 45 Build errors
  • 46 Working in teams
  • 47 Building like a pro config.xml W3C Widget Specification https://gist.github.com/Martin1982/5063962
  • Now it’s your turn Conclusion 48
  • Conclusion 49 Package web applications as native apps Enrich applications with native plugins Quick deployment with PhoneGap Build VS. fine-tuned deployment with PhoneGap CLI tools / IDE If it doesn’t fit the bill? Download or write your own plugin! Always remember; your app runs as a local
  • QUESTIONS 50
  • mdkeijzer@ibuildings.nl @Martin1982 Thank you for listening Creative Commons License This work is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 3.0 Unported License. Slides can also be found at: http://www.slideshare.net/Martin82