Mobile Apps using HTML interface with jQueryMobile

image

This is the main tutorial for developing a mobile web app using the HTML  interface with jQueryMobile. The series contains tutorial on how to use HTML and jQueryMobile to construct the app’s interface, PHP+MySQL to run the back-end, AJAX, using phoneGap/Cordova to generate Android APK, and lastly to upload to Google Play Store.

These are the link of completed tutorials related to Mobile Web Apps Development

  1. Mobile Apps using HTML interface with JQUERYMOBILE (this page)
  2. Complete code sample of Mobile Web Apps with FRONT-END and BACK-END
  3. Using AJAX to populate data from mobile web interface
  4. Generating APK using BUILD.PHONEGAP.com
  5. Generating Android Project using CORDOVA
  6. Publishing to Google Play Store
  7. Mobile Web Apps development TRAINING
  8. The sample app published in Google Play Store

jQueryMobile is a JavaScript + CSS framework born from jQuery. The best place to learn jQueryMobile is by accessing the official website at http://demos.jquerymobile.com/

As the name framework, there suppose to have library of codes ready to use. In the jQueryMobile case, you need to download both the jQuery framework, and the jQueryMobile framework in order for this tutorial to proceed as we intent.

image

 

STEP 1: Preparing the project folder with the jquery & jquerymobile library.

We’d like to recommend the following folder and sub-folders for your HTML app project. Prepare them first.

image

Open the jquerymobile zip files you just downloaded previously. Copy all the Cascading Style Sheet (*.css)files and the images to the css folder you created. You can do this by selecting the images folder and the css, clicking and dragging them to your css folder. *The images folder in the jquerymobile zip file contains the icons for your css interface.

image

imageThe css files copied to your css folder.

AJAX to populate data from mobile web interface

This tutorial is to demonstrate how a mobile web interface could use AJAX facility to populate data from online database. In this tutorial, we need to have the front-end (HTML interface) and the backend (PHP+MySQL). We are going to show the xampp to prepare the backend facilities (localhost).

THE FRONT-END (mobile web client)

In the front-end, AJAX is implemented to be able to call the backend page (PHP script). This is done via JavaScript.

Screenshot_2015-04-24-07-58-03

Though the interface looks plain, the code lies on the JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/themes/test-theme2.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

<!-- AJAX proces -->
<script>
$( document ).ready(function(){//check if the document/browser ready to run JavaScript
$('#btncari').click(function(){//the btncari as the trigger.
var namacarian=$('#txtcari').val();//capture the content of the textbox.
//write to the div named displayresult
$("#displayresult").html("Searching for "+namacarian).enhanceWithin();
//change your web-server here
//in this case, the file search.php is to handle the online database connection
var urlcarian="http://localhost/jpa_dir_backend/search.php";

//AJAX configuration
$.ajax({
url:urlcarian,//the URL
type:'post',//method used
async:'true',
crossDomain : 'true',
data:{txtcari:namacarian},//the data parameter to transfer
success:function(result){//if the connection success
//display the record in div displayresult
$("#displayresult").html(result).enhanceWithin();
},//success
error:function(request,error){//if the connection fail
alert("Network error!!!");//display error message
$("#displayresult").html("Network error!!!").enhanceWithin();
}//error
});//ajax
});//btncari click
});//end document ready

</script><!-- end AJAX proces -->

</head>
<body>
<div data-role="page" id="search-ajax">
<div data-role="header" data-position="fixed">
<h1>JPA app</h1>
</div>

<div role="main" class="ui-content">
<h1>Search using AJAX</h1>
<input id="txtcari" name="txtcari" type="text">
<button id="btncari" name="btncari" data-icon="search">
Search</button>

<div id="displayresult"> <!-- DIV to display the content from server page -->
Result will be displayed here...
</div>

</div>
<!-- footer -->
<div data-role="footer" data-position="fixed">
<h2>Copyright @2015 JPA</h2>
</div><!-- end footer -->
</div> <!-- end of page -->
</body>
</html>



THE BACK-END (SERVER)


These server pages will communicate to the database to display the search result.


Multiplatform Mobile Web Apps development–Intro

Introduction and concept of Multiplatform Mobile Web Apps development

Multiplatform Approach using HTML interface
- HTML + jQuery (JavaScript, CSS)
- Apache Cordova (HTML to Android Project)
- Eclipse ADT – to generate APK

 

Generating Android project using Cordova

This is my slide presentation for Android app development  hybrid approach for beginners -
Installation, Settings & Deployment in Windows 8 (Hybrid approach using HTML5, jQuery, Apache Cordova and Android SDK)
http://blog.kerul.net

Among the contents in the slides are;
Hybrid Approach – consists of
- HTML + jQuery (JavaScript, CSS)
- Apache Cordova (HTML to Android Project)
- Android Studio– to generate APK

What are tools needed to develop Android App Hybrid?
- HTML knowledge
- jQuery (JavaScript + CSS framework)
- PHP&MySQL (Online DB)
- NodeJS
- Apache Ant
- Apache Cordova
- Latest JDK
- Android Studio
- Android SDK

This is among my earlier attempt to generate signed APK from Android project by Cordova Platform.

image

Android Studio has been the official IDE for Android apps development. So now is compulsory to migrate to Android Studio should you were obsessed with Eclipse ADT previously.

Bookmark this post to comeback later. To be continued. This post is developing, thanks for your patient…

Publishing apps to Google Play

Register for a developer ID which only cost USD25 for life. Another consideration: you need to pay through Google Wallet, using a credit card.

https://play.google.com/apps/publish/

image

This tutorial assumes you already have a signed APK. Should you have not, you could follow the tutorial to developed an APK and sign it. Example is here http://blog.kerul.net/2015/03/buildphonegapcom-to-generate-signed-apk.html

Upload your signed-APK as below. Locate the APK

image

image

image

Though you have uploaded the signed APK, yet you still could not publish you app, why? These are the requirements you need to set;

  1. You need to add a high-res icon. (size 512px x 512px)
  2. You need to add a feature graphic. (size 1024px x 500px)
  3. You need to add at least 2 non-Android TV screenshots. (2 screenshot images. Min length for any side: 320px)
  4. You need to select a category.
  5. You need to select a content rating.
  6. You need to add a short description.
  7. You need to add a full description.
  8. You need to acknowledge that this application meets the Content Guidelines.
  9. You need to acknowledge that this application complies with US export laws.
  10. You need to target at least one country.
  11. You need to enter a privacy policy URL.
  12. You need to make your application free or set a price for it.

Popular Posts

WorldConferences.net