Belajar Dasar Coding || Membuat Aplikasi Android Penjumlahan Dengan MIT APP Inventor

Introduction

In this tutorial, we will learn the basics of coding by creating a simple addition application using MIT App Inventor. This guide is designed for beginners who want to get started with mobile programming. By the end of this tutorial, you will have a functional app that performs addition, along with a better understanding of the design and coding process in MIT App Inventor.

Step 1: Setting Up MIT App Inventor

1. Open your web browser and go to the MIT App Inventor website.
2. Sign in with your Google account.
3. Click on "Create Apps!" to access the App Inventor interface.
4. Familiarize yourself with the workspace, which includes:
   • The Design screen for layout.
   • The Blocks screen for coding logic.

Step 2: Designing the User Interface

1. Switch to the Design screen.
2. Drag and drop the following components from the Palette to the Viewer:
   • Label: For displaying instructions (e.g., "Enter two numbers to add").
   • TextBox: For user input (two TextBoxes for two numbers).
   • Button: To trigger the addition (label it as "Add").
   • Label: To display the result (set its initial text to "Result will appear here").
3. Arrange the components neatly for a user-friendly interface.

Step 3: Adding Functionality with Blocks

1. Switch to the Blocks screen.
2. For the Add button, create the following logic:
   • Use the when Button.Click block to start your code when the button is clicked.
   • Inside this block, retrieve the values from the TextBoxes using the TextBox.Text property.
   • Convert these text values to numbers with the number block.
   • Add the two numbers using the + operator.
   • Set the text of the result Label with the set Label.Text to block, displaying the result of the addition.

Example Code Blocks

when Button1.Click
    set Label2.Text to (TextBox1.Text + TextBox2.Text)

Step 4: Testing the Application

1. Connect your Android device using the MIT AI2 Companion app, or use the Emulator if you don't have a device.
2. Click on "Connect" in the App Inventor menu and select "AI Companion".
3. Scan the QR code or enter the code provided in the Companion app.
4. Test the application by entering numbers in the TextBoxes and clicking the "Add" button. Verify that the result displays correctly.

Step 5: Final Touches and Enhancements

1. Customize the look of your app by changing the properties of components (like colors and fonts).
2. Consider adding error handling to manage non-numeric inputs. Use the if statement to check if inputs are valid numbers.
3. Explore additional features, such as subtraction or multiplication, by creating new buttons and logic.

Conclusion

Congratulations! You have successfully created a basic addition application using MIT App Inventor. This tutorial covered setting up the environment, designing the user interface, coding functionality, and testing the app. As your next steps, you can further enhance your app with additional features or explore more complex projects to deepen your understanding of mobile programming. Happy coding!