All right, guys. 1
Now, you've been using the QR code for a little bit now in some of the quizzes, in the lessons in 2
the final project for this module today, we're going to be building ourselves a QR code generator and 3
we're going to be using Node.js packages to generate QR codes from any URL that we can come up with. 4
So you know what QR codes are. 5
It's kind of like a 2D bar code where you can scan with your phone in order to direct to any URL. 6
Now in order to create this project, we're going to be using two packages from NPM. 7
One is called "inquirer", and this is something that's going to allow us to get inputs from the user, 8
and another package called "qr-image", which is going to generate images as a PNG for us to save into 9
our local file system. 10
Go ahead and download the starting file for the QR Code Project, unzip the file and extract it to open 11
inside VS Code. 12
Now I'm going to open up the index.js file and you can see there's roughly three TODOs that you need 13
to complete in order to finish this project first, to use the inquirer NPM package to get user input 14
so that the user could type something into the terminal 15
when you run this project, and we're going to take whatever the user typed to generate a QR image and 16
we're going to save that image locally. 17
And then we're going to create a txt file using the native fs node module to save the user input so that 18
once we're done, our project will allow us to type in a URL and that URL will get generated into an 19
image file which will be saved into the same folder. 20
And along with that image file will be a txt file that contains whatever URL the user typed in. 21
Have a think about how you might achieve this. 22
Pause the video and give this project a go. 23
All right. 24
Hopefully you've given that a good try and you're here to run through the solution with me together. 25
We know the two NPM packages that we need are inquirer and qr-image. 26
Now you can either trust my spelling here or you can double check on npm. 27
So I always recommend to trust but verify. 28
And also it's important for you to see the documentation here 29
anyways. We need to install inquirer and we also need to install a package called qr-image. 30
Let's just make sure that it actually does what we expect it to do, which is a QR code generator. 31
So now let's go ahead and install these two packages. 32
So it's called inquirer and qr-image. 33
And remember previously, I told you that you can actually install more than one package by adding both 34
of their names after the install or i for short command. 35
So let's install inquirer first, 36
and this is an awkward spelling and I always need to double-check. 37
Let me just double check that 38
I've actually got that spelling right because I've made this error many times. 39
I-N-Q-U-I-R-E-R 40
Yeah, that looks right. 41
And then the next one is qr and then hyphen image, not underscore. 42
Okay, so I've got both my packages. 43
I've double checked< 44
they're correct. 45
Let's hit Enter and hopefully, I don't get any errors telling me that I've typed it wrong. 46
Great. 47
So it's added 50 packages and those packages are now safely inside this node modules folder. 48
Now you might be wondering why are there 50 packages when I just wanted to install two things. 49
Well, because there's cross dependencies. 50
So the module that we need is obviously qr-image and also inquirer, but they, in their package.json, 51
you can see actually have their own dependencies. 52
So one thing depends on another and by the end of it we end up with 50 modules. 53
But don't worry, it's all very lightweight, so it's not going to be a problem. 54
Everything added together is probably going to be smaller than our image that we generate. 55
Let's go ahead and do the first part, which is to use the inquirer NPM package to get some user input. 56
In order to figure out how to do this, we go to the documentation, so we need to import inquirer. 57
And you might remember this from before, but in order to use the import function, we have to change 58
our package.json to have the type set as module. 59
You'll notice that I'm also missing the rest of the default package.json information. 60
And the reason is because I forgot. 61
But also I wanted to show you this can be done after the fact. So you can either run "npm init - y" 62
initially, or you can actually do this after you've installed dependencies and it will still go ahead 63
and add all of the extra stuff that you need. 64
So remember the - y means I'm saying yes to every single question in that initialization script, 65
but if you didn't want to, you can remove that and you can set everything in the terminal if you wish. 66
But in my case, I'm actually just going to leave it as it is. 67
Maybe I'll add my name here as the author, but we can now safely go back to our index.js knowing that 68
this import is now going to work because we set the type of our project as module based. 69
Let's go back to the documentation to see how we should go ahead and get the user input. 70
This is their example code and we need to first pass a prompt to the user and then we wait for them 71
to give us an answer and then we see if there are any errors to catch and to handle. 72
If we scroll down, we'll see that 73
the question is actually an object containing various optional values, such as the message to print, 74
or the name to use when you're storing the answer and a lot of other things which are all optional. 75
And then the answer is a key/value hash containing the client answers in each of the prompts you pass. 76
So you can pass multiple questions, such as, in this case, where they've created a pizza-ordering 77
machine. 78
Let's go ahead and take this sample code and paste it into our index.js. 79
Now, first thing we need to figure out is how to pass a question into the prompt so we know that the 80
question is an object and it has a bunch of properties. 81
So the one that we definitely need is to have a message because this is the actual question that's going 82
to be printed. 83
Let's set the message property to say, "Type in your URL." 84
And because this is a JavaScript object, we need to have the curly braces around it. 85
And now we can define a name to use when we're storing the answer. 86
Maybe let's just call it "name". 87
Set it as "URL". 88
So we've got a question with two properties. 89
Set the message and the name and we only have one prompt. 90
So just one object. 91
Then we're going to get hold of the answers. 92
So let's just console log that and see what we get. 93
Now let's go into our terminal and let's make sure we cd over to the correct Project Folder. 94
So now that we're inside QR Code Project, let's go ahead and use node to run the index.js. 95
Remember that trick where I said write "in" or "ind" and then hit Tab just to make sure you're in the right 96
folder. 97
So if it does appear, then we are in the right folder and once I've hit Enter, I've got my question 98
here telling me to Type in my URL. 99
Let's try www.google.com. Hit Enter and the output, 100
the next line comes from my console log which is the "answers". 101
So this seems to be a JavaScript object with the data that I want stored inside the name URL, which 102
is what I defined up here. 103
So now that we know that we can actually get hold of that URL, so let's create a const, call it "url" 104
in lowercase and we'll set it to, "answers.URL". 105
There you have it. 106
So we've managed to get the first step completed. 107
The next step is to use the qr-image NPM package to turn the URL into a QR code image. 108
So we've got the URL, 109
let's work with the next package to turn it into an image. 110
First, we're going to need to "require" this package. 111
So I'm just going to paste it in here as it is from the documentation. 112
We can fix this to use the same import as we used previously. 113
Let's take a look through the documentation. 114
In order to create a QR image, we need to use an object called qr from the qr-image module. 115
And then we're going to use a method called image to turn a piece of text, which is the first input 116
into a QR image. 117
And the second part can take an object where we have a whole bunch of options, such as the type of image, 118
the size of the image, margin, etcetera. 119
And you can see that it actually defaults to create a PNG, which is what we want to create. 120
So we actually don't even need to provide this option. 121
And then we take this qr-image and then we use the fs module to write it into the file stream. 122
These two lines of code seem to pretty much do what we need, so let's copy it and paste it into the 123
part where we get hold of our answers from the user. 124
So the first thing we're going to do is I'm going to delete the options because it defaults to create 125
a PNG image. 126
And the text that we want to turn into the QR code is going to be our url from this step earlier. 127
Now, once we've done that, then we're going to write it into the file and I'm going to call it, 128
qr_img.png. 129
Now the next thing to do is you can see we've got our require("fs") module here, we've got our 130
require("qr-image") here and we can't actually mix the different ways of using import. 131
So we can either use the module-based project or the other option is to use CommonJS. 132
Now, because we've already selected module, let's go ahead and adapt our code to get rid of all these 133
var's and use the correct modern syntax. 134
So we're going to import something from the qr-image module and that something is going to be this object 135
that we're using right here and it's called qr. 136
So if I type "q", it should already show up because I'm now looking through this module for this particular 137
object. 138
And if you look inside the node modules and you open up qr-image, you'll see that in the library there 139
is something called qr.js and this is what we're tapping into in order to create our QR code. 140
So now that I've imported that, I can get rid of this line of code and down here I'm now importing 141
this qr straight from the module where it comes from. 142
Now this next part requires fs and we know we can change that. 143
We can use import to import from the fs native module 144
and the object that we want to get hold of is also called fs. 145
Now we can get rid of this "require" and simply say, "fs.CreateWriteStream." 146
And now let's go ahead and test our code to see if we can actually generate a QR image. 147
So let's use the node index.js command to start our code. 148
And here I'm actually going to type in the full URL, 149
So, https://www.google.com. 150
And the reason for this is because I need to verify that QR code, 151
I don't know if it's actually correct just by eye, so I'm going to need my phone to scan it in. 152
So either copy a URL from your browser where you know it's correctly typed or type it out fully like 153
we have here. 154
And you can see as soon as I hit Enter, we've got our QR image created, and it's called 155
qr_image.png, exactly how we wanted it and it's now showing our QR image. 156
And right now I've just checked this QR image and it takes me directly to Google.com. 157
Now all we have left is the final part where we're going to use the fs module to create a txt file 158
to save the user input. 159
We've already got hold of our fs module imported right up here, 160
so down here, in addition to our QR image, we can use the File system method of fs,writeFile to create 161
our new txt file. 162
I'm just going to copy this sample code over here and I'm going to paste it right below the other lines 163
of code. 164
So we're going to need fs. to call the writeFile method from the File system. 165
And then we're going to create a file called URL.txt. 166
And the data is going to be the url that we got over here. 167
Now let's go ahead and hit Save and hopefully, our final step should also work. 168
And once I hit Enter, we've got our QR image created, and we've got our URL.txt. 169
It's saved the text that we've typed in right here. 170
It's generated our QR image and we've now completed all three steps of the project right here. 171
Now, this project might have required you to do some digging around and getting used to reading documentation 172
and understanding how it works. 173
So if you got stuck, don't worry, it's all a part of the process, 174
as long as you understand everything we went through just now, and you're able to fix your code, and you 175
gave everything your best effort and your best try, then you are moving forward in your coding journey. 176
So that's the end to this module. 177
In the next module, we're going to be learning about a JavaScript framework called Express, and that 178
is going to be the first step to creating our backend using Node and JavaScript. 179
So for all of that and more, I'll see you there.