Press "Enter" to skip to content

Basic Cordova application setup

codingfix 0

Wellcome to this intrductory tutorial about the basic Cordova application setup.

You won’t find in this tutorial nothing really interesting. I just wrote it because here I describe the indispensable first steps to setup a new Cordova project in order to follow the various tutrials you can follow in my blog. Instead to repeat the same things starting each new tutorial, I thought it was better to put everything in a single quick article and link it at the start of my articles for those who need it without boring more frequent readers with things they already know.

Obviously, I won’t to explain here how to install Cordova itself: for that you can just read the official documentation.

Starting a new Cordova application

So let’s start creating a small Cordova app to test our Dropbox connection. Open you command line interface (it will be the command prompt in Windows and the terminal window in Linux), navigate to the directory where you keep your Cordova apps and type:

And then we enter new project directory and add Android platform:

We have right now created a new Cordova project. Now we’re going to see how to edit some files to get them ready to start a real application using Bootstrap and jQuery.

Preparing application core files

tm_en_970x90

As you already know, the core files of our application resides in the baseApp/www directory and in its sub-directories baseApp/www/css and baseApp/www/js.

The Css file

In the directory baseApp/www/css we find the file index.css, which should look like the following one:

In this case, our editing task will be very quick and easy: just drop everything and write down this simple rule:

That’s all: save the file and we’re ready to go on.

The js file

In the directory baseApp/www/js the file index.js looks like this:

We can drop any comment and lines 35-40 of the snippet in order to get:

As you can see I’ve also added the main jQuery function, where we’ll put all our event handlers.

The views’ container: index.html

The file www/index.html is the html file which will hold all our views, that is the various application pages, to use a term more familiar to web developers. This page are anything else other than html divs. Currently, the index.html file looks like this:

The first thing we’re going to change is the Content-Security-Policy tag: replace it with the following one:

For sure we ight want to change the title, but for the moment we can leave it as it is.

Drop out the entire div with class “app” because we don’t need it and obviously you can drop any superflous comment in the file.

Finally we have to add links to Bootstrap and jQuery. We could use CDN but we’re likely to want our application work even offline, so it is better to download both Bootstrap and jQuery and proceed to put required files in the correct directories and link them in the html file:

That’s all. From here we can start to build any Cordova mobile application adding code, plugins and scripts as we need them.

Happy coding 😉

 

    Leave a Reply

    Your email address will not be published. Required fields are marked *