May 19, 2014

PhoneGap - Introduction to Mobile Web Apps

Cross-platform mobile applications are hard to develop due to different OS platforms with diverse programming languages on various IDE (Integrated Development Environment), such as Android / Java / Eclipse, iOS / Objective-C / Xcode, Windows Phone / C# / VS.NET. It is a hard technical challenge to launching mobile applications on major mobile platforms, developers must be familiar with these programming languages and IDEs to develop mobile Apps for Android, iOS and Windows.
From: http://www.slideshare.net/Martin82/introduction-to-phonegap-and-phonegap-build


However, some recent development on the web technology (HTML5, CSS3 and JS), Web browsers (WebKit) and open sources make the Web become the largest application platform. Therefore, developing cross platform mobile applications based on web experiences with HTML/JS will be faster and easier. Mobile Web-based Apps keep in small size due to using functions of the native browser. Many reasons drive the success of Mobile Web Apps.
  • The supporting of HTML5 (W3C standards) is mature with many useful related technologies, e.g. Web Sockets (connectivity), Touch Events, Orientation, Location, Contact, Media Capture, ... (mobile devices), Web Storage (offline and storage), Indexed Database (SQLite), etc. HTML5 compatibility on mobile and tablet browsers with testing on real devices is available from http://mobilehtml5.org/.
HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.png

http://caniuse.com/#search=geo ==> check the current supports on browsers
  • JavaScript (JS) libraries were widely used to solve the cross-browser compatibility.
  • The Web is the dominant platform for delivering and sharing data, information, metadata and content. Many web applications and services are based on web programming techniques.
  • Browser is the largest mobile platform since people needs the Web no matter they are using Windows, Linux, Mac, Android or iOS platforms.
  • Many fluent mobile web UI frameworks are developed and seamlessly integrated with web programming, such as jQueryMobile, Sencha, EmbedJS, etc.
PhoneGap is an integrated tool for porting web apps and services to mobile apps by providing libraries to access mobile device features. Therefore, PhoneGap support following facilities: 
  • PhoneGap is a complete open source project named Cordova and available on GitHub.
   
  • PhoneGap-based applications keeps the web programming style, such as accessing web services using JS.
  • Provides JavaScript APIs for accessing device (phone or tablet) functions like, camera, GPS, accelerometer, device information, etc. Such technology makes web Apps reache out into the native APIs of mobile devices.
Application Components


For example, the PhoneGap is created in "C:\my-app\".
  • C:\my-app\www\config.xml file provides App information and specifies parameters affecting how it works.
  • Cordova application: a web page, named C:\my-app\www\index.html by default, executed as a WebView within the native application wrapper. The index.html references whatever CSS, JavaScript, images, media files, or other resources are necessary for it to run. Thinking your App is running from a file system (folder: www) instead of a web server.
  • Interact with device features: reference a C:\my-app\platforms\android\platform_www\cordova.js file to provides API bindings.
  • Cordova provides a plugin interface to communicate with the WebView with native application components.

PhoneGap Development Paths

Web Project Dev workflow: This is the recommended workflow for creating a Cordova application that runs on as many mobile operating systems as possible with as little platform-specific development work as possible. Use Cordova Command-Line Interface (CLI) to build Apps, such as copying your web assets into the correct folders for each mobile platform, making platform specific configuration changes, or running specific build scripts to generate application binaries.

  • Use CLI simply to create a new project with default configuration for you to modify. E.g. "phonegap create my-app".
  • For many mobile platforms, you can also use the CLI to set up additional project files required to compile within each SDK. For this to work, you must install each targeted platform's SDK. (See the Platform Guides for instructions.) E.g. "phonegap create my-app".
  • Use CLI to compile executable applications and run them in an SDK-based device emulator. For comprehensive testing, you can also generate application files and install them directly on a device.
Native Project Dev workflowThe workflow focuses on building an application for a single platform and are interested in changing the lower-level platform details. This workflow is also appropriate if you want to use the CordovaWebView as a small part in a larger native application (See the Embedding WebViews guide.) You can read about this workflow in the different Shell Tool guides, for instance, Android Shell Tool Guide and iOS Shell Tool Guide.

How can PhoneGap work to integrate web and device as a native App.

  1. Web coding: programmers developer Apps with web programming style, but the UI design must adapt to mobile devices (smaller screen with touch gestures).
  2. PhoneGap build the App project to embed the web program (start from index.html) into the Native WebView, i.e. the browser of the device. Of course, the function depends on browser supports.
  3. PhoneGap provides plugins to bind WebView with device through APIs invoked through JS codes.
  4. Finally, PhoneGap calls platform SDK to build (compile and run) the App for the platform, for example, "android".

How PhoneGap works
Current Platform and Device Feature Supports are available: PhoneGap Supports. Basically, all smartphone features are supported in Android and iOS platforms.

  • Accelerometer
  • Camera
  • Capture
  • Compass
  • Connection
  • Contacts
  • Device Information
  • Events
  • File
  • Geolocation
  • Globalization
  • InAppBrowser
  • Media
  • Notification
  • Splashscreen
  • Storage
PhoneGap supports on platform features: http://phonegap.com/about/feature/

No comments :

Post a Comment