Skip to main content

build.phonegap.com to generate signed APK

One of the development approach to create Android apps is using HTML5. By using this approach, the mobile app interface is designed using the HTML interface with the help of CSS and Javascript Framework called jqueryMobile. However, generating the APK file for this HTML web-based app is quite a hassle. Or should I say it’s difficult for novice apps developer. As the system’s environment variable need to be tweeked manually in order for the nodejs, npm client, JDK, Android SDK and several other tools to integrate to each other.

Thanks to build.phonegap.com , those tedious processes are no more.

STEP 1: Register for an ADOBE ID, at build.phonegap.com.

image

Choose the FREE plan this time. You could have one app to manage this time. As you have more projects, you may sign up for U$D9.99/month subscription fee. Or if you or your company already have Adobe Creative Cloud Membership, just use them.

image

Create an ADOBE ID if you don’t have one.

image

There you have your account and ready to upload a HTML project.

image

Click here to read the next four steps.

STEP 2: Preparing the HTML project.

I just would provide the finished product of our simple directory app (download here). If you’re familiar with HTML, and would like to modify the HTML project – please do so. After finishing the modification, archive the folder back to zip format.

The main code for index.html

<!DOCTYPE html>
<html>
<head><title>Kerul.net Company Directory</title>
<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" />
<script src="js/jquery-1.11.1.min.js"></script><script src="js/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="css/themes/kerul-net.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />

</head>
<body>
<!-- main page -->
<div data-role="page" id="home">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>This app provide info about the company.</p>
<img src="images/logo.jpg" width="200"
height="200">
</br>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#direktori" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of home -->

<!-- about apps -->
<div data-role="page" id="about">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>Welcome to kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Developer - kerul</p>
<a href="http://kerul.net" target="_blank"> go to kerul.net</a>
</br>
</div><!-- end content -->

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#direktori" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of home -->

<!-- direktori page -->
<div data-role="page" id="direktori">
<!-- header -->
<div data-role="header" data-position="fixed">
<h1>Welcome to kerul.net</h1>
</div>

<!-- content -->
<div role="main" class="ui-content">
<p>Company staff directory</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search staffs..." data-inset="true">
<li><a href="#s1" data-rel="popup">Khirulnizam</a></li>
<li><a href="#s2" data-rel="popup">Ashraf Chunawi</a></li>
<li><a href="#s3" data-rel="popup">Faiz Othman</a></li>
<li><a href="#s4" data-rel="popup">Athirah Ghani</a></li>
<li><a href="#s5" data-rel="popup">Najwa Humaira</a></li>
<li><a href="#s6" data-rel="popup">Osman Ahmad</a></li>
</ul>
</div><!-- end content -->

<!-- popup staff1 -->
<div id="s1" data-role="popup">
<ul data-role="listview" data-inset="true">
<li><a href="tel:+6012-9034614"
class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
>
Call</a></li>
<li><a href="mailto:khirulnizam@gmail.com"
class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all
ui-btn-inline"
>
Email</a></li>
</ul>
</div>
<!-- popup staff2 -->
<div id="s2" data-role="popup">
<ul data-role="listview" data-inset="true">
<li><a href="tel:+6012-0122655055"
class="ui-icon-phone ui-btn
ui-btn-icon-left ui-btn-corner-all ui-btn-inline"
>
Call</a></li>
<li><a href="mailto:mf4iz@gmail.com"
class="ui-icon-mail
ui-btn ui-btn-icon-left ui-btn-corner-all
ui-btn-inline"
>
Email</a></li>
</ul>
</div>

<!-- footer -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" >Home</a></li>
<li><a href="#direktori" >Dir</a></li>
<li><a href="#about" >About</a></li>
</ul>
</div><!-- end navbar -->
</div><!-- end footer -->
</div><!-- end of direktori -->
</body>
</html>


Config.xml is the configuration file for phoneGap HTML project. Here it contains several information such as develeoper ID, version code, version number, developer profile, icon file, splash file, and so on.


The code for config.xml


<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "net.kerul.dir"
versionCode = "1"
version = "1.0.0" >
<!-- versionCode is optional and Android only -->
<name>Kerul.net Direktori App</name>
<description>
Direktori apps for KERUL.net
</description>
<author href="http://kerul.net" email="khirulnizam@gmail.com">
Khirulnizam Abd Rahman
</author>
<gap:splash src="splash.png" />
<icon src="icon.png" />
</widget>


Download here for the complete HTML project with the jquerymobile library.


image


 image Interface sample





STEP 3: Uploading the HTML project.


image


Use the button “upload a .zip file” available in the https://build.phonegap.com/apps and locate the zip file downloaded in the step 3.


Wait for a while for the progress bar disappear, and you’ll see the following page.


image


Should your HTML project has no error, click the button “Ready to Build”.


image


Build.phonegap.com currently support iOS, Android and Windows Phone.Read means you have some errors on iOS platform. Android and WinPhone are blue, means the build was successful and you may continue to test the .APK and .XAP in your device or emulator. Click on the arrow to see details.


image


Use any bar-code scanner to download the APK file to your Android device (eg: Barcode Scanner by ZXing Team). To this step, your Android APK is testable in your device. However it is could not deployed yet in the Google Play store. You need to proceed to STEP 4 & 5 to deploy the APK to the Google Play store.





STEP 4: Creating keystore file for ANDROID app


Keystore is a file generated by Java keytool for the developer to claim the app is theirs. The keytool is a Key and Certificate Management tool available in the JDK bin folder. Install Oracle JDK to have this facility available in your PC. Download JDK here.


image


Install JDK, and by default the JDK installation folder will be in C://Program Files/Java/jdk*****


image


Use command line (search CMD) in your system and launch the CMD as administrator.


image


Run these commands to go into bin folder of your JDK.


image


Once you’re inside bin folder, execute this line to create a new keystore;


keytool -genkey -v -keystore YOUR_KEYSTORE_FILE_NAME.keystore -alias YOUR_KEYSTORE_ALIAS -keyalg RSA -keysize 2048 -validity 10000



  • change the YOUR_KEYSTORE_FILE_NAME to your own keystore filename.

  • change YOUR_KEYSTORE_ALIAS – is your chosen keystore alias.

image


Check your bin folder, the keystore file is already created.


*Make sure to remember the passwords and the alias as they will be used in the next step.


image





STEP 5: Uploading the keystore to our ANDROID project


image


Change to Add a key in the options pointed with the arrow above.


image


Provide your key title (create your own) and the alias you chose in the STEP 4. ANd browse to locate the keystore file.


image


Locate the keystore file which by default stored in the jdk bin folder (from STEP 4).


image


Send the keystore file.


image


Unlock the keystore by providing the passwords you enter in STEP 4.


image


Rebuild and wait for a while. Once the rebuild process finished, you can download the APK which is ready for deployment at the Google Play store.





STEP 6: Testing the app in our mobile device


Scan the qrcode in the build.phonegap.com app page using any barcode reader app. Screenshot_2015-04-03-09-08-22


The APK will be downloaded to your Android device. Install the APK, and open.


Screenshot_2015-04-03-09-09-06Screenshot_2015-04-03-09-09-40Screenshot_2015-04-03-09-14-28Screenshot_2015-04-03-09-15-05


 


STEP 7: Uploading the ANDROID app to the Google Play Store


We are providing the tutorial here http://blog.kerul.net/2015/04/publishing-apps-to-google-play.html.

Comments

Popular posts from this blog

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – https://play.google.com/store/apps/details?id=net.kerul.peribahasa English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur http://books.google.com.my/books/about/Peribahasa_dan_ungkapan_Inggeris_Melayu.html?id=bgwwQwAACAAJ CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia

Contact Us at blog.kerul.net

Powered by EMF HTML Contact Form

Login JSON Android using Login Activity

I’ve been trying to release this tutorial quite a while. At last after a long hard effort. Since HttpClient is not supported any more in Android SDK 23, I have to resort to org.json.JSONObject and java.net.HttpURLConnection library to do online database with JSON. The objective of this tutorial is to log-in from a mobile client with the username and password stored in an online database facility. STEP 1: Create a new Android project, this time choose the LoginActivity .

Bootstrap Template for PHP database system - MyCompanyHR

HTML without framework is dull. Doing hard-coded CSS and JS are quite difficult with no promising result on cross platform compatibility. So I decided to explore BootStrap as they said it is the most popular web framework. What is BootStrap? - Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. (  http://www.w3schools.com/bootstrap/   ) Available here -  http://getbootstrap.com/ Why you need Flat-UI? Seems like a beautiful theme to make my site look professional. Anyway you could get variety of BootStrap theme out there, feel free to select here  http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/ Flat-UI is from DesignModo -   http://designmodo.com/flat/ Web Programming MyCompanyHR – PHP & MySQL mini project (with Boostrap HTML framework) Template 1: Template for the Lab Exercise. This is a project sample of a staff record management system. It has the PHP structured co

WebDev

http://blog.kerul.net PHP DEVELOPMENT TOOLS Download the XAMPP latest version from www.apachefriends.org . This installation file contains the Apache web server, PHP 5 and 4 interpreter, and the MySQL 5 Community edition. - download latest version MozillaFireFox (OpenSource web browser firefox) – download latest version Google Chrome – fastest web browser on earcth – fast download chrome here TEACHING PLAN Download the teaching plan here for Web/Internet Programming ( download ) NOTES HTML references HTML Editor -  http://www.sublimetext.com/ Lab 1: HTML Basics -  http://www.w3schools.com/html/ Lab 2: Responsive Design:  http://www.w3schools.com/html/html_responsive.asp Lab 3: HTML Forms  http://www.w3schools.com/html/html_forms.asp Lab 4: HTML 5  http://www.w3schools.com/html/html5_intro.asp Lab 5: Bootstrap for responsive Web -  http://www.w3schools.com/bootstra