Converting JavaScript App Into an Android App with PhoneGap
So, you're here because you're a beginner who wants to turn your JavaScript application into a mobile Android or Apple application. Luckily for you, we've written this tutorial that will guide you through creating a new project just for that, using the PhoneGap framework. PhoneGap, also known as Apache Cordova, is an open source mobile application development framework that enables developers to build mobile applications using web technologies like HTML5, CSS3, and JavaScript. It is often used to create hybrid mobile applications that can run on multiple platforms, saving time and effort of developing for each mobile operating system individually. This includes publishing your app on the Google Play Store or Apple's App Store. Besides our PhoneGap tutorial, we will also walk you through a manual way using Cordova CLI with an Android SDK, a method that gives you more control and allows for full development.
If you want to convert an iOS app, we have a tutorial for that as well.
At PubNub, we've built numerous chat demos and tutorials with JavaScript, including 10Chat, a simple chat app written with only 10 lines of JavaScript. These demos do work on mobile, but they are not designed exclusively for building native Android applications. This tutorial aims to change that, giving you step by step instructions to help you build your new project.
How to Convert a JavaScript Android App with PhoneGap
PhoneGap is an open-source mobile framework that enables you to create cross-platform apps that run on various mobile devices, including iOS and Android. You write your web app in HTML5, JavaScript, and CSS, and PhoneGap helps turn it into native apps. One amazing feature of PhoneGap is the ability to use a WebView to display your web content.
You can create mobile or responsive web apps with templates, and use any UI frameworks and libraries of your choice - jQuery Mobile, Sencha Touch, Enyo, Kendo UI, Onsen UI… you name it. Or, if you prefer, you can code in VanillaJS without any frameworks or use Kotlin, a statically typed programming language that can also be used to develop Android apps. It can also be a suitable choice if you're comfortable with it.
The sample code used for this tutorial is available on Github. This demo features a clean interface with minimal CSS, no images, and no extra UI libraries. This demo uses JSON, a lightweight data-interchange format, to store and transport data.
There are two ways to convert your web app into an Android app using PhoneGap: the super-easy way using PhoneGap Build, and a manual way using Cordova CLI with Android SDK. While this blog provides a detailed guideline on using PhoneGap, Cordova CLI and npm for building Android applications, developers should note that other newer frameworks, such as Flutter and React Native, have gained significant popularity due to their advanced features and ease of development.
Option 1: Seamless Android Apps with PhoneGap Build
Using PhoneGap Build is absolutely painless. All you need to do is zip up your web app, upload it to Adobe PhoneGap Build cloud, and the service takes care of everything for you. There's no need to download and set up SDKs or emulators. This process also allows you to customize your application's splash screen, an important aspect of user experience.
Write a web app
Zip it up
Upload the zip file to PhoneGap Build cloud. Click Ready to Build. Edit the name of the app and upload an app icon too.
When ready, scan the QR code with your Android phone, and follow the link.
Download the apk and install it on your phone on Google Play or the App Store.
Woo-hoo!
(…Profit!)
Option 2: Full Development with PhoneGap Cordova CLI
The easy way is great, but if you want full development with the ability to use hardware APIs, mobile push notifications and more, and debugging, you can install Cordova command-line interface (CLI) tools and Android SDKs.
Step 1: Download and Install Android Studio
First, you need to download and install Android Studio. Android Studio is the official Integrated Development Environment (IDE) for Android app development and includes all the necessary Android SDK tools and emulators.
Step 2: Set Up the Android SDK
Once everything you need is installed, open Android Studio and go to SDK Manager. In the dialog, select SDK tools. You will likely need:
Android SDK Tools
Android SDK Platform-tools
Android SDK Build-tools (appropriate for your Android version)
SDK Platform
ARM EABI v7a System Image
For more information on adding SDK packages, please refer to the official Android Studio documentation.
Step 3: Set Up Android Emulator
With Android Studio, you need to create an Android Virtual Device (AVD). In Android Studio, go to AVD Manager. In the AVD Manager window, pick an emulator and create a new virtual device.
Step 4: Install Cordova CLI
Installation of the command-line interface requires Node.js. If you haven't installed Node.js, install it first.
Install Cordova with npm:
Step 5: Create a New Project in the SDK
Create a new project by typing these commands:
Build it and deploy the app to an emulator or a device:
It may take a while to launch the emulator, but be patient. Once the emulator is up and running, you should see the Cordova splash screen!
Step 6: Port Your Web App
In your project folder, you should find a /www/ directory. This is where your web app resides.
Your index.html body content goes into the body of /www/index.html. Do not delete or replace the head section unless you know what you're doing.
And /js/index.js includes functions that are required for PhoneGap. You just need to call your app functions in the onDeviceReady() method.
Also, you include all your CSS files and images under /www/.
The application icons can be anywhere, you just need to specify their location in your config.xmlfile.
Now, deploy it to an emulator or device.
Congratulations! Now you have your own chat app for Android, ready to be uploaded on the Play Store! Super!
Remote Debugging with Chrome
When you're working on Android apps, you can easily remote-debug on Chrome.
Enable USB debugging mode on your Android device by going to Settings > Developer Options, then turn on USB debugging option.
On your desktop Chrome browser, go to chrome://inspect.
Connect the device and your computer with a USB cable.
You should see your device name (e.g., in the screenshot below, XT1032 is the name of a Moto G), also your app on the Chrome screen.
Click "inspect."
Once you click "inspect", you should see the familiar DevTools window for debugging! If you have trouble with the tools, go to Google Chrome Developer for more information.
We hope you enjoyed this tutorial. Did you know we have a follow-up tutorial where we discuss converting your JavaScript App into an iOS app with PhoneGap? Check it out!
Converting your JavaScript application into a mobile Android application can be achieved using the PhoneGap framework or manually using Cordova CLI with an Android SDK. Both methods have their benefits, but it ultimately depends on your personal or business needs. This guide walks you through both processes step-by-step. However, remember that technology is ever-evolving, and it's essential to stay updated with the latest development frameworks and tools for optimal results.
How can PubNub help you?
Our platform helps developers build, deliver, and manage real-time interactivity for web apps, mobile apps, and IoT devices.
The backbone of our platform is the world's largest and most reliable real-time edge messaging network. With more than 15 points-of-presence across the globe supporting 800 million regular monthly users and ensuring 99.999% uptime, rest assured about any outages, concurrency issues, or latency problems caused by sudden traffic increases.
Get Setup
Sign up for a PubNub account for immediate access to PubNub keys for free. It's a quick and straightforward process, designed to get you started as soon as possible. Creating an account gives you access to a wide range of tools and features that are critical to building scalable, real-time applications.
Get Started
Visit the PubNub docs to get you started, irrespective of your use case or SDK. Our comprehensive documentation covers a vast range of topics, providing detailed walkthroughs and explanations for various use cases and SDKs. Whether you're a novice developer or a seasoned expert, our documentation aims to equip you with the knowledge and expertise to navigate the world of real-time application development seamlessly.