llm-workshop-2025

1. Building mobile and web apps using Google Firebase Studio

Session objectives. The objective of this session is to go over how LLMs can be used to create web and mobile apps without knowing any programming language and with simple natural language prompts. It includes the descriptions of important aspects of Firebase Studio as well as live demos of creating and debugging multiple apps both with and without AI integration into these apps. A small practice session will also be included in this session.

Session Topics:

⏳	Topic
5 min	Intro and Structuring your prompt for building a mobile app `nooreen`
5 min	Demo of building a mobile app `nooreen`
5 min	Overview of Layout of Firebase Studio `nooreen`
10 min	Practice making your own mobile app

Prompts in the Demo

create a recipe finder app which finds a recipe based on the given ingredients with the following features: 
user input text field - to enter for ingredients,
common ingredients section - display common ingredients with a checkbox to add into the main list,
main list section - view the main list on the UI
cuisine selection button - to filter out recipes,
search button

Link to the preview: Recipe Finder App

create a small app with the following features: 
date created, date completed, add task, delete task, edit task, sort task by date, AI task groups section

Link to the preview: To Do App with AI Task Grouping

Steps to build a mobile app using Firebase

Pick a mobile app that you would like to build from the options below and follow the steps above to actually build it.

Enter the prompt (demo / practice into the text field and click Generate. This produces a blueprint of the prototype.
Review the blueprint to make sure it fits all the requirements accurately.
Once reviewed, click Prototype this App icon 1.
Resolve any issues if they have occurred.
If the app include AI features, it will ask for Gemini key. Click on Auto-generate Key icon 2.
The app is ready to preview.
If you would like to make any changes to the app, check out ways to make changes to the created app

Firebase Studio Layout

To view the app on any mobile or web browser:

Click on the icon 6 (top right).
Do either of the following:
- Copy the URL and paste on browser.
- Scan the QR code shown using your mobile camera.

Ways to Resolve Issues:

Using Gemini in the studio:
- Click on the red pop up icon 3 on the bottom left of the app.
- Click on Fix Error.
Manually:
- Click on icon 9 on the top right of the Firebase website.
- This opens the code editor with all the files listed. Changes can be made on this editor which will be reflected directly on the app.

Ways to Make Changes to the created App:

Prompt the change in the prompt text box.
Click on the select icon and prompt changes specific to a selected element in the app via prompts (text field pops up on clicking for local changes).
Click on the edit button on the bottom right of the web app.
- This opens up a different layout on the app, choose which type of edit you would like to make.
- Ways of editing includes inserting shapes, images, text and free hand drawing,

Publish the App

To publish the app, you need to setup a billing account on Firebase. It gives initial $300 credit free of charge, but to avail the credit, you need to input your card information.

Practice Prompts

Basic App -

create a small app with the following features: 
add task - user enters name, description, date created, task group
edit task - user can change details of existing tasks
delete task,
sort task by date,
date completed - when user checks off a atsk, record the date and time

AI integrated App -

create a water logging App with the following features:
add daily water intake in milliliters or ounces.
set a daily water intake goal.
progress bar or percentage indicator showing how much of the daily goal is met.
edit and delete water intake entries.
view history of water intake by day, week, and month.
sort history by date and filter by time range.
notifications or reminders to drink water at custom intervals.