What is App Lab?

App Lab is one of the resources on code.org that introduces you to creating apps. The coding language that App Lab uses is very similar JavaScript. It is a great way to start out in mobile app development and in learning JavaScript. Most of the skills you learn here can carry over to other JavaScript programs. We will teach you everything you need to know to make your own games and apps. All you need is access to code.org.

This app will teach the basics of variables and data sets in App Lab. Within this app tutorial you will learn how to create an app to vote for a poll, in this case, different animals. We will also teach you how to customize poll options.

Step 1 – Using the Toolbox

There are three sections to your toolbox in the top left corner named Code, Design, and Data. Code will contain all the necessary code that we will need to build this app. Design will contain all of the buttons and images we will need to create the app. Data will be where we store the results of the poll.

Step 2 – Creating Buttons

While in the design area you can click and drag the button icon onto your work space. Do this four times, rearrange, and resize as wanted. Then do the same with four images. When you have an image selected, you can click the choose... button; this will allow you to upload image files. Do this and choose four images for the icons on your screen. Under the PROPERTIES you can give each button and image an original id and text.

Step 3 – Activating the Buttons

Under the EVENTS tab, you can click Insert and show code to activate a selected button. Do this for all four buttons. Under each one, put createRecord from the Data section of Code. Give it an appropriate name before writing {choice:[button’s Choice]} with the italics representing an animal in our case. Finally, add a function, showResults.

Step 4 – Create a Results Screen

Under the Design tab, you should see the screen1 drop down. Using it, create a new page. Then, under the Design tab, drag over a chart.

Step 5 – Creating the Code for the Results

Using the Functions tab of code, drag over the first block and rename it showResults. Then add a readRecords from the Data section, and fill in the first blank with the name of your table.

Step 6 – Initializing Variables

Using the var x = _; create four variables with the first blank being the names of your choices and the second black must be zero or a negative number. Create another variable with the same block named totalVotes. The second blank should be replaced with str.length after str is replaced by records.

Step 7 – The For Loop and If Conditional

Using the for loop from Control, create a variable i that is set to 0. Change the for loop to be active while i is less than totalVotes. The final blank should say i++ to increase i after each iteration. Within your for loop, us an if conditional to change the code and being active at position i in records. If that part is equivalent (==) to your vote (in our example’s part, an animal), than your variable for that choice should be incremented. Using the plus icon of the if conditional, create other conditions for the other choices and variables.

Step 8 – Showing the Results

Under the Data section of Code, move drawChart below the for loop. Change the type of chart to a pie graph. Write a label for each response within the parentheses and the value changing each time positively starting from 1: our example says {label:”Dogs”, value: 1} Congratulations! You have learned everything that you need to make your own future apps.