Slide 1

Slide 1 text

Jirawat Karanwittayakarn Google Developer Expert in Firebase from Live Coding to Bangkok

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Google I/O Extended Bangkok Software development is becoming more decentralized and collaborative - across devices, geographies, and time zones. Building apps today is time-consuming, often frustrating, and filled with numerous hoops we need to jump through! AI Assistance and powerful LLMs are completely changing how we as developers build apps.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What’s my technology stack? What are my dependencies? Is what I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?

Slide 6

Slide 6 text

What’s my technology stack? What are my dependencies? Is what I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?

Slide 7

Slide 7 text

What’s my technology stack? What are my dependencies? Is what I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?

Slide 8

Slide 8 text

What’s my technology stack? What are my dependencies? Is what I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?

Slide 9

Slide 9 text

What’s my technology stack? What are my dependencies? Is what I’m building secure, scalable, and performant? Who are my users, and what are their needs? What platforms do I need to support? (Web, iOS, Android, cross-platform) How will I handle authentication and user data privacy? What are my API requirements and integration points? How do I ensure maintainability and future scalability? What is my deployment and CI/CD strategy? How will I monitor and debug issues in production? What’s my plan for handling technical debt? How do I balance time-to-market with code quality? What’s my monetization and business model (if applicable)? How will I handle internationalization and localization? What...?

Slide 10

Slide 10 text

Google I/O Extended Bangkok Software development is becoming more decentralized and collaborative - across devices, geographies, and time zones. Building apps today is time-consuming, often frustrating, and filled with numerous hoops we need to jump through! AI Assistance and powerful LLMs are completely changing how we as developers build apps.

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Google I/O Extended Bangkok Software development is becoming more decentralized and collaborative - across devices, geographies, and time zones. Building apps today is time-consuming, often frustrating, and filled with numerous hoops we need to jump through! AI Assistance and powerful LLMs are completely changing how we as developers build apps.

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Today, more than a quarter of all new code at Google is generated by AI, then reviewed and accepted by engineers. This helps our engineers do more and move faster. “ Sundar Pichai CEO of Google and Alphabet “

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Google I/O Extended Bangkok Ubiquitous super_g_ Integrated Assistive Collaborative

Slide 17

Slide 17 text

Google I/O Extended Bangkok Firebase Studio is an agentic cloud-based AI workspace that helps you build and ship full-stack AI apps, including APIs, backends, frontends, mobile, and more. studio.firebase.google.com

Slide 18

Slide 18 text

Deep Google Integrations Streamline app dev workflows super_g_ Designed for collaboration Workspace sharing available with more features planned  Preconfigured Environments Start from common starting points or customize your own  AI Assistance Across code, test, debugging, etc.  Live preview Real device, emulator, or hosted IFRAME super_g_ Full cloud VM Supports most toolchains  Web-based Your workspace is a URL, installable as a PWA  Built on VS Code World-class code editing c

Slide 19

Slide 19 text

Google I/O Extended Bangkok studio.firebase.google.com Multimodal / Natural Language

Slide 20

Slide 20 text

Google I/O Extended Bangkok App Prototyping Agent To build our full stack web application, we can start with a natural language prompt and it will create a PRD for us to review. After we modify the proposal as needed we can generate the app and iterate in chat to update and rebuild the application.

Slide 21

Slide 21 text

Google I/O Extended Bangkok studio.firebase.google.com

Slide 22

Slide 22 text

Google I/O Extended Bangkok Quickly Deploy to Firebase We can quickly deploy our application we created to Firebase App Hosting. The wizard will guide you on picking the correct project, billing account and kick of the new or updated deployment.

Slide 23

Slide 23 text

Google I/O Extended Bangkok studio.firebase.google.com Create a blank project

Slide 24

Slide 24 text

Google I/O Extended Bangkok studio.firebase.google.com Templates

Slide 25

Slide 25 text

We provide a (growing) collection of templates that help you get up and running with the most popular tech stacks. Frontend, Backend, Mobile, and more!

Slide 26

Slide 26 text

studio.firebase.google.com AI-optimized templates Available for Flutter, Angular, React, Next.js, and general web

Slide 27

Slide 27 text

Google I/O Extended Bangkok studio.firebase.google.com Open an Existing Project

Slide 28

Slide 28 text

Google I/O Extended Bangkok Up to 100MB

Slide 29

Slide 29 text

Google I/O Extended Bangkok AI-centric View Code-centric View We want to ensure you all have a choice in using as-much or as-little AI as you want when building your apps

Slide 30

Slide 30 text

Google I/O Extended Bangkok Gemini Code Assist agent will also be accessible

Slide 31

Slide 31 text

Google I/O Extended Bangkok Agentic Experiences Throughout Our advanced coding capabilities are enhanced with agentic experiences that take complex (or boring) actions on behalf of you. Whether the changes need to happen across a section of code, a single file, or an entire code base, Gemini will understand your intent and accomplish the task.

Slide 32

Slide 32 text

Google I/O Extended Bangkok Agent Mode

Slide 33

Slide 33 text

Google I/O Extended Bangkok Share and Collaborate in Real-Time Not only can you share the deployed link, you can share the entire workspace with a URL. This means you can collaborate in real-time within the same Firebase Studio environment, and then push updates instantly.

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Google I/O Extended Bangkok Firebase Studio Cloud Firestore Firebase Authentication Genkit Cloud Storage

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Stitch

Slide 38

Slide 38 text

The is about going from to

Slide 39

Slide 39 text

Try it out now