Hi everyone! My name is Aneesh Bond, and I am doing my second-ever full entering tutorial. This tutorial is focused on Python and how we can leverage Python to create a web page. We will then host that fifth page onto Google Cloud Engine. We will integrate a database with it and then also integrate panel APIs to it to create a conversational import.
This will be an end-to-end application hosted on a web page. This is purely a concept known in life as an 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 how you can leverage Google Land to promote your business. Now, most of the content in this is dummy, but as I said, again, here, 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.
This is part one of the series where we will try to focus on the design’s local development and possibly the cloud, and then I’ll add more parts to it as we go. So without further ado, let’s get started, Tommy. Let’s get started. So let’s start with what we get to do. Design a simple website now, and the way we’re going to do that is in three simple steps.
I’m going to write the steps down, but I have written them down. We’ll start with the basic frames, and we’ll look for color and logos, and then we’ll do a basic design. Now, what are we going to do? We are doing an upside to let’s create art, but let’s get on with it. Whoops. Sorry. Let’s go with art.
And after became always tried to make this point longer than it should be. So now I’m going to put that and this is for some reason, Figma introduces the Stupid plugin. And sometimes I’m not a big fan of you going in. I do not want you to hug anything too good. Okay. So this is a blog about fiction. And of course, categories.
Possibly. I think we’ll just keep it simple. We’ll have an about session and contact function. Okay. Nothing too special about it. And I actually would like to learn log-in sessions, but let’s assume that’s a no-go. Let’s just make it slightly smaller. So. So here we will. This naked and came good to that for that. Now we will have a quick one or like let’s call it our first article in a big format.
It’s a banner image, a big article. And this article will make will have a text. We’ll keep this blog simple. Uh, game for the, uh uh, um, and then we’ll offer some Lorem ipsum. I usually copy it from an abstract control room. It’s both kinds of thing like an alarm going off. My apologies of, uh, just let me just copy it from my screen.
Okay, let’s call it. This is not. Oops. Sorry. I just didn’t copy that. Well, okay, now, this is a very annoying thing with Figma on how to do that. Now, my golden rule is like, if my job is not to use it for you for event 24, I’ll make this 20% less than that. So I’m going to cut 20.
And that’s pretty much the article. And now I would also like to use that feature when the article was written. It just gives a bit of context about that and the category. So let’s call it a category is a technology that should come on. This is a kind of category, so it’s a wireframe, so let’s not try to make it too perfect and then dictate changes.
25th April 2020. Right now, I will not have any collaborators on this point, but if you do and make this down to collaboration and that’s a very sort of color palette, making it simpler for everyone to read now, whoops, not one reason to keep some of these things graphic. And I’m going to create a column structure because I like my font the bigger and I like my content because something like this, like that’s sort of the idea.
Yeah, I think, I think and I’ll just group together. Uh, just so duplicate them perfectly and honestly to the website. And, uh, that’s sort of my idea. I’ll just add a couple more. So let’s call it 3000 and have got eight duplicate uh, the first ten x aligned, and now I’m going to go, Yeah. And then, uh, just kind of, uh, yeah, it’s fine and I’m going to trade line over here, which is going to be like in my line.
It’s not hearing from anything that you think might have quite a point. But to be honest, I don’t want Sigma to be like this. But anyway, I must be making some mistakes. I learn that later so sorry. This is where the line goes to. If you will define the gain and pull it down to where I want it to be.
Square, right? Yeah. And the name. So that’s what I will call that. I think it’s all G okay. Right. Yeah. Right, right. Let’s call it. At this point what I’m doing, this column is going to come right and then I think this uses this font that we have, keeping it simple not making it too complicated. Oh, I put it in and it always keeps it out of the group in order to become really hard to manage and it goes in a weird place.
You see just what happened. So you just copy and just put it over here right now. And I have this call us, but the problem we put them in and I’ve got one and we just copy that look again later. Copy that. Uh, and shall we just paste it over here? Yeah. Perfect. We’ll have a logo. That’s all right.
But the first page we have from Jen, now we can go to the cage. We’re going to do the same thing, but this time we’re going to create an About page. Probably have a photo of me. And we don’t need all this. We might need to take a lot of it. And about me, just cause this is probably having a paragraph and a paragraph excuse me.
And, uh, and, uh, and so it’s fine. Now, in these situations, I prefer to have slightly more weight, so I’m going to go with 150% usually what I do. So like when you look at this, it’s very easy to read. It’s like glue articles. The text is crisper and I forgot to do that over here. So I’m going to do that as well.
If it’s a block, it’s your job to make sure that it’s always easier to read it not to. You don’t want people to squint to stretch, especially even to give it space. Looks clean online. So now that’s about the 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 writing more content, I’m just going to make sure it’s all I’m pulling.
If I’m doing it properly, he will do it. We’ll probably use grids, which if you don’t know how to use gradients, you can just go to view and you can create a layout great, or you can just drag and drop and make sure that it’s not sorry. It’s one if you decide to wind up on the right note, I was like, I’m going to take a look.
Okay. It’s a big something. I’m not going to make it perfect because it’s gonna stand for things. So now this is a contact page. On this page, I won’t have a logo, but instead, I’ll form one. So I’m going to do a from over here and go getting in touch with me from and I have some content and post content before we get in touch with this person verging on the here and have some rectangle field.
Okay. I hate to figure that out earlier. Okay. Sort random places sometimes this creates a small thing to say. Okay, let’s get this with a color name and then put that here. Well, I have to show it to smaller because it’s obviously quite big. Okay. And that’s my first name. And we’ll make this screen that’s a placeholder text trying to understand what a piece full of text is when before somebody is typed anything out like on is on display.
And I definitely would be, oh my God, this is what I don’t like sometimes. Yeah. Anyway, since when did I become such a terrible like say how often make sure your capitalization same name email it contains now this one would be a project like this but this was oh, what happened here? Oh my God, this is hard.
Wow. Yeah. You know, absurdities aren’t, you know. Oh, my God. What did I get into this product? Okay, so now that we’ve done this page or up to do this page, it’s this contact, this page, this, this, all things. But in this one. So just call it and go ahead and touch, you know, G And, uh, the and uh, yeah.
Okay. All right. Turn on. Let’s just keep it simple. I want to feel it. Yeah. Uh, man, Oops. All right, so I’m going. So let’s lean into some form like that 90 special magic just to make this even further up. So it’s lined up, and so now this is simple. So what we’ve done is these are simple ones for himself.
The first task is done, so let’s call it that. Now makes starts to become good again. The next task is to choose colors and logos. So I’m going to go over here. Now. This is a task that I am not a super fan of. But the colors, uh, that pink generate pink, whatever he 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 to it about it’s right now up so no I would not go too much but Carlos I’ll pick a color which is darker so I’m going to he goes let’s go through this and that’s a pink one We make it pink website.
Uh, yeah sure. Okay. It’s not you can take a lot longer. Just like, say, now I’m going to translate these five frames into pink. Now, I like the font I currently have, so I’m not going to change it. Don’t. I think that’s fine. I’m just going to change the color to pink. Now, you don’t need to think everywhere because that’s probably not the best idea, in some actions, in some places that you need a little bit of color, you can undo and 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 it. And in each bond, I’m going to call it bee and I’m going to make something just happen out of this. If that’s okay with everyone.
All right. So there you go again and so on. And then I’ll just put it over here. Make it appropriate to be bold and that’s my next medium to make. Give it a bit of a shade. You get the point. And then like that combined together, that’s my new logo. Think congratulations. So right now, usually logos take a lot longer than that.
The heat that’s going to come with that bond. Okay, Sorry. And you could get that much. So I just need to put that into to okay now I can make one over my first logo. Now I’m just going to copy this every event, but we’ll have to speed this up. Okay. Just the minutia of the detail of all those points that take a lot longer because just so it would take a scene.
It’s kind of it’s hard for some reason, but I have perfectly aligned and turned away and the fact that 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 On is a website I use all the time, so I’m just giving it a hand to use and let them do anything.
I need to make sure that they are portrait names around us. Minute computers. You know me right? Orientation landscape. That’s how we need to go. Now. I’m just going to copy this one. It looks good. Written and pasted. Think done. Let’s go. The second image is this one. Wow. Copy. Okay, let’s go meet this. Boom, boom, boom, boom, boom.
Copy. There’s. You should read the copyright, obviously, to make sure that you’re not using somebody else’s or you might need to credit them too. All these things are different rules. And then I’ll just go profile. I’m sorry, I’m not high profile. What about this one? And for the sake of this, I am going to look like this guy and enjoy better looking than I am.
But let’s just call it that. And that’s my color, my website, My whole thing has been not designed. So now the job to do is to convert this into this 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 watch him around. We’re going to close.
So let’s keep this open with this out of the way for a second. Now, the first thing we’re going to do again, we’re going to start a new project. I know they say the first thing first we’re going to do is let’s just close this little thing. I go to Visual Studio. Okay? So I’m giving the Visual Studio off.
I’m a boom, boom, boom. Okay, go ahead. Now open the folder. You’re going to now go and open and we’re going to go on desktop and I’m going to create a folder called my, uh, my time J Okay. To fold open this up then. Yes, of course. I’m to trust everything now, before we do anything, we’re going to set a solo, right?
So the way to think about that is you go over here, so let’s check if you have Pip’s class. Okay? The content. So I don’t have my time qualifying two points and three points perfect. Five-button three. If I get Pip, do the same thing, which is there. And let’s make sure that between the two I now have three installs before I check flask can already do so yeah.
Python your script and your flask. If you don’t have them, I can either write to confirm the command in the in the in in the description but it’s basically something of the science be install flask which you thought you had so you do that. Okay, so everything is from register good to go. There’s also because I already have these extensions but I prefer that you go which are the exchanges between 2019 and then you can take it a second to Python to come up and you can just install this extension.
I always have Python extension tagging, so I also have hash html bootstrap. I think it’s called a boiler template. Sorry, I have. I don’t install that quickly. Nothing special. Very easy to install ways to do so. Yeah. So that’s your first thing, John. Now you should go over here. Now let’s close all of this up. Okay. Could I just start the first logic?
So the first file that we’re going to do is so this is to take this, put this on. Let me just make sure that I’ve got the code right. Perfect. Good. I got the first thing we’re going to start Python. The first point is pretty much this is going to be our main protein photo and code of class of SRC to wow that too.
Okay. Now I’m also going to create a file for viewing. So that’s going to be my main file. So we’ll call it from which we use and then it’s going to work. Right now it’s already cleaned up later. We are sure to k and then we just, uh. Yeah, uh oh there’s my apologies and then use. Yeah, we, we want to send it to the underscore, so, um, always get confused between multiple languages, but this is pretty much it came and is underscore and underscore people to me underscore, underscore the main is uh, and then we want to start to run debug he called code and run it on top of my game settings and
this is my main file now which is giving me the error. So we need to just create the views file as well. So now that I have the view from so this will use blueprints from the flags code. The transcript we also have when template file we have. I’m not an input on this, but I’m in the potato and potato blueprint and then I’m just going to spend the name under strong views.
Okay. So that’s how I was writing going to this page now to view start around and the menu all around the level. So define a function um, that moves it around the template index. So just to you know moving Mm. In the path, any variables for now, just keep it as simple as this. Good. So we’re done. Done. Now we need to create a template called index for next year where all our code is stored.
But before we do that, we can create folders like templates, and we’ll also create another form that this top-level code that takes with all of us also would be of stick with it. And under template, we’ll create a new file called index based in mind and in that, I’m going to go hash HTML on a template to just use something that is already written and confidence bond and key J key.
And then we’ll say on each No. So now I’m going to go back and try to run this. Let’s see what happens and then take me to think, Fred, just a blueprint. That’s pretty much it. So I’d say, yeah, for now, it’s part of my development server in this hub, and boom. Now I don’t know what it’s going to be about.
So I always say the problem, I’m just going to get. Yeah. And boom, and it comes up so you can see if it’s not made you just going to go to and to see that this will come up perfect. So what we’ve done is we’ve built this on a which was fairly easy, fairly straightforward. Now what we’re going to do, 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 a Google Cloud sort of server. Very similar to Google Cloud. Once we have done that, then we will start adding the hash, HTML, the CFS, and then migrate to code over from a normal developer.
But what we’ve just done will replicate on Google Cloud. So to do that, I’m going to just protect my privacy. I guess so. So so Cloud, can you just make sure I’m done? Yeah. Sorry. Google Cloud looks good here. Sorry, I’m bringing it up. Okay, here we go. Now it comes. Whoops. Sorry. On your console. And what we to be creating new projects.
Here we go. 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. Okay, So coming to. Okay, so my first project is created for this Muppet project. I’m going to go to activate Cloud Shell. Okay? Now I’m going to open Ed.
I prefer it for this. And it’s, uh, now, this is very similar to what you have. Oops. Think this is not the right project for some reason, So why don’t you determine whether we have, uh. Oops, sorry. Uh, terminal new terminal transferred config edge. Uh, you gave it here. Check to check like I spent my flight path to.
Okay, it says that is correct. Then. Okay, so we are going to, uh, we have, we’re going to create a new photo on record, and K.G., I. Oh, I’m sorry what we’re doing. Hmm. Let’s give me a second. I just need to, I think, uh, open workspace. Okay. I’m going to cancel this second and cancel this as well.
I and it again, this cloud shell for now.
Okay. And unless. Mm. For some reason am I in the right project? Hang on, let’s go back here. No, I think I made a PPA van that is the project, but for some reason, it’s using the last point. Mm-hmm. Okay. That’s not going to be very friendly. So why don’t we do this? We go look in your project.
Okay? Ngige. So I lost touch with this one again, maybe in the right project. Now let’s just refresh. This is a project that I previously created. Okay? So we’re going to wanted to do this, create and make t t i r and we’ll call it first term project. Okay? And we’ll go to the first Python project. And I got everything in life and there’s nothing here.
Not a good survey. First, go to an authorization list saying that. So this is making sure that we haven’t tried to count and write authority to it and we’ll 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 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. Katy Air Yeah, more in there. So it just needs to touch dot main dot you are. 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, and I’m just going to copy this code, which is simple, which is the code we wrote previously to import platform plans to everything that 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 can disappear here and it should give you Hello World.
Now let’s make sure that it’s not just hello-world to have finished. What do you think? See if this always makes sure to save them it will restart the server and then you can just refresh this and it tells us to 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. Yeah, because the compiler will do this. We just need to create a new file. We’re going to call it right column and so 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 into this one and I’m going to put and now it’s correct. Let’s get back to the light. Great. So many projects. All right. Thank you. They’re going to be here, um, which is 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 Why don’t I just do this for the head so much, you just do it. And if I find 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, I have so much ammo because we’re going to be deploying three ammo.
So and then we’re just going to go right time item that I know is not done. Now all we need to do is deploy it into that batch. So here we go, control c, c, and clean this up. We’re going to say good t Cloud. Uh, deploy. So let’s just see where in my. Oh, sorry. First project first you could.
Yeah. And this had 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 let this give it. That’s taking it to four. Now sometimes takes longer. That’s okay. So now what you’ve done is you’ve created an instance of Python on the map.
The next step we will enumerate here tomorrow is two and sorry just in the video tomorrow is to create the frontend and then once we’ve created the frontend, 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 on first taste. I’m sometimes, but it’s very easy and I love the whole 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 here. I’m not going to create a file while it’s deploying just to make sure it deploys properly.
Mm. Come on. Does take time and it will be you are will be this one I think once it’s ready to overseas based on the phone at the moment the 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 just call it if you don’t mind, okay?
We’re always going to create the folders that we set to take and 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. It had nothing special in the templates that will create a new form. Okay. So the only thing we need to do, we forgot this.
We just need to make the change over here, which is apt. People would go over here and copy that in case it says it’s urgent. Let’s see. Ellen Nation is beautiful. So that’s come to it, obviously. I mean, so now all we need to do is copy this for views. Let’s just make it to the 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 the main logo is everything else remains the same. Now let’s just test this quickly first. Um, which is over here for a test. What happened today That hasn’t changed? Okay, that’s annoying. Oh, it has to continue. And each moment, I suppose this. And then all you need to do is you can deploy this again.
I mean, there are multiple ways to deploy this. Do you? Me? I preferred the client version. This just makes it simpler. So controls. See the thing clearly. This out and then just based 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 the server, which is of a header. So and we can point will point to or not. So that’s all for today. We’ll continue this in the second session where we code this design properly and put it all right.
All right.