BONUS: Create App & View in Browser

As an alternative to the previous method, you can download a Cordova/PhoneGap plugin and create a stub app at the command prompt, and then open it up and view it not only in Android Studio with a mobile device or emulate, but also a browser.         

Install Node.js and Cordova

1. Download and run node.js if you do not already have it installed.
   
   
   NOTE: Ensure when installing that the Add to PATH option is set for both Node.js and npm and npm modules.
   
2. From the Start menu, right-click Computer, select Properties, click the Advanced system settings, and then click the Environment Variables button.
3. Ensure that the JAVA_HOME is set to the proper folder (e.g., C:\Program Files\Java\jdk1.8.0_144), if not, add it by clicking the New…. Button and enter:
   
   
   • Variable name: JAVA_HOME
   • Variable value: C:\Program Files\Java\jdk1.8.0_144 or the latest version
     
     
     CAUTION: Ensure that you do not use the jdk...\bin  or the jre folder.
4. Click the OK button to commit the changes.
5. Open command prompt, type the following statement, and then press the Enter key to install Cordova:
   
   
   npm install -g cordova

Create Project

1. Create a new folder on your desktop or wherever you want (e.g., HelloWorldApp) and then copy the path to the clipboard.
2. Type the following to create a new cordova project and then add a space.
   
   
   cordova create
   
   
3. Paste the path (e.g., C:\Users\Cornelius\Desktop\HelloWorldApp) and then add a space.
   
   
   cordova create C:\Users\Cornelius\Desktop\HelloWorldApp
   
   
   NOTE: Replace the path name with your own system path name.
   
   
4. Type the package name (e.g., com.richmediacs.HelloWordApp) and add a space.
   
   
   cordova create C:\Users\Cornelius\Desktop\HelloWorldApp com.richmediacs.HelloWordApp
   
   
   NOTE: Replace the package name with your own package name.
   
   
5. Type the app name (e.g., com.richmediacs.HelloWordApp)
   
   
   cordova create C:\Users\Cornelius\Desktop\HelloWorldApp com.richmediacs.HelloWordApp HelloWorldApp
   
   
   NOTE: Replace the app name with your own app name.
   
   
6. Press the ENTER key to create the project.
7. CHECK POINT: Go to your project folder (e.g., C:\Users\Cornelius\Desktop\HelloWorldApp)) to see the folders and files that were created.

Install Cordova/Phonegap Plugin

1. Open Android Studio for any previous project, select Files, and then Settings from the menu.
2. Click the Plugin option and in the Settings dialog box that appears, click the install JetBrain plugin… button.
3. In the Search field, type PhoneGap/Cordova Plugin and then click the Install button.
4. Click the Restart Android Studio button.
5. Click the Apply, OK, and then the Restart buttons.

Create App

1. Once Android Studio restart, select File > Open and navigate to the project folder that was created earlier (e.g., HelloWorldApp), and then click the OK button.
   
   
   NOTE: Notice the that Platform folder is currently empty.
   
   
2. In the dialog box that appears, click the This Window button.
3. Change the view from Android to Project.
   
   
   NOTE: Since this is not a native Android app, you will have to change the view to see the file structure.
   
   
   
   
4. Click the Edit Configuration… button (to the right of the Run button)
   
   
   NOTE: Since this is not an Android project, we need to use this plugin.
   
   
5. In the dialog box that appears, click the plus button (+) and select the PhoneGap/Cordova configuration from the list.
   
6. In the Run/Debug Configurations dialog box dialog box that appears:
   
   
   1. Give the configuration a name (e.g., CordovaEmulate).
   2. From the Command drop-down, select run for mobile devices (or emulate for virtual devices).
   3. From the Platform drop-down, select android.
   4. Click the Apply and then click the OK button.
      
      
      
      
7. Click the Run button.
8. CHECK POINT: If you view the platform folder, you will see that the android platform has been added. You should see the app running on your mobile device or emulator.
9. Make any minor changes to the index.html file below the following <p> tag.
   
   
   <p class=”event listening”>Connecting to device</p>
   <h1>HELLO WORLD</h1>
   
   
10. Run the app again.
11. CHECK POINT: You should see the change you made displayed in the app.
12. Click the Edit Configuration… button again and change the Platform drop-down to browser.
13. Click the Apply and then click the OK button.
14. Click the Run button again.
15. CHECK POINT: This time you should see the app opens in a browser. If you look in the platforms folder, you will see another folder called browser with content in it.