MotherApp Engine

MotherApp Engine

Tutorial

MotherApp Tutorial

Part 3: GeoCamera: Create a geo-location photo upload app

This tutorial teaches you how to create a geo-location photo upload application from MotherApp HTML. What you can learn from this tutorial:

  1. Tab
  2. Map
  3. GPS
  4. Camera
  5. List
  6. All together


1. Create tab

The GeoCamera app has two tabs:

  • Map
  • List

The "Map" tab shows the uploaded photos using the native map. The "List" tab shows a list of uploaded photos using a list. It's easy to create such tab control in MotherApp HTML. 

<html> 
    <head></head> 
    <body>        
        <wf_tabbar> 
            <a href="map.php"
                wf_tab_img="button_map.png"
                wf_tab_img_active="button_map_on.png">Map</a> 
            <a href="list.php"
                wf_tab_img="list_off.png"
                wf_tab_img_active="list_on.png">List</a> 
        </wf_tabbar> 
    </body> 
</html>

<wf_tabbar> can be used to create a tab bar in the application. You can specify tab image in the "wf_tab_img" attribute. The "wf_tab_img_active" attribute is used to define the tab image when the tab is active for device other than iPhone (iPhone SDK automatically overlay the cyan color on the "wf_tab_img" image).

The first page (map.php) will be loaded automatically and display it on the screen. So for using the tab bar, it is the only tag can be used in the page, i.e. you cannot use other tags in the tab bar page.

2. Create map

Native map can be created extremely easy using MotherApp HTML. <wf_map> is used to define a native map in the application. Following is the snippet to create a map in the application:

...
<wf_map wf_map_center="0,0"
    wf_map_zoom="1"> 
            <a href="photo.php?id=31" wf_geo_location="22.427381,114.208724">Tak</a> 
            <a href="photo.php?id=32" wf_geo_location="0.0015,-0.0025">long</a> 
...
            <a href="photo.php?id=37" wf_geo_location="22.236642,114.174015">AA</a> 

</wf_map> 
...
Attribute Description
wf_map_center defines the center of the map using "latitude,longitude"
wf_map_zoom defines the zoom level the map ranging from 1 (lowest) to 17 (p.s. some location cannot be displayed for zoom level 17.
<a> defines the flag on the map
wf_geo_location defines the flag location using "latitude,longitude"

Now, you know how to create a map in MotherApp HTML. Assume you know how to use php. Following is the snippet to loop through the database and display the flags in <wf_map>

    ...
    <wf_map wf_map_center="0,0">
    <?php 
        $data = $db->query($sql);
        foreach ($data as $record) {
    ?>
        <a href="photo.php?id=<?=$record['id']?>"
            wf_geo_location="<?=$record['latitude']?>,<?=$record['longitude']?>"
        >
            <?=$record['description']?>
        </a>
    <?php } ?>
    </wf_map>
    ...
Line Code Description
4 $db the database connection return from PDO
4 $db->query($sql) query the database with sql
5-12 foreach ... loop through all the flag data in $data and draw the flags

3. Using GPS

In MotherApp HTML, you can use [wf:gps] to get the geo location using the GPS from the device. For example,

    ...
    <wf_titlebar bgcolor="#000000"> 
        <a wf_style="navigation_unchanged" href="map.php?location=[wf:gps]" title="Locate" align="left"> 
            <img src="gps_icon.png" title="Locate"/> 
        </a>
        ...
    </wf_titlebar>
    ...

When the user click on the button in the title bar, the [wf:gps] in the link (href attribute) would be replaced the gps location from the device using format "latitude,longitude". So in above example, the location parameter in the query string is set with the gps location. You can use following php to retrieve the location and set the center of the map:

...
<?php
...
$location = $_GET["location"];
...
?>
<wf_map wf_map_center="<?=$location?>">
...
</wf_map>
...
Line Code Description
4 $location = $_GET["location"]; Get the location from the query string (it is set from MotherApp HTML)
7 <wf_map wf_map_center="<?=$location?>"> Set the map center to the current location

4. Using camera

Following shows the html that displays as above photo:

<html> 
    <head></head> 
    <body> 
        <wf_titlebar bgcolor="#000000"> 
            <a href="" align="left" wf_style="navigation_back">Back</a> 
            <title align="center">Add Photo</title> 
        </wf_titlebar> 
        
        <form action="add_photo.php" enctype="multipart/form-data" method="post"> 
        <table wf_style="fullscreen" title="Take a photo"> 
            <tr><td wf_style="padding"> 
                <input type="file" wf_type="camera" name="photo"/> 
            </td></tr> 
        </table> 
        <table wf_style="fullscreen" title="Description"> 
            <tr><td wf_style="padding"> 
                <textarea name="description"></textarea> 
            </td></tr> 
        </table> 
        <div align="center">
            <input type="submit" name="submit" value="Done"/> 
            <input type="hidden" name="location" value="[wf:gps]"/>
        </div> 
        </form> 
    </body> 
</html>

Using <input type="file" wf_type="camera" name="photo"/>, you can create a button that can trigger the camera to take a photo.

After taking the photo, user can input the description and click "Done" to upload the photo to the server. Following is the snippet that shows how to get the uploaded photo using php:

    <?php
    ...
    move_uploaded_file($_FILES['photo']['tmp_name'], "photos/" . basename( $_FILES['photo']['name'] ));
    ?>
    ...

The code moves the uploaded file to a new location "photos/[filename]".

5. List

Following shows the snippet that displays as above photo:

    <table wf_style="fullscreen">
    <?php 
        $data = $db->query("SELECT * FROM main.photo ORDER BY id DESC");
        if(!empty($data))
        foreach ($data as $record) { 
    ?>
        <tr wf_href="photo.php?id=<?=$record['id']?>"><td>
            <img src="http://tiny-img.appspot.com/80/<?=$base_url?><?=$record['photo_url']?>" width="80" height="80"/>
            </td>
            <td wf_style="padding"><?=$record['description']?></td>
        </tr>
    <?php } ?>
    </table>
Line Code Description
3 $data = $db->query("SELECT * FROM main.photo ORDER BY id DESC"); Get all the photos from the database
5-12 foreach ($data as $record) ... Loop through the data set and render it as a table list

6. All together

You can download the whole php application here. Please read the README on how to install to your php server. You can use MotherApp Sandbox to generate the application.

What Resources Are Available to Me as a Developer?

  • MotherApp HTML Reference
    Click here to see the complete reference for MotherApp HTML. You can select having the code elements displayed by category, alphabetically, or with associated screen shots.
  • Development Tools
    • Click here to use the MotherApp Debugger.
      Use the debugger test your application using a web browser (the Safari 4, Firefox 3.5 and Google Chrome browsers are recommended). The generated user interface may differ somewhat from the display on any particular device (since the app will display natively, and therefore differently, on each platform), but the debugger accepts the same MotherApp HTML as the devEngine. It will allow you to to check the syntax for your MotherApp HTML pages.
    • Click here to use the MotherApp Sandbox
      The MotherApp sandbox helps generates the testing version of app that could be actually deployed to the devices.
    • Click here to view our set of sample apps.
  • More Information
    • Click here to view our list of MotherApp "How to"s. For example, "how to deliver your completed app," or "how to launch the video player."
    • Click here to view the answers to our Frequently Asked Questions (FAQ)
    • Click here to go to our Support Forum.

 

 

 

MotherApp © 2010