App Inventor

By :
Kunal Sharma - 2014054
Mansi Goel - 2014062
Taneea S Agrawaal - 2014166

Developer(s): Google, MIT MediaLab
Written In: Java, Kawa Scheme
Operating System: Web Based Application
Platform: Android
Type: App Software Development

INTRODUCTION

APP INVENTOR for Android is an open-source web application originally provided by Google, and now maintained by the Massachusetts Institute of Technology (MIT).
It 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.
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.

App Inventor includes:
• A designer, in which a program's components are specified. This includes visible components, such as buttons and images, which are placed on a simulated screen, and non-visible components, such as sensors and web connections.

palette.PNG

• A blocks editor, in which the program's logic is created.

Blocks.PNG

• A compiler based on the Kawa language framework and Kawa's dialect of the Scheme programming language.
• An app for real-time debugging on a connected Android device.

USER INTERFACE

userinterface.PNG
  • Button: Button with the ability to detect clicks.
  • CheckBox: Check box components can detect user taps and can change their boolean state in response.
  • DatePicker: A button that, when clicked on, launches a popup dialog to allow the user to select a date.
  • Image: Component for displaying images.
  • Label: Labels are components used to show text.
  • ListPicker: A button that, when clicked on, displays a list of texts for the user to choose among.
  • ListView: This is a visible component that allows to place a list of text elements in your Screen to display.
  • Notifier: The Notifier component displays alert dialogs, messages, and temporary alerts, and creates Android log entries.
  • PasswordTextBox: Users enter passwords in a password text box component, which hides the text that has been typed in it.
  • Screen: Top-level component containing all other components in the program.
screen.PNG
  • 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.
  • Spinner: A spinner component that displays a pop-up with a list of elements.
  • TextBox: Users enter text in a text box component.
  • TimePicker: A button that, when clicked on, launches a popup dialog to allow the user to select a time.
  • WebViewer: Component for viewing Web pages. The Home URL can be specified in the Designer or in the Blocks Editor

LAYOUT COMPONENTS

  • HorizontalArrangement: Use a horizontal arrangement component to display a group of components laid out from left to right.
  • TableArrangement: Use a table arrangement component to display a group of components in a tabular fashion. In a TableArrangement, components are arranged in a grid of rows and columns, with not more than one component visible in each cell. If multiple components occupy the same cell, only the last one will be visible.
  • VerticalArrangement: Use a vertical arrangement component to display a group of components laid out from top to bottom, left-aligned.

MEDIA COMPONENTS

media.PNG
  • Camcorder: A component to record a video using the device's camcorder.
  • Camera: Use a camera component to take a picture on the phone.
  • ImagePicker: When the user taps an image picker, the device's image gallery appears, and the user can choose an image.
  • Player: Multimedia component that plays audio and controls phone vibration.
  • Sound: A multimedia component that plays sound files and optionally vibrates for the number of milliseconds (thousandths of a second) specified in the Blocks Editor
  • SoundRecorder: Multimedia component that records audio.
  • SpeechRecognizer: Use a speech recognizer component to listen to the user speaking and convert the spoken sound into text using Android's speech recognition feature.
  • TextToSpeech: Use a text-to-speech component to have the device speak text audibly.
  • VideoPlayer: A multimedia component capable of playing videos.
  • YandexTranslate: Use this component to translate words and sentences between different languages. This component needs Internet access, as it will request translations to the Yandex.

CALCULATOR UTILITY

Let’s Make A Simple Calculator Using App Inventor

1.jpg
  • Step 2: Click on the Projects tab to build a new project. Choose your project name.
3.jpg
  • Step 3: Drag a label from the User Interface menu which will display all the data you enter for your calculator.
5.jpg
  • Step 4: Then choose the Table Arrangement Layout and to hold the different buttons that you drag from the Buttons tab in a structured order.
6.jpg
7.jpg
  • Step 5: Customize the Label and Buttons using Components and Properties Menu the way you want for your calculator. Edit their Text input, Width, Height, Background Colour and rename them for your convenience.

Now with this, we have completed the User Interface part of your app. That is how your calculator will look.

8.jpg
final.PNG

Now to choose and customize all the logical operations and the real functioning of calculator, go to the Blocks menu.
You are going to use different built in libraries like Control, Logic, Math, Variables, Text and Procedures for the following operations.

  • Step 6: For the backend part, you have to know how actually the calculator works and programs it according to that. We have to initialise 3 variables for this: Current (to hold the current number), Previous (to hold the number before assignment of the operator) and Operator (to hold the arithmetic operator).
12.PNG
  • Step 7: Then we have to get the input from a Number Button, multiply the previous value by 10 and add to the current input to display it on the label. Do this repeatedly for all the numbers ranging from 0-9. We can also use the ‘procedure’ option to save us from a lot of coding which will enable us to perform the same function on any number we chose.
13.PNG
14.PNG
15.PNG
  • Step 8: Similarly we will design the block for Reset button in which we will set the value of all variables to 0 and display 0 on the Label.
17.PNG
  • Step 9: To design the block for arithmetic operators, we have to set the previous value to the current, current to 0 and display the operator on label. We can do this using ‘procedures’ also. Through this step you can design as many mathematical functions as you want like log, tan.
18.PNG
  • Step 10: For the equality button, use logical operations like if, else if and then to check your arithmetic operator and perform the same operation on current and previous numbers. But this calculator will work only when two numbers are operated. Example: for 2+3+4 will give output = 7 instead of 9. To make it work for the multiple inputs, follow Step 11.
19.PNG
  • Step 11: To operate multiple inputs at the same time, we can design a code which checks whether the previous value is 0 or not. If it is not 0, then definitely an operation has been assigned. So we can evaluate that operation and store the output in previous variable.
20.PNG

YOUTUBE VIDEO

For further explanations, refer to the link below:
https://www.youtube.com/watch?v=dUCEGKASVAs&feature=youtu.be

INSTALLATION INSTRUCTIONS

Download .apk
Once you are done making your app, you can download your Android .apk file as follows:
1. Navigate to the home screen of the app you want to download in App Inventor
2. Click the dropdown labled “Package for phone”
3. Click “Download to This Computer”
This will prompt you to save the application somewhere. Once you have the .apk downloaded, you are ready to begin the publishing process.

Publish Your App
You can now go to Google Play Publishing Home and follow the steps to publish your app to Google Play.

Your calculator app is ready!!!!

Screenshot_2014-11-15-16-39-18.png

CAUTION: Building Apps with many screens
App Inventor makes it easy to add more screens to an app, but you’ll need to be cautious about adding too many screens. App Inventor’s design makes it expensive in terms of computing resources to have an app with multiple screens, and it is easy to exceed App Inventor’s limitations. As a rule of thumb, you should not have more than 10 screens in any single app, and App Inventor will warn you when you attempt to exceed this limit.

REFERENCES

https://www.youtube.com/watch?v=gYfSwqL1PK0
http://appinventor.mit.edu/explore/
http://appinventor.mit.edu/explore/ai2/support/blocks.html
http://ai2.appinventor.mit.edu/reference/components/
http://ai2.appinventor.mit.edu/reference/other/
http://en.wikipedia.org/wiki/App_Inventor_for_Android

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License