Different Components in App Inventor

Now that you’ve planned your Minimum Viable Product (MVP), it’s time to think about the specific tools within MIT App Inventor that will help you build it.

App Inventor is more than just buttons and labels! It has a whole collection of powerful Components, including Sensors, that let your app interact with the phone’s features and the world around it. Let’s explore this toolbox!

Lesson Topic: Different Components in App Inventor

Part 1: App Inventor’s Special Tools (Components & Sensors)

You know the basics from the User Interface palette (Button, Label, TextBox, etc.). But App Inventor offers much more, grouped into categories in the Palette on the left side of the Designer view:

• Media: Components to work with the Camera, play Sounds, record audio (SoundRecorder), use Text-To-Speech or Speech Recognition, play Videos, and even Translate text.
• Drawing and Animation: A Canvas for drawing or creating simple games with Ball and ImageSprite components.
• Maps: Components to display maps and markers.
• Sensors: Access the phone’s built-in sensors like the LocationSensor (GPS), AccelerometerSensor (motion), Clock (time), BarcodeScanner, Pedometer (step counter), and others (like Gyroscope, Light, Proximity – availability depends on the phone).
• Social: Components to make Phone Calls, send Texts (Texting), Share content with other apps, or pick Contacts/Phone Numbers/Emails.
• Storage: Ways to save data! Use TinyDB to save information directly on the phone so it persists when the app closes. Use CloudDB or FirebaseDB to store data online, allowing different users to share information. Use the Spreadsheet component to interact with Google Sheets.
• Connectivity: Connect to the Web (Web component), Bluetooth devices, or even launch other apps (ActivityStarter).
• LEGO® MINDSTORMS®: (If applicable) Components to control LEGO robots.
• Experimental: Contains components like FirebaseDB (which is actually quite stable now) and potentially others being tested.
• Extensions: You can even add custom components via extensions, like those for specific AI models (Personal Image Classifier, etc.).

Think Ugandan Examples with App Inventor:

• Use the LocationSensor and Maps components to show nearby clinics or safe water points.
• Use the Camera or BarcodeScanner for a simple inventory app for a local shop.
• Use the TextToSpeech component to have the app read agricultural tips in a local language.
• Use CloudDB to create a shared community notice board within your app.
• Use TinyDB to save user preferences or game progress locally on their phone.

Part 2: Exploring the App Inventor Palette

The lesson provides a link to a document comparing App Inventor and Thunkable components, but you can also just explore directly in App Inventor!

• How to Add Components: In the Designer view, look at the Palette on the left. Click on a category (like “Sensors” or “Media”) to open its drawer. Then, simply drag the component you want (e.g., LocationSensor) onto the phone screen mock-up (the Viewer).
• Visible vs. Non-Visible: Components like Button or Map appear on the screen. Non-visible components like LocationSensor, Clock, TinyDB, or SoundRecorder appear in a section below the Viewer – they work in the background.

Spend a few minutes just clicking through the drawers in the Palette to see what’s available!

Part 3: Becoming an App Inventor Detective (The Activity – 60 mins)

This activity is designed to build a super important skill: learning how to learn new technical things independently.

Your Mission:

1. Choose One Component: Look through the App Inventor Palette or the component list from the lesson document. Select one component (that’s not just a basic UI element like a Button) which seems potentially useful or interesting for your team’s app idea.
2. Find the Instructions: Now, investigate! Your task is to find tutorials or documentation explaining how to use this component in App Inventor.
   • Start with the official resources linked in the lesson: MIT’s Component Reference, App Inventor Tutorials, App Inventor YouTube channel.
   • Use Google Search effectively: Try queries like “App Inventor LocationSensor tutorial”, “How to use TinyDB App Inventor”, “App Inventor TextToSpeech example”.
   • Look for clear explanations, step-by-step guides, example projects (.aia files), or videos.
3. Build a Mini-App: Once you find a good resource, follow it! Create a new, simple App Inventor project that demonstrates just that one component.
   • Example Goal: An app with a button that speaks “Hello from Jinja” using TextToSpeech.
   • Example Goal: An app that displays your phone’s latitude and longitude using the LocationSensor.
   • Example Goal: An app that lets you type text, save it with TinyDB when a button is clicked, and load it back when another button is clicked.

The Real Goal: It’s not about building something complex today. It’s about successfully navigating the process of finding information online and teaching yourself how to use a specific App Inventor tool. This skill is priceless!

Part 4: What Did You Discover? (Reflection)

Let’s reflect on your detective work:

• The Search Process: How easy or hard was it to find a good tutorial for your chosen App Inventor component? What search strategies worked best? Did you prefer the official MIT documentation, YouTube videos, or other websites/forums?
• Usefulness: How do you think the component you learned about could be applied in your Technovation app, either for your MVP or as a future enhancement?
• The Skill: Beyond App Inventor, where else in your studies or life could you apply this skill of finding tutorials and teaching yourself something new?

Part 5: Quick Review (Key Terms = Categories!)

Just remember the main types of tools App Inventor offers in its Palette:

• User Interface
• Layout
• Media
• Drawing and Animation
• Maps
• Sensors
• Social
• Storage
• Connectivity
• LEGO® MINDSTORMS®
• Experimental
• (Extensions)

Part 6: More App Inventor Help

The lesson points to other great resources for learning App Inventor:

• The main appinventor.org website.
• The Coding Bus beginner course (has many component tutorials).
• General resources like GirlsCodeIt Technovation tutorials.
• The printable Full Component Reference List.

Conclusion

Mukama akuwe omukisa! (May God bless you!) You’ve just practiced a skill that will serve you well throughout your tech journey – learning how to explore and master new tools. App Inventor has a rich set of components, and knowing how to find information about them empowers you to build more creative and functional apps.

Don’t hesitate to explore these components further as you build your MVP. Sometimes discovering a new component can even give you new ideas! Keep up the great work! Mweraba! (Goodbye!)