PhoneGap Build in HTML5 Builder

By: Tim DelChiaro

Abstract: Learn how to use PhoneGap Build with HTML5 Builder to deliver mobile apps in this blog post

This is a repost of a blog post from Pablo Mateos. If you would like to comment on the post, click the blog post title link below to the original blog post.

  PhoneGap Build in HTML5 Builder

Introduction

A new feature in HTML5 Builder is the Phone Gap Build support-Build and package native apps for Android, iOS, Blackberry, WindowsPhone, Symbian and WebOS with the Adobe Phone Gap Build framework. Convert existing HTML into a mobile phone app  using Adobe Phone Gap. You only need a Adobe account to test yours mobile apps without the Android SDK or the BlackBerry SDK installed in your system. I’m going to explain how to build mobile apps with PhoneGap Build.

Get a Adobe account

- Go to https://build.phonegap.com/people/adobeid and register.

- After you accept the terms of use you can see this page. Now is not necessary upload a .zip file.

Create a simple mobile app

- Open HTML5 Builder and go to New -> HTML5 Builder Projects and create a Client Mobile Application.

- Put a Mbutton on form.

- Add some code for OnClick event.  For example:

function MButton1Click(event) {
  alert("hello");
}

- Test the app in your default browser. Push F9 or click on the play icon.

Deploy to Mobile

- Go to Home and execute the Deploy to Mobile wizard. This wizard exports the project on a folder, connect with PhonegapBuild service to upload the code (zip file) and start the build. In the Welcome page select for example Android platform and click next to continue, select your index page, Application name and Company Name. In the Graphic page add the app icon. Next, choose a destination folder, the project will be export in this folder. If you have installed the Android SDK libraries, you have select the Phonegap:Build option and click next to go to the login PhonegapBuild page.

- Login with your Adobe ID (email) and your password and click next to connect to PhonegapBuild service.

- Now the wizard does this silent steps:

  • It checks your Adobe ID and your password
  • It checks if you don’t have any project with the same name of actual project name, in this case it only updates the code (.zip file). If the project is not there in your account then it creates the project and it upload the application code (.zip file)
  • It starts the build.

When the build is finished, the "Save Binaries" button is visible, and you can download the binaries of your application (for android "projectName.apk")

Install the application in the mobile device

- If you have a real device you can install the apk on it with his software. But you can install the application in an emulator also. For this issue you need install the Android SDK. The HTML5 Builder provides the installer with everything you need to working with applications for android, install it. After install you need restart windows

- The steps to install and run the applications on:

  • Open a console (cmd.exe)
  • Start the emulator: emulator @my_avd -no-boot-anim
  • Open another console.
  • Check if the emulator is up and runnin: adb get-state
  • To install an application the emulator has to be up and package manager has to be running.
    You can check if package manager is running with : adb -e shell pm list packages
  • Once you get a list of packages, the device is ready and package manager running.
  • Install the application on the emulator: adb -e wait-for-device install -r %APP_NAME%-%DEBUG_OR_RELEASE%.apk
  • Start the application on the emulator

Server Response from: ETNASC03