Slide 1
Slide 1 text
TouchDevelop x
Cloud
by Kev Lai
Slide 2
Slide 2 text
Who am I?
◦ Kevin Lai
◦ Studying Computer
Science in CUHK (yr.3)
◦ Intern at ASM Pacific
◦ Coding Trainer of
Microsoft
Slide 3
Slide 3 text
Target Audience
Fellows who are familiar with
TouchDevelop
Slide 4
Slide 4 text
Roadmap
Basic Database
Real deal #3: Plant the data on the map
Getting Started
Cloud Set-up
Create a button
Get a location
Real deal #1: Ask for a message
Real deal #2: Upload a picture
Slide 5
Slide 5 text
Getting Started
Let’s start with the basic
1
Slide 6
Slide 6 text
Getting Started
Steps:
◦ Open TouchDevelop
(link)
◦ Login
◦ Tap “Create Script”
◦ Choose
“blank app”
Slide 7
Slide 7 text
Getting Started
Steps:
◦ Give your script a
name
◦ Click “create”
Slide 8
Slide 8 text
You should be able see some code like this
Slide 9
Slide 9 text
Page
◦ A user interface made
of boxes
◦ Imagine your app is a
book, which is full of
pages, and on every
page you can place
different stuff, like
buttons, maps, etc.
Slide 10
Slide 10 text
A Sample Page
◦ You can learn more information from this link.
Slide 11
Slide 11 text
Page
◦ A user interface made
of boxes
◦ Imagine your app is a
book, which is full of
pages, and on every
page you can place
different stuff, like
buttons, maps, etc.
Slide 12
Slide 12 text
Cloud Set-up
There really are rules of architecture for a castle in the
clouds.
2
Slide 13
Slide 13 text
Cloud Data
◦ TouchDevelop has
provided an simple way
for cloud session
management
◦ Simply speaking, saving
data in the cloud has
become very easy
Slide 14
Slide 14 text
Cloud Data
◦ Type this line of code
◦ Whenever you run a
script with cloud data,
you can start in the
‘just-me session”, or
the “everyone
session”
Slide 15
Slide 15 text
Create a button
3
Slide 16
Slide 16 text
Create a button: Forms
◦ We have a library
called “forms”, which
thankfully our app has
already included
◦ “forms” is the library
which allows you to
create some basic
elements on the
“page”, like buttons,
input boxes and drop-
down menus
Slide 17
Slide 17 text
Create a button
◦ Go to the space below
◦ Type
Slide 18
Slide 18 text
Create a button
◦ Inside the “”, give the
button a name
◦ And we just created a
button!
Slide 19
Slide 19 text
Where’d you go? I miss you so.
Start where you are. Use what you have. Do what you can.
4
Slide 20
Slide 20 text
Get your location
◦ Inside “on tapped()
{}”, declare a variable
to store a location,
which would be your
exact location
Slide 21
Slide 21 text
Get your location: Error Checking
◦ Let’s write some code
to handle if your exact
location can be
obtained or not
Slide 22
Slide 22 text
Basic Database
5
Slide 23
Slide 23 text
Database
◦ Click the plus-sign to
add a table
Slide 24
Slide 24 text
Database
◦ Click the plus-sign to
add a table
Slide 25
Slide 25 text
Database
◦ Click the plus-sign to
add a table
Slide 26
Slide 26 text
Database
◦ You’ll see a table is
added to your app
Slide 27
Slide 27 text
Database
◦ Click it and you’ll see
a screen like this
◦ You can tap the
“thing” to change the
name of your table
Slide 28
Slide 28 text
Database
◦ But I want you to click
on the green text
“local table”, which
will prompt a screen
with some
checkboxes
◦ Make sure you check
“replicated” so the
table would be saved
to the cloud and could
be shared between
devices!
Slide 29
Slide 29 text
Database
◦ After all these steps,
you should have
something’ like this.
Slide 30
Slide 30 text
Database
◦ Remember our
objective here? We’re creating an app which can
◦ upload pictures
◦ upload text messages
◦ and pin these data on an
location
Slide 31
Slide 31 text
Database
◦ Imagine if our
database, or record,
or table (whatever
you’d like to call it) is
really a table of rows
and columns
◦ It would be
reasonable to say our
table should be
designed like this
text location picture
Slide 32
Slide 32 text
Database
◦ Therefore, we’re
gonna add 3 columns
to our table
Slide 33
Slide 33 text
Database
◦ There you go!
Slide 34
Slide 34 text
Real Deal#1: Ask for a message
'Have fun' is my message. Be silly. You're allowed to be silly.
There's nothing wrong with it.
6
Slide 35
Slide 35 text
Ask for a message
◦ Now let’s go back to
page main() and find
that “on tapped()”
function.
◦ Then start inserting
data to the table
Slide 36
Slide 36 text
Ask for a message
◦ What we basically
just did is inserting a
row to our table, and
we use “stuff” to
identify that row
◦ It’s just temporary, as
“stuff” can also refer
to another row. For
instance, if you run
this line of code
again, “stuff” would
be referred as
another row you just
inserted
text location picture
stuff
Slide 37
Slide 37 text
Ask for a message
◦ Imagine “stuff” as a
bookmark helping
you remember which
page of a book you
left off, but you won’t
keep a bookmark
forever on the same
page, right??
text location picture
stuff
Slide 38
Slide 38 text
Ask for a message
◦ Now add another 2
lines to fill up the row
in the table
◦ First, we store the
location we just found
earlier
◦ Second, we prompt a
box out to ask the
user to input a
message
Slide 39
Slide 39 text
Ask for a message
◦ Try and click “Run” to
see what’ll happen
◦ A screen like this
should appear
◦ Click the button at the
top left hand corner
Slide 40
Slide 40 text
Ask for a message
◦ A dialog should pop
up
Slide 41
Slide 41 text
Ask for a message
◦ For the sake of error
handling, let’s add a
message to tell the
user his/her location
can’t be found
Slide 42
Slide 42 text
Real Deal#2: Upload a picture
Put your face in it and clone it!
7
Slide 43
Slide 43 text
Upload a picture
◦ Like last part, we
create a button, and
call it “Picture” this
time
Slide 44
Slide 44 text
Upload a picture
◦ Also, this time we
would create a menu
letting the use choose
between taking a
picture and upload it,
or just upload a
picture instead
Slide 45
Slide 45 text
Upload a picture
◦ Then we save what
the choice the user
makes
Slide 46
Slide 46 text
Upload a picture
◦ For the first “”, input
your question
◦ And for the second,
input the instruction
Slide 47
Slide 47 text
Upload a picture
◦ Let’s test it out.
Slide 48
Slide 48 text
Upload a picture
◦ Find the location,
same old same old
◦ And yes, the error
handling part
Slide 49
Slide 49 text
Upload a picture
◦ Then we’re gonna
handle the 2 choices
◦ First, for the “Take a
photo part
Slide 50
Slide 50 text
Upload a picture
◦ Let’s take a picture
Slide 51
Slide 51 text
Upload a picture
◦ Then let’s check if a
pic is taken or not
◦ If yes, we’re gonna
upload it
◦ If not, prompt a
message to the user
Slide 52
Slide 52 text
Upload a picture
◦ To seal it, we’re
adding some error
handling for the pic
uploading
◦ If the uploading
process is successful,
we’re adding all the
information to our
database
Slide 53
Slide 53 text
Upload a picture
◦ We’re half way there,
hang in there!
◦ Now we’re finishing
the “Upload a picture”
part
◦ This part is almost
90% like what we just
did
Slide 54
Slide 54 text
Upload a picture
◦ See?
Slide 55
Slide 55 text
Real Deal#3: Plant the data on the
map
Stick a flag and claim it!
8
Slide 56
Slide 56 text
Plant the data on the map
◦ Now let’s plant a
message on the map!
Slide 57
Slide 57 text
Plant the data on the map
◦ For one, we place the
map on our app
◦ Create a box
Slide 58
Slide 58 text
Plant the data on the map
◦ Then set the margina
of the box, which
would contain the
map
Slide 59
Slide 59 text
Plant the data on the map
◦ Create the map
Slide 60
Slide 60 text
Plant the data on the map
◦ Then we plant every
piece of data we have
in the database onto
the map
Slide 61
Slide 61 text
Plant the data on the map
◦ Finally, post the map
to our app
Slide 62
Slide 62 text
Done! (http://tdev.ly/iyvfa)
Everything is finished, but here’s a
challenge:
◦ I wrote the code in a teaching-
oriented manner
◦ You can shorten my code by at
least ⅓ in length
◦ Hint: see those duplicated code?
Slide 64
Slide 64 text
The end.