Design ShellApp Client

Next, you'll use the Shell App Framework to develop a client-side application. The goal of this chapter is to display the HTML of the start page you created in the previous chapter in an actual WebView.
 
The Shell App Framework enables client applications to be developed on the Mobage Developer Site without specifically needing a native application development environment such as Eclipse. The adb command is used to install an apk file on the mobile device to verify operation, therefore, please install the Android SDK Manager and associated tools.

Please note that to verify operation and release an application for iOS, you must be registered in the iOS Developer Program and have installed XCode.

Select "MyFirstShellApp" which you are currently creating and Click the "Android Application Settings" on the "Application Details" page.
 

Uploading Assets

First, upload the assets that will be used by the client from the "Assets" link. In the initial state, preset header and footer images have already been uploaded.

Only additional png image files to be used in headers and footers, and audio files to be used for background music or sound effects (ogg for Android and m4a for iOS) can be uploaded. You can upload files by dragging and dropping them into the upload area.

Designing the Layout

Next, use the uploaded png image files to define the layout of the Community button, header, footer, and WebView components in XML. Click the "Layout" tab and the layout XML editing screen will open.

Since the contents of the defined XML are automatically reflected in the preview pane on the right side of the screen, you can confirm the design of the client application without having to install the actual application itself.

In the layout header or footer, you can create multiple buttons and move to specific URLs when they are tapped, and define basic operations such as Back/Forward/Reload and behaviors such as calling JavaScript functions within WebView. At this time, please design so that WebView layout does not overlap with header or footer. You can click a button in the preview pane on the right to display an alert dialog and verify its operation and actual behavior.

You can also define multiple patterns for the header or footer layout and switch them or hide the header or footer itself in WebView from JavaScript according to the screen. You can also simulate the behavior of the header or footer here by using select at the top of the preview feature at the right.

For more detailed information about the schema of the layout XML, please refer to here.

Downloading the Client Application

Info.plist Settings (iOS only)

When the client application is downloaded, iOS writes the Info.plist settings file inside the application, so those settings must be configured.

Configure the Info.plist settings as follows from the "iOS" > "Info" screen.

Item name

Description

Sample settings in the tutorial

Bundle Version

Application version in the App Store

1.0.0

Target Device Family

for iPhone, for iPad, or Universal

either iPhone, iPad, or Universal

CFBundlledentifier

Application identifier in the App Store

com.example.myfirstshellapp

CFBundlleDisplayName

Application name displayed for home icon

My ShellApp

UIPrerenderedIcon

true if home icon has no gloss effect

true

In addition to the above, icons for each size should be uploaded.

Downloading the Application

When you have finished uploading assets and adjusting the layout, you can download the packaged application from the "APK" link. If invalid settings have been configured such as a nonexistent image being defined in the layout XML, you will not be able to download the application.

Letís try to download the Sandbox application using the default design in the tutorial.

Click "APK" from the "Application Detail" screen to start the download of the apk file (Android).

Verifying Operation on an Actual Device (Android)

Connect the mobile device to the PC in USB debug mode and use the following command to install the downloaded apk file.

When you launch the installed application, the login screen will appear.

You can log in as follows using the test user email address and registered password, which were created in the previous chapter.

The start page of the game should be displayed after you login.

Verifying Operation on an Actual Device (iOS)

First, you'll need to re-sign the app file that you downloaded.

The re-sign task is required to link the iOS Provisioning Portal account with the .app file and transfer it to the actual device. (Be sure to unzip the compressed file before performing this step.)

Download the following tool and re-sign the app file as shown in the example.

usage: re-sign-distribution.sh <application> <mobileprovision> <identity> <appPrefix> <bundleId> 
example: re-sign-distribution.sh webgame.app test.mobileprovison "iPhone Developer: Mobage Taro" ABCDEFG my.bundle.id
  • Dtailed explanation of the above command
    • <application>
      • Path of the downloaded .app file.
    • <mobileprovision>
      • Path of the file with the mobileprovision extension, downloaded from the iOS Provisioning Portal.
    • <identity>
      • Certificate alias for the Distribution Certificate registered on the iOS Provisioning Portal.
    • <appPrefix>
      • Bundle Seed ID (App ID Prefix) created automatically when the App ID was registered on the iOS Provisioning Portal. Although the string "BundleSeedID"."BundleID" appears in the Description of App IDs on the iOS Provisioning Portal, enter only the "BundleSeedID" here.
    • <bundleId>
      • Should only be the "BundleID" mentioned above.

When re-signing has completed, connect the mobile device to the PC, launch XCode Organiser, and install the re-signed app file on the actual device.

When you launch the installed application, the login screen will appear. Log in just as you would for an Android device, and the start page of the game should be displayed.

Thatís it. This completes the tutorial for designing a ShellApp client and displaying its start page.

Revision History

  • 04/02/2013
    • Added the notes which do not put a header footer on WebView
  • 02/07/2013
    • Added the procedure for iOS
  • 12/11/2012
    • Initial version

PREVIOUS

Show Start Page

NEXT

Show Login User Information