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

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

5. Create, Test, and Delete a demo jQuery Mobile application

Create and open the folder where you wish to store your project. Open new command prompt window in this folder, and execute this:

cordova create myMobileApp

This will create a new Cordova project, you can name it any way you want.

Now let’s create a working jQuery Mobile application. It will use external JSON source, it will be themoviedb database. And to make it more interesting, iScroll will be used for more native-like scrolling.

HTML – index.html
<!DOCTYPE html>
<html>
 
<head>
	<title>jQM Complex Demo</title>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
	<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css" />
	<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css" />
	<link rel="stylesheet" href="css/index.css">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
	<script src="js/index.js"></script>
</head>
 
<body>
	<div data-role="page" id="home">
		<div data-role="header">
			<h1>Movie List</h1>
		</div>
		<div role="main" class="ui-content">
			<div class="example-wrapper">
				<ul data-role="listview" id="movie-list"></ul>
			</div>
		</div>
		<div data-role="footer">
			<h1>Copyright 2017</h1>
		</div>
	</div>
	<div data-role="page" id="headline">
		<div data-role="header">
			<a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a> 
			<h1>Movie Info</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" id="movie-data" data-theme="a"></ul>
		</div>
	</div>
</body>

</html>    
Javascript – script.js
$(document).on('pagecreate', '#home', function(){      
    var url = 'http://api.themoviedb.org/3/',
        mode = 'search/movie?query=',
        movieName = '&query='+encodeURI('Batman'),        
        key = '&api_key=5fbddf6b517048e25bc3ac1bbeafb919';        
     
    $.ajax({
        url: url + mode + key + movieName ,
        dataType: "jsonp",
        async: true,
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});
 
$(document).on('pagebeforeshow', '#headline', function(){      
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {
            $('#movie-data').append('<li><img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2'+row.poster_path+'"></li>');
            $('#movie-data').append('<li>Title: '+row.original_title+'</li>');
            $('#movie-data').append('<li>Release date'+row.release_date+'</li>');
            $('#movie-data').append('<li>Popularity : '+row.popularity+'</li>');   
            $('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');             
            $('#movie-data').listview('refresh');            
        }
    });    
});
 
$(document).on('tap', '#movie-list li a', function(){  
    movieInfo.id = $(this).attr('data-id');
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#headline", { transition: "slide", changeHash: false } );
});
 
var movieInfo = {
    id : null,
    result : null
}
 
var ajax = {  
    parseJSONP:function(result){  
        movieInfo.result = result.results;
        $.each(result.results, function(i, row) {
            console.log(JSON.stringify(row));
            $('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2'+row.poster_path+'"/><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
        });
        $('#movie-list').listview('refresh');
    }
}   
CSS – style.css
.ui-content {
    padding: 0 !important;
}
  
.ui-listview {
    margin: 0 !important;
}
  
.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}

li img {
    height: 150px;
    float: left;
    margin-right: 20px;
}

Working Plunker example can be found here:

Demo

Embedded example:

jQuery Mobile example

Open your project folder (previously created myMobileApp directory, in case of this example it’s D:\JavaScript\Projects\myMobileApp). Now open www directory and delete everything you find in it. This will be our source folder. Save there these files: index.html, script.js and style.css (made them from the code found above, and save them together).

Directory/file structure should look like this:

hooks\
plugins\
scss\
www\
     --> index.html
js\
     --> index.js
css\
     --> index.css
config.xml

Let’s proceed, the next few lines will add a platform, build it, and run our demo Android project. Don’t forget to run next few lines in command prompt, best location would be current project directory (in case of this example it’s D:\JavaScript\Projects\myMobileApp):

cordova platform add android

If you are not already there, go into the project directory (we are still working in command prompt – CLI):

cordova build android

The last step will start the Android emulator.

cordova emulate android

Or if you connect your smartphone to your computer you can test it directly like this:

cordova run android

This is how our demo application looks like:

jQuery Mobile Tutorial 1016

If you receive this error:

WARNING: no emulator specified, defaulting to Nexus_5_API_21_x86
Waiting for emulator...
emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX kernel module is not installed!

That means that we need to install INTEL Hardware Accelerated Execution Manager, find it at this location: C:\Users\{USER}\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager\

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