Step by step creating mobile application with Cordova

Linux, Ubuntu, Mobile Application, 2015-06-16 23:33:47 UTC

Creating a mobile application can be fun just with html and javascript. Moreover, using Cordova is very simple.

Here I guide you to create mobile application using Cordova. In this step by step guide, I use Ubuntu and Eclipse.


Just follow these steps;

1. Installing nodejs

$ sudo apt-get update
$ sudo apt-get install nodejs



2. Installing npm

$ sudo apt-get install npm



3. Installing Cordova

$ sudo npm install -g cordova



4. Create an application

$ cordova create FirstApp com.example.first_app FirstApp


Syntax structure is;
cordova create [your_folder] [your_java_package] [app_name] 


5. Move to FirstApp folder and add a platform

$ cordova platform add android



6. Open Eclipse; New -> Other


7. Choose Android from Existing Code


8. Choosing FirstApp folder



9. Import Projects

 

 



10. Run your application to see the result; right click on FirstApp and Runs as Android Application
Note: you must have an Android SDK on your Ubuntu



11. Edit your Application
You can customize your application usin HTML and Javascript. All you need is go to assets/www/ folder and you can start writing HTML and Javascript in it folder.

If you don't find index.html in your assets folder, you need to do is go to Project -> Properties -> Resource -> Resource Filters and delete exlucion filter



12. Open assets/www/index.html, clear everything inside body tag, and add some text in body tag like code below;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
        <script type="text/javascript" src="cordova.js"></script>
    </head>
    <body>
        <h1>First Application</h1>
        <div>
         Hello Android!
        </div>
    </body>
</html>



13. Run your Android application







14. Finish :)


Share: