Documentations

MotherApp Tutorial

Part 2: Debug your app with MotherApp iPhone simulator

The MotherApp mobile simulator is a Javascript and CSS library that can turn your website into an iPhone simulator for MotherApp HTML. Before submitting your website to us, you can use it to debug your site interactively. Download Apple's Safari (available on both Mac and PC) and see the example in http://simulator.motherapp.com/code/examples/widgets/restaurant.html.


Debugging MotherApp HTML
without the simulator		 Debugging MotherApp HTML
with the simulator

Note: We try to make it as close to iPhone as possible, but it is still a simulator and it cannot show all the elements perfectly. But don't worry, when you submit the website to MotherApp, MotherApp doesn't simulate the iPhone as it creates the actual iPhone app. All your elements and layout will show up properly.


Below shows a screenshot from the actual iPhone in full size

1. Include Libraries

First, include the library at the <head> tag as below:

<html>
<head>
    <!-- using map -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAXs6fffdzf-Y3421qG3pbLhQLGfjVVVLUaA4cBvzBhgxmSoNFTxTKGYwqcMMc1_O3F2c1xUI6WyYfjg"></script>
    <script>
        google.load("maps", "2.x");
    </script>
    <script src="http://simulator.motherapp.com/code/src/gmaps-utility-library/labeledmarker/src/labeledmarker.js" type="text/javascript"></script>
    <!-- base library -->
    <script type="text/javascript" src="http://simulator.motherapp.com/code/src/mootools/mootools-core.js"></script>
    <script type="text/javascript" src="http://simulator.motherapp.com/code/src/wf-iphone/iphone.js"></script>
    <link rel="stylesheet" href="http://simulator.motherapp.com/code/src/wf-iphone/iphone.css"/>
</head>
<body>...</body>
<script>WF.initIPhone();</script>
</html>

Typically, we need to do 3 things:

  1. Include the library. See Lines 10-12.
  2. If you want to use the map widget, include the Google Maps library as well. See line 4. Remember to replace our API key (ABQIAAAAXs6fffdzf-Y3421qG3pbLhQLGfjVVVLUaA4cBvzBhgxmSoNFTxTKGYwqcMMc1_O3F2c1xUI6WyYfjg) with yours. You can apply it here. Note that you need a unique API key for each domain.
  3. Activate the simulator. See line 15.

2. MotherApp simulator options

2.1. viewsource=yes

Use "viewsource=yes" to view the MotherApp HTML side-by-side with the simulator. See an example in http://simulator.motherapp.com/code/examples/widgets/restaurant.html?viewsource=yes. It allows you to debug interactively. When you make a change in the HTML, save it and you will see the result immediately on the simulator.


2.2. mode=webapp

Use "mode=webapp" to make your site optimized for web browser. Currently it is optimized for Apple's Safari. In the future, we will extend it to the web browsers on other platforms such as Windows Mobile and Nokia's Symbian S60.

Without the library With with library and "mode=webapp"

← Previous
Tutorial Part 1: Getting Started

Next →
Tutorial Part 3: Create a Move Showtimes application