Adobe Phone Gap
What is it?
Ref: http://www.riverpark.co.th/blog/phonegap.html
Adobe Phone Gap is an open-source cross-platform mobile application development framework or tool that help you to build mobile application easily by using HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), JavaScript and deployed to a wide range of the mobile device. Phone Gap is Framework that use Hybrid Application for Mobile Phone because the application can be written in HTML or JavaScript, then it can be converted into various Mobile Application Platform such as IOS, Android, BlackBerry, Symbian, Web OS, Bada, and Windows Phone.
Principle of Phone Gap
http://www.tipsiam.com/phonegap
PhoneGap is running HTML page Application that we install in Computer or called Native application. If we want to take a photo, sent message or order the vibrator we can call Javascript which the PhoneGap prepared.
PhoneGap also have a service called PhoneGap Build. We can create Application to the different system just only upload a file to the PhoneGap Build then the system will create the file to take Application to the Android Market or App Store immediately.
Mobile Application Platform
- iOS
- Android
- Windows Phone 7,8,8.1
- Windows 8,8.1
- Windows Phone 10
- FireFox OS
- Ubuntu Phone
- BlackBerry
- Symbian
Apache Cordova and Adobe Phone Gap
Apache Cordova was born from PhoneGap. In 2011, the PhoneGap codebase was donated to Apache for incubation, and the project has continued to thrive ever since. Apache Cordova is still the engine that powers PhoneGap, similar to WebKit is the engine that powers Chrome or Safari.
Advantages of Adobe Phone Gap
● Usability: easy to use because can development of simple base skill and works on HTML5, CSS3 and JavaScript
● Maintainability: PhoneGap is more maintainable as long as the developer can write a plugin into extra time and chooses a right framework such as Kendo UI, jQuery mobile, Ionic, and etc.
● Flexibility: It supports many platforms. There are Common frameworks, MPA, Single page/AJAX apps, User interface libraries, The option to build and everything by hand.
● Strong and Robust Backed: It has a robust backend system for more speeds up in the development process and helps developer’s tasks. Moreover, the beginner’s guide also helps in accelerating the process.
Architecture and components
PhoneGap is a Hybrid mobile web development framework although it can provide access to device features in many ways using abstraction layout; otherwise, they will not be able to access a regular webpage. its webview provides the ability to expand it. Phonegap device such as Camera, Geolocation, Compass, Contacts, Media, Accelerometer, Network, Notification and Storage can be accessed. Applications can create by HTML/CSS and JavaScript. This Javascript layer includes parts of the bridge to the native code. PhoneGap applications can be downloaded from the App Store; therefore, it may not know that your application is created with PhoneGap or HTML/CSS. It follows the procedure and UI rules. Developers can develop PhoneGap connecting with Plugin PhoneGap such as Bar-code Scan push notification or NFC reader of Android. From the features, every path is connected by Application Programming Interface (API) or Web Service API that is a communication service between client and server side. API receives commands request from the client’s side, then it will process and respond to client or application again. To make the architecture, more plugin-based responsibilities such as camera are included with notification and media. On the other hand, they make it possible to include the external plugins such as a Facebook or PayPal plugin.
Sample code & Demonstration
- Install Adobe Phone Gap from http://phonegap.com/getstarted/.
2. When successfully installed, can open the Phone Gap Developer App at all.
3. Click “Create new Phone gap project”.
4. Input Name, ID and click create project.
5. Phone gap can run only HTML/ CSS/JavaScript.
6. A green bar at the button. Copy url and paste on the browser to see your project.
Example : Find area of triangle
● Input the height and width of the triangle into the box.
● Click calculate.
● Calculate will call method getAnswer, in this method will extract value from the input by using command document.getElementById then sent to calculation method and calculate remove the value to calculate according to a given formula, when completed, it will calculate up result.
Which architecture patterns does it use?
The example above use SPA pattern
PhoneGap have many pattern that covers every developer in every use case. How to choose pattern? Choosing pattern is depend on developer’s skill sets and requirements of each application. PhoneGap can be written in many flavors such as Single-Page Application(SPA), Multiple-Page Application(MPA) and Model View Controller(MVC). Single-Page Application or recalled SPA has many performance advantages over multi-page application because SPA will not have Flicker and blank screen when pages are loaded and unloaded.Using MVC in PhoneGap applications makes them modularize, which is suitable big projects and easy to handle and review during maintenance. Use of Oops concept, helps us making multiple instances of Model/Controller that can be used with multiple views, each having it’s own scope.
Summarize
Building applications for each platform–iPhone, Android, Windows and more–requires different frameworks and languages. Phone Gap solves this by using standards-based web technologies to bridge web applications and mobile devices. Since Phone Gap apps are standards compliant, they’re future-proofed to work with browsers as they evolve. Read an in-depth post explaining Phone Gap visually.
Phone Gap has been downloaded millions of times and is being used by hundreds of thousands of developers. Thousands of apps built using Phone Gap are available in mobile app stores and directories. Check out some of them here