To-do List – MIT App Inventor Tutorial

todo app

Create a to-do list app that can help you to get all the tasks out of your head and manage them on your phone anytime.

UI Components:
Label, Horizontal Arrangement, Button, ListView, TinyDB

Pseudocode:

Blocks

Initialization

First, create a variable named items to store our list of to-do items. We are not able to add or remove item from list stored in tinyDB, hence we will perform the operation on items variable prior saving the list into tinyDB.

When the app screen initialized, we will get first get the value stored in tinyDB and assign it to our items variable. If no value exists in tinyDB, we assign it with an empty list. Then, update the ListView with value of items.

Add Item

To add an item, first we add the user’s input in the textbox to our items variable. Then, store the value to tinyDB and update the ListView with the lastest list:

Remove Individual Item

To remove the selected item, we remove the item in items based on the index of selected item in our ListView. Then, we store the items to tinyDB and update the ListView:

Remove All Items

To remove all items in list, all we need to do is to set our items to an empty list. Again, we store the empty list to tinyDB and update the ListView:

Complete Program

Enhancement

  1. Ask for confirmation prior clearing all the items

Number Guessing Game – MIT App Inventor Tutorial

The app will pick a number randomly from 1 to 100. You will need to keep guessing numbers until you find the selected number. Each time you guess, the app will tell you if your guess was too high or too low

UI Components:
label, textbox, button

Pseudocode

Blocks

Complete Program

Learn Programming with Blockly

Blockly Editor Demo

Learning how to program for younger kids is tough. They need to navigate through syntax of different language instead of focusing on the programming principles and problem-solving skill. Although there are many good learning resources and interactive learning platform, it still takes a huge amount of effort for kids to get familiar with the syntax of a text-based programming language. Kids will get frustrated and lose interest in programming.

This is where Blockly comes in; Blockly is a block-based programming language developed by Google. It uses graphical blocks to represent code concepts like variables, loops, logical expressions and more. It allows students to focus on learning the programming principals without having to worry about the syntax. Unlike the popular coding platform Scratch (which built on top of Blockly codebase), Blockly has lesser abstraction which is more closely represent text-based programming languages thus allowing students to carry forward their skill and pick up popular programming languages much easier.

How to Use Blockly?

To learn or teach programming using Blockly isn’t exactly straight forward. Even though there are many fantastic platforms that uses Blockly such as MIT App Inventor, there aren’t many that focuses on teaching programming principles.

To use Blockly on its own, one can setup the visual editor using Blockly’s open source library, and Google provides an comprehensive guide and reference for developers. However, this might not be an option for teachers or students which do not have the technical skills to setup the visual editor. Out of our own needs, we setup a visual editor with a simulated console to provide feedbacks. You can access the editor here.

Interactive Blockly Tutorial

In csplayground.io, we created an interactive Blockly Tutorial with more than 50 activities to help you learn coding with Blockly. Try our activity below or sign up a free account to use it for learning or teaching. We included a classroom management feature which allow teachers to monitor students’ progress and help them to modify their code.