Explore MIT App Inventor - Activity Starter http://dev-explore.appinventor.mit.edu/tutorial-type/activity-starter en Android, Where's My Car http://dev-explore.appinventor.mit.edu/content/android-wheres-my-car <div class="field field-name-body field-type-text-with-summary field-label-hidden view-mode-rss"><div class="field-items"><div class="field-item even" property="content:encoded"><style> <!--/*--><![CDATA[/* ><!--*/ li { padding-bottom: 7px; } .basicblock { border: 1px dashed #7AA81C; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #E7F2CB; font-size: 9pt; text-wrap: suppress; } .callblock { border: 1px dashed #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #E0D1FF; font-size: 9pt; text-wrap: suppress; } .argblock { border: 1px dashed #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #E5E5FF; font-size: 9pt; text-wrap: suppress; } .textblock { border: 1px dashed #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #FADAA0; font-size: 9pt; text-wrap: suppress; } .setblock { border: 1px dashed #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #C1D5F8; font-size: 9pt; text-wrap: suppress; } .controlblock { border: 1px dashed #000000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #FAEDBB; font-size: 9pt; text-wrap: suppress; } /*--><!]]>*/ </style><h2 class="ai-header"><span style="color:green;">Android, Where's My Car?</span></h2> <p><a href="/sites/all/files/tutorials/wheresMyCar/wheresMyCar.zip"><img src="/sites/all/files/tutorials/wheresMyCar/android-where.jpg" style="float:right; width:250px;" /></a></p> <p><a href="http://cs.usfca.edu/~wolber/appinventor/bookSplits/ch7AndroidWhere.pdf">Download Refined Version (Book Chapter PDF)</a></p> <p>You parked somewhere near the stadium or bar, but when the concert/party ends you don't have a clue where the car is. The friends you came with are equally as clueless.</p> <p>Fortunately you haven't lost your Android phone that never forgets anything, and you remember you have the hot new app, <span style="color:green;">Android, Where's My Car?</span>. With this app, you click a button when you park your car, and the Android uses its location sensor to record the car's GPS coordinates and address. Later, when you reopen the app, it shows you a map from where you are to the remembered location-- problem solved!</p> <p><a href="http://www.flickr.com/photos/dailylifeofmojo/4128596089/">Photo</a> licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en">Creative Commons</a></p> <h4 class="ai-header">Download it, Customize it, Understand it</h4> <p>Below is a customizable, annotated and explained <span style="color:green;">Android, Where's My Car?</span> app. You can:</p> <p><a href="/sites/all/files/tutorials/wheresMyCar/wheresMyCar.zip"><img src="/sites/all/files/tutorials/wheresMyCar/downloadSourcebutton_1.png" style="float:right; width:250px;" /></a></p> <ul><li>Install the app on your phone by scanning a barcode</li> <li>Download the source code blocks for the app, upload them into App Inventor, then customize the app or use it as the basis for another idea you have.</li> <li>Study the annotated blocks and explanations below to better understand the app and App Inventor programming in general.</li> </ul><h4 class="ai-header">Try It</h4> <p>Scan the barcode to your Android phone. It will step you through installing the app.</p> <p>(If you don't have a scanner, download the free ZXing scanner by searching for it at the Android Market)</p> <p><img src="/sites/all/files/tutorials/wheresMyCar/wheresMyCarQRapk.png" /></p> <h4 class="ai-header">Customize It</h4> <p><img src="/sites/all/files/tutorials/wheresMyCar/customize.png" style="float:right;" /></p> <p>Download the source code blocks to create your own customized app.</p> <ol><li>Save the source file (.zip) to your computer (click icon to the right)</li> <li>Do not unzip it-- leave it as a zip file.</li> <li>Open the My Projects page in App Inventor.</li> <li>Select More Actions | Upload Source from the menu.</li> <li>Choose the file you just downloaded</li> </ol><h4 class="ai-header">Understand It</h4> <p>The app demonstrates how to communicate with the Android location sensor, how to record data in the phone's long-term memory (database), and how you can open the Google Maps app from your app to show directions from one one location to another. It makes use of the following App Inventor components:</p> <ul><li><b>Location Sensor</b></li> <li><b>TinyDB</b> -- to store the data</li> <li><b>ActivityStarter</b> -- to open a map</li> </ul><h4 class="ai-header">The User Interface</h4> <p>Here are the components for the <span style="color:green;">Android, Where's My Car?</span> app, as shown in the Component Designer:</p> <p><img src="/sites/all/files/tutorials/wheresMyCar/WheresMyCarDesign.png" /></p> <p>The user interface consists of labels to show location data and buttons to initiate events. Some labels just show static text, e.g., GPSLabel is the text "GPS:" that appears in the user interface. Others, such as CurrentLatLabel, will display dynamic data one the location sensor gets its readings. For these labels, a default value is set (0.0) here in the Component Designer.</p> <p>The ActivityStarter1 component is used to launch the map when the user asks for directions. Its properties are only partially shown above. Here is how they should be specified:</p> <table><tr style="background-color: #EFEFEF; font-weight: bold;"><td>Property</td> <td>Value</td> </tr><tr><td> <b>Action</b> </td> <td>android.intent.action.VIEW</td> </tr><tr><td> <b>ActivityPackage</b> </td> <td>com.google.android.apps.maps</td> </tr><tr><td> <b>ActivityClass</b> </td> <td>com.google.android.maps.MapsActivity</td> </tr></table><h4 class="ai-header">The App's Behavior</h4> <p>Here are the blocks for the <span style="color: green;">Android, Where's My Car</span> app (the yellow annotations will also appear when you load this app into App Inventor):</p> <p><img src="/sites/all/files/tutorials/wheresMyCar/WheresMyCarBlocks.png" /></p> <p>Let's examine the four different event-handlers of the app, starting in the top-left and working around in counter-clockwise order.</p> <p><span class="basicblock">LocationSensor1.LocationChanged</span>: This event occurs when the phone's location sensor first gets a reading, or when the phone is moved to produce a new reading, The event-handler just places the readings--latitude, longitude, and current (street) address-- into the corresponding "Current" labels so that they appear on the phone.The RememberButton is also enabled in this event-handler. Its enabled setting should be unchecked in the Component Designer because there is nothing for the user to remember until the sensor gets a reading.</p> <p><span class="basicblock">RememberButton.Click</span>: When the user clicks the RememberButton , the location sensor's current readings are put into the "remember" labels and stored to the database as well. The DirectionsButton is enabled as it now makes sense for the user click on it to see a map (though it will make more sense once the user changes location).</p> <p><span class="basicblock">DirectionsButton.Click</span>: When the user clicks the DirectionsButton , the event-handler builds a URL for a map and calls ActivityStarter to launch the Maps application and load the map. <span class="textblock">make text</span> is used to build the URL to send to the Maps application. The resulting URL consists of the Maps domain along with two crucial parameters, saddr and daddr , which specify the start and destination for the directions. For this app, the saddr is set to the latitude and longitude of the current location, and the daddr is set to the latitude and longitudeo of the location that was "remembered" (the location of your car!).</p> <p><span class="basicblock">Screen1.Initialize</span>: This event is always triggered when an app opens. To understand it, you have to envision the user recording the location of the car, then closing the app, then later re-opening the app. When the app re-opens, the user expects that the location remembered earlier should appear on the phone. To facilitate this, the event-handler queries the database (<span class="callblock">TinyDB.GetValue</span>). If there is indeed a remembered address stored in the database-- the length of the stored address is greater than zero--the remembered latitude, longitude, and street addres are placed in the corresponding labels.</p> <h4 class="ai-header">Variations</h4> <ul><li>Create "Android, Where is Everyone?", an app that lets a group of people track each other's whereabouts. Whether your hiking or at the park, this app could help save time and even lives.</li> <li>Create a "breadcrumb" app that tracks your (phone's) whereabouts by recording each location change. One interesting refinement would be to only record a new "breadcrumb" if the location has changed by a certain amount.</li> </ul><h4 class="ai-header">Review</h4> <p>Lines and paragraphs break automatically.</p> <p>Here are some of the ideas covered in this tutorial:</p> <ul><li>The <b>LocationSensor</b> component can report the phone's latitude, longitude, and current street address. Its LocationChanged event is triggered when sensor gets its first reading and when the reading changes (the phone has moved).</li> <li>The <b>ActivityStarter</b> component can launch any app including Google Maps. For Maps, you set the DataUri property to the URL of the map you want to display. If you want to show directions, the URL will be of the form: <a href="http://maps.google.com/maps/?saddr=0.1,0.1&amp;daddr=0.2,0.2">http://maps.google.com/maps/?saddr=0.1,0.1&amp;daddr=0.2,0.2</a>, where the numbers are GPS coordinates.</li> <li><span class="textblock">make text</span> is used to piece together (concatenate) separate text items into a single text object. It allows you to concatenate dynamic data with static text. With the Maps URL, the GPS coordinates are the dynamic data.</li> <li><b>TinyDB</b> allows you to store data persistently in the phone's database. Whereas the data in a variable or property is lost when an app closes, the data you store in the database can be loaded into your app each time it is opened.</li> </ul><pre class="ai-box">MIT and Google are grateful to <a href="http://www.appinventor.org/">Professor David Wolber</a>, CS Professor at The University of San Francisco, for developing this tutorial. Done with <span style="color:black;">Android, Where's My Car</span>? Return to the other tutorials <a href="/tutorials">here</a>.</pre></div></div></div><section class="field field-name-field-version field-type-taxonomy-term-reference field-label-above view-mode-rss clearfix"> <h2 class="field-label">Tutorial Version:&nbsp;</h2> <ul class="field-items"> <li class="field-item even"> <a href="/tutorial-version/app-inventor-1" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">App Inventor 1</a> </li> </ul> </section> <section class="field field-name-field-tutorial-difficulty field-type-taxonomy-term-reference field-label-above view-mode-rss clearfix"> <h2 class="field-label">Tutorial Difficulty:&nbsp;</h2> <ul class="field-items"> <li class="field-item even"> <a href="/tutorial-difficulty/advanced" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Advanced</a> </li> </ul> </section> <section class="field field-name-field-tutorial-type field-type-taxonomy-term-reference field-label-above view-mode-rss clearfix"> <h2 class="field-label">Tutorial Type:&nbsp;</h2> <ul class="field-items"> <li class="field-item even"> <a href="/tutorial-type/activity-starter" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Activity Starter</a> </li> <li class="field-item odd"> <a href="/tutorial-type/data-storage" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">Data Storage</a> </li> <li class="field-item even"> <a href="/tutorial-type/gps" typeof="skos:Concept" property="rdfs:label skos:prefLabel" datatype="">GPS</a> </li> </ul> </section> Fri, 14 Jun 2013 16:21:22 +0000 aaron 322 at http://dev-explore.appinventor.mit.edu http://dev-explore.appinventor.mit.edu/content/android-wheres-my-car#comments