Lesson One - 2020

Part 1 = Planning and drawing. 

This exercise shows how an electronic device uses memory. A piece of memory is like a hole where numbers or letters go. Each "Variable" is a piece of memory. 

We have two variables, and we want to put some written information into each variable. 

Variable_One = "wassup"

Variable_Two = "litigimate"
Then , importantly we want to swap the Variables so : 

Variable_One = "litigimate"

Variable_Two = "wassup"

On a piece of paper, draw two squares to represent variables, and try to swap their contents. 

You will need a spare variable.  

The spare variable holds first variable's contents . then first variable is being filled with the second  variable's contents. Then the spare variable's contents are emptied into the second variable. 

So now we understand how it works on paper, we can make an app. 

Step One 

On the designer screen, you will see the phone's appearance. Because you want to add some components, the components sit within a 'container.'  the first thing to add to the phone is a Vertical /Horizontal Container. 

Step Two

To the Vertical Container you can add the components. A component is something that is used within the App. Each component has it's 'attributes' and it's 'actions'. 

Add the 3 Labels, add 2 Textboxes and add 2 buttons.
The Labels will display the machine's memories. 

The textboxes will let you type in stuff to save to the machine memory

The buttons will let you control the machine. to swap or save. 

Step Three

Click on the "Blocks" button to see the code page. Click on "Variables" then click and drag a new "Initialize variable" on to the floor. 

Do that three times.
"Initialize" means that it happens at the very start of the Program. 

A Computer program is like a time-line, it has a start   , a story of actions, and then an end.  

• At the start, when the app is opened, things are initialized. 
• In the middle processes happen
• At the end is when the app is closed. 

When you initialize a variable, the machine allocates room for that variable, and so you must put in it some 'value' (even empty value 0.)

Step Four

Each visible Component has some "text" that we read when it's on the screen. 

Change the buttons' "text" so that we know what the buttons should do. 

Step Five

You can even put a "hint" in the textbox so that before you touch the textbox it will tell you what should be there, and then it will disappear when you touch it , ready to type. 

Step Six 

Now that the displayed screen is perfect and colourful. Click on the Blocks button to see the code page. 

To Code, you have to step through your programme's timeline. First is the Initialization, so initilize three variables . change the variables name to "variable_one" and "variable_two" and "spare."

Then click on the "text" item, and get the " " text component piece and fix it to the initialize variable piece. 

Step Seven. 

After all the initializations are done, we are on to the actions of the app. So click on a specific Button, that is in the app, and get the Click yellow component onto the floor. (Yellow block means  it's 'provoked' into action by the human user clicking their phones.)

Step Eight

Remember the purpose of the first button is when you click on it, it should save what you typed in, into the two variables. textbox 1 to variable 1, and textbox 2 to variable 2. 

So with that purpose in mind, find the "Set Variable " component piece and put in in the Button Click piece. 

Step Nine

Now, The textbox component, will have it's "text" in a special "TextBox1"::"Text" piece, So find that peice, so you can join it to the Set variable piece.
Remember in App Inventor, "Set" means "to make equal to" or 'copy into. ' "Set" means to "save". 

Step Ten

Remember the purpose of the labels is to display to the user, what the variables are. So when the variables change, we want the app to change the labels. 

Find the Label, then find it's "Set Text" receiving piece. 

Step Eleven

 Now we need the labels "set text" peice to recieve the variable's "get" piece's information.
We can see the Set peice is a inner gap, and the Get piece is a outer puzzle peice.  The two puzzle peices fit together, One piece recieves (sets), and One piece gives (gets).

It is necessary to remember there is a metal memory chip in your phone, and these puzzle pieces merely let you access that memory. 

Well Done. Button One that saves your input is complete. 

Step Twelve

 Now remember the purpose of button 2. It swaps the two variable's data (contents) around. If it swaps data around the variables, then we want to see what happened by looking at the display labels. So since we just did the label set peices with button 1, and we will have to do it again with button 2, we can make a "procedure"  to contain the display bits of code. So this is called  a 'function'  in computer programming. 

A function is also known as a procedure, and it is coloured purple. 

A function or procedure can return a variable, or it can simply just do something.
  

Step Thirteen. 

Get a "Do" procedure block  and change the name to something unique (unique within the program).  

Step Fourteen

Put all the Set Label pieces from Button one's Click block (that does the displaying) into the procedure.  

 

Step Fifteen

Then click on "procedures" and find the  procedure with the name you just made, and put it in Button One's Click block.

Well done !! Ka Mahi! Button one is ready to rock, now for button 2.   

Step Sixteen

Remember the button two is supposed to swap the variables, and from the paper plan, we need to first save a variable's contents into a spare slot. 

Step Seventeen 

To fetch a variable's contents we use the variable's 'get' piece and select the correct names. 

 

Step Eighteen. 

To 'assign' some data (letters or numbers) to a variable, we need the variable's "set" piece. 

(https://en.wikipedia.org/wiki/Operators_in_C_and_C%2B%2B) 

We need to correctly preserve the data contained with in the variables. If we do it wrongly, the data is lost forever. 

Choose wisely, live well (as the infomercial suggested.)

Step Nineteen

Now that the swap is complete, we just need to add the display procedure's 'call' purple piece, so that we can see the variables which each press of either of both buttons. 

Viola, your app, is ready to test and see if it works . 

if it doesn't work, then check the codes to see what is wrong. The act of checking the errors is called "debugging" and is the main time-consuming part of programming machines. 

Have fun and thank you God for blessing