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
  • Explore
    • 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

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
  • News
  • Trends
  • Insight
  • eLearning
  • Reviews
  • Dictionary
  • EdTech Voices
  • Data & Statistics
  • Research
  • AWS for Education
  • Events
  • Voices
  • Tags
  • About
  • Contribute
  • FAQ’S
  • Our Clients
  • Partner
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-author
Saniya Khan Published Aug 27, 2021
1 Views
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
Saniya-khan-author
Posted 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

Must Know Activities to Support Cognitive Skill Development for Kids 
Must Know Activities to Support Cognitive Skill Development for Kids
Insight Mar 21, 2023
Teaching with Chatgpt: How Ai Can Revolutionize Your Classroom Workflow
Teaching With ChatGPT: How AI Can Revolutionize Your Classroom Workflow
Trends Mar 21, 2023
Shikho-raises-0k
Bangladeshi EdTech Shikho Raises $900k in Strategic Funding Round
News Mar 21, 2023
Risekit-raises-5m
Community Recruitment Platform RiseKit Raises $4.75M to Offer Job Seekers Access to Career Paths
News Mar 21, 2023
AdvertisementWhy this Ad?

Latest EdTech News To Your Inbox

Stay Connected

Facebook Twitter Youtube Instagram Linkedin
AdvertisementWhy this Ad?

You Might Also Like

Must Know Activities to Support Cognitive Skill Development for Kids 
Insight

Must Know Activities to Support Cognitive Skill Development for Kids

Mar 21, 2023
Can Edtech Help India Create an Inclusive Education Ecosystem ?
Insight

Can Edtech Help India Create an Inclusive Education Ecosystem ?

Mar 18, 2023
What is Flipped Classroom Model and How Does It Help
Insight

What Is Flipped Classroom Model and How Does It Help?

Mar 17, 2023
[infographic] Basic Needs of a Student - What You Need to Know
Insight

[Infographic] Basic Needs of a Student – What You Need to Know

Mar 16, 2023
a Path to Success: Vernacular Learning for Career Development of 200 Million Arabs
Insight

A Path to Success: Vernacular Learning for Career Development of 200 Million Arabs

Mar 15, 2023
[infographic] 94% Learners Say They Prefer Microlearning - Enhancing Workplace Training
Insight

[Infographic] 94% Learners Say They Prefer Microlearning – Enhancing Workplace Training

Mar 10, 2023
Why Corporates Are Partnering with Edtechs to Meet Upskilling Demands
Insight

Why Corporates Are Partnering With EdTechs to Meet Upskilling Demands

Mar 9, 2023
Why Financial Literacy is the Need of the Hour in Indian Education ?
Insight

Why Financial Literacy Is the Need of the Hour in Indian Education?

Mar 8, 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
  • Submit Your EdTech Product for Review
  • Our Clients
  • FAQ’S
  • Contact Us
  • Important Links
  • Sitemap
  • Terms of Use
  • Privacy Policy
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?