Create a Mobile app using Angular and Cordova

-

This will be a step by step guide for converting an angular project to an android application by using Cordova (The process will be quiet similar for creating IOS apps).



Before we start converting our application we need to install Cordova, Java SDK, Apache Ant, Gradle, and Android SDK for running our android application. If you have already done all the required setup you can skip this section.
Note: You don’t need to enter ‘$’ in front of every command, it indicates that you have to enter the command in your terminal.
Installing Cordova:
  1. You will need NPM(Node Package Manager) to install Cordova Package.
$ sudo apt-get update
$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt-get install nodejs
$ nodejs -v
$ sudo apt-get install npm
$ npm -v
2. You also need GIT, as it is used by Cordova behind the scenes.
$ sudo apt-get install git
$ git --version
3. Installing Cordova
$ sudo npm install -g cordova
$ cordova --version
Installing Java SDK:
You will need Java 8 (LTS version of Java) for running the latest version of Android SDK.
$ sudo apt-get install openjdk-8-jdk
$ java -version
Installing Ant:
Download Apache Ant zip file from here: ant.apache.org/bindownload.cgi then make a folder “ant” in your home directory and extract the downloaded zip file there.
Installing Gradle:
Apache Ant and Gradle are used behind the scenes by Cordova. You can simply install Gradle by entering
$ sudo apt-get install gradle
Installing Android SDK:
Go to the Android Studio website: https://developer.android.com/studio and scroll down till you see the “Command Line Tools” then download the appropriate zip for your OS. Make a folder “android” in your home directory and extract the zip file there.
Adding all the required Environment Paths:
After installing all the things you need to add their respective paths in the .bashrc file so that your application can access the required files throughout the system.
  1. Open the .bashrc file by typing
$ sudo gedit ~/.bashrc
2. Then add the following installation paths at the end of your .bashrc file. These paths may vary depending on where you have installed the required things and the version that you have installed. So make sure to put the correct path to the installation directory.
export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
export PATH=$PATH:/usr/lib/jvm/java-8-openjdk-amd64/binexport ANT_HOME=~/ant/apache-ant-1.10.7
export PATH=$PATH:~/ant/apache-ant-1.10.7/binexport ANDROID_SDK_ROOT=~/android/sdk-tools-linux
export PATH=$PATH:~/android/android-sdk-linux/tools/bin
3. After adding the paths save and exit the .bashrc file. The changes will be visible after you log-out and log-in again into the system, or you can enter the following command:
$ source ~/.bashrc
Creating new AVD (Android Virtual Device) for running our app:
  1. View all packages
$ sdkmanager --list
2. Update installed packages
$ sdkmanager --update
3. Install build tools, required to build Cordova app
$ sdkmanager "build-tools;29.0.0"
4. Add any system image of your choice from the list of available packages
$ sdkmanager "system-images;android-28;google_apis_playstore;x86_64"
5. Create Android emulator
$ avdmanager create avd -n test -k "system-images;android-28;google_apis_playstore;x86_64" -g "google_apis_playstore"
6. List the created emulator
$ avdmanager list avd


After all the setup is done we are finally ready to start converting our Angular application to Cordova application. If you don’t have an existing Angular application go and create one (You can refer this: https://angular.io/docs)
  1. Navigate to your Angular project. For example purpose, I will be using a newly created Angular project.

Example Angular Project

2. Create a new Cordova project using
$ cordova create test com.example.test NewTest
3. Adding platform to the Cordova project. You can add a platform for IOS, Blackberry similarly.
$ cd test
$ cordova platform add android
4. Now we need to merge the Cordova project into the Angular project, so copy all the folders and files except for “package.json” and “package-lock.json” from the Cordova project to the Angular project.
5. Then you also need to merge the package.json of both the projects, and the final package.json in the Angular project should look something like this.

Angular Project: package.json
Angular Project: package.json

6. Then open “src/index.html” file and change the <base href=”/”> to <base href=”./”>
7. Then open “angular.json” file and change the “outputPath” to “www”. So whenever you will build the Angular application the output will be generated in “www” folder. It is necessary as Cordova will generate its output by using the files which are inside “www” folder.
8. Then open “tsconfig.json” file and change the “target” to “es5”. Then your app can work in newer versions of Android too.
9. Finally, you can build your Angular project and then convert the output to a mobile app using Cordova.
$ ng build --prod --aot
$ cordova emulate android
10. When you enter the above command an emulator will pop up, with the app installed on it which you can test.

Sample Output

Congratulations, you have successfully created your first Cordova application. Now that you have followed along with this long tutorial, I have written a bonus section that will help you debug some of the common problems and customize your app with Cordova Plugins. If you have any doubt you can ask it in the comments section.


Adding Plugins to your Cordova App
  1. With Cordova Plugins you can access native functionality of mobile devices, such as mobile camera, geolocation, etc. You can checkout various available plugins on the Cordova docs here.
<script type="text/javascript" src="cordova.js"></script>
3. Eg. If you want to add device-plugin, then you will first install it like
$ cordova plugin add cordova-plugin-device
4. Then you declare it and use the plugin as mentioned in the docs
declare var device;
...
ngOnInit() {
    document.addEventListener(“deviceready”, function() {
        alert(device.platform);
    }, false);
}
Debugging the Cordova App through Chrome DevTools
If you get stuck somewhere, and you have no idea why the app is not working on the emulator. You can open chrome and type int the URL bar “chrome://inspect” which will open a page, then in the “Devices” section you can see your emulator listed. You can click “inspect” and debug it normally as you do with web apps.

Chrome DevTools

Mobile App is not able to connect to a local server
If you have a local server running on your machine on “localhost”, and you try to connect to it from your app then you will not be able to connect. As when you will hit “localhost” from your app it will try to connect to its own “localhost” and it will not find any server running there. So to resolve this issue you need to run the server on your private IP address, which you can find by typing “ifconfig” in your terminal (“ipconfig” for windows). Then when you will hit the private IP address from your app, it will be able to connect to the server.
Mobile App is not able to connect to a remote server
If you are trying to connect to a remote server that is hosted somewhere, and your app is giving “ERR_CLEARTEXT_NOT_PERMITTED” error then put the following in your “config.xml” file.
  1. Inside the widget tag, add this
xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0"
2. Inside the platform tag (Of Android)
<platform name="android">
  <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
    <application android:usesCleartextTraffic="true" />
  </edit-config>
</platform>
Getting an error due to the Min SDK version
Add this in your “config.xml” file, and change the value to whatever the required minimum value is.
<preference name="android-minSdkVersion" value="19" />

Comments

Post a Comment

Popular posts from this blog

How to download a file using command prompt (cmd) Windows?

-
Image
If you’re like most Internet users, you download various types of files now and then. You either download these files with your web browser or some download manager software. Have you ever considered downloading files using the command prompt i.e. CMD? If not, we recommend you to try it. It’s quite interesting apart from being very useful as well. In this article, we’ll show you how to download a file using command prompt aka CMD. How to download a file using command prompt?   There are several useful commands for the Command Prompt and one of them is  bitsadmin . Though bitsadmin has several uses, here we shall limit this article to its role in downloading files only. If you want to read the details about bitsadmin syntax, continue reading this section. Otherwise, you can scroll down to the next section –  Downloading a file .   The syntax of bitsadmin is : BITSADMIN [/RAWRETURN] [/WRAP | /NOWRAP] command   As you know, the parts of the syntax inside the square bra
Read more

The future of Artificial Intelligence: 6 ways it will impact everyday life

-
Image
Technology moves at breakneck speed, and we now have more power in our pockets than we had in our homes in the 1990s. Artificial intelligence (AI) has been a fascinating concept of science fiction for decades, but many researchers think we’re finally getting close to making AI a reality.  NPR notes that in the last few years, scientists have made breakthroughs in “machine learning,” using neural networks, which mimic the processes of real neurons. This is a type of “deep learning” that allows machines to process information for themselves on a very sophisticated level, allowing them to perform complex functions like facial recognition. Big data is speeding up the AI development process, and we may be seeing more integration of AI technology in our everyday lives relatively soon. While much of this technology is still fairly rudimentary at the moment, we can expect sophisticated AI to one day significantly impact our everyday lives. Here are 6 ways AI might affect us in the futu
Read more

How to Include ThreeJs in Your Projects

-
Image
HOW TO INCLUDE three.js IN YOUR PROJECTS There are quite a few different ways to include three.js in your JavaScript application, some of them simple, some of them a little more complex, however, they all boil down to one simple idea: you need to include one (and  only one) of these three files in your project: three.js three.min.js three.module.js You can view them all  on the three.js GitHub repo , which we’ll explore in the next chapter. Each of these files a version of the three.js core, meaning that once you’ve included one of them in your application, you are all ready to get started in creating beautiful 3D scenes. There are two main ways to include these files in your project: include them in a  script tag  in your HTML import them directly into your JavaScript files. We’ll explore how to do in Section Two What’s the Difference Between these Files? The  three.js  file is intended to be included in a  <script>  tag in your  index.html  file, like s
Read more