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

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


STEP 4: Creating keystore file for ANDROID app


STEP 5: Uploading the keystore to our ANDROID project


STEP 6: Testing the app in our mobile device


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


This post is developing, thanks for your patient…

Kursus Android JSK sesi2 - 7 & 8 Ogos 2015


Kursus Pembangunan Aplikasi Android anjuran Jabatan Sains komputer, FSTM, KUIS.


  • Tarikh: Siri3 7&8 Ogos 2015  Siri 1 28 Feb dan 1 Mac 2015 Siri 2 7 & 8 Mac 2015.

  • Masa 0900am hingga 5pm
  • Tempat: Makmal 5, Blok Teknologi Maklumat, Kolej Universiti Islam Antarabangsa Selangor (Lokasi: 2.891400, 101.789328 ).
  • Keutamaan tempat kepada pelajar FYP dan FSTM (hanya 5 tempat sahaja untuk dibuka kepada umum).
  • Bawa laptop masing-masing dengan kapasiti RAM 4GB.
  • Sijil dan makan tengahari disediakan.
  • Anjuran Jabatan Sains Komputer, FSTM, KUIS.
Yuran
  • Yuran Pelajar KUIS RM50, umum RM150 - ( Early-bird sebelum atau pada 25 Julai 2015 ) selepas 25 Julai 2015 yuran adalah RM70(pelajar KUIS), RM170(umum).
  • keuntungan akan disumbangkan kepada Tabung Kebajikan Pelajar FSTM
  • bayaran kepada Khirulnizam (Call/SMS/WhatsApp: 0129034614)
  • untuk mengesahkan pendaftaran, sila jelaskan yuran awal.
  • kami tidak menggalakkan pembayaran yuran semasa hari kursus, hanya peserta yang telah menjelaskan yuran dijamin mendapat tempat dalam kursus.
  • Borang pendaftaran di bawah.
  • Yuran pendaftaran sangat rendah, berbanding di pasaran semasa (rujuk gambar di bawah). Anda juga turut menyumbang kepada kebajikan.

Kenapa perlu hadiri kursus ini?
Statistik daripada IDC mengatakan Android menguasai lebih 80% pasaran telefon pintar dunia pada 2014. Penting untuk pelajar IT/Sains Komputer atau  pengaturcara tahu nak bangunkan applikasi Android.
Borang pendaftaran di bawah.

Jadual Kursus
Hari 1
08.30am - 09.00am

Pendaftaran Peserta
09.00am - 10.30am Pengenalan kepada Aplikasi Mobile dan Android
10.30am - 11.30am Pengenalan Kepada HTML, CSS, JavaScript
11.30am - 12.30pm Pengenalan jQuery Mobile
12.30pm - 2.00pm Makan Tengahari & Solat
2.00pm - 3.00pm Membina Aplikasi Menggunakan jQuery Mobile
3.00pm - 4.00pm Membina Paparan Multi-Page
4.00pm - 5.00pm Template jquerymobile
.
Hari 2
09.00am - 11.00am

Pemasangan / Tetapan Perisian Untuk Pembangunan Aplikasi
11.00am - 12.30pm Membina Fail APK
12.30pm - 2.00pm Makan Tengahari & Solat
2.00pm - 3.00pm Signing APK
3.00pm - 4.30pm Terbitkan Aplikasi Ke Play Store
4.30pm – 5.00pm Penyampaian Sijil dan Penutup



Kenapa kami guna HTML5 dan jQueryMobile?
Antaramuka applikasi yang sama boleh diimplementasi dalam persekitaran Web, Android, iPhone, Windows Phone dan BlackBerry 10.

Borang pendaftaran (Siri3 - 7 &8 Ogos 2015)

Lokasi: 2.891400, 101.789328

Nota dan modul oleh - Mahmud al-Kauthar.net





  1. Introduction to Android Apps Development
  2. Getting started
  3. Hello World
  4. jQuerymobile
  5. Demo App
  6. SQLite database
Kursus sebelum ini

 




Harap bagitau kawan-kawan dengan tekan butang SHARE di bawah



Some tips in Web Development

Press CTRL+SHIFT+I to invoke HTML, CSS and JAVASCRIPT debugger in Chrome browser...

Use NetBeans for HTML5 and PHP code editing. https://netbeans.org/downloads/



Teknologi Maklumat & Kehidupan Insan

Kursus ini membincangkan adab pengendalian maklumat, isu-isu yang berkaitan dengan teknologi komputer dan teknologi maklumat. Penggunaan komputer peribadi dengan memberi pendedahan kepada perkakasan dan perisian komputer. Membincangkan mengenai internet, telekomunikasi serta pencarian maklumat melalui web. Membentuk pelajar yang beradab dalam pengendalian dan pengurusan maklumat.

Nota/Slide: bit.ly/nbwu1072


Rangka Kursus


Topik 1 Islam dan Teknologi Maklumat


Topik 2 Sejarah Ilmu Pengetahuan


Topik 3 Masyarakat Malaysia dan ICT


Topik 4 Teknologi Maklumat: Software, Hardware & Heartware


Tugasan MAKMAL

Latihan MSWord: Heading, Table of Content, Bibliography

Tips MS PowerPoint

Our Popular Posts

WorldConferences.net