Tag Archives: native

HTML5 App Within a Native Shell App

The 2 previous postings were about getting the native apps up and running for their respective Android and iOS environments. The official guide takes you to a Hello World index.html which merely displays a static message. In reality, the app that your user will interact with is the UI of the index.html or the HTML5 app. The underlying native app that runs the index.html is what I call a Shell Native App.

So, the actual primary app is a HTML5 file with various supporting web libraries to fulfill the functions of a full-fledged mobile app. Generally, it should have the following supporting technologies to give it the native look and feel and experience:

1) jQuery (www.jquery.com)
2) AJAX (With AJAX, our mobile application can send data to and retrieve data from a server asynchronously (in the background) without interfering with the UI experience of the existing page.)
3a) jQTouch (www.jqtouch.com)
3b) jQuerymobile (www.jquerymobile.com)

As for the Shell Native Apps, they host the app icon, the splash screen, PhoneGap libraries and other native information. If you require certain native functions, it is inevitable that you will need to modify the natives codes for your Shell Native Apps. A good example would be the implementation of Push Notifications for both iOS and Android, you are unable to do this in the HTML5 app, which means you have to put in codes in your Shell Native App.

In summary, PhoneGap is a bridge that allows the HTML5 app to call PhoneGap Javascript (JS) methods which will call PhoneGap native methods in your Shell Native Apps, of course there are native events that can call JS events which you can use in your HTML5 apps. Not all native methods can be called from JS, so some native programming would be expected depending on your app requirements.

Advertisements
Tagged , ,

Getting Started with PhoneGap (iOS)

The main steps are already detailed on the official PhoneGap site – http://phonegap.com/start.

Below are my tried and tested steps for your reference to get the iOS environment up and a test App running on a Mac OSX (Lion) machine. It is not intended to be comprehensive and there are more details available on the web. Once you got the environment up and deploy the test app to your device successfully, you can add in the steps to create a PhoneGap app from the official guide above.

Getting Started with Running an iOS App in XCode4

1) Ensure that your Mac machine is running on Lion OSX 10.7 Mac OS X 10.7 because XCode 4.2.1 with SDK 5 only runs on Lion.

2) Go to the App Store app on your Mac machine and search for XCode4 and install it.

3) Download and extract SimpleDrillDown.zip (a sample iOS app) by double-clicking it and it can be downloaded from: http://developer.apple.com/library/ios/#samplecode/SimpleDrillDown/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007416

4) Open the SimpleDrillDown folder and double-click on SimpleDrillDown.xcodeproj to load this project in XCode4.

5) From the dropdown box above, select the iPhone Simulator (any version 4.3 or 5.0). Click on Run to build and run the project.

6) iPhone Simulator will load and run the SimpleDrillDown app.

Configure to Deploy on An Actual Device (Done Once Only)

1) Login to iOS Dev Center (https://developer.apple.com/devcenter/ios/index.action) using your Apple ID. You must have a paid subscription (at USD$99 per year) to the iOS Developer Program in order to log into this portal.

2) Go to the iOS Provisioning Portal

The license is tied to ONE main Mac machine only. So if you are changing to a different Mac machine, be sure to revoke the Current Development Certificate in the Provisioning Portal first. Then follow the steps to generate the CSR to disk and submit and download and use the new Development Certificate.
However, a better way is to export the Development certificate with the private key and import into the 2nd Mac machine.

3) Scroll to the bottom to “Get your application on an iOS with the Development Provisioning Assistant” and click on “Launch Assistant” and click “Continue” and follow the steps.

4) Assuming all the necessary are set up, connect your iOS device to your Mac machine, e.g. an iPhone.

5) Open the SimpleDrillDown folder and double-click on SimpleDrillDown.xcodeproj to load this project in XCode4.

6) From the dropdown box above, select the first option which should be the name of your iOS device. Click on Run to build and run the project.

Adding Another Device

1) Connect the new device to the Mac machine.

2) Open XCode4 and go to Window -> Organizer.

3) Select the new device from the list and click on the “Add to Portal” button.

4) Enter your Apple ID and password when prompted.

5) If there are no errors, you should be able to run the iOS app on the new device.

Tagged , , ,

Getting Started with PhoneGap (Android)

The main steps are already detailed on the official PhoneGap site – http://phonegap.com/start.

Below are my tried and tested steps for your reference to get the Android environment up and a test App running on a Windows 7 machine, then you can add in the steps to create a PhoneGap app from the official guide above.

Getting Started with Running an Android App in Eclipse

1) Download and extract Eclipse Classic 3.7.1, 174 MB from http://www.eclipse.org/downloads.

2) Download the Android SDK installer (installer_r16-windows.exe) at http://developer.android.com/sdk/index.html. Make sure that you change the installation directory to “c:\android-sdk” for example, it must be a PATH with NO spaces! When the installation is done, run SDK Manager and it will download and install some files which will take some time, make sure that Android SDK Tools/Platforms are installed.

3) In SDK Manager window, go to Virtual Devices and add a new device called Android2.3.3 and select Target to be “Android 2.3.3 – API Level 10”, click on “Create AVD”. (You can add more devices with different versions as you please)

4) Run Eclipse and start to install the Android Development Tools (ADT) plugin for use with Eclipse, the repository url is “https://dl-ssl.google.com/android/eclipse/”. Follow the steps here to configure the ADT: http://developer.android.com/sdk/eclipse-adt.html#installing.

5) Start a new Android Project by clicking File > New > Android Project.

  • In the New Android Project dialog, select Create project from existing source.
  • Click Browse and navigate to where the SDK is installed and select Spinner, e.g. C:\android-sdk\samples\android-13\Spinner
  • Android 1.5 will be selected as the Build Target and click on Finish.
  • Go to Project -> Clean to build the project.

6) Right-click on SpinnerActivity project and Run As -> Android Application. It will run with the Android 2.3.3 AVD created before.
7) The Android emulator will run and note that it takes a while to load.

Deploy and Run on An Actual Device

1) Depending on the model of your phone, e.g. Samsung or HTC etc, you will need to download the driver for the phone here: http://developer.android.com/sdk/oem-usb.html. In my case, I use the Samsung Galaxy S and I have to install the Samsung Kies software.

2) Follow the instructions to configure your Android phone for Development at: http://developer.android.com/guide/developing/device.html.

3) Then connect your phone to test if it can be detected by the Android SDK using a command prompt and go to “C:\android-sdk\platform-tools” and run “adb devices” to see a list of devices connected.

The output from the command will be something like this:
List of devices attached
35311BC91FD700EC device

4) In Eclipse, right-click on SpinnerActivity project and Run As -> Run Configurations.

5) Click on the Target tab and change the Deployment Target Selection Mode from Auto to Manual and click on Run. This will allow you to choose the device instead of the AVD.

6) Select the device and click OK.

7) The app will be running on your Android phone.

Adding Another Device

1) Follow the same steps as above and depending on your model of your phone, download the correct USB drivers.

Tagged , , ,