Hi Everyone, my name is Aneesh Bond and I’m doing my second-ever full end-to-end tutorial. This tutorial is focused on Python and how we can leverage Python to create a web page. We will then host that web page onto Google Cloud Engine. We will integrate a database with it and then also integrate open APIs into it to create a conversational bot.
This will be an end-to-end application hosted on a web page. This is purely a concept not in line with this idea, so you can translate this into your own ideas. I’m going to cover as many steps as possible on how to go from not having an idea to having an idea to building the designs, to then creating a local environment to code it, then pushing it up onto Google Cloud.
And then at the end, I’ll also cover a bit about Google Lines and, and how you can leverage Google ads to promote your business. Now, most of the content in this is a dummy, but as I said earlier, you can make it your own. Now it’s a very, very, very long video. I’ll try to film this in multiple sessions, too.
So, this is part one of the series where we will try to focus on the design’s, local development and possibly the Google cloud. And then I’ll add more paths to it as we go. So without further due, let’s get started. Let’s get started Shall be?
So let’s start with what we get to do is design a simple website. Now, the way we’re going to do that is we’ll do that in three simple steps.
I’m gonna write the steps down, but I wrote them down. We’ll start with the basic one frames, and we’ll look for colors and logos, and then we’ll do a basic design. Now, what are we going to do? We are doing a blogger upside to Let’s create an output. Let’s go on. Let’s go to Art and after.
Okay. I’m always trying to make this longer than it should be. Let’s see what it is. Now I’m going to put, uh. There. Now, this is for some reason. Figma introduces a TV plugin, which I don’t I’m not a big fan of, but here we go again. I do not want you to do anything. Um. Good. Good. Okay, so this is the blog section.
It’s full of categories, possibly. Naa, I think we’ll just keep it simple. We’ll have an about section and contacts Section. Okay. Nothing too special about it. And eventually we’ll have a little log in session for. Let’s assume that’s a logo. Let’s just make it slightly smaller. So I’ll just put it over here. We will get regular canned goods for that so that now we will have a quick one for our liking. Let’s call it our first article in a big format.
That’s a banner image, big article, and this article will make you have a text. We’ll keep this blog simple. Uh, again, yeah. For the, uh uh, uh, and then we’ll have some Lorem ipsum. I usually copy it from website content remixing both from the thing. Sorry, but I don’t want my apologies for uh, just let me just copy it from my screen.
Okay. Let’s call it this. Oops. Sorry, I just didn’t copy you. Well, okay. Now, this is a very annoying thing with Figma. You can do that. Now, my golden rule is like, if my idea is and I try to use it 2424, I’ll make 20% less than that. So I’m going to be 20. And that’s pretty much the article.
And I would also like to use a pitch about when the article was written. It just gives a bit of a context about that and the category. So let’s call it the category of technology. That article on this is kind of a category, so it’s a wireframe, so let’s not try to make it too perfect and then the date that is 25th April 20, 23 Now, I will not have any collaborators on this website, but if you do, then I can just add some collaborations and that’s my sort of color palette, making it simpler for everyone to read now. Oops, not sorry. For some reason my artwork keeps using it perfectly and now I’m going to create a two column structure because I like my font bigger and I like my content because something like this, like, that’s sort of the idea.
Yeah. Yeah. Perfect. Okay. And not just together. Just so duplicate them. Perfect. So now these two websites and no, just sort of my idea. I’ll just add a couple more. So let’s call it 3000 and have eight duplicates. That’s the first thing excellent And now I’m going to go ahead and then just click on that. Yes, fine.
And I’m going to create a line over here which is going to be a tangent line. For some reason my line is not appearing, but I’ve got I think it’s for you thing that you Figma has quite a point. But to be honest, I don’t want figma to be like this. But anyway, I must be making some mistake. I learned that later.
So sorry. This is where the line goes. I just need to pull this line again and to pull it down to when I want it to be somewhere around. Yeah, and I’ll just call my name. So let’s say I will call it. I think it’s or she won’t be right. You know, copyright, let’s call it response. What I’m doing just kind of needs to come right and just put that in for some.
I think I’ll just use this phone. So yeah, keeping it simple not to make it too complicated. Oh, I put it in and I just always keep it out of the group because it becomes really hard to manage and it goes in a weird place. You see just what happened. So you just copy that and. And just put it over here and cut to the center.
I have this call us, but probably put another dog. I wanted to just copy that logo again to later and copy that and shall we just paste it over here. Yeah. Perfect. I will have a logo that’s worth a first paste. Well, from Jan now we can duplicate. We’re going to do the same thing, but this time we’re going to create an advantage.
Page Probably have a photo for me and we don’t need all this. We might need to and about me. So let’s just call it Is this and probably have another paragraph. Oops. And then the paragraph which goes from here and and not and and paste it there. And so it’s right now in these situations I prefer to have slightly more weight.
So I’m going to go with 150% is usually what I do. So it’s like when you look at this, it’s very easy to read. It’s like the article, the text is crisper and I forgot to do that over here. So I’m going to do that quickly as well. If it’s a block, it’s your job is to make sure that it is always easier to read.
It’s not to you don’t want people to squint. Stretch Yeah, I especially want to give it a space. Three looks clean online, so now that’s about task. That’s enough about page four. Now this is just a tiny website. In your actual website you can have a lot more content from the change if it is very helpful in generating more content, I’m just going to make something for you.
It’s all I’m pulling. If I’m doing it properly, will do it. Well, probably use grids, which if you don’t know how to use grids, you can just go to view and you can create layout. Great. So you can just drag and drop and make sure that you have a lot. Sorry. And this one, if you just want to see your lining up to the right there, does like kind of the way to think about it.
Okay, it’s pixel perfect. I’m not going to make it perfect because it’s only a simple thing. So now this is a contact page and this page, I won’t have a logo, but in style of form. So I’m going to do a form over here. Go get it touch with me. The form will have some content and let’s call it that would be nice and touch.
We’ll just have some wording and the here have some rectangle field. Okay. This again, as I said earlier, this goes to random places sometimes this creates a small thing to say I okay, duplicate this with product name and then put that here. Well, I like to just so make this smaller because it’s obviously quite big. And to friend and that’s my first name and I’ll make this very square that’s a placeholder text right here in the town with a place full of taxes when before somebody is trying to anything have like on it just looked at this thing and now it doesn’t move it.
Me Oh my God, this is annoying sometimes. Okay. Anyway, since when did Figma become a terrible like, say, in the Watchmen? Make sure your capitalization same name came out. I can’t type now and. And this one would be fine. But this one, this was. Oh, what happened here? Oh, my God. This is hard. Wow. Yeah, You know, I’ve tried.
It is. I don’t know. Oh, my God. What is that? Oh. Oh, I’m not into this part out. Okay, so now that we have done this page, have to do this page. Okay, This is our contact us page. This bizarre things, but in this one I forgot. So just call it and go do it like a touch, you know.
G But uh, then, and touch. You’re also like, All right, so let’s kind of nice, let’s just keep it simple. And which field of have name oops. All right, so let’s go email. So let’s zoom in just simple form like that 90 special magic. I’ll just moved this even further up, so it’s lined up. And so now this is simple.
So what we’ve done is these are simple one frames. Our first task is done, so let’s call it that the next task. And I got it again. The next task is to choose colors and logos. So I’m going to go over here. Now. This is a task, but I am not super big fan of. But the color of that picture would generate a picture of whatever you created there.
So this is a very good website to do that. I always try to do this website. I just go to this and let’s go. I think I don’t worry about that right now. I’m sorry. No, I would not go to multiple colors. I’ll pick a color which is darker, so I’m going to go say, let’s go through this and that’s a pink color.
Why don’t we make a pink website? Uh, yeah, sure. Okay. Just not. You can take a long, long, long. It’s just like to say, Now I’m going to translate these five frames into the pink. Now, I like the font I currently have, so I’m not going to change that. I think that’s fine. I’m just going to change the color of pink.
Now, you don’t need to think everywhere because that’s probably not the best idea. But in some actions and some places. But you need a little bit of color. You can. I don’t quite see where can I put it at this point in time. I’m not going to change the color of the text, but this is my that it will then go to the logo.
I’m going to spend less time building it. Let’s call. It is an initial bond. I’m going to call it a B and I’m going to make something just happen out of this, if that’s okay with everyone. All right. So that upset me again and so on, and then I’ll just put it over here to make it properly, to be bold and this one is medium.
To give it a bit of a shape, you get the point. And then like that, to combine that together. That’s my new logo. Okay, congratulation. So right now usually logos take a lot longer than that. I’m going to, but I’m going to go with that part. Okay. Sorry, I don’t get that much, so I just need to put that into my work and now I can make it bigger like that.
And that’s not over. So that’s my first logo. Now I’m just going to copy this everywhere, and then we’ll have to see this one. That’s okay, because the minutia of the details, almost all of it take a lot longer because just so it happened and I got to see now it’s kind of it’s hard for some reason. But yeah, perfectly aligned.
Yeah, I don’t know for fact. So that’s my logo. That’s my website. Now you can also add images to it, multiple ways to do it, let’s call it and slide on classes of website I use all the time. So that means skipping it. Ever had to use. So let’s do anything. I need to make sure the down in portrait makes around us.
Let’s go computers. You know me with an orientation landscape. That’s how we need to go. Now. I’m just going to copy this one. Let’s call it That looks good. But that it. I think that my first image. Done. Let’s go. Second image. This one. Wow. Copy to Perfect. Let’s copy this. Boom, boom, boom, boom. Yes. Copy this. You should read the copyright, obviously, to make sure that you’re not using somebody else’s or you might need to credit them.
All these things are different rules. And then I’ll just go profile. Oh, sorry. Yeah, not high profile. What about this one? And for the sake of this, I am going to look like this guy. And it’s way better looking than I am. But let’s just call it that. That’s my color, my website. My whole thing has been not designed.
So now the job to do is to convert it into next HTML. So let’s get started. Show me. All right. Okay. So where we left off last time was this wireframe. So I’m going to move to my finger around. We’re going to close, so we’ll just keep this open. Look this out of the way for a second. Now, the first thing we’re going to do this again, we’re going to start a new project.
I know that say the first thing first we’re going to do is let’s just close this little thing. And I go to Visual Studio. I’m opening my Visual Studio, I come out boom, boom, boom. Okay, go ahead. Now open the folder. We’re going to now go open and we’re going to go there. Stop. And I’m going to create a folder to call my first time for objects.
Okay? To pull down and open this up then. Yes, of course. I’m going to trust everything. Now, before we do anything, we’re going to set it all up, right. So the way to think about that is you go over here, so let’s check if you have PIP class again. The content is so I don’t have my time, but if I do Python three, we’ll have that perfect for Python three.
If I get Pip to do the same thing, which is there. And just to make sure that between 39 pages now Pip three installs before I check flask is already there. So yeah Python you have and your flask. If you don’t have them I can. I would like to come the command in the in the in in the description but it’s basically something of the source pip install flask which as you saw.
Yeah. So to do that. Okay cool. So everything is from vegie to good to go the juices because I already have these extensions but I prefer that you go with some of these grains if you type in Python and then you can take it a second to Python to come up and you can just install this extension. I also have Python extension packages, so I also have the hash HTML bootstrap.
I think it’s called boiler template. Sorry, I oh, I don’t install that quickly. Nothing special. Very easy to install. Very easy to do. So yeah. So that’s your first thing, John. Now you just go over here. Now let’s close all of this up. Okay? Could I just start first logic. So the first file that we’re going to do is so this is to try this put three.
So let me just make sure I’ve got the code right. Perfect. Good. I got the first thing we’re going to start Python. The first point is type one. This is going to be our main priority photo and code of class and code SRC to allow that. Okay. Now I’m also going to create a file for view. So that’s going to be my main file.
So we’ll call it from use and it’s going to work right down. The code explained that later the feature to class can and then we’ll talk from it. Just uh. Yeah. Two rows of views. My apologies and then use of where we want to send it to. That’s going to be my main route. The underscore always get confused between multiple languages, but this is pretty much it.
Okay. And if underscore, underscore and underscore equal to underscore and the script and the main uh, and then you want to start to run debug equal. Mm. Code onto run, you don’t need to have my game tank said this is my main file now which is giving me the error. So we need to just create the views file as well now that I have the view from.
So this will use blueprints from flags code blue print. Good. We also have of template while we have I’m not going to import on but I’m can import data and import data. So blue print and then I’m just going to spend the name. I’m just trying to remove. Okay so that’s up front routing going to this version. Yeah.
Remove John Shroud and the main you are all a little will define a function font. Um and it would around template text Scottish team will want do not pass any variables for now just keep it as simple as this. Good so we’ve done done. Now we need to create a template called index for this HTML where all our code is stored.
But before we do that we can create folders like template and we’ll also create another folder to top up top level called that takes with all the static files would be okay, stick with posted and under template we’ll create a new phone call index based email and in I’m going to go as HTML born a template to just use something that is already written and connect and each bond ID key to a key.
And then we’ll say on each No. So now I’m going to go back and I’m going to try to run this. Let’s see what happens. Um, boom, boom, boom tank. And we think for a just a blueprint, that’s pretty much it. So I’d say, yeah, for now it’s a legitimate development server. Now let’s even disarm. Boom, boom, boom.
No, I don’t know what it’s going to about. So, you know, which is a problem. So I’m just going to go, uh, yeah. And boom. And it comes up so you can see if it’s from damage it’s just going to go to and you would see that this would come up perfect. So what we’ve done is we’ve built this on our look, which is, which was fairly easy, fairly straightforward.
Now over here and you do. But this is fun. This is easy. No problem at all. Now, we’re going to migrate this over to Google Cloud. So we want to make sure we can do the same steps on Google Cloud, set up server very similarly on Google Cloud. Once we have done that, then we will start adding the hash HTML, VSS, and then migrate to code over from as a normal developer.
But what we’ve just done will replicate on Google Cloud. So to do that, I’m going to sort of just to protect my privacy, I guess so confirm so to self cloud, can you just make sure don’t Yeah, sorry Google Cloud. Let’s go ahead. Sorry, I’m bringing it up. Okay. Here we go. Google Cloud comes. Whoops sorry go to console and what to be creating new projects.
Hey, Mike, let me just make this big. Yeah. Everyone can see. I think this is fine. Let’s call it my first. I kind of have to hide all of the things that can come into it. So my first project is created to this Muppet project. I’m going to go to activate Cloud Shell. Okay, Now I’m going to open editor.
I prefer it for this open ended to now. This is very similar to what you have. Whoops. I think this is not the right project for some reason. So why don’t you determine over here think uh, sorry uh, terminal new terminal transferred config configured. Uh, you gave it here. Check in to check like five times for my flight path to not make it say that is correct.
Then. Okay, so we are going to go we have we’re going to create a new photo on record. And Katie, I Oh, I’m sorry. We’re not doing. Hmm. Let’s give me a second. I just need to think, uh, open workspace. Okay. I’m going to cancel this second and cancel this as well. I get it again. This cloud shelf.
And now. Okay. And unless I’m for some reason, am I in the right project? Hang on. Let’s go back here. No, I think I made a PPA there. That is the project, but for some reason it’s using the last one. Hmm. Okay. That’s not going to be very friendly. So why don’t we do this? We go look in your project.
It needs. So I lost touch with this one again, maybe in the right project. Now let’s just refresh. This is a project that had previously created. Okay, so we’re going to wanted to do this with create and make T and Katie I r and we’ll call that a first term project. Okay. And we’ll go to first Python project.
And I got everything in life and there’s nothing here. Not good. So we first go and authorization list saying that this is making sure that we haven’t tried to count and write authority to it and we’re just go G cloud Now make this project just making sure to be in the right project and we’re in the right project.
Okay, good. So that’s and then we’re just going to go and set the project to be that and copy that and then copy that and it, and then it should say updated property. Perfect. So this is what it’s done. So now we’re going to go in KTAR. Oh, more in there. So it just needs to touch dot main touch.
You. Okay, so I’m going to go into an open editor because this could be a lot easier if I do it over there. So now I’m here and I have this over here. I made up UI. I’m just going to copy this code, which is simple, which is the code we wrote previously. It’s import platform plans. It’s everything is there.
Now let’s test this. If it works on my local post now, you will see that nothing comes up over here. So what you do is you just click on test and you going disappear here and it should give you Hello World. Now let’s make sure that is not just helloworld to have finish. What do you think? Save this office.
Make sure to save them. It will restart the server and then you can just refresh this and it tells us finish. So this book now what we’re going to do is copy the code the way we had it previously. So in that way, the only thing we need to do is before we do that, we just in this because the compiler will do this, we just need to create a new file.
We’re going to call it right column and it takes time. This will tell you. Tell the compiler what? Oops, sorry. I think I created them in the wrong place. So I’m going to do the this one and I’m going to. And now it’s correct. And let’s get back to know why it’s great. So many projects. All right. Thank you.
They’re going to be here. So we’re just going to tell the compiler that we’re going to use FLASK because we need to make sure. So because the deployment will happen to YAML. So it’s going to create a one. I just do this for the head so much, you just do it. And if I find in this to be quite difficult sometimes say See, this is what gives me proper problems.
I’m just going to create another follow up to whoops. So yeah. So yeah, no, because we’re going to be deploying three ammo so and then we’re just going to go right time item that and know that is done. Now all we need to do is deploy it into that batch. So here we go. Control C, C, clean this up.
We’re going to say good T cloud deploy. So let’s just see where am I? Oh, sorry. First project First you go there and let’s add everything up and then you go, Okay, okay. And then you go, Where do we want to be? We want to be in Australian suburbia and it will take time, not just takes a second or two.
So let’s to give it that’s taking it to four sometimes takes longer. That’s okay. So now what you’ve done is you’ve created an instance of Python on the map. Next step we will to enumerate here tomorrow is two and sorry, just in the video tomorrow is to create the frontend and then once we’ve created the font and link it over here and then go from that.
So that makes sense. Good. Right. So let’s just make sure that it deploys properly first. Tastes. I’m sometimes, but it’s very easy and I love the whole the Visual Studio to Visual Studio environment. You can code in an environment that looks like your own Visual Studio which is here, and you can do this now. I forgot to copy this code to that site.
I will do that too before we end for the day. So for that to happen, I’m going to have to create a new file of here. I’m not going to create file all it’s deploying just to make sure it deploys properly. Hmm. Come on. Does take time and it will be the You are over this one. I think once it’s ready to overseas based on phone at the moment to King I think I think I’m just going to create a new file.
I don’t think it’s going to be the end of the world, but I’m just quite used by K. We’re always going to create the folders that we set to take and we’ll create the fold templates. I can’t infuse that anymore. I will just go back to of use type. I would just copy from here based out of here, nothing special in the templates will create a new form.
Okay. So the only thing we need to do, we got this. We just need to make the change over here, which is apt. People would just go over here and copy that case. It says it’s done to the C alone is beautiful. So that’s come to us obviously in the meantime. So now all we need to do is copy this for this.
Let’s just make it to this and class blueprint frame and then that to register it. Uh, to be okay. Yeah. I don’t need this anymore because we have to find it on the page and then main logo. Everything else remains the same. Now, let’s just test this quickly first, um, which is over here. So that test, what happened here or that haven’t changed.
Okay, that’s annoying. All right. Has to continue. And each morning I close this, and then all you need to do is you can deploy this again. I mean, there are multiple ways to deploy this. You make. I preferred the client version. This just makes it simpler. So controls. See the thing clear. This out and then just paste it.
And then the point and just take the whole time again. All right, we’re back. So let’s check this out. What happened here? And they go, It’s all published. Okay. So what we did today, quickly recap. We did manage to bring the sigma over. So we did this, which is good. We’ve done our first test. We then did a local development.
Now we did it on server, which is of a header. So and we can point will point D or lot. So that’s all for today. We’ll continue this in the second session where we closed this design properly and put it all right. All right. Of.