Sindhudurg shikshan Prasarak Mandal’s College of Engineering (Kankavali) 416602
Experiment No.
ACADEMIC YEAR (2024-2025) SEMESTER -VI
Department: Computer Engineering Course Name: MCLab
Class: T.E.
========= Course Code: CSL603
============================================================================
Experiment: Implementation of calculator app using MIT app Inventor.
Objective:
To design and implement a basic Calculator App using MIT App Inventor which can perform basic
arithmetic operations like addition, subtraction, multiplication, and division.
Software/Tools Required:
MIT App Inventor (http://ai2.appinventor.mit.edu)
Computer/Laptop with Internet access
Android Smartphone (for testing the app)
MIT AI2 Companion App (for live testing)
Theory:
MIT App Inventor is a web application provided by MIT that allows users to create Android
applications using a block-based programming approach. It provides a visual programming
environment to build fully functional apps without prior coding knowledge. A calculator app is
one of the most common beginner projects, which helps users understand the concept of user
interface design and basic programming logic like arithmetic operations.
Procedure:
1. Open MIT App Inventor:
o Go to the official website: http://ai2.appinventor.mit.edu
o Sign in using your Google account.
2. Create a New Project:
o Click on "Start new project" and name it as CalculatorApp.
3. Design the User Interface:
o From the Palette, drag and drop the following components into the Viewer:
Label: To display the title as "Calculator".
TextBox (2): For inputting two numbers (Number1 and Number2).
Buttons (4): For the four operations (Add, Subtract, Multiply, Divide).
Label: To display the result.
o Arrange the components neatly using Layout elements like
HorizontalArrangement or VerticalArrangement.
4. Set Properties:
o Set the Hint for both TextBoxes as "Enter Number 1" and "Enter Number 2".
o Rename Buttons as "Add", "Subtract", "Multiply", and "Divide".
o Set the result Label to display "Result will be shown here".
5. Blocks Programming:
o Switch to the Blocks section.
o For each button, create the logic using blocks as follows:
Get the numbers from both TextBoxes.
Convert the input to numbers using text to number block.
Perform the respective arithmetic operation.
Display the result in the Result Label.
6. Test the App:
o Open the MIT AI2 Companion App on your Android phone.
o Scan the QR code from MIT App Inventor to test the app live.
7. Save and Export APK:
o Once the app is working correctly, you can export the APK file and install it on
any Android device.
Expected Output:
An Android app that allows users to input two numbers and perform basic arithmetic operations
(Addition, Subtraction, Multiplication, Division) and display the result on the screen.
Result:
Successfully implemented a basic Calculator App using MIT App Inventor that performs four
basic arithmetic operations.
Conclusion:
The Calculator App was designed and implemented using the drag-and-drop interface of MIT App
Inventor. Through this experiment, the concept of user interface design, input handling, and basic
block-based programming was understood.
References: https://www.youtube.com/watch?v=o7mtOWttVBs
