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 Node.js 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 TODOs 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 txt file using the native fs 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 txt 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-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 an 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.
I-N-Q-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.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 - 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 - 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 an 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, the 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 "inj" 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 www.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.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 an 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_img.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
var's 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 qr.js 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.CreateWriteStream."
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://www.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_image.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 txt 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 QR image, we can use the File System method of fs.writeFile to create
our new txt 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. to call the writeFile method from the File System.
And then we're going to create a file called URL.txt.
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 QR image created, and we've got our URL.txt.
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
gave 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.