Mobile applications are ubiquitous. There are apps for just about everything—entertainment, socializing, dining, travel, philanthropy, shopping, education, navigation, and so on. And just about everyone with a smartphone or tablet is using them to make their lives easier or better. But you have decided to move from just using mobile apps to creating mobile apps. Congratulations! Thanks to MIT App Inventor 2, mobile app development is no longer exclusively the realm of experienced software programmers. The software empowers anyone with an idea to create mobile technology. This book offers people of all ages a step-by-step guide to creating mobile apps with MIT App Inventer 2. While this visual programming language is an ideal tool for people who have little or no coding experience, don't be fooled into thinking that the software's capabilities are basic! The simple drag-and-drop blocks format is actually a powerful programming language capable of creating complex and sophisticated mobile apps.
The purpose of this chapter is to provide an overview of MIT App Inventor 2, and of your new role as a mobile app developer. You are in for more skill development than you ever imagined! Of course, you will learn to code mobile apps, but there are countless other valuable skills weaved into the mobile app building process. Most significantly, you will learn to think differently, discover the design-thinking process, become a problem solver, and be resourceful. This chapter also offers tips on design principles and brainstorming app ideas. Lastly, it reveals the potential of MIT App Inventor 2 and showcases an array of mobile apps so that you, a budding app designer, can begin thinking about the full spectrum of possibilities. These mobile app examples not only display the capabilities and functionalities of MIT App Inventor 2, but also serve to spark ideas, foster innovative thinking, and help create visual goals as you embark on the mobile app-making process in the next chapters.
This chapter covers the following topics:
What is MIT App Inventor 2 and why you should learn to use it?
Becoming a mobile app developer
Discovering the possibilities of 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!
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
While making apps with MIT App Inventor, there is much more going on than just learning to code. The mission of MIT App Inventor is to democratize coding so that everyone, regardless of age, schooling, or profession, has the opportunity to create technology. Coaches, players, teachers, students, doctors, patients, conductors, cellists, pilots, or passengers can all make mobile apps that are important to them and that make their lives happier, better, or more productive.
As a digital solution, your app may have originally been intended to solve a problem that you observed or experienced. But once you share it in an app marketplace, it could impact people you don't even know and may never meet. MIT App Inventor makes it possible for you to expand your scope of influence from your immediate local community to a worldwide scale. You can bring others joy and laughter with a simple game, you can help college-bound seniors study for a standardized test, or you can provide a tool that teaches travelers common phrases in other languages. Contributing positively to society is one awesome way to use your new rockstar MIT App Inventor skills.
As you begin creating apps and see the impact they have on others, you may broaden the scope of what you think is possible for yourself. Have you thought about becoming a social entrepreneur? Will people pay for the technology you have created? Does your app have the growth potential to serve new and different users? How can you expand your business acumen to learn how to build and market successful mobile apps? Even though you will be starting off with small and simple apps, always remember to dream big in what you do and who you are.
While MIT App Inventor offers an easy and approachable way to learn about coding and software development, it may indeed also serve as an on-ramp for further computer science education. Once you see the skill growth potential, such as how creating technology can positively impact others or that you can sell your digital solutions, you may indeed become interested in expanding your knowledge of technology further by delving into other software languages or science learning opportunities, such as maker-spaces or hackathons.
MIT App Inventor empowers anyone regardless of age or coding experience to transform an app idea into a prototype and ultimately into a full-fledged mobile application. What will your app do? As you begin your app-making journey, you may wonder about what types of apps could you possibly create with App Inventor? Since the apps you make will be shared or sold for use on an Android smartphone or tablet, you can create apps that access the full functionality of those devices. Your apps could do things such as speak, take photos (or selfies), make phone calls, text, translate SMS messages, Tweet, play music or videos, use GPS (maps or other websites), scan bar codes, set timers (alarms or reminders), control robots, launch others apps, track your movement, and so on. Given the array of the abilities of Android devices, the possibilities seem endless!
Before beginning to learn MIT App Inventor, we think it is helpful to review some examples MIT App Inventor apps so that you have an idea ahead of time of a range of possibilities. As you start learning MIT App Inventor, you can begin by making simple apps; but in the back of your mind, remember this array of app examples, as they can serve goals or be an inspiration to help you unlock your creativity and designing skills. Think of it this way if you want to become a watercolor painter, but have never painted before, you would look at many watercolor paintings made by professionals or people with more experience than you to get inspired, to have a visual of what is possible, and to learn how the paintings were created.
The following examples are a mix of beginning, intermediate, and advanced MIT App Inventor apps. Some were created by individuals, who were inspired to make a specific app, while others were created by groups of people for a project or as a contest submission. One thing all of these apps have in common is that before the app developers spent hours and hours perfecting their UIs and creating blocks of code, they were just like you, starting out with little or no previous coding experience. All of the skills you develop in this book through basic and intermediate app-making will serve as a solid foundation for you to build upon to be able to create more complex, sophisticated apps in the future. The introductory tutorials will teach you the MIT App Inventor basics and equip you to tackle app creation from scratch.
This app mimics the classic game of Yahtzee, where the object of the game is to score points by rolling five dice. The dice can be rolled up to three times in a turn and the game will consist of 13 rounds. Each player scores their roll in one of the 13 categories. Once a category has been used, it cannot be used again. Rolling a Yahtzee is five-of-a-kind and scores 50 points; the highest of any category. Whoever scores most points will win!
Vicenta Albeldo and Jesus Gil created BYJS3, a digital pet game. This app allows you to play with, feed, and bathe your very own virtual pet. The following screenshots show the incorporated hand-drawn images that the developers have animated:
Developed by Andrea Zaffardi from Italy, Loops won the MIT App of the Month contest in June 2015. It is a puzzle game that requires the player to rotate the pipes to form a closed loop before time runs out. There are 100 levels of gameplay. The following screenshots show the game in the various stages:
Dr. Arun Mehta from India created Quartet for his niece, who loves to dance, but hates math. He wanted to show her how math can convert movement into things, such as graphics and music. With a wave of the phone, the app plays music with as many as four instruments (piano, pan flute, strings, and tin drums) while displaying animated graphics. Music starts and stops with a simple screen touch. A button displays a list of instruments for the user to choose among. If just one instrument is selected, the app will play all of individual keys of that instrument. Moving the phone in different patterns will create new music!
The following screenshots show visuals as the app plays music:
Created by Meghraj Singh of India, Brain Reaction Accelerator is a puzzle app that provides brain teasers to be solved within a time frame. There are five games to choose from, including Refocus, True Color, Quick Pick, Sum It Up, and Expression Puzzle. Compete against your best score or among global users. The following screenshots show a sequence from registering to choosing and playing a game:
Created by Derek Drew from the United States, Construction Calculator is a tool for people on building sites. It performs unit conversions, assists with project management, provides a to-do list keeper, and measures distances. It has an autodialing feature for calling customers or vendors, but includes autotexting for safety while driving to or from a site. The following screenshots show the home screen, a screen to calculate volume, and a location screen:
In the spring of 2015, MIT students Carolina Morgan, Fei Xu, Marcel Williams, and Rida Qadri created the mobile app UMATI for the urban planning course 11.S938: Crowd Sourced City—Social Media, Technology, and Planning Processes. The class enabled students to work with actual planning and advocacy organizations to develop digital technology solutions for planning problems. Matatus bus routes in Nairobi were not standardized. They were often created and changed by the whim of private drivers or as a result of traffic conditions and it was difficult to know which buses traveled which routes and where the buses stopped. The MIT Civic Design Lab, the University of Nairobi, the Center for Sustainable Urban Development, and GroupShot helped to create maps using GPS, but the challenge that the MIT students tackled was keeping the maps accurate and current. Their solution used the MIT App Inventor to create UMATI, a crowd-sourced app, to track riders' routes and stops. They incentivize riders to collect data by offering them tokens (called MaTokens) that give discounts at local businesses. The following screenshots show the home screen and the Track Me screen:
Created by Arjun Santhosh Kumar, an eighth grader from Chennai, India, Ez School Bus Locator is a location-tracking app that allows schools, parents, and students to monitor the location of school buses through voice activation or a key tap. Students scan a QR code upon entering and exiting the bus, so parents can track their children's routes to and from school. Automated SMS messaging keeps parents informed. The following screenshots show the home screen and two views of a location-tracking screen:
Youth Radio is a non-profit organization based in Oakland, CA. Youth Radio programs empower young people to create media content by teaching them broadcast journalism and technology skills. Many of the podcasts that the students create are aired on National Public Radio across the United States. In an effort to interact with their listeners, develop relevant content, and get feedback, Youth Radio students created a mobile app with MIT App Inventor 2, enabling listeners to rate a radio show, add comments, and offer suggestions for future topics.
The following screenshots show the different ways that listeners can interact with Youth Radio:
Rover 800 Remote app is an MIT App Inventor example of the Internet of Things. Paul Clements from the UK built a Bluetooth controller for his car that, with the help of microcontroller (sensor), can control the door locks, trunk release, fuel flap release, horn, and lights. It also remembers the car's address (if available), so if the cell phone housing the app is inadvertently locked in the car along with the keys, a text message sent from another phone can unlock the car. This app could be modified for a wide range of vehicles. The following screenshots show the home screen, the registration screen, and the overview screen:
While the bulk of this book centers on learning to code with MIT App Inventor, this particular chapter highlights the many other learning outcomes gained from engaging in the mobile app development process. Taking an app concept and building it out into an actual mobile app is both a concrete and a creative process. Attention to detail and iteration is vital for both code and design to work effectively and synergistically. Whether you're creating a game to play with your friend, an app to promote philanthropy involvement on campus, or an app to kickstart a recycling program in your neighborhood, the Design Thinking process is as much a part of app development as coding. Skills such as brainstorming, researching, interviewing, synthesizing, ideating, storyboarding, designing, troubleshooting, problem solving, and testing are not only integral to app building, but are also transferrable to other disciplines, helping to unlock creativity and flow in any endeavor.
Now that you've been introduced to MIT App Inventor and your new role as an app designer and developer, the next step will be to learn how to set up MIT App Inventor. Let's get rolling!