Cordova Android apps.
If you’ve got an itch to churn out Android apps with Cordova, Netbeans and Android Studio, then Kent Elchuk is on hand to help you scratch it.
Kent Elchuk explains how to setup your Linux box and create Android apps with Cordova, Netbeans and Android Studio.
Back in LXF223 we took you through creating and publishing Android apps with Google Play. The apps in that particular tutorial used native Android functions and web views to achieve the goals. This time around, we’ll cover two other methods for building Android applications: Cordova and the Ionic Framework.
Creating apps with Cordova and the Ionic Framework has many benefits, especially for those with any background in web design or web development. The reason why these are such good choices is that you can create apps using familiar languages such as HTML, CSS and Javascript.
In addition to the convenient language set, both Cordova and the Ionic Framework have plugins that can be added and used in new apps. These include database setup, GPS location data and much more besides.
So now that the basics are out of the way, let’s move on to some basic apps and view them on your test device. Although you can build and test all Cordova and Ionic apps from the command line, here we’ll use AndroidStudio, Netbeans and command line options to build and edit Android apps.
Enter the Android Studio
When building Android apps with Cordova or Ionic, you may like the GUI setup and ease of using AndroidStudio. However, because everything can easily be done in another editor – even simple ones like Gedit or Pluma – using the command line makes it convenient to build apps, too. If you don’t have AndroidStudio installed, you can download it from https://developer.android.com/studio/index.html.
Meanwhile, if you backtrack to the article in LXF223 about Android apps, you may have already seen the details about installing AndroidStudio on Ubuntu 16.04 and setting up virtualisation on Linux. You’d do this if you wanted to test apps on virtual devices. If you’re going to install Android Studio for the first time, then it’s a very easy process. Indeed, in less than a minute you’ll be up and running, and ready to build or import apps.
Even though you can build Android apps without opening AndroidStudio, you should install it anyway because you will need the Android SDK. The Android SDK is a software development kit that’s used to build Android applications. As I previously mentioned, even building via the command line will use the Android SDK.
Here are a few tips for using the Android SDK. You need to set an environment variable for ANDROID_HOME. If you plan to use Netbeans for building Cordova apps, you need to set the ANDROID_HOME path in the .profile file for it to work. Although setting the ANDROID_HOME path in the .bashrc file will work fine for Android Studio and the command line, it can fail for Netbeans.
Now, you may be wondering why do I need to have an ANDROID_HOME path? Well, you just do! Even Netbeans links to the AndroidStudio website for you to acquire the SDK tools. So, if you just install AndroidStudio and set up the environment variable, you will be good to go.
By default, the ANDROID_HOME path you will use is something like /home/user/Android/Sdk after you install Android Studio. Of course, the ‘user’ in the path refers to the user for your Linux box.
The lines below will make the ANDROID_HOME environment variable in the .profile file: export ANDROID_HOME=/home/user/Android/Sdk export PATH=${PATH}:$ANDROID_HOME/ tools:$ANDROID_HOME/platform-tools
Bowled over by Cordova
Let’s now move on to the Cordova installation. Because Ubuntu 16.04 comes shipped with nodejs, you can use the npm command to install Cordova: sudo npm install -g cordova
With Cordova installed, you can navigate to the folder where you want to create the new app. The code below shows
the Cordova creation app: of the myCordova folder and your first basic $ $ cd mkdir myCordova $ $ cordovacd myCordovacreate test com.test.website myTest $ cd The test last command shown above created a test folder: $ cordova platform add android --save The next command ensures that you have the right tools for the job: $ cordova requirements Requirements check results for android: Java JDK: installed 1.8.0 Android SDK: installed true Android target: installed android-19,android-20,android21,android-22,android-23,android-24,android-25 Gradle: installed The next line will build the project: $ cordova build
After you run the command shown above, among the lines at the end of the process will be ‘BUILD SUCCESSFUL’. If things don’t work out as expected, chances are that it’s a permission or ANDROID_HOME path issue. Look at the console output because the message is often self explanatory. If you don’t have privileges to on the /home/
user/.cordova folder then you can use the command below to change that: $ chown -R user:user /home/user/.cordova
You can do a test launch via the command line below. However, make sure you plug in your Android phone into the computer before proceeding. Do note that your phone will may prompted before you can actually see the app open. You simply tap OK and watch it launch: $ cordova run android
At this point, you have a successful build. The next steps are to edit the app, create a signed APK file for Google Play and submit the app to Google Play. Making the APK and submitting it to Google Play are the easy parts. The editing is where the majority of the work takes place.
You’re now at a fork in the road, where you can make a choice on how you want to edit your app. Option one is to use any editor and the Linux command line, while option two is to do everything in AndroidStudio. What to do, what to do…?
Because this can be a difficult choice, the following sections will cover how it can be done via the command line with any text editor (even Vim), or with an IDE such as
Netbeans and AndroidStudio. Just a note about building with Netbeans. If you read through my last article in LXF224 about web development, you’ll remember that it focused on setting up Netbeans and its usage. Netbeans usage for building Cordova apps will be explained here too, because it gives a web developer, and maybe readers from the last article, a familiar bag of tricks.
Building from the command line
Previously, a Cordova app was built with the command line. The main folder where you will work is located in the home folder which can be accessed in the path /home/username/ myCordova/test/www/. The main file is index.html.
Get started by right-clicking the file and opening it with your editor of choice. Then change some of the text like ‘Device is Ready’ or ‘Connecting to Device’, and save it.
To see the new changes, use the terminal and use the cd
command to get to the root folder for the project. In this case, the root folder is test located inside the myCordova folder and can be accessed with cd myCordova/test. Now, just type the command cordova run android and you’ll see the app launch on your phone with the new updates.
We’re not going to extend this app into something useful because it would take away from the summary of steps for command lining your way to building and submitting the app. Meanwhile, if you have some basic web development coding skills like HTML, CSS, Javascript and image editing, you would be right at home, apart from perhaps adding extra plugins. In addition, you can add Jquery mobile into your app from
https://jquerymobile.com/download/. It’s worth going into detail about extending the app and more about plugins further on, after we finish covering AndroidStudio.
The final step to finishing the app with the command line is to create a signed APK file that can be submitted to Google Play. There are two easy methods for which you can create a signed APK file: one using Gradle; another using apksigner.
Gradle, I made it out of clay
The first step is to navigate to the Android folder where the gradle.build file is located. Then use the keytool command to generate the key file. The command is: user:~/myCordova/hello2/platforms/android# keytool -genkey -v -keystore my-release-key.jks -alias myalias -keyalg RSA -keysize 2048 -validity 10000
After you run this command, you’ll be prompted to give passwords. Make sure you remember them because you’ll add them into the gradle.build file.
Once you’ve done that, open the gradle.build file into an editor, which is also located in the Android folder. Add the signingConfigs and buildTypes directly under the defaultConfig closing bracket. All of this is located inside the Android {} brackets.
The easiest way to find this is to open the file, press the Ctrl + F keys and search for defaultConfig. If you click the opening curly brace it’ll highlight the last one; thus, it’ll be obvious where to add the new text block: defaultConfig {Put stuff below under this opening and closing bracket}
Once you’ve made the changes to the gradle.build file in the Android folder, run the command below to create the signed APK. The line below shows the current directory where the command can be run and the command itself: user:~/myCordova/hello2/platforms/android# ./gradlew assembleRelease
Now, if you look into the android/build/outputs/apk folder you’ll see the new APK file that can be uploaded to Google Play. In this case, the file is called android-release. apk. That’s it!
Brewing up apps
In LXF224 we ran a detailed article that included using Netbeans for web development. Well, Netbeans also can be used to create and import Cordova apps for Android. If you don’t have Netbeans installed, you can download it and run it in minutes. However, do note that Netbeans ships with Java JRE. Thus, you’ll need to use Java JDK to develop Cordova apps with Netbeans. This process isn’t too difficult. Just install the JDK and edit the netbeans.conf file located in your Netbeans folder.
The path to the file is something like home/user/ netbeans-8.2/etc/netbeans.conf. As you can see, Netbeans is located in the home folder. The code change is shown below. Notice how the old JRE path that references java is commented out and the new one added below. Normally, the jdk will install to the /usr/lib/jvm folder. Always check that folder to see your version: #netbeans_jdkhome="/home/user/netbeans-8.2/bin/jre” netbeans_jdkhome="/usr/lib/jvm/java-1.8.0-openjdk-amd64”
Netbeans can create a new Cordova app or import an app built from the command line. However, signing the app will need to be done with the command line. And so, it essentially falls somewhere between the command line technique and AndroidStudio options mentioned above.
To start a brand new Cordova app with Netbeans, the sequence is File > New Project > Select HTML5/Javascript category > Cordova application > Next > Name Project > Select an Online template > Next >Finish.
Now, if you look into the bottom window you’ll see the ‘BUILD SUCCESSFUL’ line.
Although Netbeans built your Cordova app, you’ll need to make sure it builds for the Android platform. If all else fails, you can do that with the Linux terminal or with the command line with Netbeans. Personally, we’d create a Cordova project with the command line and import an existing project.
Note though, that when you build and run the app on an Android device with Netbeans, it’ll make it Android compatible. Again, you can always add the Android platform
via the command line as an alternative.
To open the command line with Netbeans, go to the main menu and click Window > IDE Tools > Terminal. When the terminal opens, you’ll need to use the ‘cd’ command to navigate to the directory where the application exists.
The other option is to load a Cordova project from existing files, and then you can import an Android project that you created with the command line. This way, you can just run a few commands and easily import the project that’s already set up for Android devices.
Now that you have a successful new Cordova project, you can edit the files, build and run the application with Netbeans, or, you can use Netbeans to edit the project and use the command line to build and run the project.
To the Studio!
Now, let’s import the new project into AndroidStudio. So, open up AndroidStudio and select File > New > Import Project. The project you want to import is the test folder that was just created. Once you select the folder, the next window will open. Make sure ‘Create Project From Existing Sources’ is selected and then click Next.
If you’re prompted with a message explaining that the folder is not writable, make sure the user has the proper permissions and the folder is writable. The commands below will solve either problem: cd # chown -R user:user myCordova # chmod -R 755 myCordova
After that, you continue with some obvious steps. You can change the name or just click Next until you get everything finished. After all that’s done, you can see the folder structure in AndroidStudio. If not, make sure that Project is selected on the left side of the menu and above the files.
Now, things get simple. The folder for which you can build you app is located in the www folder. This setup should very familiar to web designers and developers since a typical Linux website resides in the var/www or var/www/html folder.
So, to explains things precisely, the index.html file is the file that will load when the app is launched. Just like a typical website, the css, images and javascript are located in the css, img and js folders. Just to see how quick and easy that was, you can pull your Android phone and attach it to your Linux box. Then you’ll see the page load.
With AndroidStudio, you can sign the APK with Android Studio, or, use the command line to sign the APK.
The next step is to sign the apk. To do this, select Build > Generate Signed APK. This process is pretty self-explanatory. You’ll need to select a path on your computer where you want to store the keys. Once you’re successful at this stage, select Next. Make sure the build type is ‘Release’ and then select Finish’ If all goes to plan, you may see a popup showing no errors and warnings. In addition, the APK file you’ll submit to Google Developer is located in the android/
build/outputs/apk folder. The next method uses a tool called apksigner.
Signs and portents
The easiest way to sign the APK with apksigner is to have one terminal open in the Android directory and another in the apk directory. This is because you must be in the Android folder to run a command and you need to be in the apk folder to run other commands on the apk files. The commands shown below can create the signed APK. Note that you’ll need to use an Android SDK build tool above version 24.0.3, because the recent ones comes shipped with apksigner, while earlier versions don’t.
Here’s what will happen with the following commands. The first one creates an unsigned release apk file. The zipalign command will copy and align the file you just made. The third command does all the heavy-duty work and completes the process: user:~/myCordova/test/platforms/android# ./gradlew assembleRelease user:~/myCordova/test/platforms/android/build/outputs/apk# zipalign -v -p 4 android-release-unsigned.apk androidrelease-unsigned-aligned.apk user:~/myCordova/test/platforms/android/build/outputs/apk# /home/user/Android/Sdk/build-tools/25.0.2/apksigner sign --ks my-release-key.jks --out my-release.apk android-releaseunsigned-aligned.apk
Now that the new file called my-release.apk is done, you can run it through a test to see that it is verified: user:~/myCordova/hello2/platforms/android/build/outputs/ apk# /home/kent/Android/Sdk/build-tools/25.0.2/apksigner verify --verbose my-release.apk
So, there you have it. You now have a working Linux box ready to take on new Android app challenges using Cordova. Good luck with your next app!