Native Javascript apps with PhoneGap 11-04-2014 Codemotion Rome
Upcoming SlideShare
Loading in...5

Native Javascript apps with PhoneGap 11-04-2014 Codemotion Rome



Writing applications for phones has been a daunting task since every platform uses it's own language and API's. PhoneGap will solve this problem for you by utilizing the browser capabilities. In this ...

Writing applications for phones has been a daunting task since every platform uses it's own language and API's. PhoneGap will solve this problem for you by utilizing the browser capabilities. In this session we will see how we can turn a web based application into a native app. We will also look at posibilites to integrate native functionality, like the camera or accelerometer, in our application. The final part of the presentation is about deployment of these applications. Adobe offers a cloud based service called PhoneGap Build which easily builds your application for all platforms.



Total Views
Views on SlideShare
Embed Views



2 Embeds 5 4 1



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.

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

Native Javascript apps with PhoneGap 11-04-2014 Codemotion Rome Native Javascript apps with PhoneGap 11-04-2014 Codemotion Rome 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
  • 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 =, 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 Extremely useful to open external links!
  • InAppBrowser var ref ='', '_blank', ‘location=yes'); ! // close InAppBrowser after 5 seconds setTimeout(function() { ref.close(); }, 5000); 31
  • 32 Full API Documentation
  • Why reinvent the wheel User plugins 33
  • 34 Pick what you want
  • 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!
  • 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
  • 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
  • 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
  • @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: