Mobile Applications: the Employee Directory sample app

Get the Employee Directory sample app: http://coenraets.org/blog/2011/10/sample-app-using-the-phonegap-database-api/

This sample app provides example code for interacting with the local data store.

Download and unzip the sample into your web root.

In Dreamweaver, create a new site with the sample app.

**You must delete the last sample app at Phonegap Build in order to build this new app!**

Site > Phonegap Build Service > Phonegap Build

Mobile Applications: the Meridian sample app

Get the Meridian sample app: http://www.adobe.com/devnet/dreamweaver/articles/packaging-web-applications-as-mobile-apps.html

This sample app provides an example of using location-identifying code.

Download and unzip the sample into your web root.

In Dreamweaver, create a new site with the sample app.

**You must delete the last sample app at Phonegap Build in order to build this new app!**

Site > Phonegap Build Service > Phonegap Build

Mobile Applications: Using Phonegap

Using the PhoneGap Build Panel in Dreamweaver CS6 to Build Native Applications for Android and iOS Devices

http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-web/using-the-phonegap-build-panel-in-dreamweaver-cs6-to-build-native-applications-for-android-and-ios-devices/

 

Packaging an App in PhoneGap Build

http://tv.adobe.com/watch/learn-dreamweaver-cs6/packaging-and-uploading-phone-gap-apps/

 

PhoneGap is now Apache Cordova

http://docs.phonegap.com

https://build.phonegap.com/blog

https://build.phonegap.com/docs

https://build.phonegap.com/apps

 

PhoneGap Community-powered Support

http://community.phonegap.com/nitobi

 

Taking it to the next level: The Meridien App

http://www.adobe.com/devnet/dreamweaver/articles/packaging-web-applications-as-mobile-apps.html

Get and set up the Meridien sample app in Dreamweaver.

 

 

 

 

Infobyte: Mobile App Development

Creating Mobile Apps is a Pain

I developed for Trimble products using Windows CE for some time using Embedded Visual Basic and C++. The devices were buggy, the development tools were buggy, and documentation was almost nonexistent.

Times have changed. Now there are dozens or hundreds of devices to develop for – and each of them has unique requirements.

The Choice is Between Mobile App and Mobile-device Website

http://www.adobe.com/devnet/dreamweaver/articles/phonegap-mobile-app-pt1.html

Mobile app versus mobile web

A big question to consider before you start development is if you should make a mobile application in the first place. In some cases, it might make sense to skip the mobile application and instead develop for the browser. Here are some points that might help you decide:

Reasons to build a mobile app

  • Your application needs access to one or more native APIs (such as the camera, accelerometer, and so on).
  • You want the application’s icon to appear on the home screen of the mobile device.
  • Your application needs to be available offline.
  • You want to monetize your application by making it available in an app store or market.

Reasons to build a mobile website

  • You do not want to go through the App Store submission process.
  • You would rather have your users use their browser instead of downloading an application.
  • Some device browsers have better functionality than the webviews.

Combine your web skills with PhoneGap to build mobile apps

http://www.adobe.com/inspire/2012/02/combining-web-skills-phonegap-mobile-apps.html

 Where PhoneGap shines is in how it extends your HTML and JavaScript features to work with the device. PhoneGap provides a basic JavaScript API (interface) to your device and allows you to do much more than a standard mobile website. These features include the following:

  • Accelerometer enables you to track the relative motion of the physical device
  • Camera provides full support for both taking pictures and working with existing pictures
  • Capture helps you capture both audio and video
  • Compass allows you to tap into the compass of the device
  • Connection tells you if the device is connected and how it is connected
  • Contacts offers full support for searching the user’s contact database as well as adding new contacts
  • Device provides basic information about the device, including the device’s operating system
  • Events detects various device-specific events, including resume, and is useful when a phone call interrupts your application
  • File delivers basic file read and write operations for the device
  • Geolocation tracks where the device is
  • Media provides basic audio playback features
  • Notification offers a richer notification system than the basic alerts and confirmation screens most mobile browsers provide
  • Storage provides access to a SQLite database for your application and provides much richer support for data storage

 

 

Mobile Applications: Using jQuery Mobile

jQuery is a huge subject: it’s the topic of many books, but almost everyone agrees that the best documentation is on the jQuery site, at http://jquery.com/.

Go directly to http://docs.jquery.com/ for documentation (though don’t skip that front page above).

Go directly to http://docs.jquery.com/Tutorials for tutorials, though there are many more online.

Wrap your head around jQuery: http://docs.jquery.com/How_jQuery_Works

 

Nathan Segal provides some good instruction in his article, “jQuery Mobile in Adobe Dreamweaver CS6” at http://www.htmlgoodies.com/html5/mobile/jquery-mobile-in-adobe-dreamweaver-cs6.html.

 

Enhanced jQuery Mobile Support in Dreamweaver CS6

http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-web/enhanced-jquery-mobile-support-in-dreamweaver-cs6/

 

Using JQuery Mobile Swatches in Dreamweaver CS6 to Easily Skin Mobile Applications

http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-web/using-jquery-mobile-swatches-in-dreamweaver-cs6-to-easily-skin-mobile-applications/

 

The jQueryUI for non-mobile applications:

http://jqueryui.com/

Mobile Applications: Syllabus

Mobile Application Development Using Dreamweaver CS6 and PhoneGap

Day 1

Setting up the development environment

Using PhoneGap

 

Day 2

Setting up and understanding the Phonegap-start sample app: the document.ready event

Setting up and understanding the Meridian sample app: geolocation

 

Day 3

Setting up and understanding the Employee Directory sample app: the local data store

Targeting platforms and sideloading your app

 

Day 4

Custom application project

 

As time allows

Using GitHub

PhoneGap in Xcode and PhoneGap in Eclipse

Using jQuery Mobile

Mobile Applications: Setting Up the Development Environment

 To Do:

Get Dreamweaver  CS 6

Get a Phonegap Build account: https://build.phonegap.com/

Get a GitHub account: https://github.com/

or an Adobe ID: https://build.phonegap.com/plans/free-adobeid

For Android get the Android SDK: https://developer.android.com/index.html

And install it: https://developer.android.com/sdk/installing/index.html

(For iOS pay $99, get a developer account, and get xCode: http://developer.apple.com/devcenter/ios/index.action)