What is MIT App Inventor 2?

MIT App Inventor 2 is a free, drag-and-drop, blocks-based visual programming language that enables people, regardless of their coding experience, to create mobile apps for Android devices. In 2008, iPhones and Android phones had just hit the market. MIT professor Hal Abelson had the idea to create an easy-to-use programming language to make mobile apps that would harness the power of the emerging smartphone technology. Equipped with fast processors, large memory storage, and sensors, smartphones were enabling people to monitor and interact with their environment like never before. Abelson's goal was to democratize the mobile app development process by making it easy for anyone to create mobile apps that were meaningful and important to them. While on sabbatical at Google in Mountain View, CA, Abelson worked with Engineer Mark Friedman and many of other developers to create App Inventor (yes, it was originally called Google App Inventor).

In 2011, Abelson brought App Inventor to MIT and, together with the Media Lab and the CSAIL (Computer Science and Artificial Intelligence Lab), created the Center for Mobile Learning. In December 2013, Abelson and his team of developers launched MIT App Inventor 2 (from here on referred to as MIT App Inventor), an even easier to use web-based application version featuring an Integrated Development Environment (IDE). IDE means that you as you build your mobile app online, you can see it come to life on a connected mobile device. All you need is a computer (Mac or PC), an Internet connection (or a USB connection), a Google account, and an Android device (phone or tablet). But, if you don't have an Android device, don't worry! You can still create apps with the onscreen emulator and utilize the live development mode.

The MIT App Inventor (http://appinventor.mit.edu/) interface includes two main screens, a Designer Screen, which is a graphical user interface (GUI) where you can create the look and feel of the app (choosing the components you want the app to include), and the Blocks Editor, where you can add behavior to the app by coding it with colorful blocks. Users build apps by dragging components and blocks from the menu bars onto a workspaces (called Viewers) and a connected Android device (or emulator) displays the progress in real time. All the apps are saved on the MIT server; once completed, they can be can be shared on the MIT App Inventor Gallery, submitted to app contests (such as MIT App of the Month), or uploaded to the Google Play Store (or other app marketplaces) for sharing or selling.

To date, MIT App Inventor has empowered millions of people to become creators of technology by learning to be mobile app developers. And now, you will become one of them!

Understanding your role as a mobile app developer

Since you are reading this book, it is safe to assume that not only do you regularly use mobile apps, but on occasion, you have also had the thought, "I wish there were an app for that!" Now, with the help of MIT App Inventor and this guidebook to mobile app development, you will soon be able to say, "I can create an app for that!"

While embracing your new role as a mobile app developer, you will not just be learning how to code; you will learn an array of other valuable skills. You will learn to think differently. Every time you open an app, you will start looking at it from the developer's perspective rather than just as a user. You will start noticing what functions are logical and simple and which are complicated and unintuitive. You will learn to get inspiration from your environment. What type of app could make the attendance process at my club/class/meeting more streamlined or efficient? What app idea could help solve the inaccurate inventory problem at the gym? You will learn to become a data gatherer without even realizing it. When people make comments about apps, your ears will perk up and you will take note. You will start asking questions like, why do you prefer Waze over Google Maps?

You will learn to become a problem solver. You will learn to think logically so that you can tell the computer in a step-by-step manner how to perform an operation. Any software developer will confirm that programming is an iterative process. It's a continual cycle of coding, troubleshooting, and debugging. Trial and error will become second nature, as will taking a step back to figure out why something that just worked a minute ago now seems broken. And, you will learn to assume the role of a designer. It is no longer accurate to merely depict programmers holed up by themselves at a computer, creating white text-based code on black screens. Developers of mobile apps are also designers who think about and create attractive and intuitive user interfaces (UIs). Much of the design work happens not at the computer; it includes conversations with potential users, involves pens, paper, and post-it notes, and uses storyboards or sketches. Only once you have your app designed on paper do you sit down at the computer to begin coding. And then, you will not find the traditional black and white interface, as the MIT App Inventor platform is interactive and full of colorful blocks that snap together.

Brainstorming app ideas

Chances are you already have an idea for a mobile app. If not, how can you think of one? The best way to start brainstorming app ideas is by starting with what you know. Which app do you wish existed? Which app would you and your friends, coworkers, or family members use, need, or like? Which problem in your community, network, or circle of friends could be solved with a digital solution? Maybe, you loan out books to friends, but don't have a system to keep track of who borrowed what. Maybe, you want to do a clothing swap with people who are your size, so you want to post pictures of the items that you have available for trade and you want to view othe listed items in your size. Maybe, you have a favorite app that you use all the time, but you wish it had just one other feature. Maybe, when you meet your friends in a public place, it's hard to know whether they're nearby without a lot of texting back and forth, so you want to create an app that shows everyone's location on one screen. The possibilities are endless!

The key to successful brainstorming is to write down all of your ideas no matter how wild they are and then talk to people about them to get feedback. Input from others is an essential part of the research needed to ensure that your app idea becomes a successful app that people will want, use, and/or buy. On a recent business trip, we had an idea for a travel app because we always seem to forget at least one essential item. Over breakfast at the hotel, we discussed the app idea with a couple of colleagues and received amazing insights that we hadn't thought of, such as a reminder notification to fill any prescriptions well before the trip and a weather component, so we could be sure to pack appropriate clothes for each destination. The more people you talk to, the more market research you will conduct and the more defined the overall app's concept will be.

The Design Thinking process

Design Thinking (more information about Design Thinking can be found at http://dschool.stanford.edu) is a user-centered process for creative problem solving. While not developed specifically for mobile app development, the Design Thinking process is particularly effective when applied to mobile app development. We recommend using the following design phases:

Most likely, you are not creating an app that you alone will use, so you must discover what potential users need, want, or prefer in an app.

Empathize

Your first goal is to understand the people who would be using your app. Thus, this phase is called, Empathize. You can easily conduct research through interviews by asking an array of potential users what types of apps they currently use, what app features they like or dislike, what apps they wish existed, and if they would use an app like the one you plan on making. Interviews can provide valuable feedback and be a source of inspiration for new ideas.

For example, if you plan to create a book club app that coordinates many people's calendars so that you can schedule a book club discussion during a time when everyone is available, ask book club members what features they would like to see in the app. Will there be an RSVP or a cancel button? Will there be directions to the location? What are the transportation or parking options? Will there be a link to Amazon to buy or download the next month's book? How can the app help members decide on which book to read next? Since the meetings are potlucks, is there an option to include what food or drink each member will bring? What is a quick and efficient way to contact all the members? Through this data gathering stage, you may discover a wealth of new features for your app that you had not previously thought of, or you may get a confirmation that you are indeed on the right track. Understanding what potential users want is an essential part of the app building process, from the very beginning of concept creation all the way until the final stage of deployment.

Define

Once you've gathered research data, what do you do with that information and how do you fold it into your design? In the Define phase, you will synthesize the data you've collected to create a clearer picture of what your app will do, how it will function, and the purpose it will serve. You may have collected pages and pages of ideas and comments from your interviews. What themes or patterns emerge when reviewing them? What ideas seem the most salient? What app functions were people most excited about? Reviewing user feedback will help you structure and streamline your app concept so that it is clear and specific in purpose and function. This stage of flushing out ideas so the best ones emerge will also help you create accurate visuals in the next phase.

Ideate

Given all of the input you need and want from your potential users, what solutions can your app offer? Now, it is time for the Ideate phase to create an experience map or storyboard with pen, paper, and post-its to delineate all of the app's functionalities. Each piece of paper will represent one screen and display the user interface (UI) designated for that screen. This process usually requires a lot of revisions and may produce numerous versions of the app, which you will want to keep, as they may be helpful down the line when creating updates. We find it helpful to put all of the drawings up on a wall so that you can visualize the whole app map and its sequencing. This is also the time to include design features that you like or find appealing. Remember, all of the apps you see in marketplaces started the exact same way, with an idea. Inspiration for one can come at any time and from any experience. We recommend dedicating a notebook exclusively for ideas, so you can jot notes when you get inspired or see an app with a look and feel that you like. This will be a valuable resource for you as you continue down the road of app making. As with any design process, this Ideate stage takes time. This is a good thing because you want time for your ideas to simmer and percolate. Taking a break and coming back to your sketches with fresh eyes usually offers new perspectives , ideas and clarity.

Prototype

Now that you've reached the Prototype phase, it is time to sit down at the computer and build your app. This may be daunting at first because you are just learning how to use MIT App Inventor, but the step-by-step guides in this book will walk you through each stage of app development. The provided tutorials will teach you about the various MIT App Inventor components, what they do, and how to add behavior to them by snapping blocks together. Once you become familiar with component functions and get the hang of coding with blocks, you will be able to transfer this knowledge to create your own app. Since you will have already done all of the phases of the the Design Thinking process in this chapter and laid the groundwork for your app, you will be able to particularly concentrate on the components you will need to build your app.

Test

When you get to the point where you think your app is done, think again! Test your app with a small group of users before offering it to the world in an app marketplace. These alpha and beta testers will help you discover bugs or if things are not working as they should. Learning to troubleshoot is often a frustrating process; but by this stage, you will have refined your skills as a problem solver, and you will have more ideas on how to fix bugs. Also, Chapter 8, Expanding Your Mobile App Development Skills, of is devoted to tools to expand your app development skills. And while the Test phase seems like the final one, you will discover that it is really another beginning! The Design Thinking process is really a cyclical one, as there is always room for edits, refinement, and of course, version 2.

If you get stuck at any time, there are many resources on the MIT App Inventor websites at, http://appinventor.mit.edu/ and on http://www.appinventor.org/ to help you. In addition to tutorials, there is an MIT App Inventor Gallery where you can view apps along with the source codes that other people have created and shared. If an app has features that you'd like to include in your app but you don't know how to code yet, you can download the app, look at the blocks, and teach yourself how to code them! Also, there is a community forum online where you can ask questions and learn from more experienced users.

Computational thinking

In becoming a mobile app developer, you will be learning many valuable roles: brainstormer observer, researcher, data interpreter, synthesizer, design architect, strategist, creative thinker, and last, but not least, coder. Part of becoming a mobile app developer involves learning to think like a computer, that is, being able to tell the computer what you want it to do so that it performs the specific operation. Computers are not intuitive; they don't know what you mean or interpret what you say. By programming or writing a code, you give the computer clear step-by-step logical instructions to make it do something that you want it to do, such as retrieve data, display information, or open another application. But sometimes, even when you think you are being clear and logical, the computer does not respond as you intended. As coding is an iterative process, there are a lot of rounds of trying something to see if it works, and then when it doesn't, trying something else. The more you fail, the closer you will get to finding a successful path. Learning to troubleshoot, debug a program, or think of yet another solution comes with the willingness to be open, think creatively, and try and try again. You will soon discover that by becoming a coder, you are also honing your skills as a problem solver.

Best practices to design apps

Since there is an abundance of Android apps that are available, you can easily research design principles.

Pay attention to all the features of the UIs. For example, look at 10 different chess game, solitaire, or weather apps. You will see a wide variety of UIs and start learning how different developers approach the exact same app. Which ones are easy to navigate and use? What distinguishes one as more appealing than another? Which home screens provide the best overview of an app's set of features? How are menus and drawers displayed? How easy is it to return to the previous screen? How do you navigate to the home screen? How are text elements highlighted when in use? How are screens mapped out? Where can you find instructions? Where do you find help? Pay attention to cues, such as what colors, animations, or pop-up messaging occur, to let you know that X is happening.

Great design is simple. Often, the tendency is to want your app to do it all. You've received tons of feedback from your interviews and you want to incorporate all of the brilliant ideas into your app. Since this is your first app-making experience with MIT App Inventor, we recommend you to choose the core features that are necessary, and make them clear and easy to use. If needed, you can always layer more complex features in the future versions. Think about your own app usage. Most of us use apps very quickly or intermittently (unless we are on a long subway ride, playing a game on our phone or reading a digital book). Rarely do you use all of the features of an app at any given time. Most often, you use an app for a specific purpose and then you're done. Keep your app simple.

Iterate, iterate, and iterate. Designing, like coding, requires the ability to be open to experimentation. And fortunately, App Inventor facilitates this process with instant feedback through IDE. Try a component, add behavior (blocks), and see what happens on your connected device. Add a different behavior; see what happens on your connected device. Add colors, arrangements, and fonts; see what happens on your connected device. Do you get the drill? Design involves a lot of trials, errors, and failures, which is ultimately a good thing because it gets you going in a different direction. You may have your heart set on a design idea only to discover that, once you have tried it out, you don't like it that much. Don't be discouraged! This is the time to investigate other options. Try this, that, and the other. Expand your creative scope through several rounds of playing and then testing.

App designing, like any artistic endeavor, takes time. Try not to rush the creative process. Indeed, MIT App Inventor makes it easy to make mobile apps, but to craft a well-designed app that looks appealing and works seamlessly requires the investment of time, passion, and creativity. Take breaks often, spend time outdoors, play a game or engage your mind in another project so that when you return to your app, you will approach it with fresh eyes, energy, thoughts, and inspiration.