A guided coding lab for building an AI Recipe Generator app with Ionic, Angular, and Google Gemini AI. Students follow step-by-step instructions to create a mobile-ready application that generates recipes from images of baked goods.
This repository contains a structured coding lab designed for teaching mobile app development with AI integration. The lab walks students through building a complete Ionic/Angular application that uses Google's Gemini AI to analyse images of baked goods and generate corresponding recipes. The exercise covers component creation, service architecture, image handling, and AI API integration.
- Step-by-step guided lab instructions with TODO hints for students
- Mermaid architecture diagrams illustrating component interaction and data flow
- Ionic/Angular standalone component setup with Google Generative AI integration
- Service extraction pattern teaching separation of concerns
- Image selection, Base64 conversion, and AI-powered recipe generation
- Common issues and troubleshooting guide included
- Node.js (LTS version recommended)
- Ionic CLI (
npm install -g @ionic/cli) - Angular CLI
- A Google AI Studio API key from Google AI Studio
git clone https://github.com/danielcregg/example-coding-lab.git
cd example-coding-labOpen the my-coding-lab.md file to follow the lab instructions. The lab guides you through:
- Creating a new Ionic project
- Installing the Google Generative AI package
- Building the UI with Ionic components
- Integrating Google Gemini AI for recipe generation
- Extracting logic into an Angular service
To begin the lab project itself:
ionic start w7-lab-ai blank --type=angular
cd w7-lab-ai
npm install @google/generative-ai
ionic serve| Category | Technology |
|---|---|
| Framework | Ionic |
| UI Framework | Angular (Standalone Components) |
| AI Service | Google Gemini AI |
| Language | TypeScript, HTML |
| Package | @google/generative-ai |
This project is licensed under the MIT License. See the LICENSE file for details.