Cordova How To Create A Project With jQuery

Do you like this?

Summary:
This quick note shows you the steps to successfully create a new Cordova project which uses jQuery


Content:

1) Firstly, you will need to install apache ant
You then have to set ANT_HOME variable and include %ANT_HOME%\bin in PATH variable
2) Next, let's install android.
Also, you need to set ANDROID_HOME variable and include %ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools in PATH variable
3) Download and install Nodejs 3) Run the following command to install cordova:

npm install -g cordova
4) To create a new Cordova project, run the following command:
cordova create Sample com.example.sample sample
5) Run the following commands to add Android feature for your project. You can add other platforms if you wish.
cd Sample 
cordova platform add android
6) To run the project, execute the following command:
cordova emulate android 
7) Cordova provides many plugins to ease your development. For example, let's add notifications plugin:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
8) By this time, you should have www folder in your project's folder. Download jQuery library and install into www/js folder. 9) edit the index.html page:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <script src="lib/respond.js"></script>
</head>

<body onload="init()">
<div class="container">
    
</div> <!-- end container -->

<!-- javascript -->
	<script src="cordova.js"></script>
	<script src="js/index.js"></script>
	<script src="lib/jquery-1.11.1.js"></script>
    <script src="lib/bootstrap.js"></script>
</body>
</html>

If you notice, you will see we have included cordova.js file. However, the file doesn't have to exist in your project's folder. Rather, it will be provided at compile time. 10) index.js:
function init(){
	document.addEventListener("deviceready", function(){
		$(document).ready(function() {
			app()
		});
	}, false);
}

function app(){
	navigator.notification.alert("hello world");
}
Make sure Cordova is fully loaded before you call its library. This is ensured by executing the application's code when the event deviceready is triggered.

 
comments powered by Disqus