Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gmostofabd/app-inventor-examples
📱 A collection of example projects built with MIT App Inventor, demonstrating key app development concepts such as sensors, hardware interfacing, and logic flows. Ideal for beginners and educators, these projects offer practical insights into mobile app creation and learning with App Inventor.
https://github.com/gmostofabd/app-inventor-examples
app-inventor-iot app-prototyping arduino-integration bluetooth cloud-integration educational-resources gps-tracking hardware-interfacing iot mit-app-inventor mobile-app-development no-code-development real-time-data robotics sensors
Last synced: 1 day ago
JSON representation
📱 A collection of example projects built with MIT App Inventor, demonstrating key app development concepts such as sensors, hardware interfacing, and logic flows. Ideal for beginners and educators, these projects offer practical insights into mobile app creation and learning with App Inventor.
- Host: GitHub
- URL: https://github.com/gmostofabd/app-inventor-examples
- Owner: gmostofabd
- Created: 2024-10-07T14:15:11.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-27T18:33:01.000Z (24 days ago)
- Last Synced: 2024-10-27T23:52:05.561Z (24 days ago)
- Topics: app-inventor-iot, app-prototyping, arduino-integration, bluetooth, cloud-integration, educational-resources, gps-tracking, hardware-interfacing, iot, mit-app-inventor, mobile-app-development, no-code-development, real-time-data, robotics, sensors
- Language: HTML
- Homepage: https://gmostofabd.github.io/App-Inventor-Examples/
- Size: 129 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 App Inventor Examples 🌟
This repository showcases **Example Projects** built with **[MIT App Inventor](http://appinventor.mit.edu/)**, covering key concepts like **IoT**, **Hardware Interfacing**, **GPS Tracking**, and **Real-Time data handling**. These examples are perfect for **Beginners** and **Educators** seeking to explore mobile App development and **No-code** programming.
a.gif)
MIT App Inventor is a great tool to introduce beginners to Android App Programming. It is an open-source, Cloud-based Programming Environment that allows you to make your own mobile apps using a Blocks-based Programming Language. With these beginner-friendly tutorials, you will learn the basics of programming apps for Android and iOS phones and tablets.
> [!IMPORTANT]
>  You access App Inventor using a web browser (Chrome, Firefox, Safari).
> [!NOTE]
>
> >  The App Inventor platform is developed by the Massachusetts Institute of Technology (MIT).
>
> >  It is composed of a DESIGNER section where you visually design your app layout and a BLOCKS section where you include the code to run your app.
> >
> [!WARNING]
>  This is a warning.
---
| [](http://videoblocks.com) | [](http://audioblocks.com) | [](http://graphicstock.com) |
|:---:|:---:|:---:|
| http://.com | http://.com | http://.com |
---
## **✨ App Inventor Features**
| 🌟 **Feature** | 📋 **Description** |
|-------------------------------------|-------------------------------------------------------------------------------------------------------|
| 🛠️ **_User-Friendly Interface:_** | Visual learning with **immediate feedback**, allowing for a hands-on experience. |
| 📱 **_Creativity & Problem-Solving:_** | Engages users in **creative projects** while fostering **logical thinking** and innovation. |
| 🌐 **_Real-World Applications:_** | Develop **practical skills** that create a solid **foundation for future learning** in real-world tasks. |
| 📡 **_Real-time Data Handling:_** | Build apps with **cloud storage** and live updates for **seamless real-time experiences**. |
---
## ✨ Tools and Resources you will need for the total processes:
.gif)
-
💻 A Mac or Windows computer: The main environment for building your apps. -
📱 Smartphone or Emulator: The device where your apps will be installed and perform. -
🌐 A Wi-Fi connection: To use the platform and access necessary resources. -
App Inventor Platform: The main environment for building your apps. -
🔑 Google Account: Required to log into App Inventor.
---
## **🔑 Keywords**
[MIT App Inventor](http://appinventor.mit.edu/), [IoT](https://en.wikipedia.org/wiki/Internet_of_things), [Mobile App](https://en.wikipedia.org/wiki/Mobile_app), [Android App Development](https://en.wikipedia.org/wiki/Mobile_app), [GPS](https://en.wikipedia.org/wiki/Global_Positioning_System), [Sensors](https://en.wikipedia.org/wiki/Sensor), [Bluetooth](https://en.wikipedia.org/wiki/Bluetooth), [Arduino](https://www.arduino.cc/), [IoT Applications](https://en.wikipedia.org/wiki/Internet_of_things), [No-Code](https://en.wikipedia.org/wiki/No-code_development_platform), [STEAM Education](https://en.wikipedia.org/wiki/STEAM), [Educational Tools](https://en.wikipedia.org/wiki/Educational_technology), [Block-Based Coding](https://en.wikipedia.org/wiki/Visual_programming_language), [Cloud Services](https://en.wikipedia.org/wiki/Cloud_computing)
---
# **🛠️ How to Use App Inventor**
Follow this step-by-step guide to get started with **MIT App Inventor** and begin building your own apps!
## **Step 1: Set Up MIT App Inventor**
1. Visit the official website: [**MIT App Inventor**](http://appinventor.mit.edu/).
2. Click on **Create Apps!** to open the App Inventor development environment.
3. Log in using your **Google account** to access the app creation dashboard.
## **Step 2: Create a New Project**
1. On the main dashboard, click **Start New Project**.
2. Enter a project name, like `MyFirstApp`, and click **OK**.
3. You’ll be taken to the project workspace, where you can design your app.
## **Step 3: Design the User Interface (UI)**
1. **In the Designer tab**, drag and drop components (e.g., buttons, text boxes, images) from the **Palette** on the left into the **Viewer**.
2. Customize each component’s properties (e.g., text, color, size) using the **Properties panel** on the right.
## **Step 4: Add Functionality with Blocks**
1. Switch to the **Blocks** tab to create the logic behind your app.
2. Drag blocks like `When Button1.Click` from the component list and add **logic** or **control blocks** to perform actions such as changing text, displaying notifications, or interacting with hardware.
*Block-based coding interface*
## **Step 5: Connect Your Device**
1. **Live Testing**: Test your app on a real device using the **MIT AI2 Companion** app:
- Download the [**MIT AI2 Companion**](https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3) from the Play Store.
- Open the app, and in App Inventor, go to **Connect** → **AI Companion**.
- Scan the displayed **QR code** or enter the code to sync your device for live testing.
2. **Emulator**: Alternatively, use the built-in emulator by clicking **Connect** → **Emulator**.
## **Step 6: Build and Test the App**
1. To export your app as an installable APK, click **Build** → **App (save .apk to my computer)**.
2. Once the APK is generated, download and install it on any Android device.
> 🎉 **Tip**: You can use **AI-powered cloud services** like **Firebase** for **real-time data** synchronization.
---
.gif)
[](https://github.com/cheehwatang/github-readme-daily-quotes)
# 🌟 **Let's Make a Simple Game on MIT App Inventor** 🌟
## 1. Open a blank project
1. **Start a New Project:** Create a new blank project.
2. **Add Canvas:**
- Go to **Drawing and Animation** and drag a `Canvas` element.
- Rename it to **MyCanvas**.
- Set its dimensions to `300x300`.
3. **Add Score Label:**
- Drag a **Label** from **User Interface**.
- Rename it to **ScoreLabel** and set its text to `Score: ---`.
4. **Add Reset Button:**
- Drag a **Button** from **User Interface**.
- Rename it to **ResetButton** and set its text to `Reset`.
5. **Add Timer:**
- From **Sensors**, drag a `Clock` element to the screen.
- Rename it to **MoleTimer**.
- Enable the `Timer` and set `TimerInterval` to **500** ms.
---
## 2. Add an ImageSprite
1. **Add the Mole Image:**
- From **Drawing and Animation**, drag an `ImageSprite` to the **MyCanvas** element.
- Download and use a **mole image** for the sprite.
2. **Set Properties:**
- Ensure `Enabled` and `Visible` options are checked.
- Set `Width` and `Height` to `automatic`.
- Set `Speed` to `0.0`.
---
## 3. Move the Mole
1. **Create MoveMole Procedure:**
- Switch to the **Blocks** screen.
- From **Procedures**, drag out a `procedure` block and name it **MoveMole**.
2. **Set Mole X-Position:**
- Drag a `set Mole.X` block.
- Attach a **multiplication block** from **Math** and use a **random fraction block** for the first value.
- For the second value, use a **subtraction block**.
- Left side: `MyCanvas.Width`.
- Right side: `Mole.Width`.
3. **Set Mole Y-Position:**
- Repeat the above steps for the Y-position but use `MyCanvas.Height` and `Mole.Height`.
---
## 4. Create UpdateScore Procedure
1. **Initialize Score Variable:**
- In the **Variables** tab, create an `initialize global` block for **score** and set its value to **0**.
2. **Set Score Label Text:**
- Create a new **procedure** named **UpdateScore**.
- Use the **set ScoreLabel.Text** block.
- Attach a **join block** from **Text**.
- First text: `Score: `.
- Second text: `global score` from **Variables**.
---
## 5. Trigger MoveMole with Timer
1. **Use Timer Event:**
- Get the `when MoleTimer.Timer` block.
- Inside it, call the **MoveMole** procedure.
---
## 6. Update the Score on Mole Touch
1. **Set Up Mole Touched Event:**
- Get the `when Mole.Touched x y` block.
2. **Increment Score:**
- Drag the `set global score` block.
- Attach it to a **Math addition block**.
- Add `get global score` from **Variables** and `1`.
3. **Call Procedures:**
- After incrementing the score, call the **UpdateScore** and **MoveMole** procedures.
---
## 7. Make the Reset Button Work
1. **Set Up Reset Button Click Event:**
- Get the `when ResetButton.Click` block.
2. **Reset Score:**
- Set `global score` to `0` using a **Math number block**.
3. **Call UpdateScore:**
- Call the **UpdateScore** procedure.
---
# **🎮 Congratulations! You've created a simple game using MIT App Inventor!**
---
---
## 🌟 **Advanced Tips and Enhancements** 🌟
Taking your Mole Mash game to the next level can be both fun and rewarding. Here are some advanced tips and enhancements to make your game even more exciting:
---
### 1. Save the Game State
**Why:** Saving the game state allows players to resume their progress the next time they play. This is particularly useful for tracking high scores or other persistent game data.
**How to Do It:**
- Use **TinyDB**, a database component in MIT App Inventor, to save and retrieve the score.
---
### 2. Add Sound Effects and Music
**Why:** Sound effects and music make the game more immersive and engaging.
**How to Do It:**
- Use the **Sound** component in MIT App Inventor to add sound effects and background music.
---
### 3. Create Interactive Elements
**Why:** Interactive elements enhance gameplay and make it more enjoyable.
**How to Do It:**
- Add buttons or interactive objects that players can click to perform actions, such as:
- Starting a new game
- Pausing the game
- Accessing a help menu
---
### 4. Implement Power-Ups and Bonuses
**Why:** Power-ups and bonuses add an extra layer of strategy and excitement to the game.
**How to Do It:**
- Create additional **ImageSprites** for power-ups.
- Use **conditional statements** to check if the player has collected a power-up and apply its effects.
**🚀 With these advanced tips, your Mole Mash game will be more engaging and fun! Enjoy enhancing your game!**
---
## ✨ APP INVENTOR CONTROLS:
### DESIGNER
The first section called Palette includes all the objects and layout options you can choose and drag onto the screen, that is media, buttons, text labels, images, timer, etc.
The central is the Viewer, that is the visual rendering of your phone screen. Close to the screen, you can see the Components window, where you will see all the objects you added to your screen. In the beginning, you will see just “Screen 1”.
The last section on the left, Properties, regards all the options you can choose to change the attributes of the object you have included in your screen. For example, here are the options for changing your Screen1 attributes like background colour, background image, title, alignment.
---
### Basic styling {#basic-styling}
-  `#exr`
-  `#c5f015`
-  `#1589F0`
---
## **🧪 Project Examples**
Explore these real-world projects to see how you can integrate hardware with **App Inventor**:
1. 🚀 **IoT Temperature Monitor**
- A project that reads temperature data from a sensor and displays it on an Android app via **Bluetooth**.
2. 🌍 **GPS Location Tracker**
- Tracks and displays real-time **GPS data** on a map interface within the app.
3. 🤖 **Bluetooth-Controlled Robot**
- Control a simple **robot** using an Android app and **Bluetooth** commands.
*IoT projects are a great way to learn hardware interfacing using App Inventor.*
---
## **📚 Tutorial References**
- [Getting Started with MIT App Inventor](https://appinventor.mit.edu/explore/ai2/tutorials/) *A comprehensive guide to help you begin your journey with MIT App Inventor.*
- [Build Your First App](https://appinventor.mit.edu/explore/ai2/tutorials/firstapp/) *Step-by-step instructions to create your very first mobile application.*
- [MIT App Inventor Documentation](http://appinventor.mit.edu/explore/ai2/docs/) *Official documentation containing detailed information on all features and functionalities.*
- [Connecting to Bluetooth Devices](https://appinventor.mit.edu/explore/ai2/tutorials/bluetooth/) *Learn how to establish a Bluetooth connection between your app and hardware devices.*
- [Using the Location Sensor](https://appinventor.mit.edu/explore/ai2/tutorials/location/) *A guide to using GPS location data within your applications.*
- [Creating a Simple IoT App](https://appinventor.mit.edu/explore/ai2/tutorials/iot/) *Instructions for building your first Internet of Things (IoT) application.*
- [How to Use the Firebase Database](https://appinventor.mit.edu/explore/ai2/tutorials/firebase/) *Learn how to integrate Firebase for real-time data storage and retrieval.*
- [App Inventor for Educators](https://appinventor.mit.edu/explore/ai2/educators/) *Resources and strategies for educators looking to teach app development.*
- [Advanced Features in MIT App Inventor](https://appinventor.mit.edu/explore/ai2/tutorials/advanced/) *Explore advanced functionalities to enhance your applications.*
## **📌 Tags**
[MIT App Inventor](http://appinventor.mit.edu/), [Mobile App Development](https://en.wikipedia.org/wiki/Mobile_app), [IoT](https://en.wikipedia.org/wiki/Internet_of_things), [Hardware Interfacing](https://en.wikipedia.org/wiki/Embedded_system), [Sensors](https://en.wikipedia.org/wiki/Sensor), [Bluetooth](https://en.wikipedia.org/wiki/Bluetooth), [GPS Tracking](https://en.wikipedia.org/wiki/Global_Positioning_System), [Real-Time Data](https://en.wikipedia.org/wiki/Real-time_computing), [Arduino Integration](https://www.arduino.cc/), [Robotics](https://en.wikipedia.org/wiki/Robotics), [No-Code Development](https://en.wikipedia.org/wiki/No-code_development_platform), [Cloud Integration](https://en.wikipedia.org/wiki/Cloud_computing)
## ⚗️ **Examples Gallery**
More App Inventor Tutorials for Beginners
| | | |
|:-------------------------:|:-------------------------:|:-------------------------:|
|
Designers Interface | 
App and QR Code | 
Pallets, View and Properties |
|
Online Emulator | 
Tutorial image |
Starting Screen |
|
Tutorial image 1 | 
Tutorial image 2 | 
Tutorial image 3 |
A list of things:
- [X] Googley Eyes
- [X] Tesco Clubcard
- [ ] The Elizibeth Line
- [ ] Beans on Toast
- [ ] My Current Account
Collapsable Title
Put Content Here
This is some text that will flow around the image to the right. You can write paragraphs of text here, and it will wrap around the image. The image is floated to the right, so this text will automatically adjust itself alongside it.
More text that continues to wrap around the image on the right side. You can write as much as you'd like, and it will keep flowing next to the image.