Header Ads

Build Android apps using MIT App Inventor 2

A little about MIT App Inventor

MIT App Inventor is a blocks-based programming tool that allows everyone, even novices, to start programming and build fully functional apps for Android devices. Newcomers to App Inventor can have their first app up and running in an hour or less, and can program more complex apps in significantly less time than with more traditional, text-based languages.- Says their about page.

Now the good thing about this website is that even if you are not a programmer, you can easily learn to build apps. As you get use to it, you will eventually start making better and better apps..
The editor is divided into parts:
  1. Designer: The place where you design and put objects such as buttons and images etc.
  2. Blocks: Now this is a little tough part. This is where you define the purpose and actions perform by those objects.

Designer

This is the place where you place objects. As you can view the image below it. It is to design the App's User Interface by arranging both on and off-screen components.
The palette is divided into 9 categories.
User Interface:
This consist of the very main objects required by every app. As the word suggest it defines the UI of an app. Following are the options:
  • Button; Button with the ability to detect clicks.
  • TextBox; A box for the user to enter text.
  • List View; This is a visible component that allows to place a list of text elements in your Screen to display.
  • Date Picker; A button that, when clicked on, launches a popup dialog to allow the user to select a date.
  • Time Picker; A button that, when clicked on, launches a popup dialog to allow the user to select a time.
  • Check Box; Checkbox that raises an event when the user clicks on it. There are many properties affecting its appearance that can be set in the Designer or Blocks Editor.
  • Label; A Label displays a piece of text, which is specified through the Text property. Other properties, all of which can be set in the Designer or Blocks Editor, control the appearance and placement of the text.
  • List Picker; A button that, when clicked on, displays a list of texts for the user to choose among.
  • Slider; A Slider is a progress bar that adds a draggable thumb. You can touch the thumb and drag left or right to set the slider thumb position.
  • Password Text Box; A box for entering passwords.
  • Notifier; The Notifier component displays alert dialogs, messages, and temporary alerts, and creates Android log entries
  • Image; Component for displaying images. The other aspects can be specified in Designer or Blocks properties.
  • Web Viewer; Component for viewing Web pages. The Home URL can be specified in the Designer or in the Blocks Editor. You can use the WebViewer.WebViewString property to communicate between your app and Javascript code running in the Webviewer page.
  • Spinner; A spinner component that displays a pop-up with a list of elements.

Layout:

Consist of 3 arrangements:
  • Vertical Arrangement; A formatting element in which to place components that should be displayed one below another. (The first child component is stored on top, the second beneath it, etc.)
  • Horizontal Arrangement; A formatting element in which to place components that should be displayed from left to right.
  • Table Arrangement; A formatting element in which to place components that should be displayed in tabular form.

Media:

  • Player; Multimedia component that plays audio and controls phone vibration. Best for long files.
  • Sound; A multimedia component that plays sound files and optionally vibrates for the number of milliseconds specified in the Blocks Editor. Best for short files.
  • TextToSpeech; Component for using TextToSpeech to speak a message
  • Yandex Translate; Use this component to translate words and sentences between different languages. This component needs Internet access, as it will request translations to the Yandex.Translate service.
  • Video Player; A multimedia component capable of playing videos. When the application is run, the VideoPlayer will be displayed as a rectangle on-screen. If the user touches the rectangle, controls will appear to play/pause, skip ahead/backward.
  • Camcorder; A component to record a video using the device"s camcorder.
  • Camera; A component to take a picture using the device"s camera.
  • Speech Recognizer; Component for using Voice Recognition to convert from speech to text
  • Image Picker; A special-purpose button. When the user taps an image picker, the device"s image gallery appears, and the user can choose an image.
  • Sound Recorder; Multimedia component that records audio.

Drawing and Animation:

  • Sprite; A "sprite" that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (Balls and otherImageSprites) and the edge of the Canvas, and move according to its property values.
  • Canvas; A two-dimensional touch-sensitive rectangular panel on which drawing can be done and sprites can be moved. The BackgroundColor, PaintColor,BackgroundImage, Width, and Height of the Canvas can be set in either the Designer or in the Blocks Editor. The Width and Height are measured in pixels and must be positive.
  • Ball; A round "sprite" that can be placed on a Canvas, where it can react to touches and drags, interact with other sprites (ImageSprites and other Balls) and the edge of the Canvas

Sensors:

  • Clock; Non-visible component that provides the instant in timeusing the internal clock on the phone.
  • Barcode scanner
  • Location Sensor
  • Orientation Sensor
  • Near Field; Non-visible component to provide NFC capabilities.
  • Accelerometer Sensor
  • Proximity Sensor

Social:

  • Email Picker; An EmailPicker is a kind of text box. If the user begins entering the name or email address of a contact, the phone will show a dropdown menu of choices that complete the entry.
  • Texting; A component that will, when the SendMessagemethod is called, send the text message specified in the Message property to the phone number specified in the PhoneNumberproperty.
  • Phone Number Picker; A button that, when clicked on, displays a list of the contacts" phone numbers to choose among.
  • Phone Call; A non-visible component that makes a phone call to the number specified in thePhoneNumber property,
  • Sharing; Sharing is a non-visible component that enables sharing files and/or messages between your app and other apps installed on a device.
  • Twitter; A non-visible component that enables communication with Twitter. Once a user has logged into their Twitter account (and the authorization has been confirmed successful many more operations are available e.g. sending tweets and receiving messages etc
  • Contact Picker; A button that, when clicked on, displays a list of the contacts to choose among.

Storage:

  • Fusion tables Control; A non-visible component that communicates with Google Fusion Tables. Fusion Tables let you store, share, query and visualize data tables; this component lets you query, create, and modify these tables.
  • File; Non-visible component for storing and retrieving files. Use this component to write or read files on your device.
  • TinyWeb DB; Non-visible component that communicates with a Web service to store and retrieve information.
  • Tiny DB; TinyDB is a non-visible component that stores data for an app.

Connectivity:

  • Bluetooth Client
  • Bluetooth Server
  • Activity Starter; To start other activity e.g. starting app, camera, maps, performing web search, opening browser etc.
  • Web; Non-visible component that provides functions for HTTP GET, POST, PUT, and DELETE requests.

LEGO® MINDSTORMS®

These components provide control of LEGO® MINDSTORMS® NXT robots using Bluetooth.
  • NxtDirectCommands
  • NxtColorSensor
  • NxtLightSensor
  • NxtSoundSensor
  • NxtUltrasonicSensor
  • NxtTouchSensor
  • NxtDrive

Blocks

Built-in blocks are available regardless of which components are in your project. In addition to these language blocks, each component in your project has its own set of blocks specific to its own events, methods, and properties. This is an overview of all of the Built-In Blocks available in the Blocks Editor.
These are a little tough part. Their are 7 different types of block available. You need to have understanding about what each block performs. To get know-how of it, click on the link below which will direct you to their website explaining in detail.
  1. Control blocks
  2. Logic blocks
  3. Math blocks
  4. Text blocks
  5. Lists blocks
  6. Colors blocks
  7. Variables blocks

Test the app in LIVE MODE!

From the top bar. Click on "Connect" -> "AI Companion"
This thing will pop-up


Run the app from your android device and connect with the given code. Then it will automatically directs you to the live testing.

Video Tutorials

Follow these four short videos and you'll have working apps to show for it! After building the starter apps, which will take around an hour, you can move on to extending them with more functionality, or you can start building apps of your own design.

1. TalkToMe Text-to-Speech App


If you prefer to view tutorial in PDF file format (Text & Images) Click here.

2. Extended TalkToMe App: Shake!

Extended version with more advance features than the one on top. Learn to perform and react to shakes and to speak any phrase you give it.

3. BallBounce Game App

\
"Fling, Flang, Flung? Whatever you call it, bouncing the ball around the screen is pure fun."
-Says the creator.

4. DigitalDoodle Drawing App

I'm telling you this app can eliminate the use of paper!