7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Writing the Application

We need an application to enhance, so we'll build one from scratch. We won't have a server component: we'll emulate a service by fetching a JSON file.

Related Links

2.2 Writing the Application

In this lesson we are going to implement our application. It's going to be a simple application but it will, at least, give us a starting point. And the idea is that we are starting a company, so we need some way to keep track of all the things that everybody is running around doing to, well, get the company up and running. So, that's where this company status report is coming in. We are going to emulate fetching data from a service. And by that, we are just going to fetch a static JSON file that's going to contain our task information. And we will display that in the browser. So, let's, first of all, look at our data. And I'm just gonna drop this in. This is, of course, going to be in the code download, so feel free to grab it from there and drop it in as well. And the file, you can call it whatever you want. I just called it data.json. So there's that. And since I'm here, I'm going to also create a folder called assets, because we will be using some third-party tools. As far as CSS is concerned, there's bootstrap, there's tailwind. But bootstrap is a lot easier to get up and running with, so we're gonna go with bootstrap. And we are also going to use a JavaScript library called Alpine. Now, if you're not familiar with Alpine, that's okay. If you have experience with Vue or React, then it's going to look very similar. If not, well, this will be some good exposure for you. And it is a fantastic little tool. I will just leave that there. And, of course, these things aren't necessary for developing a progressive web app. They just make our lives a lot easier for developing applications. Let's go ahead and pull in those files in our index HTML. As far as our CSS, that is assets/vendor/css, and then bs.css, short for bootstrap. I could have gone with what they officially call it but I was in hurry. So as far as our JavaScript is concerned, kind of the same path, assets/vendor/js and then alpine.js. And let's go ahead and add in a reference to the file that we are going to create, that's going to be our application. That's going to be assets/js. And then you could call this file whatever you want. I typically call my main application file just app.js. Some people go for main, some people use a completely different name. I'm gonna call mine app. Feel free to call yours whatever. And before we start writing code, let's do look at our data. It's very straightforward. We have an object that has a property called tasks, which is an array of other objects, and they each have a name, a description, and whether or not they are complete. So this is the data that we want to display. And with that, let's just go to our assets folder. Let's create a new folder called js and inside of there, we will create a new file called app.js or whatever you want to call your main application. And we are going to create a global object called projectlist, and it's going to look like this, where we have our tasks as an empty array, and then we will have a method called init, that will do the job of fetching the data and then populating tasks. However, we need to be good here and we need to wrap all of this within an immediately invoked function so that we can protect all of the things that need to be protected. So as far as syntax is concerned, we could do this in a couple of different ways. For me, it's going to look like this. And then we will, of course, return this object that has tasks and init. So inside of this init method, we want to fetch our data and populate tasks. And we could use any HTTP library or we could just use the built in fetch API. And that's what we are going to do. So we'll start by calling fetch, and then we will pass in the URL to our data.json file. Now fetch is a promise, so we're going to use then. And we want to take this JSON data and convert it into a JavaScript object. So we are just going to do that. If you're not familiar with the fetch API, it's very simple, really, at least on the surface. We are fetching something from the provided URL. It's going to return a response that we will handle with another function. This function is going to take the response, convert it into an object using this JSON method. And then we will have an object that we can work with. So now we will have our data and we will simply set our tasks equal to the tasks from our data. And so that's our application logic, it's very simple, we are fetching data and then setting our tasks equal to whatever we received from our web service. So now the magic happens in the HTML file, where we get to display this information. And we're gonna start with a div element, with a container class. This is, of course, coming from bootstrap to, well give us a container. Now, as far as Alpine is concerned, as I mentioned, it's like Vue and React in that we create components. However, the components that we work with are actually in our DOM. We don't create a separate file or define a template in some other place, we use our DOM here. So the objects that we work with are the actual DOM objects, which is a very important distinction, because with Vue and React, you don't. So the first thing that we want to do here is set the data that we are going to use for this component. So by using this x-data attribute, we have essentially told Alpine that this div element is a component. And the data that we are going to use for this component is this projectlist object. But that by itself isn't very useful, because we need to fetch data in order to work with our tasks, and all of that is inside of our init method. So we have another special attribute called x-init. So this is where we would put the code that we would want to execute to initialize our data here. And, in this case, we're just going to call init, we don't have to use projectlist.init. Everything that we use inside of this div element, as far as JavaScript is concerned, is within the context of this projectList object. So just keep that in mind. So, now we can work with this projectList object directly here inside of our HTML. Let's first of all have a title here, so that we can see that this is the status report. And then from there, we will create a template that we will use to iterate over all of our tasks because we want to display our tasks and we're going to use the bootstrap card component in order to display our tasks because we have a title, we have a description, and we also need to know whether or not a task is complete or not. Now for Alpine, we actually use a template element and we want to iterate over our tasks. So this x-for is a lot like a for each loop, in that ,we want to work with for each task and index for each task in our tasks. And we also need to set a key, so that each iteration will have its own key and it needs to be unique, so the index is going to be unique. So, as I mentioned, this is just like a for each loop except that we are doing it in Markup as opposed to JavaScript code. And then we are going to have our card here. So we will have our div with a class of card and a card needs to have a body. So this will be a div element with card-body as its class. A body can have a title. Let's make this an h5 for the class of card's title, and let's also have the text as well. Now as far as the content is concerned, we want the title to be the name of the task. So if we look at our data, we have a name, property, which is going to be the title in the card. Then we have the description that is going to be the content or the card's text. So we need to specify that we want to use those two properties for these two elements, and we do so using x-html and then we specify what we want to use. So you can think of the values of these special x attributes as JavaScript expressions. So here we're saying that we want to use the name property on the task object. We will essentially do the same thing for the text here, except that we want to use the description. And so with that done, we should be able to go to the browser, and voila, we have our list. We have successfully fetched the data. And we are, of course, displaying that. However, this isn't very useful because we don't know what is completed and what isn't. And we could add the text to do that but we can also do the same thing visually. So if something is complete, we can set the background color to green, and we have that given to us with the success color from bootstrap. So we want to set the class of bg-success if the task is completed, and we can do that with Alpine as well. We can use an attribute called x-bind colon and then class, or we can use just a colon followed by class as a shorthand. But what we do here is specify a JavaScript object where the key is the CSS class that we want to use. And we want to apply that class based upon a condition. So if a task is complete, it's going to assign this bg-success class to that element. And we can see that this middle item, Hire marketing manager, has been completed. And we could verify that by looking at the actual data, and yes, that has been completed. However, as far as visual cues are concerned, I'm not wild about that dark text on the green background, so we can change that as well by just adding the text white class. So if a task is complete, it's going to apply bg-success and text white to the element so that we can easily see that. There we go, we have our application. So now the thing that we need to do is actually turn this into a progressive web application. Which you might think, well, we should be thinking of that from the get-go, and yeah, we should. But that's only for new projects. We have a ton of applications that we have written that are currently running that we want to turn into progressive web applications. So the idea behind this little demonstration is to just have an application up and running without thinking about what we need to do as far as PWAs because in reality, that's what we have to face. And we will get started with that process in the next lesson.

Back to the top