Brook Preloader

Blog

MIT App Inventor Part 1

MIT APP INVENTOR Part – 1App Inventor for Android is an open-source web application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT), which allows newcomers to computer programming to create software applications for the Android operating system (OS).
It uses a graphical interface very similar to Scratch and the StarLogo TNG user interface, which allows users to drag-and-drop visual objects to create an application that can run on Android devices. In creating App Inventor, Google drew upon significant prior research in educational computing, as well as work done within Google on online development environments.
App Inventor and the projects on which it is based are informed by constructionist learning theories, which emphasizes that programming can be a vehicle for engaging powerful ideas through active learning. As such, it is part of an ongoing movement in computers and education that began with the work of Seymour Papert and the MIT Logo Group in the 1960’s and has also manifested itself with Mitchel Resnick’s work on Lego Mindstorms and StarLogo.
App Inventor also supports the use of cloud data via an experimental FirebaseDB component.

The application was made available through request on July 12, 2010 and released publicly on December 15, 2010. The App Inventor team was led by Hal Abelson and Mark Friedman. In the second half of 2011, Google released the source code, terminated its server, and provided funding for the creation of The MIT Center for Mobile Learning, led by App Inventor creator Hal Abelson and fellow MIT professors Eric Klopfer and Mitchel Resnick. The MIT version was launched in March 2012.On December 6, 2013 (the start of the Hour of Code), MIT released App Inventor 2, renaming the original version “App Inventor Classic Major differences are:

The blocks editor in the original version ran in a separate Java process, using the Open Blocks Java library for creating visual blocks programming languages and programming.

Open Blocks is distributed by the Massachusetts Institute of Technology‘s Scheller Teacher Education Program (STEP) and is derived from master’s thesis research by Ricarose Roque. Professor Eric Klopfer and Daniel Wendel of the Scheller Program supported the distribution of Open Blocks under an MIT License. Open Blocks visual programming is closely related to StarLogo TNG, a project of STEP, and Scratch, a project of the MIT Media Lab’sLifelong Kindergarten Group. App Inventor 2replaced Open Blocks with Blockly, a blocks editor that runs within the browser.The MIT AI2 Companion app enables real-time debugging on connected devices via Wi-Fi, not just USB.MIT App Inventor is an intuitive, visual programming environment that allows everyone – even children – to build fully functional apps for smartphones and tablets. Those new to MIT App Inventor can have a simple first app up and running in less than 30 minutes. And what’s more, our blocks-based tool facilitates the creation of complex, high-impact apps in significantly less time than traditional programming environments. The MIT App Inventor project seeks to democratize software development by empowering all people, especially young people, to move from technology consumption to technology creation.What is App Inventor?
              App Inventor lets you develop applications or Android phones using a web browser and either a connected phone or emulator. The App Inventor servers store your work and help you keep track of your projects.

    You build apps by working with:

·The App Inventor Designer, where you select the components for your app.
·The App Inventor Blocks Editor, where you assemble program blocks that specify how the components should behave. You assemble programs visually, fitting pieces together like pieces of a puzzle.
Your app appears on the phone step-by-step as you add pieces to it, so you can test your work as you build. When you’re done, you can package your app and produce a stand-alone application to install.
If you don’t have an Android phone, you can build your apps using the Android emulator, software that runs on your computer and behaves just like the phone.
The App Inventor development environment is supported for Mac OS X, GNU/Linux, and Windows operating systems, and several popular Android phone models. Applications created with App Inventor can be installed on any Android phone.TalkToMe : A beginner App Inventor app

This step-by-step picture tutorial will guide you through making a talking app.
To get started, sign up for a free Google Account: http: //accounts.gogole.com/signup.
Log in to App Inventor with your Gmail (or Google) username and password.
Use an existing gmail account or school-based google account to log in to ai2.appinventor.mit.edu
Below are the example:

Choose a Google accounts if you have more than one. Click “Allow”.
Read the Inventor announcements, then click “Continue”.

If you don’t have any projects created in App inventor, you will land in the Projects View.
Start a new project by clicking the “Start new project” button.
(If you have already created projects, App inventor will open the most recent project.)

Click on “Start new project”

Name the project “TalkToMe”

Type in the project name (underscore are allowed, spaces are not) and click OK.
App inventor opens the Designer window
The “Designer” is where you create the Graphical User Interface (GUI) or the look and feel of your app. You choose components like Buttons, Images, and Text boxes, and functionalities like Text-to-Speech, Sensors, and GPS.

Add a Button
Click and hold on the word “Button” in the Palette. Drag your mouse over to the Viewer. Release the mouse. A new button will appear on the Viewer.

Download the MIT AI2 Companion App from the google Play Store and install it on your phone or tablet.

Getting the app through google play Store is preferred because you will get automatic updatesIf your mobile device has a QR code reader app installed, you can scan the QR code image below. It will take you to the AL2 Companion app in the Google Play store where you can download it clicking the “install” button. Then, you will find the app in your Downloads folder on your device.

Or

NOTE: Direct APK download (requires manual updates)
Go into your phone’s settings, choose “Security”
Scroll down and allow “Unknown Sources” by checking the box. (This allows apps that are not from the Play Store to be installed on the device.
Scan this QR code.  

Type this URL into a web browser on your device: http://appinv.us/companion.The AI2 Companion app will automatically download.

Regardless of which method you use, scanning the QR code or directly typing the link into your device’s browser.you will see a message similar to this:

Click “OK”.
(Don’t worry, the AI2 Companion app will not harm your mobile device.)

While you’re building an app on your computer, you can test it on a connected Android phone or tablet.
Be sure your computer and mobile device are connected to the same WiFi network.
Return to the Designer.
Window on your computer. Click Connect and choose AI Companion from the drop down menu.

QR code and a 6-character code will appear on the screen of your computer screen.

Open the AI2 Companion app on your device by clicking on the app icon.A screen (like the one shown below) will appear with the option to scan the QR code or type in the   six character code.If you choose to scan the code, press the blue “scan QR code” button for the scanner to launch. Scan the QR code. Wait a few seconds for your app to open on your mobile device.If you choose to use the code, type it into the white text box, click the orange button afterwards.

If you can not connect over Wi-fi, go to the Setup Instructions on the App Inventor. Website to find out how to connect with a USB cable.http://appinventor.mit.edu/explore/ai2/setup.html.

You will know that your connection is successful when you see your app on the connected device.Since our app only has a button, that is what you will see on your mobile device. As you add more components to the project, your app will update on your computer and your phone.

In the properties panel, change the text for the Button. Under the Text property, select “Text for Button 1”, delete it and type in “Talk To Me”. Notice that the text on your app’s button changes right away too.

Go to the Media drawer in the Palette and drag out a TextToSpeech component.  Drag and drop it onto the Viewer. Notice that it drops down under “Non-visible components” because it is not something that will show up on the app’s user interface. It’s more like a tool that is available to the app.

It’s time to tell your app what to do. The Blocks Editor is where you program the behavior of your app.Click the button “Blocks” to move over to the Blocks Editor.
You will often toggle between the Designer and Blocks Editor as you develop apps.

There are Built-in blocks that handle things like math, logic, and text. Below that are the blocks that go with each of the components you add to your app.(In order to get the blocks for a certain component to show up in the Blocks Editor, you first add that component to your app in the Designer.)

    Click on the Button1 drawer.    Click and hold the when Button1. Click do event block.    Drag it over to the Viewer and drop it there.    This block will launch when the button on your app is clicked.    It is called an “Event Handler”.

Click on the TextToSpeech drawer.Click and hold the call TextToSpeech1.Speak block.Drag it over to the Viewer and drop it there.This is the block that will make the phone speak.Because it is inside the Button.Click, it will run when the button on your app is clicked.

Now you need to tell the TextToSpeech. Speak block what to say. 
Click on the Text drawer drag out a text block and plug it into the socket labeled “message”.

Click on the text block and type in “Congratulations! You’ve made your first app.” (Feel free to useany phrase you like.)

Go to your connected device and click the button. Make sure your volume is up! You should hear the phone speak the phrase out loud. (This works even with the emulator.)

0 0 vote
Rating
guest
0 Comments
Inline Feedbacks
View all comments