APP

DEVELOPMENT
103 MANUAL
Objective: By the end of this course, students should
be able to:

 Build a Random Dice app, a utility app that teaches about

picking random items from a list and the accelerometer sensor

 Learn about the how to access websites with links from their
mobile application. They will understand links and text
encryption

 Build a Call and messaging app, a utility app that can be used
to make calls and send text messages, as well as select contacts
from the contact list

 Build a To-do list, a utility app that is able to store a list of

information for a user to their login details.

 Store data in a phone's internal storage database (TinyDB).

DICE ROLL APP

PURPOSE OFTHIS APP

There are many times when you want an app to behave in a random
or irregular way. For example, you might want a character in a game
to move in an unpredictable way. In this simple example, you’ll
simulate a dice roll on your phone—the user shakes the phone to see
a new random number. At this stage, you’ll just display a number;
later you’ll make the result look more like an actual dice.

APP RATING

1. Programming the blocks

This is a simple app because App Inventor has a block called
random integer that generates random whole numbers (integers).
You’ll find it in the Built-in > Math drawer. Plug two numbers into
it, and it generates a random number between them (inclusive). So,
plugging in 5 and 10 means it will pick 5, 6, 7, 8, 9, or 10. In your
app, you’ll choose from 1 to 6 as your lowest and highest numbers,
because you’re simulating a dice roll.

As you can see, you plug the random integer block into a set
[Link] block and then plug it all into an
[Link] event trigger. There you have it
the simplest app you’ve made since Hello World! and now you
know how to make a random whole number. If you ever need a
random fraction for something, there’s a sister block to random
integer called random fraction that doesn’t need a high and low
value it generates a random number between 0 and 1.

2. Taking it further

We’ve provided some dice-face images on the website so that

instead of just a label showing the number, you can display a
random dice face after each shake. Here are the essential parts of the
task:
1. Load all six dice images using the Upload New button in the
Media pane at the bottom of Designer. (You need to do this one
image at a time.)
2. Delete DiceLabel, and add an Image called DiceImage. Set its
image property to [Link] (a dice with one spot).
The interface changes are done. There are two ways to tackle the
programming of the blocks. One is straightforward but long winded;
the second isn’t as obvious but is efficient. Programmers find this
kind of thing in lots of situations: they’re always searching for an
efficient way of doing things because it saves them time, makes code
easier to maintain, and usually makes apps run faster. Let’s look at
the two options.

The Long Way Around: Using If ... Then

In this block, you use a variable called DiceNumberRoll. When the
phone is shaken, you set DiceNumberRoll to be a random number
(1–6).
To decide which image to show, you have six if decisions (three of
which are shown here). These show a different DiceImage if their
number is chosen. This is straightforward, but look at all those if
statements. The app will process all six of these, even if the first one
is true. The only thing that changes each time is the
DiceNumberRoll test and the picture that is displayed. These two
things match (if the random number is 2, you want Dice_2.png to
appear), so wouldn’t it make sense to say, “Pick a number from 1 to
6” and then load the image with that number in its filename? That’s
exactly what you’ll do in your super-duper efficient version of the
app.

The Shortcut: Concatenating an Image Filename

Concatenating means joining things together (usually text), just like

the join block you used earlier.
In this case, you’re going to set [Link] to be a filename
that joins (concatenates) the text “dice_”, then a random number
from 1 to 6, and finally “.png”. Put them all together, and you have
an efficient way to display a random dice image whenever the phone
is shaken.

Of course, it doesn’t have to be dice images you display, and you

aren’t limited to six—as long as your image filenames all had the
same format and contained a unique sequential number, you could
have hundreds of images displayed at random this way. Imagine if
you had to make hundreds of if blocks!

The Dice Roll app is one of the simplest in the book. The next app is
the most complex you’ve made so far. It brings together everything
you’ve learned about variables and random numbers, plus we’ll add
some new ideas like using procedures that make your code more
efficient and explore the idea of validation. You’ll also learn how to
watch variables while the app is running to make sure they’re doing
what you expected.

SECRET SMS SENDER APP

PURPOSE OFTHIS APP

This app takes a message you type and turns it into a secret code.
The app lets you send the coded message by SMS text to one or
more of your agents (or friends) from your phone’s Contacts list.
Your fellow agents can decode the message by copying and pasting
it into their own version of the app.

APP RATING
ASSETS YOU’LL NEED
Image: [Link]. Sounds: coding_completed.mp3 and
message_sent.mp3.
Warning!
Before you start this app, you need to know that sending messages
may cost money and this app can send lots of messages all at once.
Check with whoever pays your mobile phone bill to be sure this is
OK. You can test the app without sending messages; we’ll tell you
how as you work through it.
1. Setting up the screen

Here’s the screen layout:

Depending on your phone, you may find that the list of agents the
user selects overlaps the image of the key (on the screen
background). You can improve this by putting AgentsLabel into a
VerticalArrangement so it’s contained in a column on the left of
the screen.

2. Coding the blocks: encrypting the message

Here’s an encrypted message: suineg a era uoy. Can you tell what it
says? Chances are you can crack this code very quickly (if not, we’ll
explain how to decode it in a minute). But the code is probably
sufficient to stop someone from glancing over your shoulder and
reading the message, and later we’ll make some suggestions about
how you can strengthen the encryption.
The science of secret codes is called cryptography. This word comes
from parts of two ancient Greek words: crypt, meaning hidden; and
graph, meaning writing. Turning a message into a code is called
encryption (which rhymes with “description”).

This app is for fun, and the code can be easily cracked; but real
computer programmers are paid to figure out how to send secret
messages that can’t be read even if they’re intercepted. This isn’t
just for secret agents—whenever you buy something online, you
want to be sure that only you and the online shop have your personal
payment details.

An algorithm that encrypts a message has a special name: a cipher

(pronounced “syfer”). Our example cipher is incredibly simple if
you haven’t guessed it yet, we just reversed the message.
That’s a simple idea for a human to understand, but how do you
explain it to a computer? Try explaining the process step by step to a
friend now. You could even write it down.

Did you come up with something like this?

1. Start at the last letter of the message.
2. Repeat the following for as many letters as are in the message:
1. Write down the current letter.
2. Move one letter towards the start of the message.

Look back at the three types of loops that we showed you earlier in
the chapter. Which kind makes the most sense here? Before you run
the loop, you do know how many times it should run: the same as
the number of characters in the message. App Inventor can tell you
the number of letters in any text string using a block called length in
the text section. So, you can use a for range loop. Step 1 says you
start at the end of the message and work backward, so you need the
for range start value to be the length of the message. You’re
working back to the first letter, so the end value needs to be 1 and
because you’re working backward, you set the step value to -1, like
this:
The do part of the loop needs to perform step 2a: “Write down the
current letter.” In programming terms, you set up a variable called
CodedMessage and keep joining the current letter to it as you run
through the loop. The segment block lets you extract any part of a
text string. In this case, you want to extract a single letter at the
current position or loop counter. Once the loop is complete, you’ll
change the MsgTextBox to show the new encrypted message, and
you’ll also play a sound so the user notices that the coding has
finished. Here are the final blocks:

Try it now. A single button click encrypts the message; clicking the
button a second time decrypts the message. Next you need to figure
out how to send the message to a list of contacts.

3. Adding agent contacts

The idea here is that you can add a list of agents to receive the
message. The user can keep clicking and adding agents until they’re
happy. You’ll put the names and numbers of all the selected agents
in two lists called AgentNames and AgentTels. You’ll also display
their names onscreen so the user can be sure they’re sending the
coded message to the right people. You set up the two lists just like
any other variables (in this case, you want them to be empty lists).
To choose an agent, you use your telephone picker (called
AddTelPicker), processing the agent’s details using the
AfterPicking event. Add two new list blocks: one for AgentNames
and one for AgentTels. Finally, you want to output the names of all
the agents chosen so far into the AgentsLabel. Here are the
completed blocks to select an agent:

You’re using a quick option here—outputting all the AgentNames

elements into the label, as you did in the ice cream example earlier.
This means the names appear one after another with no breaks in
between. You could make this better by having a for each loop
output each name on a separate line (using \n).
4. Deleting agent contacts

Letting the user delete an agent from the lists is a two-step process.
First you need to fill the DeletePicker list picker with all the agents
the user has selected so far, to give them a choice of whom to delete.
Then, when they pick an agent, you need to delete that agent’s name
from AgentNames and their telephone number from AgentTels.

When the user clicks a list picker, they trigger a BeforePicking

event. At that point, you can set the list picker’s elements. Even
though the list picker is empty when the user clicks it, the app
immediately fills it. Because you already have all the chosen agents’
names in the AgentNames list, you just need to set the DeletePicker
Elements property to the AgentNames list. A diagram of this
process might help:

The blocks to do this are actually simpler than the explanation!

Here’s the block to fill (or populate) the DeletePicker list picker:

Then, to delete the agent from the two lists, you can use the
SelectionIndex of the agent the user chose from the onscreen list.
You also need to update the onscreen label so the user knows the
agent is no longer selected:

5. Sending the message

To send an SMS text message, you’ll use a new Texting component

that includes blocks to send a text messages to a phone number.
You’ll call this block once for each agent in the AgentTels list,
sending the same coded message to each agent.
REMINDER!

Before you start this section, remember that sending messages may
cost money and this app can send lots of messages all at once!
Check with whoever pays your mobile phone bill to be sure this is
OK. You can test the app by leaving out the texting block call
[Link] until you’re sure the rest of the app is
working perfectly.

1. Here’s the basic idea broken into steps. When the user clicks
SendButton ...
2. Set the text message to be whatever the coded message says (we
have this stored already in the variable CodedMessage).
3. For each agent in the AgentTels list:
a) Set the texting phone number to that agent’s number.
b) Send the SMS text message.
4. Once all the SMS texts have been sent, play a confirmation sound
and display a notification message.

Turning these ideas into blocks gives you the following:

This is a complex app. You could make it simpler, especially if you

only wanted to send a message to a single agent at a time. And it’s
by no means perfect we’ve given you some suggestions for
improvement but we hope you can see how mastering lists and loops
gives you a great deal of programming power to create apps that do
things humans would take a long time to do manually.
WEB-ENABLED APPS (ACTIVITY STARTER/ WEB VIEWER)

You’ve already seen that App Inventor lets you connect with other
people using text messages. In this chapter, we’ll look at other tools
that let you send and receive information, this time using the internet.
You’ll see how you can show pages from websites, read information
from online sources, and store data in the cloud using the WebDB
component.

You’ll need a data connection to use these features on your phone so

that means either a Wi-Fi connection or a phone network data
connection. Most people pay (or have a monthly data allowance) for
their phone’s data connection, so we suggest using Wi-Fi while
you’re playing with these features and if you’re using a data
connection, please check with whoever pays the phone bill first.
We’ve tried to use examples of websites and services that will be
around for a while, but it’s always possible that a service will change
or disappear. If that happens, let us know on the Manning online
forum for this book.

You’ll start by looking at how each of the components works with

some simple examples. We’ll also make suggestions about how you
could use these features in the apps you’ve already created.

Browsing the web

App Inventor offers two options for viewing the World Wide Web:

1. WebViewer component—This option displays web pages in your

app. The WebViewer uses a mini browser that is part of App
Inventor. It doesn’t have lots of functions like you might be used to
in Chrome, Firefox, Safari, or any of the many other browsers you
can use. But it’s fine if all you want to do is browse and navigate
some web pages.

2. ActivityStarter component—This option jumps out of your app

and displays web pages in a web browser installed on your phone.
Using ActivityStarter allows the user to view the web page in
whichever app they choose, so they get all the functions they’re used
to.
It’s also possible for you to provide no choice of app and to specify
exactly which app should be used but if the user doesn’t have the
app on their phone, it may cause an error (so we don’t recommend
doing that). The user returns to your app by quitting the web browser
app.

Browsing the web

App Inventor offers two options for viewing the World Wide Web:
1. WebViewer component—This option displays web pages in
your app. The WebViewer uses a mini browser that is part of
App Inventor. It doesn’t have lots of functions like you might be
used to in Chrome, Firefox, Safari, or any of the many other
browsers you can use. But it’s fine if all you want to do is browse
and navigate some web pages.
2. ActivityStarter component—This option jumps out of your
app and displays web pages in a web browser installed on your
phone. Using ActivityStarter allows the user to view the web
page in whichever app they choose, so they get all the functions
they’re used to. It’s also possible for you to provide no choice of
app and to specify exactly which app should be used but if the
user doesn’t have the app on their phone, it may cause an error
(so we don’t recommend doing that). The user returns to your
app by quitting the web browser app.

The advantage of the WebViewer component is that it’s simple and

your app stays in control of the screen the user isn’t going to get lost
in other apps that are open. The advantage of the ActivityStarter
component is that the user can choose the web browser app that
they’re most used to and it will have more features than the
WebViewer, such as the ability to bookmark a web page.

Let’s take a look at the two options in practice.

Using WebViewer
To set up the components for a WebViewer test, follow these steps:
1. Set up a new app, and call it TestWebViewer.
2. Set [Link] to “WebViewer Example” and
[Link] to Landscape.
3. Add a HorizontalArrangement with five buttons, as shown:

4. Add a WebViewer component from the Palette’s User Interface

section.
5. Set WebViewer1’s properties as shown. In addition, set
WebViewer1’s Width and Height properties to Automatic.
You’ve finished the basic user interface for a web browser. You
could improve it by, for example, including a text box where the
user could type their own web address (URL). But it’s unlikely that
a user would choose to use the App Inventor WebViewer for casual
browsing; it’s better suited to providing a specific link to a web page
you direct the user to. For example, you could
 Provide additional information for a game you’ve made, such as
help, hints, and tips
 Link to the Google Play Store, where you might have other
games for sale
 Set up an online survey to find out what users think of an app
(for example, using Google Docs or SurveyMonkey)

When a URLends in a filename like /[Link], that file is

retrieved. If the address ends in a forward slash (/), the app looks for
a file called [Link] in that pathname.
If you preview the app, you’ll see the web page for this book appear
on your screen and you can navigate between pages by clicking
hyperlinks. But the buttons you made don’t do anything yet. Add
the code blocks for the buttons as shown next. As you can see, the
WebViewer includes ready-made functions for browsing, which
makes it easy to code the navigation buttons:
Here’s how the app looks on a phone. You can pinch with two
fingers to zoom in and out of the web page:

There are a couple of limitations to the browsing experience:

 The buttons scroll with the web page so if you want to use them,
you have to scroll back to the top of the screen.
 If the user presses the phone’s Back button (rather than the Back
button you’ve created), the app quits.

It’s also possible to change the current web page in the blocks using
the GoToUrl block. In the example, we’ve set the web page to the
App Inventor home page by hard-coding the web address into a text
block. You could just as easily include a text box in the app as an
address bar and use whatever the user types into it as the input for
[Link]. Now let’s look at the more flexible
ActivityStarter component.

Using ActivityStarter
To set up the components for an ActivityStarter test, follow these
steps:
1. Set up a new app, and call it TestActivityStarter.
2. Set [Link] to “ActivityStarter Web Browser Example”.
3. Add a Button, an ActivityStarter (from the Connectivity Palette
group), and a Notifier (from the User Interface Palette group).
4. Set the ActivityStarter properties as shown next.

To activate the ActivityStarter, you use the block call

[Link]. You could do that from the
[Link] event, like this.
But you’re about to take the user out of your app and into their
browser, so you add the Notifier to provide a warning and tell them
how to return to your app once they’re finished. Here’s how the
sequence will work:

From this sequence, you can work out that the [Link] event
opens the Notifier, and then the [Link] event
triggers the ActivityStarter. Here are the blocks:

Your app should now launch a web browser successfully give it a try.
ActivityStarter is versatile and can launch other apps such as the
camera, Google Maps, and even other apps you’ve written. Also, if
you enter a URLto a specific resource related to an app, Android will
present more options in the app list. For example, if you have the
YouTube app installed and you use a YouTube URL, then you’ll
have the option to view the video in your browser or YouTube app.
There’s full documentation about how to do this on MIT’s App
Inventor website here: [Link]

Using data from the web

WebViewer and ActivityStarter can help you access whole web

pages, but what if you just want to extract some data from the web to
use in your app? Maybe you want to know the temperature forecast
at a location for a fashion app that gives you options for what to
wear that day. Lots of web services out there provide this kind of
data in machine-readable form that an app can use, as well as in
human-readable web pages. For example, lots of weather sites
provide web pages of weather forecasts and maps but if you know
how, you can access the data directly and use it in your own apps.

API keys

Most public APIs ask you to apply for a key to use the API—you
provide an email and some other details, and you get a key (which is
actually a code) sent back. You don’t have to do this for web-
page browsing so what’s the difference? When you request a web
page, it’s sent to your machine, and then you spend some time
reading it before you ask for the next page. This doesn’t put much
strain on the web servers (the computers that hold the web pages).
With APIs, you’re using a computer (smartphone) to request data—
and computers can make lots of requests quickly. If your computer
got stuck in a loop and made too many requests too quickly, the web
server might crash. An API key limits the number of requests any
one computer can make in a certain time, so you can’t crash the
servers.
CALCULATOR APP

This is a mobile application that enables you perform most

mathematical tasks, just as the name implies. It may not exactly look
like the scientific calculator you’re used to, interface-wise but it
surely solves mathematical problems correctly. Getting to upgrade
the app to perform desired/ specific function may be one of your
tasks in this project, so brace up for it.

In application development, designing the interface properly to be

user friendly should be an utmost priority. This gives the user a
sense of understanding and ease even before getting to use the
application. So, we are going to be designing our calculator interface.

Calculator application
Screen1 properties Title: Calculator app
Background color:
Black
Component What do I name it? What does it do? What property do I set?
Horizontal Calculator screen The space that Shows |Height: 80px
arrangement the expressions you Width: fill parent
input Align horizontal: center

label Expression label Displays your imputed Font bold: yes

numbers Fontsize:50px
Text: empty

Horizontal Horizontal Space that Displays the |Height: 80px

arrangement arrangement answer Width: Fill parent
Align horizontal: center

label Displays the answer Font bold: yes

Answer label Font size: 40px
Text: empty

Align horizontal:center
Align vertical: center
Horizontal Horizontal Contains the buttons |Height: 90px
arrangement arrangement 1,2,3 and divide Width: Fill parent
Color: None
Button Button1 The number of the | Height: Fill parent
 button Width: 70px
Text color: White
Text:1
Font bold: yes
Fontsize:40px

Height: Fill parent

Width: 70px
Button Button2 Text color: White
Text:2
Font bold: yes
Fontsize:40px

Button Button 3 Height: Fill parent

Width: 70px
Text color: White
Text:3
Font bold: yes
Fontsize:40px

Button Divide_button Height: Fill parent

Width: 70px
Text color: White
Text: ÷
Font bold: yes
Fontsize:40px

Horizontal Horizontal Contains buttons 4,5,6 Align horizontal:center

arrangement arrangement Align vertical: center
Height: 90px
Width: Fill parent
Color: None

Button | Height: Fill parent

Button4 Width: 70px
Text color: White
Text:4
Font bold: yes
Fontsize:40px

Button Height: Fill parent

Button 5 Width: 70px
Text color: White
Text:5
Font bold: yes
Fontsize:40px

Button Height: Fill parent

Button 6 Width: 70px
Text color: White
Text:6
 Font bold: yes
Fontsize:40px

Button Multiplication button | Height: Fill parent

Width: 70px
Text color: White
Text:x
Font bold: yes
Fontsize:40px

Horizontal Horizontal Contains Button 7,8,9 | Align horizontal:center

arrangement arrangement and minus Button Align vertical: center
Height: 90px
Width: Fill parent
Color: None

Button Height: Fill parent

Button7 Width: 70px
Text color: White
Text:7
Font bold: yes
Fontsize:40px

Button Height: Fill parent

Button 8 Width: 70px
Text color: White
Text:8
Font bold: yes
Fontsize:40px

Button Height: Fill parent

Button 9 Width: 70px
Text color: White
Text:9
Font bold: yes
Fontsize:40px

Button Height: Fill parent

Minus_button Width: 70px
Text color: White
Text:-
Font bold: yes
Fontsize:40px

Horizontal Horizontal Contains Button 0, Align horizontal:center

arrangement arrangement clear, decimal and Align vertical: center
addition button. Height: 90px
Width: Fill parent
Color: None
 Height: Fill parent
Buttons Width: 70px
Button 10 Text color: White
Text:0
Font bold: yes
Fontsize:40px

Height: Fill parent

Buttons Width: 70px
Clear_button Text color: White
Text:C
Font bold: yes
Fontsize:40px

Buttons Height: Fill parent

Decimal_button Width: 70px
Text color: White
Text: .
Font bold: yes
Fontsize:40px

Button Height: Fill parent

Addition button Width: 70px
Text color: White
Text:+
Font bold: yes
Fontsize:40px

Horizontal Horizontal Contains Button Align horizontal:center

arrangement arrangement 4 0,equal to Button Align vertical: center
Height: 90px
Width: Fill parent
Color: None

Buttons equalsbutton Height: Fill parent

Width: 70px
Text color: White
Text:=
Font bold: yes
Fontsize:40px

After building the front view, this is what your app should look like.
1. Programming the blocks

Designing the interface is one thing, getting to make the buttons

work is another task. So for us to make our calculator app carry out
its full functionality, we must add codes to almost every component
of the app.
Firstly, we start with the buttons. Our number buttons should be able
to display a number or sets of numbers on our text label when
clicked.
In order for our app to hold up two different sets of numbers and call
them when need be, we will need to store this numbers in a variable.

First variable would be named “First_number”, as it hold the first

sets of numbers inputted on the calculator, and the second Variable
would be named “Second_number” because it hold the second sets
of numbers inputted. Both variables will have an empty text string.
Finally, we are going create a third variable named “Operator”
which is going be having an empty text string but its function is to
hold the arithmetic/ operator signs (plus, minus, divide etc)
Creating a procedure
From our previous projects (Splat the rat) we have an idea of what a
procedure is but this time we are going to be creating a procedure with
parameter. Procedure with parameters is creating our own function with
its input. We are creating a procedure to be called during the execution of
our conditional statement.
Drag the procedure block and create a procedure called
Mathimatical_expressions. Set the text of the label expression to the
comination of first_number, second_number and the operator
variable using the join block.

Adding the keys to the screen.

When button1 is clicked, add an If Else statement. We will be comparing

if our global operator is an addition, multiplication etc. and we have to
check if it has a value or not and we will also check if the key pressed is
the first_number or second_number. We will compare the texts of the
global operator if it is equal to an empty text and if it is empty it means
the number pressed will be the first key.
Set the global first number to 1. Else the key pressed will be the
second_number. Join them to the number 1, then call the
Mathematical_expression ie procedure.
Repeat this for all the numbers.
Adding the decimal point

Make a global variable for the decimal point and name it decimal_point
Drag and drop the decimal button, if decimal button is clicked bring in
an if then statement. If global decimal_point is true then set
decimal_point to true. Drag and drop an if the else statement. If global
first_numer is equal to an empty string then set global first number to
join global first number else join global second number to global
second number. call the matimatical expression

Division button
When the division button is clicked, set the operator to the division
symbol, call the procedure and set global decimal_point to false. Repeat
the multiplication, addition, and subtraction block
Equal Button
When the equal button is clicked, drag and drop your If then block. We
will compare if global operator is equal to addition then set the answer
label text to the first number + the second number. Drag and drop else if
for the minus, addition, division and multiplication. If our operator is
subtraction, set the answer label to first_number – second_number, If
our operator is addition, set the answer label to first_number +
second_number, If our operator is multiplication, set the answer label to
first_number x second_number, If our operator is 0, set the answer label
to invalid operation. Else set the answer label to global first_number
divided by global second number.
Set global first_number to answer text, set global operator to an empty
text, set global second number to an empty text and set the decimal
points to False.
Clear Button
When clear button is clicked,
Set global first_number to an empty text
set global operator to an empty text
set global second_number to an empty text
call the mathematical expression I.e the procedure
set answer label to an empty text
TO-DO LIST APP

Keeping records of our daily activities or tasks may be difficult.

Most times we tend to forget or lose track of the activities we have
for the day, or week. So it is best to keep record of our schedule,
having to write down our schedule can be risky because we may
misplace or tear whatsoever it’s written on.

The To-do list app helps us keep tract of our activities and also
saves them so we don’t have to lose them when needed. It is more
effective, efficient and reliable than the hard copy notepad.
To-Do List
Screen1 properties Title: To-Do List
Background color:
Grey
Component What do I name it? What does it do? What property do I set?
Label Enter your name Gives information |Height: Automatic
Width: Fill parent
Text: Enter Your To Do
List Item
Textbox To-do textbox |Height:Automatic
Width: Fill parent
Color: White
Button SubmitButton Used to submit the list |Height:Automatic
Width: Automatic
Color: Black
Text: SUBMIT
Webviewer Webviewer Accesses the internet |Height: Automatic
Width: Automatic
Listview Listview Views list |Height: Fill parent
Width: Fill parent
Checkbox Checkbox |Height:Automatic
Width: Fill parent
TidyDB TinyDB Stores data |Height: 15%
Width: Fill parent
Notifier Notifier Used to display Color: Black
information Length: Long
Creating a list

While taking note of our activities, we often do this in a sequential

format which involves us making a list. For us to have a viable
working application, we should be able to;
1. Create an empty list
2. Add items to the list
3. Edit or delete items from the list
4. Save the written items for a later use
5. Retrieve this data when needed.

A list can be used to save data just like our variables and TinyDB
component but what differentiates the list from the tinyDB
component and Variable is that the list is a temporary storage site,
which means it can’t hold data for long while the TinyDB and
Variable is a permanent storage site, which means it can hold more
data for a longer period of time.

The TinyDB component saves and retrieves items when that has
been save. We call this feature the Getters and Setters of the
TinyDB. When saving a file to the TinyDB component, the item has
to be tagged, more like giving it a name for easy recovery or
accessibility.

When Screen 1 initializes, we want to retrieve the items in our

TinyDB if there is any data saved to it then save them inside our list,
else, we create a new empty list. When the items have been retrieved
(if any was saved previously), we want those items to be placed in
our ListViewer so it displays it for us.
Working on the Submit button
The submit button as the name implies, is used use to upload the
users list to the storage site of the app (TinyDB).
Some users may want to click on the submit button without actually
typing in a list to maybe see what would happen or see if it’s there is
a fault in our codes but the good news is we are always steps ahead
of them.

When the Submit Button is clicked on, it should check if the

TextBox is empty. In other to achieve this, we are going to be using
our if, then, else block and our logic block. These blocks checks if
the TextBox is empty and if yes, then a Notifier should tell the
“smart” user to add a to-do list item else, the Submit Button should
take what the user has typed in and store it inside our list. When this
is done, we will take all the written/ inputted to-do list and save it
properly into our TinyDB and then clear up the TextBox.

Remember I told you that our list can serve as a storage site but only
temporarily, if we want to save up data permanently then we can use
the TinyDB.

Saving out data is one thing, retrieving them and displaying them in
an orderly fashion is another thing. For our to-do list items to be
displayed properly, we are going to use our Listview. The Listview
takes all the items in the list (both the previously saved items and the
just added items), arranges and displays them on our Display Label
so the user can see.

Finally, we will be clearing the text our TextBox so the user can
input a new item.
Confirm deleting an item
In order to delete an item from our list, the CheckBox has to be
checked/ mark indicating that you want to delete an item. One could
mistakenly click on the CheckBox without having the intentions of
deleting any item, so to seek confirmation that the user wants to
delete an item we will have our Notifier ask the user. If the user feel
they don’t want to delete the item again, the app should provide an
option to enable them leave safely without tampering on any save
item. Otherwise, if the user confirm deleting the item by clicking on
YES, then it is taken away.
Know that the Notifiers only pops when the CheckBox has been
checked and we are deleting the item from our Listview.
Deleting an item
When a user clicks an item to be deleted, an event is raised from the
Notifier and the users choice (YES or cancel) is going to be saved
to the notifier in the choice parameter. After picking, if the user’s
choice is YES, we can specify which item needs to be deleted from
the index number on the list. An index is the position of an item in a
list. When the user has deleted the item, our TinyDB should update
the list with the remaining item not deleted and arrange them orderly
with their index number.