Award from American Library Association (ALA) was recently designated one of the Best Websites for Teaching and Learning, by the American Association of School Libraries (AASL). The award was announced at the American Library Association’s annual conference (press release). was developed at the University of San Francisco (USF) under the direction of Professor David Wolber and with the contributions of numerous USF students (see below). The site teaches beginners how to build apps with the drag-and-drop coding language, MIT App Inventor. The site reaches thousands of self-directed learners each month and provides a “Course-in-a-Box”  for teachers of all levels. and this award are only possible because of the amazing App Inventor language and the amazing work of Hal Abelson and the MIT App Inventor team. Great work everyone! USF Student Contributors
Thomas Oropeza
Jordan Goldin
JD Manuel
Vincent Zhang
Bin Lu
Brian Liberman
Cayla Shaver
Leonard Fernando
Jennifer Cruz-Hernandez
Olivia Kumar
Adam Toth-Fejel
Kelly Lazara
Andrea Conway




App Inventor Workshop for Teachers This Summer

Professional Development Workshop

June 26-June 30, 2017, 10 am – 3 pm
University of San Francisco

High School and Middle School Teachers, we are offering a free professional development workshop this summer, led by Master Teacher Tom Clifford of Carmel High School along with Professors David Wolber ( and Alark Joshi of USF, who run USF’s Democratize Computing Lab (

The Workshop will focus on programming with App Inventor along with computer science fundamentals. App Inventor is a visual blocks language that is highly accessible to beginners and fun– you get to build apps for phones and tablets!  If you are interested in bringing coding and computer science into your classroom, App Inventor is a great way to learn and a great way to teach.

High School Teachers:
The in-person workshop, held June 26-June 30, will introduce the Mobile Computer Science Principles (CSP) curriculum. A 3-week online follow-up course, July 3-July 21 will be available and will include support from the instructors. Stipends are available if you complete the 4 weeks and get principal approval for teaching a Mobile CSP course in the 2017-18 academic year.  

Middle School Teachers: We will provide breakout sessions for middle-school specific lessons and discussions. Please see this link to see what some San Francisco middle schools have piloted this year: Click Here.

Apply Now!  Please apply at Spots are limited!

For more info, please contact Professor David Wolber (

More on FirebaseDB

You may have already tried the App Inventor component FirebaseDB or read about it in a blog post earlier this year, but in case you are new to App Inventor, here is the scoop.

Databases are essential features when creating apps because they are used to store information. For example, on a map app, you don’t have to re-enter your home address every time you want to head home because the app stores and retrieves that information for you. Or, when you play a game, you don’t have to stop and think what your previous score was because it displays. Or, if you’re having a party, you don’t have to worry about keeping track of RSVPs in your head because an event app will remember who is coming and who can’t make it.

When creating apps in App Inventor, if you don’t add a database component to your app, no inputted information will be saved and the next time the app starts up, it won’t recall or retrieve any previous data. The TinyDB component allows for persistent data- so each time the app is closed and reopened, the data is available.

The good: TinyDB saves data when an app closes and reopens and shares data between multiple screens within the app

The bad: TinyDB does not share data between multiple users

This means if multiple people use the same event app, they both won’t see the same RSVP list or if they play the same game, they won’t see the same score history. This is where FirebaseDB comes in handy.

FirebaseDB is still an experimental component on App Inventor, but is worth exploring since this cloud database retains and retrieves data when an app closes and reopens and shares consistent, up-to-date data across many users. Everyone who is using the app will see the same information.

More FirebaseDB Learning Modules coming soon! In the meantime take a look at NoteTaker.

New App Inventor Curriculum for SF Middle Schools

screen-shot-2016-09-14-at-10-14-52-amThe San Francisco Unified School District (SFUSD) is making great strides in rapidly adding computer science courses to the curriculum in public middle schools and high schools, and App Inventor is a vital part of it.  SFUSD’s Bryan Twarek and Andrew Rothman have designed an on-line middle school curriculum which combines video and other lessons from,,, and a number of other venues, and breaks lessons down into 50 minute classroom chunks. The well-organized site is being used this fall in SF middle schools. Check it out and contact Bryan ( to get access to the teacher side of it.

The middle school curriculum is part of SFUSD’s Computer Science for All Students in SF effort. The goal is to make real computer science– with coding and problem solving– part of the curriculum throughout the grade levels, and to help broaden participation in Tech, as this excerpt from their site attests:

By beginning in the earliest grades and with all children, we will normalize a discipline that has been long dominated by a selective group of the population.

SFUSD teachers are also teaching some of the first AP High School Computer Science Principles (CSP) courses on the West Coast, an effort led by SFUSD’s Jennie Lyons.

The Democratize Computing Lab at the University of San Francisco is  partnering with the school district in these efforts. Led by my colleague Alark Joshi and I, we provide materials and advice on curriculum development, offer summer training workshops for high school  teachers, and facilitate a program whereby USF students in the Democratize Computing Lab assist teachers at schools sites each semester.

Dave Wolber

Test Your App Inventor Knowledge


If you have been reading App Inventor tutorials, discovering new apps in the App Inventor Gallery, building apps from scratch and expanding your coding capabilities, its time to:

Test Your App Inventor Knowledge!

This simple quiz will determine if you’re on track learning the latest updates to the App Inventor platform.

Question 1

You are frustrated because of the limited color options available in the App Inventor Designer, so you use:

  • A)   the color grid in the Blocks Editor
  • B)   the Make Color block in the Blocks Editor
  • C)  the Screen Initialize and Set Background Color blocks

Question 2

You have a lot of data to display and want to create a streamlined UI, so you use which of the following Components?

  • A)   VerticalArrangement
  • B)   TableArrangement
  • C)   VerticalScrollArrangement

Question 3

You want to change the shape of some Buttons, so you use which of the following properties?

  • A)   Width
  • B)   Shape
  • C)   Image

Question 4

When creating an app with multiple screens, you can use which of the following blocks?

  • A)   Close screen
  • B)   Open another screen
  • C)   When Button1.Click

Question 5

To create a form in the Designer, which of the following could you use?

  • A)   Textbox Hint Property
  • B)   Label Component
  • C)   HorizontalArrangement Component

Question 6

To create a new color in App Inventor with the Make Color block, you could:

  • A)   Input any color’s RGB value
  • B)   Access one of 16 million colors
  • C)   Find a color on the Adobe Kuler Wheel

Question 7

To make a copy of the app you are working on you could use:

  • A)  Save project as
  • B)  Checkpoint
  • C)  Export selected proejct

All About Buttons

Screen Shot 2016-06-21 at 10.19.41 PM.png

Buttons are an essential component in creating mobile apps on App Inventor. You can use them to do things like submit information, navigate screens, clear data, and stop or start game play. Here is a quick intro guide to creating and using buttons in App Inventor.

The Button component is found at the top of the User Interface Palette in the Designer.

Click on the Button at the top of the User Interface Palette (#1) on the left side of the screen and drag it to the Viewer (#2). The Button automatically displays “Text for Button1”, which you can easily change in the properties panel text box (near the bottom on the far right of the screen, #3).

Screen Shot 2016-06-21 at 9.56.04 PM

Changing the text that appears on the button is part of the UI design that the app user will see. Depending on what the button will be used for, it could display instructions like: “Submit,” “Next,” “Play,” etc.

Note: Changing the button display text should not be confused with renaming the button. Changing the button name helps you, the designer/coder, to keep your buttons organized. Thus “SubmitButton” is an appropriate name for a button that displays the text “Submit”.

Screen Shot 2016-06-21 at 10.19.20 PM.png

A key coding principle for buttons (and for many components) is naming them appropriately. Whenever you create a new button in the Designer, it will automatically be named Button1, Button2, Button3, etc. When you first start building apps, your interface will be simple and thus it will be easy to keep track of which buttons perform which functions. But as you progress to creating more complex applications, you will quickly discover that it is difficult to remember what Button7 or Button14 does. Thus, it is good practice to rename buttons to clearly describe their function so that when you begin coding in the Blocks Editor, each button purpose is obvious.

The recommended standard is to use a capitalized descriptive name, followed by the capitalized component name – with no spaces between words. Examples include: “SubmitButton”, “NextButton” or “PlayButton”. (AppInventor doesn’t allow spaces so if you type the name “Submit Button” with a space in between the words, App Inventor will automatically insert an underscore and name your button “Submit_Button”.)Screen Shot 2016-06-21 at 9.58.14 PM

To rename a button, activate it by clicking on it in the Viewer or in the Components Panel (it will highlight with a light green box around the name). Then click the “Rename” button at the bottom of the Components Panel (#4). A pop-up window will appear, insert the new name into the text box and click “OK” (#5).

Screen Shot 2016-06-21 at 10.02.52 PM

Note: If for example you rename your first button from Button1 to “PlayButton”, and then drag another button onto the Viewer, App Inventor will name it Button1 even though it is not the first button you created. ThScreen Shot 2016-06-21 at 10.10.21 PM.pngis example illustrates the importance of not relying on the order of creation, but rather on appropriate naming to keep buttons organized.

Any changes you make in the Designer will be reflected in the Blocks Editor (#6). Notice at the bottom of the Blocks Palette, there is another option to Rename (or delete) buttons. Thus, changes can be made there as well.

Screen Shot 2016-06-21 at 10.22.24 PM

If you decide that a button is no longer needed, deleting it is simple. Click on the button in the Viewer or Components Panel in the Designer or in the Blocks Panel in the Editor and then click “Delete”. A pop-up window will confirm deletion (#7). Click “OK”.

Screen Shot 2016-06-21 at 10.10.30 PM.png

Screen Shot 2016-06-21 at 10.16.48 PM.png

The Properties Panel in the Designer provides many options to change the format of your buttons. Click on the button in the Viewer or the Components Panel to see a list of options. The changes you make to the properties are reflected in the Viewer (#8 & #9).

Screen Shot 2016-06-21 at 10.15.21 PM.png

And of course, to get the full effect of how your app will look, it is always recommended to view your changes live on your mobile device or with the on-screen emulator.

For information on coding buttons, stay tuned for All About Buttons, Part 2.



FirebaseDB is the new App Inventor web database. Kind of. The uncertainty stems from the fact that this new web database component is currently being beta tested and will be updated based on user feedback. You can try it out, but don’t get too attached to its current form, because features may change by the time it is fully integrated. In case you forget this fact, you will be reminded every time you try to add this component to your project. Housed under the “Experimental” Palette drawer in the Designer, dragging this non-visible component to the Viewer will result in an alert reminding you of its provisional existence.

Fire 1Fire 2

I already love FirebaseDB and use it as if its current form were a permanent addition to my coding repertoire. Why is FirebaseDB so great?

Databases are used for many of reasons in mobile apps such as: to keep track of high scores in a game, to count the number of votes in an election, to save a variety outgoing text messages or to store the names of RSVPs to a book club event. FirebaseDB stores data in the cloud, which is helpful if you are perhaps vying to become a high scorer of a game. For such apps, both the app programmer and app user want this sort of data to be shared and persistent, meaning that once the app closes, the information is not gone forever, it will be saved and retrieved for all to see once the app reopens.

Fire 3.png

Example: For a simple note-taking app, users enter their username and a note and the app will display the note, the username and a time/date stamp. For this app to work, it must save and display notes from different users on various devices- a perfect scenario for FirebaseDB.

We programed this app so that when the user clicks “Submit,” the app stores data using the StoreValue block. In this case, it adds the values (user’s name, note, and date/time stamp) to a list called “global notes”. This information gets stored in the FirebaseDB under the tag that we named, “notelist”.

Fire 4.png

Each time the app opens, the GetValue block requests the most updated values stored under the “notelist” tag from the Firebase Service. When the value is received, the GotValue event fires retrieving the values saved in “notelist” and displays them in a List View.

The Firebase DataChanged event gets triggered anytime any user adds a new note. This is the amazing part because with FirebaseDB, all app instances receive this data and thus, are consistent. The previous App Inventor web database, TinyWebDB, did not have the ability to share data globally in this manner.

Fire 5.png

To become familiar with FirebaseDB, try building this note taker app and test how values from various users get saved, updated and displayed Or better yet, build a game app and see people around the world vie for the top scorer position!




*Note that the App Inventor emulator does not support the FirebaseDB component.



App Inventor Education Taking off in China!

There are many stories about competition and strife in US-China relations, as well as the profound differences in our cultures. This is a story, instead, of collaboration, the story of US and Chinese citizens uniting for the common goal of better educating students for the 21st century. What better agent than education to illustrate the amazing commonalities between peoples?

MIT App Inventor is the catalyst of change, a coding language perfectly suited for teaching and inspiring young people to learn how to create and solve problems in our rapidly digitizing world. While App Inventor education has rapidly expanded in the US since its inception at Google in 2009, it has been widely unavailable in China. Thanks to the efforts of the extended MIT App Inventor team and some extraordinary educators in China, this creative way of teaching computational thinking is now also taking off in China.

Hal Abelson, director of the MIT App Inventor team, has led the project from the US side. App Inventor was inaccessible in China because it runs on Google infrastructure, so Hal, Jeff Schiller, Weihua Li, Andrew McKinney, and others facilitated the creation of a version that runs on a different infrastructure and thus can be accessed in China.

But this was only the start. With the help of the extraordinary MIT student Weihua Li, a plan was set in place to jumpstart App Inventor education in China through teacher and student workshops starting in the summer of 2014. The idea spread like rapid-fire and led to the 1st International Conference on Mobile Learning and Computational Thinking Education, Based on App Inventor, which was held in Guangzhou in June (2015)..


Attendees of the App Inventor Conference in Guangzhou. See if you can pick me (David Wolber) out. Hint: I’m the tallest.


Li Yue, South China Univ. of Technology


The conference included representatives from Hong Kong, Taiwan, UK, UNESCO, and the US, as well as over 200 educators from all over China.

I was honored to speak at the conference and to teach a workshop to some K-12 and university teachers. Ralph Morelli of Trinity College and also spoke and gave a workshop to about sixty middle schoolers, shown below. MIT was represented by Tech Lead Andrew McKinney, Felicia Kamriani, and the aforementioned WeiHua Li, who spoke at the conference and was also the key translator for the English speakers.

The real story, however, is the amazing efforts of educators in China who are helping spread App Inventor based education throughout the region and country. It is a joint university and governmental project perhaps best exemplified by South China University Professor Li Yue, the conference organizer who has led numerous teacher training workshops throughout South China. I was honored to see her in action, using her relentless energy and charm to teach and inspire.


The students at Ralph Morelli’s workshop were extremely diligent as Ralph walked them through building a “Selfie-Slideshow app”

Dr. Li organized a visit to a school where we saw first hand how App Inventor is making a difference: a roomful of energetic middle school students energized about building apps. Ralph Morelli gave them a workshop, teaching them how to build a “Selfie-Slideshow” app, and it was incredible to see the joy on the student’s faces. On a personal basis, I was happy to see that the students were using a translated version of the App Inventor book I co-authored (along with Hal, Ellen Spertus, and Liz Looney).

Screen Shot 2015-07-03 at 2.43.38 PM has a translated version of the book App Inventor: Create your own Android Apps

The conference and workshops didn’t solve the world’s problems, but a group of educators from East and West shared ideas on how best to educate young people for the jobs of tomorrow (as well as ideas on one-child policies, free speech, gun control, and the best Beatles songs to play at Karaouke). It was a highlight of my career to participate, not only to help spread a great method of educating students, but to help promote a collaborative spirit between the peoples of China and the US.

App Inventor now has a Gallery!

App Inventor programmers have been working side-by-side in the cloud together, but they might as well have been using stand-alone software as they couldn’t share their experience. I’m pleased to announce that the App Inventor app gallery is officially launched as part of MIT App Inventor. Students and developers can now easily share their apps and code blocks and learn from each other. The gallery turns App Inventor into a shared learning community similar to the one which has been so successful in Scratch. Now all the students, teachers, and developers who were blindly rubbing virtual shoulders can share their apps in a great, collaborative open-source environment.
Click on any app to open it and see its blocks

Click on any app to open it and see its blocks

The gallery was developed by our team in the Democratize Computing Lab (DCL) at the University of San Francisco (the same team that brings you and this blog), working in collaboration with the MIT App Inventor team. Special thanks go to lead developers Bin Lu and Vincent Zhang of USF, as well as mastermind Jeff Schiller of MIT, all of whom put in a long and concerted effort in making the gallery a reality.

The Democratize Computing Lab is generously funded by the W.M. Keck Foundation.

App Inventor Teacher Workshop this Summer in SF!

The University of San Francisco and will host an App Inventor teacher twitter-usftag-500x500workshop and follow-up activities during the summer of 2015. The workshop will take place over four days, June 29-July 2, 2015, 10 am to 3 pm each day, at the University of San Francisco. The workshop is funded by USF and the Google CS4HS program. You can apply at b​

Learn App Inventor coding and how to teach it in a 4­-day teacher development workshop funded by Google and USF. Coding apps for phones and tablets is a fantastic way to learn computer science and computational thinking! The workshop is free. If you can commit to teaching in 2015-­2016, you may also be eligible for a $1000 stipend!

Teachers from all levels are welcome to participate. No prior coding experience is required. The workshop will start at the beginning with both coding and the App Inventor language, and will focus on how to teach the material to beginners. The workshop will be taught by USF Professor Alark Joshi and USF Professor and App Inventor author David Wolber.

University of San Francisco Campus, 2130 Fulton Street, San Francisco, CA 94117

appinventororgThe workshop will prepare you for teaching either a complete programming course or a coding module in an existing course. The topics and material discussed will be appropriate for many programming courses and levels, including the High School Computer Science Principles (CSP) curriculum that is being piloted as a new AP course. You will be introduced to two popular existing on­line courses, Mobile CSP (m​obile­​ and Professor Wolber’s App Inventor Course­-in­-a­-Box (a​​.

Community of Practice
Our goal is to foster the community of App Inventor teachers in the Bay Area. We will offer two ways to continue after the workshop: (1) We’ll provide three weeks of follow­-up guidance after the workshop (July 6­-24, 2015) including once­-a­-week  meetups as you continue with the Mobile CSP on-­line course, and (2) During the school year, we have funds for a limited number of USF students, experienced in App Inventor programming, to assist you in the classroom. If you can commit to teaching App Inventor in 2015­-16, you may be eligible for a $1000 stipend.

Please apply for the workshop at b​ ​Slots for the workshop are limited, but we will accommodate as many teachers as we can.