The main purpose of this article is to walk you through building a native mobile application using jQuery Mobile and Cordova. I have personally stopped using jQuery Mobile 3 years ago, however as this article is still read several hundred times per day I will update it to the current jQuery Mobile 1.5 version. For this specific article, we are going to create a simple mobile hybrid Android application from the perspective of Windows OS. I will cover, step by step, everything you need to know and do to create a working jQuery Mobile project. I will try to give you as much information I can, notably how to solve errors you will find along the way. Everything written here has been tested and tried in advance.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
 

Preparations

 
Before we can start you will need to have a configured working environment, thus make sure you have everything installed/configured to handle Android development (nodeJS, Java, and Android Studio):
 
  • 1. Install nodeJS
  • 2. Install jQuery, jQuery Mobile, && Cordova
  • 3. Install Java JDK
  • 4. Install Android Studio & SDK
  • 5. Create, Test, and Delete a demo jQuery Mobile application
 

1. Install nodeJS

 
To make our lives easier we will use NodeJS to install jQuery Mobile and Cordova. Depending on your Windows platform (32 bit or 64 bit) select Windows Installer (.msi) and download it. During the installation, you will need to remember the installation location. In our case, it’s:
 
c:\Program Files\nodejs\
 
Download Link
 
Before we go any further let’s check if npm tool is available. Open command prompt and execute this:
 
npm -v
 
If you get a version response you are good to go.
 

2. Install jQuery Mobile && Cordova

 
This first section is optional. Before we install jQuery Mobile and Cordova using npm you should consider changing the default installation folder. The default folder is strangely placed here: C:\Users{username}\AppData\Roaming\npm.
 
Quick warning, AppData is a hidden folder.
 
You can change this folder manually; go to this folder: C:\Users\{username}\ and create an empty file called: .npmrc (make sure you have administration privilegies over that folder). Open it and add this line (don’t forget to save):
 
prefix = "C:/{your location}"
 
Remember you should use / instead of a \. I will use: prefix=C:/Development/NPM/modules
 
Close currently open command prompt and open it again.
 
This is the end of the optional part.
 
Install Cordova and jQuery Mobile (this will also install jQuery so don’t worry):
 
npm install -g cordova jquery-mobile
 
This will initiate an installation process, give it some time to finish (if you receive an error retry it a few more times, npm sometimes can’t find needed packages).
 
Before we proceed any further we need to add Cordova bin directory to our environment PATH. Go to your node.js module directory ( the one we previously created, in my case, it is: C:\Development\NPM\modules). Go even deeper until you reach this directory:
 
C:\Development\NPM\modules\node_modules\cordova\bin\
 
or in your case:
 
C:\{your location}\node_modules\cordova\bin\
 
Copy that location and add it to your environment PATH.
 
Do the same thing for {your location} directory, go to your npm module directory (one we previously created, in my case it is: C:\Development\NPM\modules):
 
C:\Development\NPM\modules
 
or in your case:
 
C:\{your location}\
 
Copy that location and add it to your environment PATH like also.
 

3. Install Java JDK

 
Go to the official Oracle Java site and download latest Java JDK version, be careful not to download Java JRE instead. You will also need to create an official Oracle account. Be careful to install a correct 32bit or 64 bit version (this tutorial will show you how to find this information). Download link:
 
Install it where ever you want, just remember its location. For example, it should look like this: C:\Program Files\Java\jdk1.8.0_25\
 
Create a new environment variable (into System variables) called JAVA_HOME and add a location to your JAVA installation folder. Then add it to the environment PATH, looking like this: C:\Program Files\Java\jdk1.8.0_25\bin:
 

4. Install Android Studio & SDK

 
Go to the official Android Studio site, download it and install it:
 
Android Studio
 
Open Android Studio with admin privileges (this part will fail if you don’t have installed JAVA SDK). The initial start will take some time.
 
After you reach the Welcome screen, click on the Configure (cog icon) at the bottom right side and select SDK manager. Check if there’s at least one Android version selected. If not, pick the latest one you can install on your current smartphone and install it.
 
This will take a lot of time, so make yourself a coffee while you wait.
 
jQuery Mobile Tutorial 1006
 
When everything is done, your Android SDK should be installed somewhere like this:
 
C:\Users\Gajotres\AppData\Local\Android\sdk
 
in your case, it will be:
 
C:\Users\{USER}\AppData\Local\Android\sdk
 
Create new environment variable called ANDROID_HOME and add previously mentioned link. Now add two additional environment PATH locations %ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;.
 
Let us test if everything is set up correctly. Close the current and open a new command line window, and execute this:
 
adb
 
Continue Reading

  • HI Dragan, thank you for your tutorial.
    I’m trying to reproduce it on Windows 7 x64 using cordova 4.1.2 and an android emulator.
    I followed all steps and things seem to work till I try to emulate the app on android.
    When I run “cordova emulate android” I briefly see a terminal window appearing&disappearing while the console shows the text:

    BUILD SUCCESSFUL
    Total time: 3 seconds
    Built the following apk(s):
    c:\Claudio\Web\Dev\cordova\geneva\wellness\platforms\android\ant-build\CordovaApp-debug.apk
    WARNING : no emulator specified, defaulting to testavd
    Waiting for emulator…

    any idea of what I could be doing wrong?
    thanks
    Claudio

    • Hi Claudio, try these few things:

      1. Go to the command prompt, type android, this should open Android SDK Manager. Chech that you have SDK for Android 4.4W.2 (API 20), emulator won’t work without it.+
      2. Delete your current emulator and create new one or select some preselected device.
      3. Manually start emulator, like this: emulator.exe -avd *avdname* where avdname is your emulator name.
      4. Still Nothing? Post me output of step 3.

      • Thanks Dragan!
        This worked.
        cheers,
        Claudio

      • Stephen Wanhella

        Also >cordova emulate android –target=your_avd_name

  • Duco

    Thanks for your tutorial, it’s very nice!

  • joey

    Hi Dragan,
    thanks you for your nice and helpful tutorial.
    How do I create an apk?
    Thanks in advance.

    • APK file is automatically created in this directory structure:

      myDemoApp\platforms\android\ant-build\

      myMobileApp is created project folder

      • joey

        Hi Dragan,
        thank you for your reply.
        Unfortunately I can’t find the apk, here is my file:
        classes
        dexedLibs
        res
        AndroidManifest.cordova.xml
        AndroidManifest.xml.d
        build.prop
        classes.dex
        classes.dex.d
        CordovaApp.ap_
        CordovaApp.ap_.d
        CordovaApp-debug.apk
        CordovaApp-debug-unaligned.apk
        CordovaApp-debug-unaligned.apk.d
        proguard.txt
        R.txt

        Would you do me a favor and help me with this problem?
        Thanks in advance.

        • File is in front of you: CordovaApp-debug.apk

          Of course, this is not a production (release) apk file. If you want to create a release version look at this tutorial.

          • joey

            Hi Dragan,
            it works fine! Thank you very much.

  • farhan khan

    i have made an list view application . in which i have given http address of various faculty in our college website
    when i execute it on my phone the appearance is same as that in web browser . but when i send the apk file to other phones the appearances changes to basic web page display.
    android application was made with ur reference blogs. can u please help me in making the app consistent to run same in every smartphone

    • Are you pulling jQuery Mobile files from your mobile phone or from remote server?

  • Ike

    I see you have something for windows and MacOS but nothing for Ubuntu

  • Ben

    I greatly appreciate your work. I successfully implemented your tutorial on my old jQuery mobile app files that I designed two years ago, but I couldn’t import it correctly to Android Studio to do some extra work (drawable…) and deploy. I keep getting an error message that “The project ‘myapp’ is not a Gradle-based project.

    Thanks in advance for your help.

    • If I understood it correctly you’re importing an old jQM project into Android studio.

      If you’re importing an existing old project with no gradle configuration, Android Studio will use the old build system and this may cause your problem.

      Follow this tutorial if you want to import old project: http://developer.android.com/sdk/installing/migrate.html

  • Charlie

    Thanks for the tutorial — it really helped me to get clarity on a couple of important aspects of Cordova development.

    I’m having a problem with with the app, though, and I hope you can help me with it. The code works great in my browser and my emulator. But when I try to launch it on my Android phone I’m only getting a white screen with the following text:

    Movie List
    Copyright 2015
    Back
    Movie Info

    That’s it. Any advice?

    • Maybe your code can’t access remote jQuery/jQuery Mobile files. Download them and run them directly from your app.

      • Thanks for the response. You’re right — network problems. Once I connected the device to wifi, everything worked.

        Thanks again for the tutorial — very educational!

  • Sansu

    I cann’t get the images showing. Any idea hot to or where to troubleshoot? Tks

    • The problem is in image provider who constantly changes image locations. Go to moviedb web site, find any movie and look at a current image location. Replace the current one with newer one.

  • Thanks, though I will wait until jQuery Mobile 1.5. While old events are indeed deprecated there’s a good chance they’ll remain in the next version (according to some unofficial news).

  • Amit Sinha

    Hi
    Thankyou very much for much adorable post.

    Please let me know one thing. How can i run directly to my smart phone. as i running command “cordova run android”. its throwing error, target not defined and it open in emulator.

    • It depends on your smartphone, every type has s different approach. For exameple for Samsung smartphones you need to download either Keys software or Samsung Android USB drives.

  • Amit Sinha

    Showing connection to the server was unsuccessfull error.

    Please help, where i did wrong.

  • Amit Sinha

    Hi

    Now i’m able to run apk on my smart phone, but getting ajax navigation issue, Here i paste the whole message which i’m getting at the bottom of screen.

    Note: Navigation may not work if viewed locally

    The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.

    • My advice, don’t use jQuery Mobile. It slow, old, buggy, and good as dead. Think about switching to OnsenUI (version 2.0) or Ionic Framework.

      • Amit Sinha

        Thanks.
        could you please share any tutorial link from where i can learn to develop good apps.
        Actually i need to develop a location finder using google map.

  • Maria Cristovao

    Thank you very much. An excellent tutorial.

  • Mayur Tolani

    Mayurs-MacBook-Pro:myMobileApp mayurtolani$ cordova emulate android
    ANDROID_HOME=/usr/local/Cellar/android-sdk/24.4.1_1
    JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home

    BUILD SUCCESSFUL

    Total time: 1.368 secs
    Built the following apk(s):
    /Users/mayurtolani/myMobileApp/platforms/android/build/outputs/apk/android-debug.apk
    ANDROID_HOME=/usr/local/Cellar/android-sdk/24.4.1_1
    JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home
    No emulator specified, defaulting to Nexus_5_API_24
    Waiting for emulator to start…
    PANIC: Cannot find AVD system path. Please define ANDROID_SDK_ROOT

    how to set ANDROID_SDK_ROOT ?

  • Tayyabah Batool

    I have followed all the steps and everything went well. But when I ran the last step in which emulator will show the app, this step isn’t showing anything in the emulator. Can you please guide me how to see this app in the emulator?

  • Remember that AppData is a hidden folder

    • Thank you very much Victor, I will update the article accordingly.