Monday 25 April 2016

Android Development for Everyday People - Working With A Database

Welcome to a new week. Last week we started work on MovieMagic2016 mobile application to view the list of movies for the year 2016.

This application is intended to be a sample so we are using only 5 movies. You can extend it as you wish.
Last week, I mentioned that in App Inventor the way to transfer data from one screen to another is to use a database.

This week we will be integrating a database into our application. To get started open the project in your workspace and let’s get started.

Databases

A database is a means of storing information. Think of it like a tank where you pour water into. Once you are done, all you need to do is run the tap to get the water from it.

In application development, database systems like MySQL, Oracle and Microsoft SQL Server are used to create a database.

In App Inventor, the ways by which we implement databases include: TinyDB, TinyWebDB and more recently Firebase.

For our purposes, we shall be using TinyDB. TinyDB is used to create a database that is local to your application.

Using TinyDB

To use a database in your application, go to the Paletter area and click on Storage. Drag out the TinyDB component to Screen1. It will now appear in your Components list. Do the same for Screen2.

We add a TinyDB component to both screens as this is the only way to transfer data between 2 screens. Data in TinyDB is transferred using tags.

Tags are a key value pair that allow us store a piece of information if we know the name we assign to it.
For our application, we want to assign the name of our selection to the text of the Label in Screen2 and use that as a basis for displaying the picture of the movie on the Image component in Screen2.

Now that our TinyDB component is part of both Screen1 and Screen2, we can now create out tags.

Creating Tags

Tags are used to identify the data that we have stored in TinyDB. To understand this concept think of TinyDB tags like endpoints of a bridge.

The tags help you match the endpoints of a bridge to one another. Once a bridge is formed between one screen and another, you can pass data between them.

Switch to the Blocks Editor of Screen1 and click on the TinyDB component. Drag out the StoreValue block which is shown below:
Duplicate the above block or drag out another one. We are going to create 2 Tags and they are:
  1. Index
  2. Selection

For our list component, the Index tag gives us the position of the selected movie in the ListPicker. This Index tag will be used in Screen2 to select a movie image.

Our Selection tag gives us the actual name of the movie as displayed in the list.This Selection tag will be used in Screen2 to display the name of the selected movie to the user.

To create a Tag, drag an empty Text block from the Text drawer in App inventor and place it on the part of the StoreValue block labelled tag.

Our blocks should now look as shown below:
 For our values to store they are as follows: for our Index tag, we use the value of the index given to us by the ListPicker. For our Selection tag, we use the value displayed to the user which the user touched.

To get this blocks, click on the ListPicker component and find the block for the SelectionIndex place this below the Index tag. Click on the ListPicker again and find the block for Selection place this below the Selection tag. Your entire code block is shown below:
 Now place this in the AfterPicking event handler of the ListPicker. Your code should be as shown below:
 Now switch to Screen2 and go to its Block Editor. So far the only code we have here is the one to switch back to Screen1.

What we need to do now is Initialize the values from Screen1 once Screen2 loads. Then we assign those values to their respective components,

To do this, declare 2 variables. Call them Index and Selection respectively. Intialize the value of the Index to 0 using a Math block and that of Selection to an empty text block. The code for this is shown below:
Now ensure that you have done the above steps. The rest of the way is easy. Click on the TinyDB component and drag out the GetValue block which is shown below:

 This block serves to get the value stored in the Tag of the TinyDB component. Duplicate the above block or drag out another one.

Click on Screen2 and drag out the Initialize block for the Screen component. Now go to variables and drag out the Set blocks. You need 2 for the Index and Selection variable.

Place them inside the Initialize block of the Screen and join the GetValue block to their ends. Your code should look as shown below:
 Now add your Index and Selection tags. This is done by going to the Text drawer and dragging out an empty block. Type in the names of your tags in their respective blocks.

Your code will be as shown below:
 Now that you have gotten this far, all that is left is to assign our values to their respective components.
The code to do this is shown below:
 Now build your application. Test it. The expected outcome should be that whenever a movie is selected, you should see the movie name and logo on the next screen.

Copyright Infrigement

Please don’t submit this application to the Google Play Store. It will be rejected. I found this out the hard way.

Below is the reply I got when I tried to submit a similar application:

This application however shows you the personalization of mobile application development. While indeed not every application will be accepted on the Google Play Store, it should not stop you from bringing your idea to life.

Conclusion

Congratulations on passing the point of safe return. This week we are 60% done with this course. I am grateful that you are still here.

3 more topics and all that would be left for me to do would to conclude this series. Next week we will be looking at how to work with maps in App Inventor. We will be creating a simple application that lets the user view fun spots in Lagos.

By now, I expect that you should have an idea for an application that you are working on. If you haven’t started working on any application, I encourage you to start as its the only way to get a firm grasp on the work we have done so far.


Friday 15 April 2016

Android Development for Everyday People - Creating Multi-screen Applications

Welcome to a new week. This week we cross the point of safe return. All the applications we have created so far have been single screen. This week, we will be creating our first multi-screen application. The concepts from this week will be extending into next week so please pay attention as we begin.

A multi-screen application in App Inventor is an application that has more than one screen. When you have an application like this, you have to figure out a way to transfer your program flow from your current screen to a new screen.

The transfer of program flow means that your data will not be transferred from one screen to the other. The way to do this is to use a database. This we shall cover next week. For this week, we shall look at how to transfer program flow from one screen to another.

Getting Started

To start we shall be creating an application called Movie Magic 2016. Movie Magic 2016 is an application designed to allow a user view details of the movies from 2016 and below.

You already know how to do this so create a project called MovieMagic2016. Let the project load up.

Drag in an Image component, a Label and a ListPicker to Screen1. Next click on Screen1 in the Components list and set its AlignHorizontal property to center.

Now find your movie image and upload it to the server. Next set the uploaded image as the Picture for the Image component.

Next change text in the Label component to “Find all your favourite movies”. Finally, change the text in the ListPicker component to “View List of Movies”.


Your application screen should now look as shown below:


Adding a New Screen

Now that we are done with our user interface for the first screen, we need a second screen to display the image of the movie that is selected by the user.

To do this, we need to add a second screen to our application. To do this, click on the Add Screen button as shown below:


Once you click on it, it brings up the New Screen dialog box as shown below:


Click on OK. Once you do that, a new screen loads up. This screen will be where we will view the image of our selected movie. Set the AlignHorizontal property of the Screen component to Center. Also set the ScreenOrientation property to Portrait.

To keep this simple, we will make this screen display an image for the movie selected by the user. Once we get to this screen, we want to see the movie name and the image of the movie selected by the user. To make things simple, we want a way to go back to our first screen.

Our first task is to create the user interface of the second screen. To do this, we need to add a Label, an Image component and a Button component to the screen.

Our list of movies for selection are:
  1. Deadpool
  2. Star Wars: The Force Awakens
  3. Avengers Age of Ultron
  4. Terminator Geneysis
  5. Fast and Furious 7

Find images for the movies listed above and ensure that they are the same size. Ensure that you rename the images from 1 to 5 matching the movies in the list above.

Upload the images for the movies listed 1 to 5 and set the image for Deadpool as the Picture for the Image component. My images are sized 225 by 225.

Our second screen is now as shown below:


Now we can start our programming. To switch between screens, Click on the screens dropdown and select Screen1. The screens dropdown is shown below:


Once you get to the layout for Screen1, switch to the Blocks editor. Create a list called movies and assign the movies in the list above to it.

Now our list will be as shown below:

Next we have to initialize our ListPicker component to have the elements when the Screen components initializes.


Going To The Next Screen

Go to the Control drawer in the Built-in section of the palette. Find the “open another screen”  block in the Control drawer. This is shown below:

Go to the Text drawer in the Built-in section of the palette. Drag out an empty Textblock and enter Screen2. Join it to the block above. Your block is now as shown below:

Click on the ListPicker component and drag out the AfterPicking block. This event handler responds to what happens after an item is selected from the list. The final code block is shown below:



Going Back To The Previous Screen

To go back to the previous screen, you need to go to the code for the Screen2 component and repeat the process of creating a block.

The Button component will be used to back to Screen1. When you are done, your code should look as shown below:

Now test your mobile application using your setup. You will see that the Screens move between themselves.

Conclusion

This section was meant to teach you how to create multi-screen applications and in this we have succeeded. You should have a simple application that moves between screens.

In App Inventor, there is no way to transfer data from one screen to another so the movie that we have selected will not reflect on the next screen.

To transfer data from one screen to another in App Inventor, we need to use a database. We will go into this next week. See you then.