All language subtitles for 007 [Project] QR Code Generator_en

All right, guys.

Now, you've been using the QR code for a little bit now in some of the quizzes, in the lessons in

the final project for this module today, we're going to be building ourselves a QR code generator and

we're going to be using NodeJS packages to generate QR codes from any URL that we can come up with.

So you know what QR codes are.

It's kind of like a 2D bar code where you can scan with your phone in order to direct to any URL.

Now in order to create this project, we're going to be using two packages from NPM.

One is called Inquirer, and this is something that's going to allow us to get inputs from the user.

And another package called QR image, which is going to generate images as a PNG for us to save into

our local file system.

Go ahead and download the starting file for the QR code project, unzip the file and extract it to open

inside vs code.

Now I'm going to open up the Index.js file and you can see there's roughly three to dos that you need

to complete in order to finish this project first, to use the Inquirer NPM package to get user input

so that the user could type something into the terminal.

When you run this project and we're going to take whatever the user typed to generate a QR image and

we're going to save that image locally.

And then we're going to create a text file using the native node module to save the user input so that

once we're done, our project will allow us to type in a URL and that URL will get generated into an

image file which will be saved into the same folder.

And along with that image file will be a text file that contains whatever URL the user typed in.

Have a think about how you might achieve this.

Pause the video and give this project a go.

All right.

Hopefully you've given that a good try and you're here to run through the solution with me together.

We know the two NPM packages that we need are Inquirer and QR image.

Now you can either trust my spelling here or you can double check on NPM.

So I always recommend to trust but verify.

And also it's important for you to see the documentation here.

Anyways, we need to install Inquirer and we also need to install a package called QR Dash Image.

Let's just make sure that it actually does what we expect it to do, which is a QR code generator.

So now let's go ahead and install these two packages.

So it's called Inquirer and QR Image.

And remember previously I told you that you can actually install more than one package by adding both

of their names after the install or I for short command.

So let's install Inquirer first.

And this is a awkward spelling and I always need to double check.

Let me just double check that.

I've actually got that spelling right because I've made this error many times.

U i r e r.

Yeah, that looks right.

And then the next one is QR and then hyphen image not underscore.

Okay, so I've got both my packages.

I've double checked.

They're correct.

Let's hit enter and hopefully I don't get any errors telling me that I've typed it wrong.

Great.

So it's added 50 packages and those packages are now safely inside this node modules folder.

Now you might be wondering why are there 50 packages when I just wanted to install two things.

Well, because there's cross dependencies.

So the module that we need is obviously QR image and also Inquirer, but they in their package dot Json,

you can see actually have their own dependencies.

So one thing depends on another and by the end of it we end up with 50 modules.

But don't worry, it's all very lightweight, so it's not going to be a problem.

Everything added together is probably going to be smaller than our image that we generate.

Let's go ahead and do the first part, which is to use the Inquirer NPM package to get some user input

in order to figure out how to do this, we go to the documentation, so we need to import Inquirer.

And you might remember this from before, but in order to use the import function, we have to change

our package.json to have the type set as module.

You'll notice that I'm also missing the rest of the default package.json information.

And the reason is because I forgot.

But also I wanted to show you this can be done after the fact so you can either run npm init dash y

initially or you can actually do this after you've installed dependencies and it will still go ahead

and add all of the extra stuff that you need.

So remember the dash y means I'm saying yes to every single question in that initialization script,

but if you didn't want to, you can remove that and you can set everything in the terminal if you wish.

But in my case, I'm actually just going to leave it as it is.

Maybe I'll add my name here as the author, but we can now safely go back to our index.js knowing that

this import is now going to work because we set the type of our project as module based.

Let's go back to the documentation to see how we should go ahead and get the user input.

This is their example code and we need to first pass a prompt to the user and then we wait for them

to give us a answer and then we see if there are any errors to catch and to handle.

If we scroll down, we'll see that.

The question is actually an object containing various optional values, such as the message to print

or the name to use when you're storing the answer and a lot of other things which are all optional.

And then the answer is a key value hash containing the client answers in each of the prompts you pass.

So you can pass multiple questions, such as, in this case, where they've created a pizza ordering

machine.

Let's go ahead and take this sample code and paste it into our index.js.

Now, first thing we need to figure out is how to pass a question into the prompt so we know that the

question is an object and it has a bunch of properties.

So the one that we definitely need is to have a message because this is the actual question that's going

to be printed.

Let's set the message property to say type in your URL.

And because this is a JavaScript object, we need to have the curly braces around it.

And now we can define a name to use when we're storing the answer.

Maybe let's just call it name.

Set it as URL.

So we've got a question with two properties.

Set the message and the name and we only have one prompt.

So just one object.

Then we're going to get hold of the answers.

So let's just console log that and see what we get.

Now let's go into our terminal and let's make sure we CD over to the correct project folder.

So now that we're inside QR code project, let's go ahead and use Node to run the Index.js.

Remember that trick where I said write in or in and then hit tab just to make sure you're in the right

folder.

So if it does appear, then we are in the right folder and once I've hit enter, I've got my question

here telling me to type in my URL.

Let's try WW dot google.com hit enter and the output.

The next line comes from my console log which is the answers.

So this seems to be a JavaScript object with the data that I want stored inside the name URL, which

is what I defined up here.

So now that we know that we can actually get hold of that URL, so let's create a const, call it URL

in lowercase and we'll set it to answers dot URL.

There you have it.

So we've managed to get the first step completed.

The next step is to use the QR image NPM package to turn the URL into a QR code image.

So we've got the URL.

Let's work with the next package to turn it into an image.

First, we're going to need to require this package.

So I'm just going to paste it in here as it is from the documentation.

We can fix this to use the same import as we used previously.

Let's take a look through the documentation.

In order to create a QR image, we need to use an object called QR from the QR image module.

And then we're going to use a method called image to turn a piece of text, which is the first input

into a QR image.

And the second part can take a object where we have a whole bunch of options, such as the type of image,

the size of the image margin, etcetera.

And you can see that it actually defaults to create a PNG, which is what we want to create.

So we actually don't even need to provide this option.

And then we take this QR image and then we use the FS module to write it into the file stream.

These two lines of code seem to pretty much do what we need, so let's copy it and paste it into the

part where we get hold of our answers from the user.

So the first thing we're going to do is I'm going to delete the options because it defaults to create

a PNG image.

And the text that we want to turn into the QR code is going to be our URL from this step earlier.

Now, once we've done that, then we're going to write it into the file and I'm going to call it QR

underscore image dot PNG.

Now the next thing to do is you can see we've got our require FS module here, we've got our require

QR image here and we can't actually mix the different ways of using import.

So we can either use the module based project or the other option is to use commonjs.

Now, because we've already selected module, let's go ahead and adapt our code to get rid of all these

VARs and use the correct modern syntax.

So we're going to import something from the QR image module and that something is going to be this object

that we're using right here and it's called QR.

So if I type Q, it should already show up because I'm now looking through this module for this particular

object.

And if you look inside the node modules and you open up QR image, you'll see that in the library there

is something called Qjs and this is what we're tapping into in order to create our QR code.

So now that I've imported that, I can get rid of this line of code and down here I'm now importing

this QR straight from the module where it comes from.

Now this next part requires FS and we know we can change that.

We can use import to import from the FS native module.

And the object that we want to get hold of is also called FS.

Now we can get rid of this require and simply say FS dot, create write stream.

And now let's go ahead and test our code to see if we can actually generate a QR image.

So let's use the Node Index.js command to start our code.

And here I'm actually going to type in the full URL.

So https colon slash slash google.com.

And the reason for this is because I need to verify that QR code.

I don't know if it's actually correct just by eye, so I'm going to need my phone to scan it in.

So either copy a URL from your browser where you know it's correctly typed or type it out fully like

we have here.

And you can see as soon as I hit enter, we've got our QR image created and it's called QR underscore

image dot PNG exactly how we wanted it and it's now showing our QR image.

And right now I've just checked this QR image and it takes me directly to Google.com.

Now all we have left is the final part where we're going to use the FS module to create a text file

to save the user input.

We've already got hold of our FS module imported right up here.

So down here, in addition to our SR image, we can use the file system method of Pfswrite file to create

our new text file.

I'm just going to copy this sample code over here and I'm going to paste it right below the other lines

of code.

So we're going to need FS dot to call the write file method from the file system.

And then we're going to create a file called URL dot Text.

And the data is going to be the URL that we got over here.

Now let's go ahead and hit save and hopefully our final step should also work.

And once I hit enter, we've got our image created and we've got our URL text.

It's saved the text that we've typed in right here.

It's generated our QR image and we've now completed all three steps of the project right here.

Now, this project might have required you to do some digging around and getting used to reading documentation

and understanding how it works.

So if you got stuck, don't worry, it's all a part of the process.

As long as you understand everything we went through just now and you're able to fix your code and you

give everything your best effort and your best try, then you are moving forward in your coding journey.

So that's the end to this module.

In the next module, we're going to be learning about a JavaScript framework called Express, and that

is going to be the first step to creating our backend using node and JavaScript.

So for all of that and more, I'll see you there.