Cordova: First Android Application
Now we are ready to create our own first android app using Apache Cordova.
- Open
cmd.
- Go to the location where you want to create your first application. Suppose you want to create your first app on desktop. So type the following code in command prompt:
cd desktop, if you are here "C:user\system_name\". The command cd desktop will take you to desktop location.
Type cordova create [project_name] [package_name] [apk_name] and press enter.
project_name → This will be your project name, like myFirstApp. After executing 3rd step, a folder will be created with the specified name on the desktop. You may check there.
package_name → Every App has a unique application ID which is known as package name, like com.stuytonight.app, com.myfirstapp.android, anything.anything.anyotherthing etc.
apk_name → It is the name of the apk.
![First Android Application]()
- Type
cd [project_name] and press enter, to get inside the project directory.
Now we will specify the name of the platform for which we want to create our mobile application, for example we can inform cordova, that we want to create android application by using the command, cordova platform add android. It will add android platform. You can see it in platforms folder, inside the project folder.
![First Android Application]()
Type cordova build android. This command will generate the apk.
For first time, Step 5 or Step 6 will take time, because the gradle file will be downloaded.
Your apk's location will be: project_name/platforms/android/build/output/apk.
![First Android Application]()
You can run this apk on emulator or copy it to your android phone and install it there. After launching the app, you will see the default apache HTML coded screen.
![First Android Application]()
Cordova: Modifying our App
Now we will add our own files to the app folder after the Step 4.
Our HTML file: index.html
<html>
<head>
<script type="text/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="name.css">
</head>
<body onload="ask()">
<div id='question'>Tell us your experience on Studytonight</div>
<div id='answer'></div>
</body>
</html>
Our CSS file: style.css
#question {
margin-top:100px;
text-align:center;
color:red;
border: blue solid 2px;
}
#question:hover {
color:geen;
}
#answer {
margin-top:30px;
text-align:center;
color:yellow;
border: red solid 2px;
}
Our Javascript file: index.js
function ask(){
// This function will be called when page will be loaded.
var k = prompt("Tell us your experience on Studytonight");
if(k.length > 0) {
// Before inserting string into the div, it clear it first.
document.getElementById('answer').innerHTML = "";
// Now it will inject string into the div.
document.getElementById('answer').innerHTML = k;
}
else {
// If length of string is 0, then it will again ask you the same question.
ask();
}
}
Now open project_name folder, go to www folder, delete all the pre-existing files and place all the three file (index.html, index.js and style.css). Then follow the steps 5 & 6 again.
What is config.xml file for?
When you open project_name folder, then you will see a config.xml file. So let's explore what this file is for? Open this config.xml file in notepad, notepad++, Atom or Sublime, any good editor.
![First Android Application]()
config.xml is the global configuration file for our project. Every project will have this file. It specifies the platform, plugins used, first page to open, permissions etc.
- It specify for which platform, developer wants to create the app.
- Required plugin.
- In config.xml, the
content tag is used to specify the first page to open,
<content src="index.html" />
Whenever the app is opened, it gets redirected to this page index.html. You can edit it and you can change it to anything like firstpage.html, just by modifying the configuration in the config.xml file.
For more information, follow the link: https://cordova.apache.org/docs/en/latest/config_ref/
