This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media.
Accept
EdTechReviewEdTechReview
  • News
  • Trends
  • Insight
  • eLearning
  • Research
  • Dictionary
  • EdTech Voices
  • More
    • Data & Statistics
    • Reviews
    • AWS for Education
    • Events

    Resources

    • Infographics
    • Reports & Case Studies
    • Videos
    • Books
    • Webinar

    Needs

    • 1:1 Learning
    • 21st Century Education
    • 21st Century Leadership
    • 21st Century Learning
    • 21st Century Teaching
    • 3D Printing
    • More Tags

    For

    • Students
    • Teachers/Educators
    • Administrators
    • Entrepreneurs/Startups
    • Govt. Officials/Policymakers
    • Parents
Explore
Search
Contribute
  • Submit A Post
  • EdTech Trainers and Consultants
  • Your Campus EdTech
  • Your EdTech Product
  • Your Feedback
  • Your Love for Us
  • EdTech Product Reviews
ETR Resources
  • About
  • Mission/Vision
  • Team
  • Services
  • Testimonials
  • Authors
  • Sponsor
  • Partner
  • Advertise
  • Our Clients
  • Media Kit
  • Press Release
  • FAQ’S
Reading: How To Build Apps Using MIT App Inventor?
Aa
EdTechReviewEdTechReview
Aa
Search
Follow US
Home > Trend & Insight > Insight > How To Build Apps Using MIT App Inventor?
Insight

How To Build Apps Using MIT App Inventor?

Saniya Khan Published Aug 27, 2021
Share
6 Min Read
how to build apps using mit app inventor?
How To Build Apps Using MIT App Inventor?
SHARE

MIT App Inventor is a free cloud service that lets you build your mobile apps using a block-based programming language. It has more than 8.2 million customers in 195 countries around the world.

AdvertisementWhy this Ad?
Contents
First wayHow to select components and set properties?
AdvertisementWhy this Ad?

The app inventor offers four different tutorials for beginners and features a massive collection of application creation guides. It also has a section dedicated to providing resources and curriculum ideas for teachers using MIT App Inventor. This section explains what you may require and what you (IT) people need to know before setting up the application for your school. Community Forum, MIT App Inventor Tutorials Page, App Building Guides, Artificial Intelligence with App Inventor, Internet of Things with App Inventor and Links to other App Inventor Resources.

Furthermore, MIT inventor has a support section to help users get answers to their questions and collaborate and contribute section, too.

This article will provide a user-friendly step-by-step guide for creating your mobile apps using MIT App Inventor and help you learn the basics of programming applications for Android devices.

First way

In this tutorial, we will guide you in making your very first app: Hello Codi!

To begin making apps, click on the orange “Create Apps!” button on the app inventor. Set up your phone or tablet for live testing. Do check the setup instructions. (Or, start the emulator if you don’t have a mobile device.)

You can access MIT App Inventor through a web browser (Chrome, Firefox, Safari). Also, check the system requirements in advance. Take a walkthrough of the App Inventor environment i.e., learn about the designer and blocks editor.

Next, open Designer or Blocks Editor in your browser, Android device or an Android emulator connected to the Blocks Editor. Choose 'Start a New Project' from the Projects menu and name it Hello Codi.

Hello Codi is an easy-to-build application that could be created in no time. First of all, you need to create a button with a picture of the Codi bee over it, and then program the button so when users click the phone; it makes a buzzing sound.

To create the Hello Codi app, find and upload the Codi the Bee image file.

  • Codi picture: codi.jpg (Right-click and save)
  • Bee sound: Bee-Sound.mp3 (Right-click and save)

to create the hello codi app

Next, go to the Designer window under the title Palette at the left of the App Inventor. It includes the Components, the essential elements to use to make applications on the Android phone. Some components are straightforward, such as a Label component that shows text on the screen or a button that is typed to initiate an action. Other components are more detailed: a Canvas drawing that can hold still images or animations and an Accelerometer sensor that operates like a Wii controller. It detects motions like moving or shaking the phone; also, components that send text messages, play music and video or get information from Web sites, and so on.

To use a component, click and drag it to the viewer at the centre of the Designer. So, when you add a component to the viewer (see #1 below), it is also shown in the list of components on the right side of the Viewer.

They (see #2 below) have adjustable properties. These properties modify the way the component is displayed or behaved in the application. To view and modify a component's properties (see #3 below). You first need to select the required component from your component list.

designer window under the title palette

How to select components and set properties?

As previously mentioned, the application will have a Button component displaying the image of the bee inserted by you. This is accomplished by:

Step 1(a). Navigate to the User Interface palette, drag and drop the Button component on screen 1 (refer to section 1 below).

Step 1(b). To place the image of the bee on the button, go to the Properties tab; under Image, click on the text "None" and then click "Upload File..." (refer to #2, below).

A new window will appear, select the picture file, click "Browse", then browse to the location of the codi.jpg file you uploaded earlier (see #3 below).

Click on the codi.jpg file, click on "Open", then click on "OK".

place the image of the bee on the button

Step 2. Change the Button's Text property:

At first, delete "Text for Button1"; leave the Button's text property blank to make sure there is no writing over the bee image.

text for button1

Step 3. In the User Interface palette, drag and drop the label component into the viewer (see #1), place it under the bee image. It will show up under your component list under Label1.

For more beautification, go to the Properties tab, modify:

  • Text property of Label1 lecture "Touch the Bee". You can change the colour, font style and size.
  • Font Size to 30.
  • Background Color of Label1.Click on the box and choose the desired colour. You may change it to any colour.

Note: Ensure that the background and text colours are not the same. It can complicate the reading of the text.

Look at the image; for example, the background colour is set to aqua, and the text colour is set to blue, making it easier to read.

label touch the bee

Step 4. Under the Palette pane, click on Media and choose a Sound component and place it in the viewer (refer to #1). Wherever you drop the sound, it will appear in the area at the bottom of the viewer marked Non-visible components.

Then, Underneath the Media pane, Click Upload File... (refer to #2), browse to the location of the Bee-Sound.mp3 file and upload it to this project (refer to #3).

Under the Properties, see that the Source property indicates None. Click the word None to change the Sound1 component's Source to Bee-Sound.mp3 (refer to #4).

sound touch the bee

123Next Page
TAGGED: Android/iOS Apps, App Development, Computer Programming/Coding, Free Apps and Tools, Students, Teachers/Educators, Tips for Teachers/Educators, Tools for Students, Tools for Teachers/Educators
Share This Article
Facebook Twitter Whatsapp Whatsapp LinkedIn Reddit Telegram Email Copy Link
By Saniya Khan
I am Saniya Khan, Copy-Editor at EdTechReview - India’s leading edtech media. As a part of the group, my aim is to spread awareness on the growing edtech market by guiding all educational stakeholders on latest and quality news, information and resources. A voraciously curious writer with a dedication to excellence creates interesting yet informational pieces, playing with words since 2016.
Previous Article ibm and iit madras IBM & IIT Madras Collaborate to Augment NPTEL Courses That Build Industry Relevant Skills
Next Article indian edtech's global success - key learnings, new opportunities & more Indian EdTech’s Global Success – Key Learnings, New Opportunities & more
AdvertisementWhy this Ad?

Latest EdTech News To Your Inbox

Stay Connected

Facebook Twitter Youtube Instagram Linkedin
AdvertisementWhy this Ad?

Latest Post

web3.0-based lumos labs launches lumos academy for developers
Web3.0-Based Lumos Labs Launches Lumos Academy for Developers
News Jun 9, 2023
educational fundraising platform givecampus acquires community funded
Educational Fundraising Platform GiveCampus Acquires Community Funded
News Jun 9, 2023
powerschool partners with stepwell to streamline special education compliance & monitoring
PowerSchool Partners With Stepwell to Streamline Special Education Compliance & Monitoring
News Jun 9, 2023
makemytrip launches industry-first, bundled offering for indian students traveling abroad
MakeMyTrip Launches Industry-First, Bundled Offering for Indian Students Traveling Abroad
News Jun 9, 2023
AdvertisementWhy this Ad?

Latest EdTech News To Your Inbox

Stay Connected

Facebook Twitter Youtube Instagram Linkedin
AdvertisementWhy this Ad?

You Might Also Like

what is digital literacy its importance and challenges
Insight

What is Digital Literacy, Its Importance, and Challenges?

Jun 6, 2023
the power of ai in education: empowering learners and teachers
Insight

The Power of AI in Education: Empowering Learners and Teachers

Jun 6, 2023
the importance of being present for your child: building strong connection
Insight

The Importance of Being Present for Your Child: Building Strong Connection

May 31, 2023
learning in a new dimension: the benefits of virtual reality in education
Insight

Learning in a New Dimension: The Benefits of Virtual Reality in Education

May 30, 2023
how to develop an entrepreneurial mindset in students
Insight

How to Develop an Entrepreneurial Mindset in Students

May 29, 2023
from distraction to distinction: how responsible use of 1:1 devices can revolutionize learning in schools
Insight

From Distraction to Distinction: How Responsible Use of 1:1 Devices Can Revolutionize Learning in Schools

May 27, 2023
everything you must know about the 504 plan
Insight

Everything You Must Know About the 504 Plan

May 27, 2023
daycare arrangements result in maximum increase in job productivity among working moms; klay's survey reveals
Insight

Daycare Arrangements Result in Maximum Increase in Job Productivity Among Working Moms; KLAY’s Survey Reveals

May 26, 2023
Show More
EdTechReviewEdTechReview

H433, 2nd Floor, Vikaspuri, New Delhi, India, 110018
Phone: 011 41321030

Follow US

Copyright © EdTechReview. All Rights Reserved.

  • Home
  • Advertise
  • Event Associations
  • Press Release
  • About
  • Services
  • Contribute
  • News
  • Trend & Insight
  • Data & Statistics
  • eLearning
  • Reviews
  • Research
  • Voices
  • Dictionary
  • Tags
  • Resources
  • Events
  • Courses
  • EdTech Product for Review
  • Our Clients
  • FAQ’S
  • Contact Us
  • Important Links
  • Sitemap
  • Terms of Use
  • Privacy Policy
newsletter
Join 100K+ subscribers!

Subscribe to our weekly newsletter that brings the latest EdTech news, trends, insights, reports, interviews, etc. for educators, school leaders, entrepreneurs, investors, & others.

Zero spam, Unsubscribe at any time.
Go to mobile version
Welcome Back!

Sign in to your account

Lost your password?