Project Setup

[00:00:00]
>> So now it's time to code. Okay, we are going to create the PWA. So, our project will be called Codepad Masters, the idea is it's just a simple web app to store notes while you're coding. For example, hey, I need to learn something. Or, you just hear about the new cryptocurrency that can connect with your website, well you store that for later.

[00:00:27]
So then you can for example go to Frontend Masters and learn about that later. So it's just a small piece of work that we are going to make it installable and offline capable. So it should work offline and currently the web app itself, it's not 100% ready but it's should just go directly to the, let's say to the nice part.

[00:00:56]
It's already there, so it's on GitHub, github.com/firtman, that's my last name, /frontendmasters-pwa. So this is the initial files, HTML, CSS and the JavaScript files, it's plain simple, okay? And by the way, you can actually download these forktails or you can start a new project in Visual Studio from this URL.

[00:01:20]
Or if you want, you can start with plain HTML. So everything that we're going to go in, it can work with your own HTML. So if you have an HTML, if you have a web app, you don't need to use the one that I'm going to to use right now, you can use yours.

[00:01:33]
And have of all the layers that we're going to have on your HTML. Okay, so you can also work on your own project. This project is a Vanilla web app, so no react, no libraries, okay? Just pure HTML, CSS and JavaScript. And we're going to add on top of that a PWA because there is no build process and it's not a PWA.

[00:01:57]
So we are not passing the criteria because it's just HTML as if it was written in 1996. So what we're going to do, we're going to serve and run the web app first. We're going to work on the user interface. So we're going to create this installation metadata, that will be the first part.

[00:02:19]
So how to make this app installable, then we're going to make it offline capable. Because by default, it's a website, if the server is down, or if we don't have network connection, the website doesn't work, okay? So we're going to make it offline capable. And we are going to prepare it for App Store distribution in case you wanna do that.

[00:02:41]
Because distributing on the App Store is actually optional. In fact, on some apps, it's not even possible. Okay, so I don't wanna get in an extreme situations like adult content, but also there are other situations that are not possible. For example, if you're making an app for a corporation, for employees of a company like a corporate app, it cannot be in the store.

[00:03:05]
So it can be a PWA installed from the browser, but it cannot go to the store. So the store or the stores have rules, and we need to follow them if you wanna be there. Okay, so I'm here now in VS Code, Visual Studio Code. And this is actually my project.

[00:03:25]
Remember, you can use this project or if you want, you can use your own HTML or even an empty HTML will work. Right now I have an HTML that looks like this. It just contains two other resources, styles.css and app.js. And then it's actually pretty simple. Okay, we have an h1, we have a form where you can enter a new note in a text area.

[00:03:49]
And then we have a toolbar with right now one button and what I'm using here is material icons. That is an open solution to actually add icons to your system based on web fonts. And then we also have a toolbar here with one button that says learn, that's what we have right now.

[00:04:10]
And an empty URL for notes, that's the HTML. The CSS just in the body, I have just a couple of variable for colors in case you wanna change the color scheme or in case you wanna make a night or a dark version of this theme previously. Here we have the font face definition for material icons.

[00:04:37]
So we have an external dependency here on gstatic.com, that's Google Fonts, where we are downloading material icons, and some basic CSS with Flexbox. Nothing really complicated. Okay, we have time later to actually check that. And on the JavaScript file, also we have just an empty array of nodes.

[00:05:02]
And then on DOMContentLoaded, what we have is a function that renders those notes. And then, a form that when we have an event listener on the form. When you're submitting the form, we're trying to see if you type something that takes area, and if you type something and pushing the new note in the array and rendering the notes again.

[00:05:29]
That's actually pretty straightforward and simple solution. And render nodes, it's just taking that array and for each node, it's creating a node, so it's creating an li element and a delete button. Okay, pretty simple. In fact, let's see this in action, so I'm going to serve these in a server.

[00:05:51]
So something important is that PWA's will not work over the file protocol so I cannot just double-click in the index HTML. And open that in the browser, mean, it will work maybe, but not as a PWA. All the additions that we need for actually passing the criteria will work only over a web server.

[00:06:13]
So I'm going to open a terminal and I'm going to use an open source server available on NPM. So if you have node JS installed, you can type what I'm typing, if not, you can use any web server that you like. I'm going to say npx serve the current folder.

[00:06:33]
And that will actually create a server. It will install temporarily this library in case you don't have that and it will create a new server, by default in Port 5000. So now I can open localhost 5000 to actually see this in action. Ctrl + click on Windows or Cmd + click on the Mac And this is how Codepad Masters looks like on Safari on the Mac but we know it's not compatible with PWA's but it will work as just a normal website.

[00:07:10]
So the idea is that I add a new note here, I need to learn about service workers. I save here and it just appears there and I can delete that. Okay, that's the PWA so far, and then at the bottom, we have a toolbar right now with one button that says Learn and if I click there, it just goes to frontendmasters.com.