This Android app was developed as an example to show how hybrid apps can be developed using web technologies. The app was developed using HTML5 and various Java Script libraries based on the PhoneGAP shell for Android. This single screen app shows the current weather condition with five-day forecast. Several APIs were used to make this app functional: Cordova to obtain the current location from the device, Google API to obtain current address based on location, jQuery AJAX for retrieving weather JSON from a web service, jQuery mobile for the UI framework, and RGraph for drawing the HTML5 chart to display the weather trend.

Complete source code of the app is available on GitHub under MIT license.

 

app-weather-trend

Hybrid is an app development approach where only a bare minimum shell of the app is developed using native programming language and most of the app logic is implemented using web technologies (HTML5, CSS3, and various Java Script libraries). Basically, the native shell provides an embedded web browser or container to  load the HTML-based app UI. Hybrid approach is becoming a popular and faster way to reach mobile users across various platforms as most of the app code can be shared across platforms. Although the user experience of hybrid apps is not as intuitive as native, this approach is the only economically sensible option for existing web development organizations to reach the mobile users without significant investment on different mobile platforms.

The most widely used framework for hybrid app development is PhoneGAP which provides the native shell for most of the mobile platforms available now. The key component of the PhoneGAP framework is the Apache Cordova interface – a java script library for accessing various device features: location, local storage etc. PhoneGAP provides a uniform Cordova java script interface for all supported platforms; therefore, HTML based apps can use the same code for all platforms.  Following figure shows how the code of a hybrid app is shared across two different platforms.

 

hybrid_app

 

Want to quickly share some source codes or a project with the developer community? Free cloud repositories (e.g., GitHub, BitBucket etc.) are the possible alternatives. Obviously, you can use one of these repositories from the very beginning of your project; however, until you are ready to share, you may keep the repository private or don’t commit to the cloud. For instance, GitHub uses Git as the underlying version control system and supports unlimited public repositories for free.  A comprehensive tutorial on that can be found here.

Following simple steps just show how to quickly share an existing project codes on GitHub:

  1. Create a free account on GitHub.
  2. Create a repository for the project you want to share.
  3. It’s a good practice to include a readme file and a license file.
  4. Note down the https clone URL of the repository.
  5. On your local system, make sure that Git for windows or equivalent software for your platform is installed.
  6. Designate a local directory where you want to keep all your local repositories (e.g., C:\GitRepos).
  7. Launch Git Bash from this directory. On window Git Bash appears in the context menu.
  8. From Git Bash type the following command which will create a new directory for the repository with a local copy of the repository: git clone [clone URL obtained earlier].
  9. From Git Bash navigate inside the repository directory: cd [repository directory]
  10. From windows explorer copy all your project files inside the repository directory.
  11. From Git Bash type the following command which will add all file to the staging area of the local repository: git add .
  12. From Git Bash type the following command which will commit the changes to the local repository: git commit –m “check-in comment”
  13. From Git Bash type the following command which will publish or push the local changes to the public repository: git push -u origin master
  14. You are done!