Building a Native Mobile App with jQuery Mobile 1.5 and Cordova

Written by on June 24, 2019

Building a Native Mobile App with jQuery Mobile 1.5 and Cordova

Welcome. It’s my pleasure to show you how to make your first mobile application using jQuery Mobile and Cordova.

Before we start let me give you a small warning. jQuery Mobile is a dead framework or at best a living-dead framework (even George Romero can make it live again). If you want to go with something more up-to-date please consider Ionic Framework.

If you are here to stay then let me give you a walk-through building a native mobile application using jQuery Mobile and Cordova. I have stopped using jQuery Mobile almost 4 years ago, however, as this article is still read several hundred times a day I will update it to showcase the current jQuery Mobile 1.5 version.

As always, we are going to create a small and yet usable jQuery Mobile based Android application from the perspective of Windows OS. If you have any questions feel free to ask them in the comments below.

Update: 24th June, 2019 - Updated with the latest up-to-date information.

Table of Contents

Preparations

First thing first, let’s install and configure the required work environment. We will start with everything needed for Android application deployment (nodeJS, Java, and Android Studio).

Thus we need to follow these few steps:

  • 1. NodeJS
  • 2. jQuery, jQuery Mobile, && Cordova
  • 3. Oracle or Open JDK
  • 4. Android Studio & SDK
  • 5. jQuery Mobile application demo

1. NodeJS

Download Link

To make it simple we will install jQuery Mobile and Cordova using npm tool that comes with NodeJS. First, find out what kind of Windows OS are you running (32-bit or 64-bit architecture) and depending on it download an appropriate NodeJS installation. If you are unsure just go with 64-bit installation.

During the installation process, make sure to remember the installation folder as we will need to modify it in the next step (optional step but will be worth your time in the long run). One more thing, during installation, let NodeJS add itself to the PATH (this option should be selected by default).

By default, NodeJS will be installed in this folder if you have selected 64-bit version (Program Files x86 folder for the 32-bit version):

c:\Program Files\nodejs\

Let’s check if the installation was successful. Start the command prompt and test this:

npm -v

We are good to go if you see a version number. If not, then include NodeJS bin folder into PATH, restart command prompt and try again.

2. jQuery Mobile && Cordova

Now comes the previously mentioned optional step. By default, the npm installation folder is strangely located here:

C:\Users{username}\AppData\Roaming\npm

This is crazy on so many levels, for example, AppData folder is hidden by default. To fix it we can define a new folder location.

To do so, go to this folder: C:\Users\{username}\ and create a new file called: .npmrc. This needs to be done with administrator privileges.

Open the newly created file and add this line:

prefix = "C:/{your location}"

Remember you should use a forward slash / instead of a backslash\. In my case it is going to be : prefix=C:/Development/NPM/modules

Now reopen command prompt. End of the optional part.

Using the newly configured npm tool let’s install Cordova and jQuery Mobile. By installing jQuery Mobile we are also deploying jQuery so do not worry :

npm install -g cordova jquery-mobile

This will take some time, so relax a bit. If by any chance you get an error, retry this process once or twice (npm sometimes can’t find required packages).

Finally, we need to include Cordova bin directory into PATH. This will allow us to deploy and run Cordova applications. Open previously configured node.js module directory (in my case, it is: C:\Development\NPM\modules) and dig a little bit 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\

Include it into 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. Oracle or Open JDK

Here comes the fun part. Depending on your needs you will need to choose between Oracle or any available Open JDK.

Technically, if you are working on a commercial product you should not be using Oracle JDK for free. So my advice is to go with Adopt Open JDK.

However, as we are just starting with jQuery Mobile apps let’s go with Oracle JDK as it is the easiest one to install. You can always later switch to Open JDK if needed.

Download the latest Java JDK 12 (not Java JRE 12) from the official Oracle Java site (you will also need to create an official Oracle account). Again make sure you’re using a correct 32bit or 64 bit version (this tutorial will show you how to find this information). Download link:

Download Link

Again, just remember the installation folder as we will need to include it into the environment PATH (it should look like this: C:\Program Files\Java\jdk1.12.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:

Continue Reading

Categories

36 thoughts on “Building a Native Mobile App with jQuery Mobile 1.5 and Cordova”

  1. 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.

      • 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.

  2. 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

  3. 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.

  4. 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?

      • 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!

    • 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.

  5. 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).

  6. 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.

  7. 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.

      • 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.

  8. 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 ?

  9. 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?

  10. Dragan!
    Thank you for very informative articles about exciting framework for mobile apps. It’s great to have a place like this one. Keep this place alive.

  11. Thank you Dragan, everything worked very nicely except for two things : 1) Java 9 was causing problems, so I had to downgrade to Java 8, and 2) running the emulator from the CLI never worked, so I ran it from Android Studio instead. Merci beaucoup!

Leave a Reply