Intro to software engineering for the web overview
Transcript
English (Auto-generated)
My name is nice to meet you. Um, I've been programming for a very long time, almost 10 years. So I did this coastal and I'm creating of course to try and like make sure people don't go through the same like those. I went through when I was doing a lot of this stuff. So um, this isn't a regular, this is kind of course that I'm making isn't irregular, like course of topic. This isn't a course and just react or just html or javascript because a lot of times it's very valuable to know how to detect technologies together. It's sometimes it's valuable to know how these technologies to be able to see examples of real world examples of technologies that so that when you're writing your code for when you want, if you want to recreate something like this, then you would know where to start or you know when um, you know when you know when you're in the right direction or when you have something that is realistic project, what they have something that is a project is kind of naive. So what's going to do is I'll go through the outline of what I want to do in this course. I'll show you some examples of what I mean and the kind of things that kind of inspired me to take this course. So this course is called Introduction to Engineering for the way. So we're gonna start a lot of technologies, we're going to study how. So I would say first, let's look at the correct technology. So if you're somebody that knows. Html CSS and javascript maybe you just learned that in some course online course, wherever you took school, where you just let in javascript maybe just let it react. Uh this is of course that help you be able to move on to make more realistic looking projects. So I'll show you how to write to react good on the front end to have it back in data is work on version control as well because it's quite important work on hosting and different types of voting methods, whether they're going to use the platform as service back in the service. So these are things that we're going to later on if you don't understand exactly for me. So first of all, let's see the probably most of this course would be due to make a full stack scalable application, you know, application that lets say it's elastic. That means that it grows like if you get a million users tomorrow. Yeah, doesn't crash because it grows and shrinks on demand basically. That's what I mean by elastic. So that look, that kind of concept is very important when you're making your own apps. So there are a lot of people I see that learn html CSS and javascript and they don't know where to go from there. So making something that's realistic realistically useful app that isn't too crazy for one person to put together. So this is what we're going to do in this course. So first, at the beginning we're gonna just gonna show you some projects that may react. I'll show you well project query and we will look at why react why everybody react today and why J queries cannot become a ghost. I'll show you the differences in the code and I'll show you different projects. I'll show you why um for example let's say you just finished the H. M. S. And groups. I would not recommend he's put much energy into learning degree because it's not as popular as it used to be and there's a reason for that I would go into um And yeah would show obviously there's a reason why there's some still very useful writes code in vanilla Js um some incredible things that made in vanilla javascript like visual studio code is medication javascript with no libraries. It's pretty amazing. But for an individual that's trying to let out too do things on their own or you want to work in a company later on that uses react or you want to learn the more popular technologies like react and node. So first of we'll start with learning about react and why why react versus other libraries. Was a bit about noted notice for making api calls. So if you know what I mean? By api calls or rest api calls we'll go into that. It's for interacting with for interacting with back in resources. Sometimes you can make an call to add something to a database or delete something for a database or just receive data. Database. Like make a get request and receive data back. I'll look, will go through different types of ways to host your web online for other people to use like different methods, their platform as a service. Like you heard that. So um, it's a whole platform that you just link your little code to the platform and it's done the host for you build code and there's a lot of stuff for, you know that um, there are things called back in the back as a service, like under that platform as a service, I believe it's elastic beanstalk but it's also going to those are um, it'll be s cloud services so you can host your application with the cloud services as well. We'll look into that. And this course will also look at some red flags, some things that's kind of scream that like something's in your projects that may scream. That's um that maybe for, let me scream that you don't have a lot of experience or that is amateur mistakes or things that aren't necessarily good for two for recruiters that people seeing us, things that make you stand out, make you stand out from the, from other people that are not that don't take this course. So like I will go through that some red flags and then we get command come, come and get command. So it gets, I'm sure ahead of top right, gets top is this is the website a forum where you can hold your code publicly give is the tool that you used to actually upload the code and track the version of the code um that you are working on. So it's good for if you haven't heard about it gets is good for when a lot of people working on a project and you want to be able to work on different features at the same time without interrupting code. And that's something that's paramount if you want to be a good program, because there's so much you can do and do not use version control, it's really not gonna be good. So um we'll talk about branching and with guitar making different branches of the code branching strategies, but we're going to that as we go on in the branches emerging or fixing merge conflicts, merge conflicts. We'll merge conflicts happen when you have two different versions of code you're trying to put together. Well, we're going to that later on when you see practical examples and we went to different types of platforms for version control. So there's popular on there's a W S code comments. It's a private um It's a private version cultural um form, meaning that you can't share your really like people are you can initiate a code that also aren't like that. It's not like the public platform and you can have private repositories. I have public repositories could commit. The only repositories if you want to be extra secure and you really want people to see your food. For some reason then you want to use good comments. There's also big pockets is another version control system. We all look at each of them and see as why you would use one of the other or not. Okay, so, and then we'll move on to Yeah, then would actually after that, um, since we're trying to make a modern web application that is, you know, scalable, um, an elastic, we would want to use, um, cloud, it's a cloud services. It's very popular now. It's, if your is quite important to know something about the cloud, I will focus on a DBS in this course because it's the one I like the most and also it's the most popular cloud provider. Uh, there's google and Microsoft pressure. Those are pretty much, there's, there's other small companies that do things here and there, but cannot be compared to AWS and Azure and Microsoft. Um, just the number of products of, and the scales, which they offer its popularity and reliability, So many things. Uh, there's so many other things, but I will stick with the AWS cloud, I think it's the most comprehensive three of them. So that's why I'm, so I prefer the most, so would look into how you design and architecture of your, of your relapse. So before you, even start programming, I'll show you we'll go into fame and see how you can put together like a proper put together how you control flow is gonna work. I would show you how to drive sequence diagram. So these are things that would explain it. So it's a sequence diagram. Just shows you the sequence sequence diagram. Um, we'll go into that later, but I'll show you concepts like that that are good for not only collaboration but for you to organize your ideas in it. So we are This part is this section is where we'll be making full stack up with the serverless back end and use authentication. So meaning that you can sign in, you can log in. Your user information is going to be different obviously depending on who's logged in. Its several lists, meaning that okay, we're going to what civilized means later on and why? Cloud. Why use the cloud at all. Right. So, these these are things that you should know exactly if you want to be you want to be well rounded, I believe so. All right. The crowd just means create updates, create read update until the reason why I crawled up is even the reason why it's good to make a crowd up is it shows most a good number of apps today work. Absolutely work with those functions. Creating a record, reading the record of dating, continuation. Record. It's quite important, but we're gonna take a crap. That's fully complete authentication with the back end. Right? So this is this is gonna be a stack we have written on the front end with AWS lambda for aPI calls. We're going to work very important. Es two dB database. We are going to what what dynamodb is and called for years a lot. We'll go when we get to the section, we would talk a lot more about the cloud offerings from AWS and you understand what I'm talking about more so um yeah, we we yeah, so we'll go as to why we chose this stack as well. This budget technologies. Um Alright, so we're connected back and we'll choose a web hosting option and yeah, AWS of course cloud is not, they have some free services but part of being a good also is managing cost. So um in your application and everything is gonna be free so you have to be a good, you have to be able to not make sure your cost doesn't go out of control. And beautiful thing is to be us has something called cost Explorer that keep track of your the total cost of that association accounts depending on how many products you use and how you can, you know, there's different pricing, pricing for all the methods and we'll go through all that. It's quite so it's like, let's say this came from being a html. CSS and javascript guy. You just learned that at the end of this course should be able to make a full stack up with the of the education and if you don't know what most of the things I'm talking about me in here and this course is for you. Alright, so a brief overview of what I mean when I say I'm gonna show you for example um why why react YG query or what does a um let's professional look like sometimes more professional. Uh We'll go into that right now actually. So this is an example. Okay, this is my first example. Let's delete that. This is an app I made a few years ago. It just um if I type react it searches the uses the guitar baby. I to search. Well we'll go through a search for repositories that have this name and then I can click on this gives me information. I can add it to favorites and then it shows up here my favorite list. This looks right. It shows up my favorite but there's a lot of problems as to why this app isn't isn't ideal. There's there's a lot of issues with authority that can point out that we will go through when the next course and then the next class as to why this this app. This problems already with this before we go into the code and you may not understand that by looking at it or we'll go into that now this and yeah if you've noticed you can also delete. So it's it does look like your product very but you can't update a record with. Um, so you can add an intelligence. This is and the problem with even the added ventilating will go to the court later to show you the way these are kind of naive. So this is another app. This is just forget these these are just numbers. They're all hard coded. And this just when I click on this keeps the clicked on another drive, oddly enough up looks quite similar. You click on something added to it somewhere else. But this app is actually, it is a lot better. This has made you react. This was made with just transcript and query and this will go into the code of this and why, why this app kind of functions better than the other one. Uh, and we'll go into that and why this actors a lot more than this. And then we have this, which is more, I will say this is the more realistic than the other to the less naive. This is actually hosted with on the cloud. It's hosted using something called Amplify. It's technically a backend as a service service. Um, and instantly even when you reload this, it reloads. Oh, well, yeah. Well, reload fast I guess. Um, so this is this app is you choose a file image recognition. It's supposed to recognize an image and tell you give you a list of labels of what's in the image. So let's say Superman image presents too. Is that donut donut open and I submit that load load load thank you And yeah, this, it just tells you all right, 98% chance, the pastry 90% chance it deserves food. It just gives you a little associated with what we're in the image. This doesn't really look that much different from the other two, right? It's just one page few buttons not love functionality, but even from looking at there's a lot more that's in this uh to just by looking at them, this is a slight more professional. I would go into why I was able to do this more professional than the other. Even I designed the assets myself and we will go into that, right? Like designed this logo, but I and we would actually go into that that sometimes if you want to polish if you have a personal, I just wanted to make it look a little bit more polished, you might want um add things that show your creative side and I think this is a good way to do it. And besides um you know, graphic zona is a whole field on its own and you can be that, you know, you can design assets and also implement them. Uh you know, we can be a web designer and be a graphic designer and take these two skills and put them together, that's the whole field and so and we're going to all that. I was going to what makes this hapless knife and this and then this one makes this less, not even this. We're all going to that. And you know, you would stand a lot more where this value this course and where we're heading. So, uh and this is courses for beginners, intermediate level programmers. Um, yeah, so I think we'll stop here for today and next time we would well, we'll start with with what I just spoke about before. Uh, we'll start with looking through these apps and seeing why one is better than the other, which would probably understand. Give us better insight as to why we in the stock that we're using. So Alright, thank you guys very much. I think that's it's so right.