Build an app from one prompt

[00:00:00]Hi everyone. I received a challenge email from Google. Now what it reads is most 2 a.m. app ideas die in the design desert. We are challenging the old school development cycle by proving that today your wipe is your code. Now the goal is to go from simple sentences to a live production ready app using Google stitch and AI studio.

[00:00:24]Let's begin.

[00:00:33]First stop, Google stage. Here I have Google Stage open on my browser. So what are we going to build today? How about designing a mobile app for eco-conscious traveler? I'm going to put in the prompt box here. I want to build a mobile app for eco consuious travelers. Once you have put in I have also mentioned the feature I would like to have the CO2 calculator.

[00:01:04]So let's click on the button and you will starting or designing with the Gemini model. So as soon as it taking up the instruction and going through the thinking process within seconds it already have some nice suggestion for your design. In here you can see it's actually giving you different uh styling color the font and so on. This isn't just a normal design tool. is an active AI native design canvas. You can see that it start building on top of all different designs screens and without you to keep on drag and drop all the buttons and so on. We are building it using the Google 3.0 fresh. While waiting for the design, I will also show you if I have a napkin sketch. I can also upload it here and use it to interpret my bed drawing to high fidelity layout. Within minutes, it's already done. You can see it's actually building different pages without me mentioning it. is suggesting the uh dashboard, the itinary, the calculator and then also the destination pages. This looks good. But how about we want to preview in the device like mobile phone or tablet. I'm going to click on this preview button to generate the preview in prototype mode. We want to check and see it is actually consistently applying all the team layout across different pages without you to manually making the changes.

[00:03:07]After reviewing the designs, I would like to make some changes. What I would like to show you is you can also speak and iterate with your voice. So, what I do is I'll just go to this uh start live voice button.

[00:03:22]Although it's in preview, it's working well.

[00:03:26]Hey, Stage, make the sidebar collapsible on it. Let me make that change for you.

[00:03:35]So, Stitch is able to capture the instruction and feedback and work together collaborating with you as a designer. Okay.

[00:03:45]When you are ready with your design, you are satisfied with all the edits and so on. I will select all and export it to AI studio.

[00:03:59]With single click, it will actually open up the Google AI studio web page and at the same times it's actually importing all your images, files, documents into the Google AI studio. So you don't just need to copy and paste and frustrating how you want to get your design idea into real applications.

[00:04:23]Now it's done importing also at the same time it's giving you a simple prompts to build the application.

[00:04:33]I'll just use a default um instruction here which is looking and good for me.

[00:04:39]I'll click on the build button.

[00:04:47]What is running at the back end is it's trying to already start implementing in the codes. We can take a look in the code session. If you are a developer by nature this looks like interface that you are familiar with the languages and the syntax and so on. You can already review what is being implemented and check on if there's any architecture design that is needed to change. If there's any things that you want to check, ask or even make changes, you can actually work together with the AI. You can select any file and then start typing in the chat box communicate with AI what you want to change or what you want to uh cross check with. So very fast it's actually creating like the different the main components of my applications the calculator dashboard the explore tab and inter internally voila it's done. Now you can see that it's also showing you a summary of all the steps that is being done and in the preview it's generating the preview of your applications and it's functional.

[00:06:11]You can also check the design or the applications in different device mode.

[00:06:18]So this is a mobile applications.

[00:06:22]Let's go to the tablet mode. Let's check on the CO2 emission calculator. Cool.

[00:06:30]It's already implementing the logics behind. Sometimes there are features that not building the logic behind. So in this time you will be able to not just preview but at the same time doing some testing on your applications.

[00:06:45]So when you are done let's try to publish and deploy the applications to Google cloud. So what I will do is I will click on publish button. After selecting the Google project you can actually easily deploy your applications to your GCP. Historically the deployment is where the fun stops. You have to work on the tedious or tech very technically on the docker file setting up the cloud security the IM roles projects CI/CD and so on but in here with Google ad studio I just hit the publish button and when it's done I'll click on the live URL this is your working applications and your application is live now from a single prompt using Google stage to design the layout to a functional No AI integrated application deployed to Google Cloud Run.

[00:07:43]This is the future of development. We aren't just coding anymore. We are directing. We are using stitch to design the soul of the application and Google AI studio to give it a brain. Make it a workable application. If you have a Google account, you have this entire pipeline for free in Google stage and Google studio. Have fun web design, web building. Let's have fun together. Go build something. Share your idea.