-
Notifications
You must be signed in to change notification settings - Fork 35
Expand file tree
/
Copy pathindex.html
More file actions
347 lines (344 loc) · 13 KB
/
Copy pathindex.html
File metadata and controls
347 lines (344 loc) · 13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="App Inventor for Android" name="description" />
<meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords" />
<title>
Tutorials - App Inventor for Android
</title>
<link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico" />
<link href="/static/images/appinventor-16.png" rel="icon" type="image/png" />
<link href="/static/css/appinventor.css" rel="stylesheet" />
<script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
<script>
var tracker = new gweb.analytics.AutoTrack({
profile: 'UA-5856106-2'
});
</script>
<script language = "JavaScript" src="/static/scripts/HeaderAndFooter.js"></script>
<style>
img.c2 {border-width:0}
div.c1 {clear:both;}
</style>
</head>
<body>
<script language = "JavaScript">createHeader('<div id="navigation-breadcrumb"> <a href="/learn/">Learn</a> > Tutorials > ');</script><br>
<div id="aiac">
<div class="main-container">
<div class="customhr customhr-gray">
</div>
<div class="content">
<div class="content-body">
<div class="learn-page">
<h1>
Tutorials
</h1>
<h2>
Basic
</h2>
<p>
Once you've
<a href="/learn/setup/index.html">
set up
</a>
your computer and built
the HelloPurr app you are ready to begin these basic tutorials.
</p>
<ul id="tutorial">
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="paintpot/paintpot-part1.html">
PaintPot
</a>
<br />
PaintPot lets you scribble in different colors by touching the screen to draw
dots and lines. Concepts introduced in this project include: Canvas components
for drawing; event handlers that take arguments, including touch and drag
events; and Arrangement components for controlling screen layout.
<a href="paintpot/paintpot-part2.html">
Part 2
</a>
extends the project to draw dots of
different sizes, as an introduction to
<em>
global variables
</em>
.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="molemash/molemash.html">
MoleMash
</a>
<br />
In the arcade game Whac-a-Mole
<sup>
TM
</sup>
, a "mole" pops up at random
positions on a playing field, and the user score points by hitting the mole
with a mallet. This is a similar game that uses the touchscreen. This tutorial
introduces: image sprites, timers, and procedures.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="piccall/piccall.html">
PicCall
</a>
<br />
PicCall illustrates how to create applications that use the phone's
functionality. This application lets you select people from your contact list
and display their pictures. When you press a picture picture, the phone calls
that person.
</div>
<div class="clear">
</div>
</li>
</ul>
<h2>
Advanced
</h2>
<p>
These tutorials build on the things you learned in the beginner tutorials and
explore App Inventor's more complex functionality.
</p>
<ul id="tutorial">
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="quizme/quizme.html">
Quiz Me
</a>
<br />
QuizMe is a trivia game about baseball, but you can use it as a template to
build quizzes on any topic. With QuizMe the user steps through a series of
questions, clicking a Next button to proceed to the next question. The user
enters an answer for each question and the app reports whether each answer is
correct or not. For this tutorial, you'll create an app in which the questions
are always the same unless you, the programmer, change them. Later, you can
create MakeAQuiz, an app that lets users create and modify the quiz questions.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="textgroup/textgroup.html">
Text Group
</a>
<br />
This tutorial introduces the Texting component for sending and processing
texts. You'll build an app that texts a message to a list of phone numbers.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="makequiztakequiz/makequiztakequiz.html">
MakeQuiz and
TakeQuiz
</a>
<br />
MakeQuiz and TakeQuiz are two apps that, in tandem, allow a teacher to create
quizzes for a student. Parents can create fun trivia aps for their children
during a long road trip, grade school teachers can build "Math Blaster"
quizzes, and college students can build quizzes to help their study groups
prepare for a final. This tutorial will walk you through creating both the
MakeQuiz and the TakeQuiz app.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="maptour/maptour.html">
Map Tour
</a>
<br />
This is a two-part tutorial introduces the ActivityStarter component for
launching arbitrary Android Apps and the ListPicker component for allowing a
user to choose from a list of items. You'll build MapTour, an app for visiting
French vacation destinations with a single click. Users of your app will be
able to visit the Eiffel Tower, the Lourve, and Notre Dame in quick succession.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="textgroup2/textgroup2.html">
Text Group Part 2
</a>
<br />
This tutorial extends the Text Group tutorial. That app sent a text to a fixed
list of phone numbers, and only the programmer could change the numbers in the
list. The app in this tutorial allows the user to add and remove the phone
numbers in the list, and it stores the list persistently in a database.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="broadcasterhub/broadcasterhub.html">
Broadcaster
Hub
</a>
<br />
In this tutorial, you'll write an app that automatically responds to texts
messages and broadcasts texts messages it receives to a list of phone
numbers.The app is inspired by FrontLineSMS, a tool that has been used in
developing countries to monitor elections, broadcast weather changes, and in
general connect people that don't have access to the web but do have phones and
mobile connectivity.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="notext/notext.html">
No Text While Driving
</a>
<br />
This tutorial demonstrates how an app can respond to text messages
automatically. You'll build an app that sends back a response when a text
message is received. The idea for the app came from University of San Franciso
student Daniel Finnegan.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="notext/notext2.html">
No Text While Driving Part
2
</a>
<br />
You know that texting while driving is dangerous, so you've created and
installed the No Text While Driving app on your phone. Now, when you drive you
open that app and let it auto-respond to incoming texts. But the jingle of the
texts coming in is killing you with curiosity-- wouldn't it be great if you
could hear the texts spoken aloud? With Part II of the tutorial, you'll extend
the app so that it speaks out both the message and who sent it. And since
you're making some changes anyway, you'll modify the auto-response so it
reports your whereabouts in the reply: "Sorry, I'm driving and I'm at 1600
Pennsylvania Avenue". Before completing this tutorial you should complete part
I.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="whereismycar/whereismycar.html">
Android, Where's My
Car?
</a>
<br />
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. Fortunately you haven't lost your Android phone that never forgets
anything, and you remember you have the hot new app, Android, Where's My Car?.
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! With this tutorial you'll be able to
download a created app and then study the annotated blocks below to better
understand the app and App Inventor programming in general.
</div>
<div class="clear">
</div>
</li>
<li>
<div class="image">
</div>
<div class="text">
<a class="title" href="stockquotes/stockquotes.html">
Stock Quotes
</a>
<br />
This tutorial demonstrates how to use the Web component to make an app call a
web service (Yahoo! Finance) with a simple application programmer interface
(API).
</div>
<div class="clear">
</div>
</li>
<li>
<div class="text">
<a class="title" href="molemash2/molemash2.html">
MoleMash 2
</a>
<br />
MoleMash2 provides an alternative implementation of the classic boardwalk game
that demonstrates how to use the Advanced features in the Blocks Editor and how
to layer Sprites.
</div>
</li>
<li>
<div class="text">
<a class="title" href="coloredDots/coloredDots.html">
Colored Dots
</a>
<br />
Colored Dots is a simple painting program that uses a second
screen to select the paint colors. This tutorial serves as
an introduction to creating apps that have multiple screens.
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<script language = "JavaScript">createFooter();</script><br>
<div class="footer-lastupdate">
<script>
if (document.lastModified != '') {
var m = "Page last updated: " + document.lastModified;
var p = m.length-8;
document.writeln("<center>");
document.write(m.substring(p, 0));
document.writeln("<\/center>");
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>