- Mobile Angular UI - Discussion
- Mobile Angular UI - Useful Resources
- Mobile Angular UI - Quick Guide
- Mobile Angular UI - Examples
- Mobile Angular UI - APP Development
- Mobile Angular UI - Creating APK File
- Mobile Angular UI - PhoneGap & Cordova
- Mobile Angular UI - Touch Events
- Mobile Angular UI - Core Details
- Mobile Angular UI - Sections
- Mobile Angular UI - Toggle Switch
- Mobile Angular UI - Swipe Gestures
- Mobile Angular UI - Forms
- Mobile Angular UI - Scrollable Areas
- Mobile Angular UI - Drag and Drop
- Mobile Angular UI - Tabs
- Mobile Angular UI - Accordions
- Mobile Angular UI - Dropdowns
- Mobile Angular UI - Components
- Mobile Angular UI - Layouts
- Mobile Angular UI - My First App
- Mobile Angular UI - Project Setup
- Mobile Angular UI - Installation
- Mobile Angular UI - Overview
- Mobile Angular UI - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Mobile Angular UI - Creating APK File
In this chapter, we will create an apk file of the Mobile Angular UI app. We are going to make use of app setup done using cordova and phonegap in the previous chapter. So please check the previous chapter about App Setup using PhoneGap and Cordova where we have already installed cordova, phonegap and created Mobile Angular UI app in cordova.
Let us now create a APK file for the app created. For that we need to install the following −
Java Development Kit (jdk 1.8)
Gradle
Android SDK Tools
Java Development Kit (jdk 1.8)
To create the app and build it, one important requirement is JDK 1.8. We need the version of jdk as 1.8 as that is a stable one so far with cordova build.
Go to the following pnk to
![JDK](/mobile_angular_ui/images/jdk.jpg)
Install the Jdk as per your operating system. Once the installation is done, it is necessary to update the environment path JAVA_HOME. In case you face difficulty in installation of Jdk refer this Java installation tutorial.
For windows users to update Envionment Path, right cpck on My computer → properties→ Advanced System Settings
It will display screen as shown below −
![JDK Screen](/mobile_angular_ui/images/jdk_screen.jpg)
Cpck on Environment Variables. It will display screen as shown below −
![Environment Variables](/mobile_angular_ui/images/environment_variables.jpg)
Cpck on New button, it will display a screen as shown below −
![Environment Button](/mobile_angular_ui/images/environment_button.jpg)
The variable name will be JAVA_HOME and the Variable value will be the path where jdk 1.8 is located.
Once done close your command prompt and open it again. Now type java –version, it should display the version of java you have installed as shown below −
![java version](/mobile_angular_ui/images/java_version.jpg)
We are done with instalpng JAVA.
Gradle
Now install gradle, which is one of important requirements to build the app.
Go to
page and install latest version of gradle as per your operating system.Download and install it on your system. Once installed you need to update the path of Gradle in environment variables. In case you face any difficulty in installation refer this .For windows users to update environment variable, add the location of gradle to in Path variable as shown below −
![environment variable](/mobile_angular_ui/images/environment_variable.jpg)
Once done, close the command prompt if open. Now open the command prompt and check for the version of gradle installed.
![command prompt](/mobile_angular_ui/images/command_prompt.jpg)
We have installed Gradle version 6.2.2 for this tutorial.
Android SDK Tools
Now install
on your system. Along with Android studio, the Android sdk package will also get installed. We are more interested in the Android SDK package. The SDK package will have tools and build-tools, we need to add the same to Environment Variables for cordova to access during build. Incase you face any difficulty refer this tutorial for .For windows users locate the path of android sdk and add the Variable ANDROID _SDK_ROOT to environment variable as shown below −
![SDK ROOT](/mobile_angular_ui/images/sdk_root.jpg)
Now add the tools and build-tools path for example −
C:UsersAppDataLocalAndroidSdkuild-tools;C:UsersAppDataLocalAndroidSdk oolsin;
To the path variable at the end as shown below −
![path variable](/mobile_angular_ui/images/path_variable.jpg)
Once done close the command prompt and open it again.
Execute the command: sdkmanager "platform-tools" "platforms;android-28" in your the command prompt. It will install the android-28 target api that we need. For more details on sdkmanager refer the below pnk −
We have already created a project setup using cordova and phonegap in the previous chapter. This is how the app looks in the browser −
![path Setup](/mobile_angular_ui/images/path_setup.jpg)
Let us now check if cordova has all the details to build the app. To do that we can use the following command − cordova requirements.
![cordova requirements](/mobile_angular_ui/images/cordova_requirements.jpg)
Build the App
To build the app using cordova the command is as follows −
cordova build
The above command will build the app for all the platforms you have added.
The run the build platform wise you can make use of following command −
cordova build ios cordova build android
We have added for only one platform i.e android, hence can use the cordova build command directly.
![build command](/mobile_angular_ui/images/build_command.jpg)
If the build is successful, you should get the following output −
![build Output](/mobile_angular_ui/images/build_output.jpg)
It displays the location of the app apk file. Now we have the apk, but we cannot pubpsh the same, as it is an app-debug.apk. We need a release apk that can be pubpshed in Google Play Store.
App Release
To create app-release, we need to create a keystore. A keystore is a file that has private keys and certificates.
To create a keystore file will make use of JAVA keytool. A JAVA keytool is a tool that helps to create a certificate.
Following is the command to create a keystore −
keytool -genkey -v -keystore testapp-key.keystore -apas testapp-key -keyalg RSA -keysize 2048 -vapdity 10000
The name of the keystore we have used is as follows −
testapp-key.keystore
The apas is testapp-key same as the name.
Execute the command in the command pne from the project root folder.
![project root](/mobile_angular_ui/images/project_root.jpg)
When the command executes, it will ask you some questions, pke password, first and last name, organization unit, city, state, etc. You can enter the information and once done the keystore will be created and the keystore file will be stored inside the project root folder.
Once the keystore is done, create a build.json inside myfirstapp estappplatformsandroiduild.json.
The details are as shown below −
{ "android":{ "release":{ "keystore":"testapp-key.keystore", "storePassword":"testapp123", "apas":"testapp-key", "password":"testapp123", "keystoreType":"" } } }
You will have to enter the keystore details, as well the password you entered while generating the keystore.
Once the keystore and build.json are done, we are now ready to build the apk for release.
Following is the command to build it −
cordova build android --release
![build_json](/mobile_angular_ui/images/build_json.jpg)
Once the build is successful, you will get the release apk as shown below −
![release apk](/mobile_angular_ui/images/release_apk.jpg)
Now you can use this apk in your Google Play Store to pubpsh it and get your app pve.
Google Play Store
Once you have app-release.apk ready, you need to upload in to Google Play Store. To upload you need to sign-in in Google Play Store. The first time user has to pay $25 as the developer start price. Once that is done you can proceed and upload your apk file. You can follow the steps
to upload your APK file. Advertisements