Vue JS - Build 5 Web Apps [2/5] | David Katz | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (37m)
    • 1. Previewing Starbase

    • 2. Setting Up Starbase

    • 3. .Vue Files

    • 4. Basic Styling with Css

    • 5. Introducing the API

    • 6. Creating a Character Component

    • 7. Finalizing Character Behavior

    • 8. Structuring the Characters


About This Class

Become an in-demand software engineer by taking this tutorial on Vue Js. As one of the fastest growing frameworks for web development, learning Vue is a must. Simply put, understanding Vue will open doors and jobs for you.


This project-based course will have you coding right away. By building five carefully thought-out example applications, you will sharpen your skills in modern web development.


First, learn the essentials of Vue by going through the main concepts and syntax. Then, build your first single-page app with Vue. Second, create an application that handles HTTP Web Requests in Vue and uses a public API. Extend upon this application next, learning VueRouter for multi-page applications. Fourth, build an application that works with Vuex to manage data. Finally, cap it all off by building an app with full authentication and a real-time database.


You’ll not only learn Vue, but essential libraries like VueRouter and Vuex. Vuex can have a reputation for complexity, but you’ll find in this course, a secret recipe that boils Vuex down to three simple steps!


Lastly, don’t worry if you’re new to web development. Some JavaScript experience will help, but this course explains every new concept thoroughly.


So what are you waiting for? Take the dive into VueJs. Let’s get started coding!


1. Previewing Starbase: Welcome to Starbase the quickest way to generate your squad of Star Wars characters. It works just like this. The uploads three characters on the initial load. We got Luke Skywalker, Chewbacca and Han Solo, some fan favorites to start out. However, if you want to switch out a character with a random one for the base, you simply click on that character's card. You keep going on these card until you have one that you love. A second view application will create together you learn in solidify more fundamental view concepts. Moreover, you learn how to work with an A P I in order to grab dynamic data from the wet. Also, a new tool for creating view applications will be introduced, called the View Klay. This automatically sets up view projects and gives us a bunch of useful features for view development. With that being said, let's get started 2. Setting Up Starbase: All right, let's begin cooking up this star based view application. First off, we need to make sure that we have the view Klay tool installed on your system. Now, the view Kelly is a command line tool that will allow us to set up entire view projects with simple commands. So head to your terminal and run this command in order to install the view clean, use NPM, which is nodes Package manager, NPM, Install, View, Dash Klay and Dash D, which means we're gonna installed globally on our system. So that way we can access to clean from any folder on our terminal to initialize a view project. Right, So this script will take a little bit. Shouldn't take too long, but it will create the view Cleave for us so you can go ahead and posit video. I would have jumped ahead through some editing magic. So that way you guys will have to watch this whole installation. And when you're done, you should get an output in your terminal that looks very similar to this. Now go to your directory for creating view projects. If you creating an application's folder for storing all of your view example, applications navigate to that directory. Now we'll run an easy command to treat a view project based on the Web pack, simple template from view to run view and it and then went pack simple, which means we're using views. Web pack, simple template. And we're gonna call our Project Starbase, which is the very last thing in our commit now. One pack itself is a tool that will allow us to launch a server to host our view coat and see edits of the application update in real time. So now you'll find a series of questions, and you can just keep hitting Enter for each one to skip each step. Now, if all of the directions let's navigate to the starbase directory that is created. Run NPM install. But to create the Node Modules folder for us, which is full of important job script files that will help us run our application. If you're NPM install, command is still going. Go ahead and pause the video and resume once your output looks like this. All right, now that you're back will finally run that last command to see the temple. It'd application in action to run NPM run death. This will launch a window for us. And here we go. We have our star based application and boom! Very nice. You see the default application from the Web pack simple template, which is just there. Useful documentation and a bunch of links and awesome. We have a basic view and MIT application going that we created from our view clean. So now that we have our app set up, let's move on to setting up the actual project and writing down the code for Starbase. 3. .Vue Files: Let's start coding Starbase. Go ahead and open up the code for this application in your code editor and also have a window running where you ran NPM. Run Devin your terminal. So that way you can see any changes that we do to this application. Now, if you go in the Source folder, you'll immediately notice a new type of file with the extension dot view. View files have three main sections to it. The template script and the style section. The Template section allows us to specify how we want our HTML to look for the specific view component. The script section losses actually create view instances and components to make the templates interactive. Saw section works exactly like CSS, where we can define class names to give sections of the template some different. Looks all right to get started developing this application, we'll do something crazy. Let's delete the entire source holder. That's right. Delete the entire source folder. So get a source and delete. Now The Onley right way to truly understand view is to understand things from the ground up . Will want to make sure we know how every line works. So once you delete that source folder. The first thing we're gonna take is create our own empty source folder. So go to your star based application, make a new folder and call it source or S R C. Let's now create a main dot Js file. So get a source new file, main dot Js and the very top will import the view module. So let's import view from view. Then we'll define a new view. Instance the targets the app element in our index dot html to say new view. Once again, it takes an options object. An element we want to target is the i d. But the name of app so really quickly let's take a look at this index dot html five. Indeed, you see the DIV with the idea of app in her index html that we need to target with our view instance, you also see a very interesting script with the source of slash dest slash build A. J. S. This script is actually auto generated by our web pack Deb server. When we run NPM run death, the script is modified dot Js representation of all the dot view files and javascript files that we write for application. If you take a look at the Web packed dot config dot J s file, you'll find that the output path for the folder is slash dist. And the file name is build dot Js. Now, if you want a deeper understanding of how Web pat works, then I would definitely recommend my course the full job script and TSX tutorial, including Is seven and React at the end of this course. You also find a lecture, including a discount on it, so go ahead and check it out there. In that course, we go over Web Pack and setting up this live development server from scratch. So it's really helpful for understanding how the Web pack duck config dot Js files work and also making it custom. All right, moving on. Let's now create our own Abdullah view component right next to the main dot Js. Far so good a source. New file dot view Very cool From this blank slate, let's add some template tax. This template will be what ends up getting mapped out for apt up view component when renders onto the screen to hear a template paired with a template tag within this template now additive with the idea that this will be the element that our future view instance Attach is, too. So make a div whose I d equal toe up. Now let's add some view functionality to the script piece of our dot view far. So once again we need a pair of script tags, and this pair of script tags will also run some JavaScript to touch interactivity to our template, Elements said, the very beginning will export a new default object, which becomes our view. Instance. It's good export defaults and throughout NT object. Now the name of her export object will be at, and then we'll also include a data function. Now, unlike a view instance, we can't use a data object like view components. We have to use a data function that itself returns an inner object representing me, the data that we want for this component. For now, we'll just have a title for app called Generate Your Team to make a data function. Don't forget the return key word to return the actual inner object. The title is generate your team. All right. Now, all there's left to do with this APP component is to take advantage of the title piece of the data and make it show up in our template. So add ahead of three elements of the Div and within we use the good old mustache into relation to insert the title string into our app. So had a three. Let's use mustache and tribulation and put in the title. Finally, we'll take advantage of the render method for view instances and use rendered to actually throw this abduct view component onto the screen. Go to main dot Js because that's what we use the render method and has one parameter that takes care of the actual rendering and the creation of the element and weaken. Title it anything. It's at the render field. Then we have an inner arrow function with one parameter and we'll just call it H. It can really be anything we want, but H is a standard pattern. Let me say h we want to render the app now before we render the app that probably thinking , Of course we have to import the app so good in port app from AP Top view. Let's save that and as we reload there, we get generate your team appearing on the screen. Very cool, except it doesn't look as clean as before, so let's take care of some basic styling next with CSS. 4. Basic Styling with Css: Let's now make sure Starbase looks nice. We wouldn't want to lose at Beauty pageant. After all. One of the quickest things that we can do is at an already well made CSS library to the application. No, I'm referring to Boot Shop, whose stylings will quickly turn this into a professional looking app. So you can either look up boot shot, getting started to find them unified CSS, falling once more from online, or look back to a previous project that already has it. For example, note masters index dot html. Go ahead and copy that long a Max CD and bootstrap link, and we'll put it in star basis index html. Great. So it's reload, and that looks better already. Now it's just not right yet. So let's at our own style sheet now and build unnecessary classes and custom stylings suited to our needs to create a next set. CSS file, right next index dot html was fine. Starbase new file index dot CSS First up will target the body component and give it a dark background. So not exactly black, but a pretty dark color. So a low 263238 and then we'll target our ad component. So pound at so referred to the one with the idea of that. I must say the font family is Avenir, whose backup is Helvetica. Who's back up? Is Ariel, whose backup is San Serif. When I say back up, the application will first try to load the Avenir fun, but if that doesn't load, then it loads Helvetica. Now, if you can't find that either than it loads aerial, then it finally loads Sand Saref. Then we have a Web kit font smoothing property Anti a liest, which will round out our actual Funt. Then we have a mas os X font smoothing, which will continue to give us some nights surrounding out for our Funt. They're online, Everything to the center. We'll make sure the color over text is white, so that way it appears against our dark background. And then we want to make sure the AB component isn't really touching the top, so we'll give it a margin top of 60 pixels. Now, As you say this, it doesn't reload on the screen just yet, because we need to head to index html and add the actual style sheet link that refers to our local index dot CSS file to make a real style sheet link, and then we'll refer to local index dot CSS. Let's save and reload. And while our application looks good already, so none of you taking care of styling let's move on to giving Starbase some actual functionality. 5. Introducing the API: Welcome to the Star Wars, AP I. This FBI lets us access various endpoints to grab info about various characters, planets, starships and other neat things from the Star Wars universe. Besides all the free information we get about this awesome world, one of the best things about this a p i. Is that keyword free. It costs absolutely nothing to use. No registration for a key code is required, and it's built exactly for learning purposes. Perfect for us. So with that in mind, let's get to the code and learn how to interact with this a p I A right within our star based application and just for reference, it's available at S W a p i dot co. So go to the abduct view component and next to the data function will add a methods field, which for now will be an empty object. Okay, let's now create our first method called fetch character, which will use the A p I to grab some data. No notice how I use the word fetch. Well, that's exactly what will take advantage of most modern browsers at this point. Support the use of the fetch a p I in JavaScript to handle Web requests. Now hold up. Wait a minute. What our Web requests? You might ask great questions. To put it simply. Web requests are ways that code can interact with online endpoints. Most commonly, there's the get wet request, which simply receives information like HTML or JavaScript data files from a server. Also pretty frequently used is the post Web request, which sends information to a server so that way they can store it in a database or a ransom code with it. For our purposes will take advantage of the get requests in order to grab info about the character that we want from the Star Wars. A P I. Let's use a fetch a p I by calling the fetch function. Say we have keyword fetch not the fetch function as two parameters. The first is the actual endpoint that we want to hit. The second is often is object where we specify what kind of Web request that we intend to use. Let's hit the Star Wars a p I for now. So it's go. Http slash slash s w a p i dot co slash ap I slash people and then for the second parameter will have an options object with the get request method specified. Will say method is get great. Now this could alone will actually begin to pull some data from the A p I. However, we still need a way to handle the return data. This affects function actually returns what is called a JavaScript promise, which is just a way to represent a piece of data in JavaScript that sits in for some pending future value. In our case, this promise is perfect, since we can't know for sure when this a p I will return the data. It may take some time, but we want to actually run some code when we receive the data to handle a promise, we use a dot ven statement and arguing inter Arab function just like so. So at a then to the fetch and we'll save the response and then you go ahead and consul dot log that response Now, As far as testing goes, let's add a quick button to our template that allows us to call the fetch character method and see what happens. So after the title, let's add a button real quick will make sure it looks nice, so class equals button and button primary. Let's just say test fetch character and within we'll have our view at Click handler to call , fetch character. So now that we have that functionality, let's head to our application. Go ahead and inspect the element. So that way we're keeping track of what's going on in the console and let's click fetch character. So there we have a response with the type. Of course you are. L headers a body element, which is really cool. Now you'll notice that indeed we get a response, which is awesome, except its contents aren't exactly what we had in mind. It's pretty complicated. We want on options Object shown just like so from the swampy a p I. Now, how do we actually grab that? Well, luckily, this response right here has a dot Jason Method within its prototype, the dot Jason Method returns are readable stream of data in the body property of a response into a Jason JavaScript object. So it transforms this body right here, which is a readable stream into something that we can actually use right within our code. This Dajae saw method itself returns a promise all we need to do is simply have another dot then statement, and this time we'll log the response of a parameter that will call Jason. So with our spots instead of council logging, it will return response that Jason, then within the other than statement we have an inner Jason handler for an inner arrow function. Well, simply confidante log Jason, Let's save and that we now have an updated method. So let's reload. Let's test match character. And there we get an object, which is exactly what we wanted. So here we have a count of people because that's the number of results that we get. We get a bunch of different characters within our people and point. So let's see what happens when we it's hash an i d to the end of this. So with an updated object, that's reload test for each character. So with Luke Skywalker, we get the actual object that we want. So we have eye color of blue hair, color blond, gender, male. He has a blue light saber that's not listed here, though just thought I'd throw that in. But anyways, we got what we desired with our fetch function so very cool. We now have interactivity with an A P I right within our dot view file, which is awesome. Let's now continue developing starbase and placing this fetch character method into a devoted character component so that we we actually get some front and updating onto our screen. 6. Creating a Character Component: with Starbase. We want to have multiple characters on her application. That way, that title of Generate Your Team has some meaning. All of these characters, and we can have any number of them will run the same affects coat. However, we don't wanna have to write the same fetch function more than once for every character that's generated. So what can we do as a solution? Now? This seems like the perfect time to create a view character component for our application. It's at a Components folder to the AB Source Directory and create a character dot view file . Let's go to source new folder components. Let's make a character dot view foul new file character view. Now let's add the template and scripts for the character component. For now, let's add a template with a blank inner def, and we'll figure out how to structure the character. Once we get our methods and data all set up within the script section at the template, we'll give that matching closing one and then a script section. Of course, don't forget that intuitive with a template for now. All right, so now it's time to add the scripts portion of the component, which will add some view interactivity. Always. We want to initialize this as a view component, so we'll export a default object where we can place all of the options for our view functionality. So once again, export defaults on empty object. First up, let's give this options object the character component data Some initial data within a data function. Remember, we gotta return an object within that function. For now, we'll have one field called character, as you might have guessed that maps to an empty object and absolutely make sure not to forget the inner return. Keyword. So here we have our data function. And don't forget that return keyword and were returned an object with the character key with a value of an empty object. For now, all right. Now we want to add that fetch method from the APP component, the place of within our character. So first up at a methods object next to the data function, and then we'll cut the fetch character method we created previously Interact, view component and place it right within the methods for character dot view. So get ab view. Let's take out the fetch character here save that and place it within character dot view. Great. With this method added to our character component, let's make a few changes, for one will modify the method to update the character piece of the data with the return Jason. So instead of confidante logging, Jason will say this DOT character equals the Jason. Secondly, will place a character data within our template in some mustache interpolated syntax just to check out the contents for now. So let's say within this mustache will put character. All right, we're just about ready to add this component to our application, except there's one question you might have in mind. There's no button in the character component. So when is this fetch character method going to fire? You know, Excellent point recall. The previous discussion of life cycle hooks well will not take advantage of the created life cycle hook in order to fire some code when this character component is made for application. So add a simple creative function and make sure to call this stop fetch character within after methods at a created function, just like data. It's got to be a function that we call this not much character which will refer to that fetch character that we have within methods. Excellent. Finally, let's import this new character component within our actual app. So heads at top view and above the export default we need to import character from Let's Find the Characters folder, Excuse Me Components folder, and then locate character dot View. And now we need to specify this component as an actual part of her application. We do so with the components Field of the View. Options object. So rather than methods, let's say we now have components. The very 1st 1 will list. It will be character. Now, thanks to an Essex shorthand sick tax on the structuring assignment on objects, we can map the character string to the character component automatically by just singling, putting character. All right, let's place the test button with an instance of the character component. Let's take out this button and then let's replace it with a character self enclosing tag. We'll save it. That's reload. And there we go. Our fetch function worked on the created hook off. Our character component is pretty sweet. Now we have a pretty crazy looking piece of data showing up in her application now. But ah Hasam, who re created the character component that now uses the Fetch A P I. And we can use this to call the fetch function as many times as we want with multiple character components. Let's move on toe adding more behavior to this character. 7. Finalizing Character Behavior: We just created a pretty sweet and useful character component. But you may have noticed a pretty glaring problem with this character. We're only importing data for Luke Skywalker. This is because we only specified our get request to pull data for the very first entry to the people portion of the A P I. We'll need some way to specify different numbers on the get request is that way we can get data four different characters. Luckily, we could take advantage of the props field of the View component in order to update the fetch method with the number that we pass to it. So head to character dot view. Let's add that props field right above data. Remember, it's an empty arrange for now, but then we'll put an I D string. And don't forget the trailing comma. No one needs to update the fetch character method to take a parameter of I D and call the fetch endpoint with an interpretative i d. Variable rather than the hard coded one. So fetch character and his parameter is I D. And then within the fetch string. Let's turn this into a six ring, so it replaced the regular quotations with back ticks then, rather than the one will interpret late the I d. Variable using the Dollar Curly Brace syntax. Great. Now there's another change for the character component in the initial call of Fetch Character in the created hook. Make sure to specify this dot i D in the parameters field so that we re pass a valid I D to fetch character. All right, before we save this file, head back to act up view. And there's a critical piece missing to the instance of our character component in the application. It's a good abduct view, and you noticed that our character now needs an I D props. Snow will add v bind of I D to one. And the shorthand syntax for V Bind is just a regular colon. So remember, we can take out the V Bind because view will recognizes Colon as a V bind us as we save apt up view, and we save character dot view when we reload there, we still get Luke Skywalker. Except this time we're actually fetching with the past distant i d. From our props. Very cool. So now the great thing about having this option of the idea of props is that we can now use some looping to create multiple character components that take different ID's. So within abduct view, let's create a list of I. D. S right within our data for a certain number of characters that we like to load in your application. So right next to the title, let's add an initial ideas field. Well, said it to an array will have won 13 and 14 which are some cool characters you'll see in just a moment. And now, in her template, will wrap this character component with an outer Div with the class of coal MD 12th. It's a negative clock whole MD 12 and then we'll use of the four loop to loop through the I DS in the initial ideas or rate in the data. One i d. At a time passing the I D to our custom character component. So take out character. Let's place it within here will place a V four directive loop the four i d. In initial i ds, which is what we have in data and then we still buying the I D. But this time will pass this I d to our I d bind. Let's save and let's see if we got more than one. Now let me close the consul real quick. And then we have one Luke Skywalker to chibok A, which is the idea of 13. And finally, our last object. Is Hans Solo Very cool. We got three awesome characters appearing in our star based app. Now, for those of you with your consul still open or your terminal sellout, you'll notice that we get a warning here, and it says the component list should render with before should have explicit keys. Now the key attributes allows for easier sorting, removal and adding of dibs for view to get this warning to disappear. There's a very neat solution. The for loop actually takes an optional second parameter, which keeps track of the child index within the loop. So next to the i D portion of the V four loop at an index parameter, both within a set of parentheses, so once again wrapped this I d with a set of parentheses, and now we can have a second parameter of index and now will bind the key of this component to the index created within the four loop Sochi equals index. As we save on a reload, you notice that are warning disappears now I agree that this looks pretty horrendous at the moment. I mean to us coders. All this JavaScript object notation format might look pretty sweet, however. We want other people to use this app and see a clean interface, so we'll get to that in just a moment. But before we do, let's add just one piece of quick functionality to the application that allows us to switch out comparator hours with a random one based on a click. So head back to character dot view, and we'll add another function called switch character. So in character dot view will add a switch character method, and the switch character function will really be quite simple. First will generate a random i. D. From 1 to 83 because there's 83 characters in the A P I. And then we'll recall the fetch character function with that newly generated random i D. So first up, it's promised. Let random i d. Equal math thought floor, which, when you have a decimal number, takes the lower integer So, for example, 7.9 actually become seven or 13.12 becomes 13. That will generate a random number from 0 to 1. So this gives us something like 0.2 or 0.4 or 0.999 almost five that number by 83. They will add one to that because once in Florida we want to make sure we get 1 to 83. It finally will add a click handler to our character, DIV. That calls this new switch character method. But don't forget to call this dot Fitch character on the random i d. And then, of course, we want to call switch character with the outer def as we save. When I click this there, we got a new character. Once again, I can keep going and going and get new characters. And then overall, I generate a team of characters from Star Wars that I like an excellent Let's move on to one of the most important aspect of the app, actually making it look good by structuring out our character component next 8. Structuring the Characters: Okay, now that we have the functionality down for application, the actual structuring and template ing of it remains. Let's first tackle. The character dot view component will take advantage of some bootstraps stylings. Help us quickly create an alternative representation off this character data that is appealing. First, change you overall. Div. To have a class of coal MD. Four. Mitchell fit nicely into our Outer Coal MD 12 which he created in her AP component to call MD four that will have an intuitive with the character card class Erupts another DIV with a class called Khar Block. The card block is a book shop class, while character card is one which will define ourselves. So the 1st 1 is capture card and within we have our card block. Let's delete that interpolated character for now. Next, we'll add a title portion of the character card with the cartel to class, and then we'll go through all the relevant fields of the character and use card text clauses on paragraph elements. So first we have ahead or four element with a class of card title, they will insert the character's name and next up we have some paragraph tags with a class of car text, and we'll just go through each one. We'll take a bit to type it out, but it'll be worth it. The 1st 1 is height, so let's find character, not height. Next up, another class of car text there's gonna be for these. So we got mess, which is character dot mus. And why don't we also add the measurement field? So that way it looks nice. So K G is the mess. It's measured in centimetres for the height. They're more global metrics. We have hair color, so once again we have a class of card text. We have our hair color for this, and we'll inter plate character hair color, which is a snake cased. And then, of course, the last one applause equals car text. Let's go ahead and insert the eye color, you know, just because you can't so character dot eye color and great. Finally, let's add that character card class to our custom, not CSS, which will really tie everything together. Very simply. We'll give these cards a nice green border, so that way they're easily distinguishable. And then we'll round out that border and then we'll make sure that these cars look clickable with a pointer from the cursor, so go to index dot CSS. Let's add that character card class. Make it kebab, cased the border will be two pixels wide. It'll be a solid one. And here comes our green borders. So Capital four, FC 08 D nice green view themed color. A border radius will be four pixels. I feel like that just looks nice with the sizing of the cards will end up generating the cursor Pointer gives it a clickable look. Let's save that and let's reload. And of course, we have to save character dot view, so make sure to save it. And while that looks a lot better already, so once we click on them to keep going to keep regenerating new characters eventually we have a team of characters that you can keep finding until you really love them. For me personally, I like the idea 1 13 and 14 because I like Han Solo Luke Skywalker. Chewbacca etcetera layers in there somewhere, too. But they got droids in there, a bunch of other Jet I and other sit tight characters for you to browse through. So really quickly. I'm going to zoom out, too. That way you can see the other true styling of the app. And there they are, the cards right next to each other, not fully expanded. You can see that coal MD for in action. So there we go. That's it for the starbase application. And I hope you really enjoyed building it and that you got a real sense of how view applications would look like in a really enterprise setting when dealing with online Web Quest and AP eyes excellent work and congratulations on building Starbase.