Clark Coders & Creators
March 20
MIT App Inventor
We will begin coding the digital doodle using MIT App Inventor. Our app will have the ability to take pictures, and users will be able to draw on them.
🎨 Digital Doodle (Part 1) | MIT App Inventor Tutorial 🎨
Welcome to Part 1 of this three-part series on creating a Digital Doodle app using MIT App Inventor! This tutorial is perfect for beginners who want to explore app development and prototyping.
In this video, we'll go through:
✅ An introduction to MIT App Inventor
✅ Where to find the Digital Doodle tutorial
✅ Why this is a great tool for beginners
Last time we made the Digital Doodle App but didn't have time to code.
If you don't have Part 1 (above) completed or you can't find it, click here for new copy.
🎨Welcome to Part 2 of our Digital Doodle app tutorial! 🎨
In the first video, we added components, and now it’s time to start coding using MIT App Inventor.
In this video, we'll cover:
✅ Switching from Designer View to Blocks View
✅ Adding functional code to bring our Digital Doodle app to life
✅ Understanding the basics of App Inventor’s block-based coding
Make sure to check out Part 1 if you haven’t already, and stay tuned for Part 3 where we’ll refine and enhance the app!
Click the Blocks View on the top right.
Start adding code
Click the Take a Picture on the left to drag the When Take a Picture.Click block
Click the Camera to find and drag the call Camera1.TakePicture block
Click the Take a Picture to find and drag the When Camera1.After Picture block
Click the Canvas1 to find and drag the set Canvas1.BackgroundImange to block
Click the red image button and connect to the Set Canvas1. BackgroundImange
7. Click Canvas1 to find and drag the When Canvas1 Dragged block
8. Click the Canvas1 to find and drag the call Canvas1.Drawline block
9. Click the red prevX to drag the get prevX block
10 Do the same with get prevY, get currentX, and get currentY blocks
11. Click the Red button on the left to find and drag the WhenRed.Click block
12. Click the Canvas1 on the left to find and drag the set Canvas1.PaintColor to block
13. Click the Color on the left to find and drag the Red color block.
14. Repeat steps 11 to 13 for the Blue button and color.
15. Click the AccelerometerSensor on the left to find and drag the When AccelerometerSenesor1.Shaking block
16. Click the Canvas1 on the left to find and drag the purple Call Canvas1.Clear block
GREAT JOB! IT IS TIME TO TEST YOUR WORK.
🎨 Digital Doodle (Part 3) | Testing & Finalizing the App 🎨
Welcome to the final part of our Digital Doodle app tutorial! In Part 1, we designed the app and added components. In Part 2, we coded it. Now, it's time to test and finalize our project!
In this video, we'll cover:
✅ Testing the Digital Doodle app on a device
✅ Connecting with MIT App Inventor’s AI Companion
✅ Debugging and making final improvements
By the end of this tutorial, you'll have a fully functional Digital Doodle app built using MIT App Inventor! 🎉
Click the Connect dropdown on the top left.
Click the AI Companion
3. A QR code and a Your code will pop up to test your Digital Doodle with your device.
4. Scan the QR code with the App Inventor
5. Make improvements