Let’s say I’ve developed a front-end application using JavaScript and HTML that I want to package as a native application that can be installed and run directly on the phone (without a browser), such as the following. For the user of the app, the user experience is exactly the same as that of a real native app developed with Android Studio or XCode.
How is this done?
The answer is to use Apache’s open-source framework, Cordova.
Taking the Android framework as an example, Cordova packs JavaScript and HTML resources from your front-end application into a native Android APK file that can be installed directly on an Android phone. At runtime, the JavaScript and HTML are run directly inside an embedded WebView control provided by Cordova, which is unbeknowndest to mobile users who think they are using native mobile apps.
Follow me step by step to package your front-end projects using Cordova.
1. Install nodeJS on the computer and add the installed directory to the Path environment variable.
2. Use nodeJS package manager NPM to install Cordova. NPM -g install cordova:
3. Create a new folder and go to the folder to create a new Cordova project. The command line:
cordova create JerryUI5HelloWorld
A new Cordova project is created automatically. It contains many subfolders.
The Platforms folder is empty because at this point we have not added the mobile Platforms supported by the Cordova project.
4. If we want to package an app that can be installed on Android, we need to add Android support to the Cordova project. Run the command cordova platform add Android
The command line after the execution, we respect such as platforms folder, found an android folder, inside a lot of folders and more resources. These auto-generated things are all necessary for the final package to generate the Android app APK file.
If all goes well, we get the following directory result.
5. There is an automatically generated index.html file in the WWW folder. We use the command line cordova prepare, the index platformsandroidassetswww HTML will automatically be copied to the folder below. This reveals a best practice for Cordova: All of our front-end development is done directly in the WWW folder at the root of the Cordova project file. After the development, use cordova prepare, resources in the root directory of the WWW folder will automatically be copied to the project supported by the mobile platform corresponding folder, in my case is platformsandroidassetswww.
Everything is ready. Now use the command line cordova compile package, android application APK files are generated in the folder platforms/android/build/output/APK.
Compile cordova compile this command requires you to install Gradle locally. If you install Gradle, you will get the following error message:
Error: Could not find an installed version of Gradle either in Android Studio, Please include gradle in your path, or install Android Studio.
Instead of installing the massive Android Studio, I downloaded the binary version of Gradle and added it to the Path environment variable.
Install APK on your phone, run it, and you will see the following default screen. This is the default index.html generated after the Cordova project is created and installed on the phone.
The rest of the things is easy, take your front-end applications copies of all the resources to Cordova project files in the root directory of the WWW folder, and then execute Cordova prepare, these resources will be automatically synchronized to the folder platformsandroidassetswww below, Run the cordova compile command to generate the APK file again.
If you don’t have an Android phone, you can also use the emulator provided in Android Studio to test it.
Create a new Virtual Device in Android Virtual Device Manager:
Then use the command line cordova compile to generate the APK file to install the emulator:
adb install j.apk
Now you can use your front-end application packaged with Cordova in the Android emulator.
For more of Jerry’s original technical articles, please follow the public account “Wang Zixi” or scan the following QR code:
