Build something awesome. Build your first mobile app. Anyone can do it. All you need to know is how to use drag and drop coding blocks. We’ll show you how in this quick tutorial. You can choose to build either an iOS or Android app. This is a fun and engaging digital solution project for Year 5-6 students. 

There are 3 steps:

  1. Build the app
  2. Download the Thunkable app
  3. Download the app you built

Step 1: Build the app

We’re going to build this app called “Pat the Dog”. When you stroke the image of the puppy with your finger on the mobile phone screen, the app will play a woof sound and vibrate.

Let’s build your first mobile app, called “Pat the dog”. We’ll be using the website called Thunkable, https://thunkable.com/. You will be required to sign up using a Gmail account to access the website. This may not be possible on state school computers.

 

Select either iOS or Android

This is what the project page in Thunkable looks like:

 

Quick Article: Visual-based vs. Text-based programming languages

 

There are two display screens in Thunkable: Designer and Blocks. You can switch between the two using the buttons at the top left of the page. We will start with the Designer screen.

Designer

On the designer screen we can see what the user will see on the app.

On the screen we will add one button, one label and one sound component. The image of the dog acts as a button that is pressed. When we press this ‘button’ it plays a woof sound and vibrates the phone.

On the left column, there are all the components we can add to the app. When you click on the heading, it will open up with all the options.

Click on the “User Interface” tab, it will open and show all these elements. We will drag and drop ‘button’ & ‘label’ into the app screen.

When you click on the “Media” tab, it will open and show all these elements. We will drag and drop ‘sound’ into the app screen.

 

When we add ‘button’, ‘label’ and ‘sound’ into the app screen, the Components column on the right side of the screen will update to show this.

We will make a few changes to the three components:

  • Label: Change the text to what you would like it to say on the app. We will change ours to “Pat the puppy”
  • Button: Upload an image for the button, we will upload our puppy image.
  • Sound source: Upload sound file, we will upload a ‘woof’ sound file.

Label text updated to “Pat the puppy”

Button image uploaded with puppy image

Upload sound file to sound source

 

Now we will work on the other Thunkable screen: blocks. Click on the ‘Blocks’ button on the top left of the screen.

Blocks

We use 4 coding blocks. You can find coding blocks stored in various block categories in the column on the left. This code says that when we click on the button, i.e. the image of the puppy, it will play the sound file and vibrate the phone for 500 milliseconds (0.5 seconds).

Block categories located on the left of the screen: you can find all the coding blocks here

 

The brown block is a control block. It identifies when the code needs to be executed. The code will be executed, i.e. run, when the button is clicked.

We use 2 sound blocks.

This block plays the sound file that we uploaded to the sound source.

This block vibrates the phone. We can also specify for how many milliseconds the phone will vibrate.

This is a maths block. We can use it to type a number and then attach it to the vibrate block to define how many milliseconds the phone will vibrate for.

 

This is what the finished code looks like.

Step 2: Download the Thunkable app

Get Thunkable app to be able to download student project

 

  Google Play https://play.google.com/store/apps/details?id=com.thunkable.appinventor.aicompanion3&hl=en
  App Store https://itunes.apple.com/us/app/thunkable-live/id1223262700?mt=8

 

When you open the Thunkable app, it looks like this

Click on the “Scan QR Code” button in the Thunkable app to download the app that you built. Further instructions follow in Step 3 below.

Step 3: Download the app you built

Now that you have downloaded the Thunkable app onto your mobile phone and you have built your first mobile app project in the Thunkable website, you can download the app you built onto your phone.

To download the student app project:

  1. On Thunkable website go to: Test > Thunkable Live

  1. Scan QR code in Thunkable app to download the student app project

Now you can see the app you built on your mobile phone. You can show your friends and family. Tell your friends, “You too can build your first mobile app.”