What is Google AI Studio?

A workspace for trying Gemini and turning an idea into a prototype.

Find your starting point.

No previous AI Studio experience is assumed.

1. Have you used AI Studio or only a chat application? Record your starting point in learning-checks.md.
2. Try identifying where to choose a model, enter a prompt, and run it.
3. Name an everyday task where you would like a useful AI-generated result.

From a tested prompt to a connected app.

Learn the tool before applying developer integration patterns.

1. Write system instructions, add few-shot examples, compare results and manage a Gemini API key.
2. Build and test a frontend, then connect Firebase Authentication and Firestore.
3. Call Gemini through an authenticated Cloud Function, deploy to Firebase Hosting, and verify five core checks.
4. Explain quotas, missing-information handling and ownership rules; demonstrate the app.

One app throughout the day.

The project grows through the labs; the final sprint completes existing work.

Check access before building.

Use the trainer-prepared project details and fictional data.

1. Open the provided project setup card: AI Studio, Firebase project ID, and approved Firebase project.
2. Confirm Google sign-in, Firestore, and deployment permissions have been checked by the trainer. Cloud Functions deployment needs a billing-enabled Firebase project.
3. If setup is blocked, join a prepared team project or use the trainer baseline; record what you could test.

Open AI Studio and run your first prompt.

Use the fictional event pack; Day 1 attendance is not required.

1. Open Google AI Studio. Check prompt and Build access.
2. Download the exercise pack. Open ai-studio-starter.md and morning-starter/01-current-guide.md.
3. Choose an available text model with trainer guidance. Record its name and keep default settings initially.
4. Run a simple request: “Write a friendly two-sentence welcome for a community learning event.” Inspect the output.

Know which part of the workspace you are using.

Prompt experimentation and app building are related but different activities.

Tell the tool what a useful answer looks like.

A prompt is a request; instructions define the behaviour you want it to follow.

Task: Write a three-bullet arrival checklist for a first-time attendee.
Use only the reference below for event facts. If information is missing, say so.
Reference:
[Paste START-01 from the morning starter pack.]

Worked example / Replace guessing with a clear request.

Compare what you asked for with what the model actually returned.

Change one thing at a time.

Settings are controls to investigate, not shortcuts to correctness.

1. Locate the chosen model and available run settings. Record the defaults.
2. Change one supported control with trainer guidance—for example an output-length limit where available. Predict what you expect to change.
3. Run the same prompt and compare. Restore the default after the experiment.
4. For prompt-version comparisons, keep model, settings, and source text unchanged.

Few-shot prompting: show the pattern.

Examples demonstrate the kind of response you want; they do not train new model weights.

System instruction: You help event participants. Use only the current event reference. Keep answers short. Say when a detail is not documented.
Example question: When does registration open?
Example answer: Registration opens at 10:00 in Room B.
Example question: Is there a shuttle?
Example answer: A shuttle service is not documented in the supplied reference.
Now answer: What should I bring?

An API key connects code to Gemini.

Create or select a currently supported key in AI Studio’s API Keys area using your workshop project.

1. Confirm the selected project and current key requirements with the trainer.
2. Test using the trainer’s server environment; do not paste the value into slides, worksheets or browser code.
3. Later store it as a Cloud Functions secret and bind it only to the function that needs it.

Practice 01 / Refine and compare.

10 minutes explanation/example · 35 minutes practice · 15 minutes feedback.

1. Create a basic event-helper prompt using START-01 and START-02.
2. Create a second version with explicit audience, output format, and unknown-answer instructions.
3. Run the same three event questions for both versions: registration, what to bring, and parking fee. Record six actual responses.
4. Explain which version helps and which issues remain. Save or copy your prompts and settings to the worksheet.

Take fifteen.

10:30–10:45 am

Build the frontend before connecting services.

Use AI Studio to generate a small app, then inspect and test the code.

Create a static vanilla HTML/CSS/JavaScript Community Learning Day frontend. Include programme, nickname, morning/afternoon choice and an event Q&A panel. Show validation, loading, success and error states. Start with labelled mock data. Prepare ES modules for Firebase Auth, Firestore and an httpsCallable askEvent function. No Node server, SSR or browser Gemini key. Provide static files that can be served by Firebase Hosting.

Describe → preview → change → check.

Learn the Build workflow through one visible improvement.

1. Locate the brief input, preview, and generated-code area.
2. Try the form and Q&A controls. Compare event details with the source guide.
3. Request one specific change, such as clearer validation for an empty nickname.
4. Open the updated preview and verify the change; retain the working version.

Practice / A useful event page.

15 minutes demonstration · 40 minutes building · 20 minutes review.

1. Use the supplied brief and event facts.
2. Test the visible controls and empty input.
3. Make and verify one improvement.
4. Export the static files and record your project link and reference/prompt. Confirm the exported page works before connecting services.

What does Firebase add?

Sign-in identifies the person; storage remembers their registration.

Connect Google sign-in to the same app.

Before this lab, confirm the trainer has checked the Firebase project and authorised domains.

Extend this existing event app with Firebase Google sign-in using the trainer-approved Firebase project. Show Daftar masuk, Daftar keluar, and the current sign-in state. Use the actual Firebase SDK, not a simulated identity. Do not create a different project without checking the supplied project ID. Keep registration unavailable when signed out.

1. Use AI Studio’s Firebase integration when available, or the prepared configuration path.
2. In Firebase Authentication, confirm the Google provider and required project settings with the trainer.
3. Sign in and out. Check the user in Authentication and note the UID.

Save, refresh, and retrieve your registration.

A success message alone does not prove data was stored.

Use Firestore client reads/writes at users/{uid}/registrations/community-learning-day. Save only nickname and sessionChoice. Use the supplied owner-only firestore.rules and validate the allowed fields. Read this document after sign-in and refresh. Repeated submission updates the same document. Show Simpan pendaftaran, saved, loading, and error states. Never display saved before a successful write.

1. Apply/review the supplied rules in the prepared training project.
2. Save a fictional registration and inspect the exact document path.
3. Refresh the app and read the same values. Check signed-out and other-user access is denied.

Practice / Connect identity and storage.

15 minutes demonstration · 30 minutes guided connection · 15 minutes verification.

1. Verify the project ID, sign-in provider, and rules with the trainer.
2. Sign in and save a fictional nickname/session choice.
3. Refresh and compare the loaded result with Firestore. Add an onSnapshot listener, observe an update in a second signed-in tab, and unsubscribe on sign-out.
4. Use the prepared second test account to check that another user cannot read or change your document.

Your app now remembers a registration.

1:00–2:00 pm

Cloud Functions: your server-side AI boundary.

A callable function runs backend code without exposing the Gemini credential to the browser.

1. Create askEvent with the Firebase Functions callable API. The callable protocol validates provided Firebase tokens; explicitly reject a missing request.auth.
2. Validate the question length and content. Supply only approved event facts; never attach registration records.
3. Read the Gemini key from a bound secret. Make a real Gemini request and return a small answer object.
4. The browser calls httpsCallable and displays loading, answer, error and retry states.

Follow the two request paths.

Hosting, identity, storage and AI have distinct jobs.

Lab: connect and inspect a real AI response.

Use the same app and current event reference.

1. Deploy or run the prepared callable function and connect the client to the matching function region.
2. Sign in, ask registration time, then ask parking fees. Check the first answer and the unknown response.
3. Sign out and call the function: it must reject the request.
4. Inspect source and browser traffic: no Gemini key is delivered to the browser.

Firebase Hosting serves your web app.

Deploy the static frontend separately from the callable backend.

Deploy and repeat the full workflow.

Follow the integration guide with the trainer-prepared project.

1. Check .firebaserc points to the workshop project; configure firebase.json for public files, functions and Firestore rules.
2. Set the Gemini secret, then deploy the function, rules and Hosting using the Firebase CLI.
3. Check the Hosting hostname in Firebase Authentication authorised domains.
4. Open the returned Hosting URL; sign in, save, refresh and call the AI helper.

Plan for limits and imperfect answers.

A small app still needs clear failure behaviour.

1. Handle quota/rate-limit errors with a helpful message and bounded retry/backoff; prevent duplicate submissions while waiting.
2. Set conservative output/input limits and function scaling limits with the trainer; monitor usage and logs. maxInstances is not a per-user rate limiter or a hard spending cap.
3. Use reference-based answers, unknown responses and a test set to reduce unsupported claims.
4. Apply owner-only database rules. Discuss App Check and server-side per-user rate limits as next steps before wider release.

Alternative: deploy the server app to Cloud Run.

Choose this route when retaining an AI Studio-generated server app instead of the static Hosting/callable architecture.

1. AI Studio can deploy its app to Cloud Run; confirm project, billing and permissions.
2. Configure server secrets and validate Firebase ID tokens in your own server endpoints.
3. Keep Firebase Auth and Firestore if needed, then test the deployed domain and ownership controls.

Practice / Confirm the hosted workflow.

10 minutes demonstration · 20 minutes deployment/checks · 5 minutes feedback.

1. Open the deployed URL in a fresh browser context and sign in.
2. Confirm the app uses the intended Firebase project and own-user registration.
3. Run one documented and one unsupported event question.
4. Record actual results. If access or billing blocks deployment, use the trainer baseline and mark your own deployment incomplete.

Take a short break.

3:00–3:15 pm

Project / Connected Event App.

Finish one understood workflow rather than adding more features.

1. Complete Google sign-in and an owner-scoped saved registration.
2. Keep the AI helper grounded in the current event information.
3. Deploy to Firebase Hosting and run the five core checks.
4. Record a fix/retest and prepare a five-minute demonstration.

Five required checks.

Record each result as pass, fail, or not run.

Complete, verify, and rehearse.

No new app, no extra feature list.

Demonstrate the whole workflow.

Five minutes to show it; three minutes for questions.

How your connected app will be assessed.

Useful behaviour and honest evaluation carry more weight than visual polish.

Explain what you connected.

A working group app does not replace individual understanding.

1. Complete the four Day 2 exit questions in learning-checks.md.
2. Identify what AI Studio, Authentication, Firestore, Hosting, Cloud Functions, and Gemini each do.
3. Name a real task where you could repeat this workflow.

Hand over the app and its evidence.

Use the trainer’s agreed submission location.

1. Submit the Firebase Hosting URL and source export (including callable function) or repository link.
2. Include the Firebase/Cloud project identifiers, five-check report, and a brief explanation of the data/request flow.
3. List any failed/not-run check and the next action. Never include secret values.

Keep the working guides nearby.

Official references and workshop materials.

• Connected app starter and checkpoints ↗
• Trainer setup checklist ↗
• Five core checks ↗
• AI Studio and Firebase integration ↗
• Firebase Google sign-in ↗
• Firestore access rules ↗
• Firebase Hosting deployment ↗
• Optional technical explainers ↗
• Firebase integration and deployment guide
• Callable functions