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
- 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.
- From the Start menu, right-click Computer, select Properties, click the Advanced system settings, and then click the Environment Variables button.
- 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:
- Click the OK button to commit the changes.
- Open command prompt, type the following statement, and then press the Enter key to install Cordova:
npm install -g cordova
Create Project
- Create a new folder on your desktop or wherever you want (e.g., HelloWorldApp) and then copy the path to the clipboard.
- Type the following to create a new cordova project and then add a space.
cordova create
- 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.
- 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.
- 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.
- Press the ENTER key to create the project.
- 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
- Open Android Studio for any previous project, select Files, and then Settings from the menu.
- Click the Plugin option and in the Settings dialog box that appears, click the install JetBrain plugin… button.
- In the Search field, type PhoneGap/Cordova Plugin and then click the Install button.
- Click the Restart Android Studio button.
- Click the Apply, OK, and then the Restart buttons.
Create App
- 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.
- In the dialog box that appears, click the This Window button.
- 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.
- 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.
- In the dialog box that appears, click the plus button (+) and select the PhoneGap/Cordova configuration from the list.
- In the Run/Debug Configurations dialog box dialog box that appears:
- Give the configuration a name (e.g., CordovaEmulate).
- From the Command drop-down, select run for mobile devices (or emulate for virtual devices).
- From the Platform drop-down, select android.
- Click the Apply and then click the OK button.
- Click the Run button.
- 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.
- 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>
- Run the app again.
- CHECK POINT: You should see the change you made displayed in the app.
- Click the Edit Configuration… button again and change the Platform drop-down to browser.
- Click the Apply and then click the OK button.
- Click the Run button again.
- 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.