QuickSort routine for your App Inventor Apps!

Sorting data is a common need in many applications. If you have thought about writing your own sorting routine, you likely came up with a scheme that picked the first data item, and then compared it to each of the other elements to find a smaller value (if sorting into ascending order) or a larger value (if sorting into descending order). Finding a match, you switch the two values in your list of data.

Gradually, as you scan the list, the smallest (or largest) value bubbles up to the front of the list. Once the whole list is scanned, you have found the smallest (or largest) value and switched it to the beginning.

Then you would start with the next data value and compare it to the remaining data values. And so on.

Great idea if you came up with this – seriously! In computer science algorithms, this is known as the “bubble sort”. It works fine – but it has one problem – as the number of items to be sorted grows, the time it takes to do the sort grows even faster.

In fact, we say that a bubble sort runs in a time proportional to n^2 (n squared). If there are 10 items to sort, this will take 10^2 or 100 time units to sort.

If there are 30 items to sort, this will take 30^2 or 900 time units to sort. Just going from 10 items to 30 items adds 800 time units to our sorting time! Ouch!

As you can see, the bubble sort is simple but it can take a long time to run!

Computer scientists have invented other ways to sort data. One of the best known has the descriptive name “QuickSort”. In many cases, it’s sorting time is on the order of n ln n (that is n times the natural logarithm of n).

If we compare that to the Bubble Sort for n=10, we get 23 time units and for n=30, we get 103 time units. As you can see, QuickSort is much faster than the Bubble Sort.

Continue reading

MIT Professor Seymour Papert, passed away 31 July 2016

MIT Professor Seymour Papert was a forward looking visionary who pioneered the adoption of computing concepts in children’s education, including the development of Logo, Mindstorms and turtle programming. His distant work back in the 1960s and 1970s lay the foundation for today’s use of MIT App Inventor in children’s education. His contributions to education and computing are greatly appreciated.

Much more about Paupert’s background may be read in the NY Times or in this essay by a colleague here.

Fewer professional coders in the future?

That is the actual future of software development: It will become so easy and second nature, that for ordinary tasks you won’t even have to think about it.

Source: Dear Google, the future is fewer people writing code | TechCrunch

Tools like MIT App Inventor, and others, are making programming so easy that it no longer requires extensive training and high levels skills to create many types of useful programs.


Writing code will become less and less necessary, making software development more accessible to everyone. This will allow people to solve new and unique problems for themselves, and true software engineers will continue to find ways to empower others through various platforms.

We used to call people who wrote programs, programmers. Later, this was change to titles like software developer, software engineer or sometimes computer engineer. Today, the media has short circuited the entire field to just “coders”, which seems like a downgrading of skills and title.

A “switch board” user interface panel for App Inventor apps

In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.

In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.


In developing this user interface, we learn two concepts:

  1. We expand on the previous post and its use of images to create custom buttons.
  2. We see how a user interface control can be stored in a list and referenced like a variable within our apps.

Source code:

The User Interface

I called my app “Mission Control” because any good mission control panel needs lots of switches!

The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.

Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.

Screenshot_20160204-140323The Designer View

Continue reading

Making “pretty” App Inventor user interface controls

In the real world, “user interfaces” look like electric light switches, push buttons or control knobs, temperature dials on ovens, volume controls on radios and so forth. We can mimic these types of controls for our touch screen Android apps. We do not have to rely on the boring desktop-like clickable button or checkboxes in the App Inventor user interface palette.

A previous tutorial showed a trick to make the color of a button vary continuously. This tutorial shows how to use our own images, instead of the boring button, together with a bit of code to bring these buttons to life.

User Interface View

Below is a sample “toggle switch”. Press the switch icon once and the toggle moves to the right; press it again and the toggle moves back to the left.



Here is a slide switch. Press the slide switch once and the switch position moves to the right and the switch illuminates in green. Press the slide switch again and the switch returns to the left.



Here is a concept for a raised momentary push button. Pressing the button changes the appearance of the button while your finger is on the button – to look like the button is pressed in.



The Designer View

Continue reading

What if your App Inventor apps had cooler user interface controls?

How about this – a panel full of toggle switches! Tap a switch to flip the switch from On to Off!

Screenshot_20160118-164605I will soon post a tutorial on creating simpler interfaces than the above, but that will be followed by a tutorial to create the above “panel of toggle switches”.

I have ideas for many interesting interface components – I do not yet know if all of them can be built in App Inventor – but we will see!

Writing Android apps in Javascript

Another way to develop apps for Android is to write apps in the Javascript program scripting language (note – Javascript is not related to Java, in spite of the similar name). By using a special platform called Cordova, it is possible to package Javascript programs into a self contained Android .apk file that runs on the Android OS.

Even better – it is possible to package your Javascript app, using Cordova, into forms that run on iOS (iPhones and iPad) and Windows Phone too!

Continue reading

Graphical programming and robotics-the tools get better and easier

MIT App Inventor is a “graphical programming language” in that we assemble programs by clicking and dragging symbols on screen, interactively, rather than writing our programs as text.

This weekend, FIRST Robotics kicks off its 2016 season. Students will design, construct, test and deploy a complex robotic system to meet the 2016 competition challenge (to be unveiled on Saturday).

The robot control system may be programmed in C++, Java, National Instrument’s LabView, RobotBuilder and/or GRIP.

Continue reading

Scanning bar codes and QR Codes with App Inventor Apps


App Inventor supports scanning of product identification “bar codes” and QR codes. Bar codes are typically found on consumer product packaging. QR codes are used for web addresses (so you can scan the QR code and go directly to the web address), part and product inventory tracking, and to deliver short messages.

In this tutorial, we create a simple App Inventor app to scan bar and QR codes.

Update: José Luis Núñez provides his own tutorial (in Spanish) for a bar code scanning app to check seating in a theater (written in App Inventor). Watch it on Youtube here:  Curso de App Inventor 2 (José Luis Núñez)

User Interface

Our App Inventor app has a simple user interface – a single button to scan either a bar or QR code. When pressed, the app activates the camera to scan the code and then returns a result value.

If the code is a numeric bar code value, the app displays a web page of information about the item corresponding to the bar code. If the returned code contains a web address, then that web address is displayed on screen. Here is an example from scanning the UPC code on a package of tea:

Screenshot_20151130-134823In the next example, a QR code containing http://appinventor.mit.edu is scanned:

static_qr_code_without_logoAnd here is the result:

Screenshot_20151130-134746Designer View

Drag a WebViewer component from the Palette’s User Interface section, and drag a BarCodeScanner component from the Sensor’s section. The WebViewer is the “earth” icon in this screen, and the BarCodeScanner is an invisible component, below the canvas area.

BarCodeDesignerTwo labels are used – one to display the text “Result:” and the other to display the returned code.

BarCodeComponentsBlocks Code

To activate the BarCodeScanner, we call the DoScan method:

BarCodeBlocks1The above activates the camera and displays a view on screen (in Landscape mode). Once a bar code or QR code is successfully scanned, the camera is automatically turned off and an AfterScan event is generated.

The AfterScan event has one parameter named result; this contains the converted scan code – a numeric value for a bar code or an http:// URL for a web address (anything else is displayed in the lblBarCodeResult label, on screen).

BarCodeBlocks2Creating QR Codes

To create your own QR Code images use any of the QR code generators available online – just search for “Create QR Code free” – I used http://www.qrstuff.com/

Download Source

Right Click (or Ctrl-Click on Mac OS X) and choose “Save as” (or similar wording): BarCode_Scanner.aia

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed