Making a QR Code with NPM Plugin in #Weweb_io

So WeWeb just came out with this new support for importing npm modules into, into your WeWeb project. And that's really handy. And we're going to talk about how to use this to create a QR code that can just go onto your site and do that relatively quickly. To do that, let's, let's just take a minute and take a look at how this npm package really works and what it covers. So when you click on npm, you can add it as a plugin. And this is all off of the little puzzle piece, you know, plugins menu that you got going on here. You can search for any package that is listed on the, on npm, which is the Node Package Manager, which is a whole bunch of JavaScript packages that are installed, that are installable. Almost all of them are very much open source. And the idea is it will load it in as a script tag that will go at the top of your WeWeb site. So this is kind of like adding a script tag in the way that you would do for custom code, right? That sits on the top of your site or sits on top of your application, except you're going to be doing it through the npm package instead. Now, the thing is, the npm package doesn't actually use npm for a good fraction of what it does. It actually uses two other packages that are worth just spending a minute on here. One is called— oh, there it is. I'm going to do plus, and it's called npmseo. npmseo is a mirroring search facility that provides somewhat more metadata about npm packages. So if I were to go look up, I don't know, you know, React Router or something, right? It would show me information about React Router and how, how highly it scores or its considerations. You can even do things that are relatively obscure, like a bunch of my, you know, only ever used once packages I might have done at one point. You know, like if I were to look at, I don't know, the, the, my, my Xcode plugin I made a long time ago, which gets a rating of like 62. Because it's well maintained, but it is not all that popular because it's not used all that much. So the, the idea here is that it will search for, it'll search on NPMs for the particular package you're looking for. Now, keep in mind that because this is a mirror, it's not completely up to date. One of the first things I tried to do when I was getting started with the npm package in WeWeb was I thought, oh man, I'll create my own package that will be able to load into the top of the page, right? Be able to solve some problems. But because they're using this other service, there seems to be a delay between when something goes up on npm and when it shows up on the search engine and therefore when it's available on WeWeb. So that is one particular constraint. For example, I made one called state-change/script-tag, and you can see how it's not here. And as a result, if I were to go over here and I were to look for, you know, search for a package, I can find Ray Deck Xcode. Just like we saw, but what it will not find is going to be state change slash script tag, right? Because you're dependent on whatever would be showing up in this particular system. Okay, but let's not worry about that part too much. Let's ask about the next level down, which is, okay, well, if it's here, is it going to load? It's going to load in as a script tag, but how does it load in as a script tag? And the way I'll do that is by using a package, something called Unpackage. And Unpackage is a super simple service where basically you can feed it whatever package you're looking for, whatever npm package you're looking for. And it will give you back the info, you know, the code that's pointed to by the main part of the, by the main part of the, the, the npm package itself. This is significant because not all npm packages are made to work well this way. Let me give you, let's illustrate that through the example of now trying to get a QR code going., right? Because the simplest way we might do that is by asking about QR code. And we can say add that and say save. You might think we now have a QR code that just got added to our system. But it's not actually exactly what happened. And let's, let's, let's investigate this by going to the eyeball so we can get a little preview here. And we're going to look at the dev tools, which I did which you can do by right-clicking and saying Inspect, or by doing, in my case, Option Command I on my Mac, you go over to Elements. We need to remember that the WeWeb editor is actually made of two parts, right? There's an outer window out here that has all this stuff, and then there's this inner window, which is something called an iframe, which is a web browser inside the web browser. And so in order for us to find out what it's actually going to be putting into the preview, we need to go find that iframe and see if you can find that iframe up here. A relatively quick way of finding an iframe in this environment is to be, you know, clicking into this for a second and be doing Command+F or Control+F if you're in Windows and just looking for iframe because the main iframe you're going to have is probably this one. And you can see it's called the iframe container and there's, here's the iframe, which now contains the actual previewed site. Now, in order to find out what came in through the script tags, we act— the, the— I happen to know because I looked it up, the, the, the script tags get added to the end of the head element. So you can see down here I have this unpackaged.com/qrcode150. So you see it was not directly calling npm, which would be, you know, npmjs.com's package, slash, I don't know, curric, which would, which would contain this. And there's an API where they just, you know, download the file. But rather it's using unpackage to get the file in a way that can just be read directly by the JavaScript, by the actual page here in the form of this script tag. Now, if I were to just highlight that, copy that for a second, I'm just going to bring it over to here and we can take a look at what's inside. And we're going to see this and cause us a problem. And the reason it's going to cause us a problem is because a lot of packages like this QR code are not designed to work with, with Unpackage. They're designed to be compiled as part of a broader Node project that you're going to have a bunch of, you know, files, a bunch of source code files, and eventually you're going to compile it in something. And wherever you compile, that's going to be the stuff you put onto the web using something like Webpack. The most packages, I'm I, I maybe not most, but yeah, probably most are designed to work that way. They're not designed to work through unpackaged. They're not designed to be loaded in through a script tag. And so you can see here it has this, you know, require command. Whenever you see require, you should shudder a little bit because that requires something that's a Node function that is not, unless somebody defines it, a function in, in browser-side JavaScript. And the fact that I'm requiring something from the local path that's called server That's an indication to me that this is source code that's designed to also work with other pieces of source code that were also deployed in here. And a way that I can investigate that a little bit further is if I look at my URL here, say, unpackaged.com/qrcode, if I just put the word browse right in the middle, browse/, instead of using the machine-readable version, it will give me a nice human-readable browser. And I can see, yeah, okay, well, here's the file. That's true enough. I can go back up to QR code and I can see it's actually made up of a whole bunch of files in here, right? There's that bin file, there's the lib file, which has all sorts of stuff in here. And the thing is, all those files are being left out and the expectation is whoever's going to use this will compile them together. You can learn a little bit more about how it's supposed to start by looking at the package.json. And in the package.json, you can see that in here I've got my lib/index.js, right? Also see this got some additional helpers in here, you know, like the, there's something called browser.js. So I go into lib and I go into browser.js. Yeah, this is like the, the version that you would use in the browser, but still requires compilation, right? So, 'cause it has this require with the./ stuff, that's all, that's all a bad sign as far as these things go. You see those, it probably means this version is not going to work. Now the, so the, what I have found I need to do in order to evaluate a package is I need to first figure out whether it's available by searching for it. So I might do a search over on npm or something to go find the package I'm looking for. I would, you know, look it up over on WeWeb to make sure it can find it, which is gonna do through using npm. But then the next question is going to be whether whatever it finds is gonna be useful when it runs through Unpackage. And that's like a few different moving parts, but the way I will do that is by going into here, going to plugins and saying, well, QR code, I know doesn't work. QR code. I don't know. There's, I've thought about that. I found that one was kind of interesting. Generator, qr-code-generator. So if I go to here and say qr-code-generator, you'll notice that because it's kind of word-based, it doesn't autocomplete as you just type along. So you'll need to make sure your words get completed before you should expect anything to populate down here. So I can do qr-code-generator, and I can add that guy instead. Now, what's the difference between these two? If I look at QR code, which is the one 5 that I had, that's the one that has just that, that one-liner we were looking at, right? Which is the in QR code. If I go up to lib, if I go up to the top level, package.json, the main here told me to go to lib. So I go to lib and I go to index.js and it shows me this. Usually a sign that's not going to work or maybe I can browser, but still has the same problem, right? These are all not going to fly. So the next thing I can do is go to, you know, back over to WeWeb and I can take a look at this next package called qr-generator. Well, that's a nice one. Let's double-click it. We're gonna copy this. We're going to just open it up in another browser to see what's inside. Oh, this is much more encouraging. Looks like it's kind of a completed thing. I'm gonna just do a search for the word require. I like it. I like not having the word require in there. That's a good sign. This is probably going to work for us. So now that I know this is the thing that it will install and download, I have much more confidence that I can use this over in WeWeb using this through the npm package. Remove the old one and save. And we'll, you know, close the app and close the app. Great. So now let's try using it. Well, we just established that we want to use something called QR Code Generator, right? So let's look at the QR code generator and we, and let's understand how it works a little bit. Well, it's going to have a type of QR code, an error correction level it's supposed to use. I can make a QR code, add a little sample code up here of how to make it. I can create an image tag with it. Okay. Okay, cool. And I can also create like an SVG tag to it. All right, this is all pretty encouraging. Let's investigate using this. And looks like the way we use that is by getting some data and it will, you know, want to put an image tag that was created by all this as the innerHTML, i.e., the single child of some element with an ID of placeholder. We could probably control what that's going to be. So let's go back over to WeWeb and we'll say make a QR code. And I'm gonna, let's say, let's make a div. Divs are nice and simple to work with. And here's my div. I'm going to give it, just step over here. I like to give things IDs relatively early. It makes it a little bit easier to find later. I'm going to call it, you know, QR code. Over here, I'm going to establish, I just want it to be, you know, something that's going to be 300 pixels, oops, by 300 pixels, because a square is pretty common for these things. And just to make sure I'm able to keep track of it, this is also a trick I like to use. I'm going to set this to I don't know, some shade of, ooh, a little bit of purple. We'll go with some purple. Okay, so now we have a nice purple square. And what I want to have happen is every time, you know, I want to have some text that I'm going to use to edit it. So let's add a text element. Input controls and a, just a default here. Yep. Okay, cool. And I'm going to establish that whenever I make a change to this, I want to set this to you know, have the new QR code. So I'm going to go over here, I'm going to say new, and we're going to say, well, whenever we're changing it, we're going to run just a little bit of JavaScript. And some JavaScript. And the, we're going to go take a look at the documentation and say, ah, you know what, it seems like there are these 5 lines here, let's copy those. Oh, I need to go back over to my script. And I'm going to say paste, and I have all these. I'm going to add data-high and a placeholder. Well, let's remember that we gave an ID of QR code, so we'll use that. And it can be a little hard to read in the, because of the tiny way the editor works. I mean, I think there's an expander in here, but let's not even worry about that. So what I will often do is say Enter and then Tab as I go through these things in order to be able to just have it be a little bit more readable as far as these things go. So set it to high and make and it will probably generate a QR code for me. Maybe. Let's, let's see if it does. And it wants something called QR. So QR, the QR code. I don't know that that will work. I think it assumes a global that will be called QR code, but we're going to find out. So we're going to test it. And it did not like that because it couldn't find the QR code element. Test. And element by ID of QR code. Okay. All right. Well, you know what? Sometimes things work better in the preview than they do here. So, but we're just going to check to make sure that in fact this thing has an ID of QR code. Yeah, sure does. And now what we're going to do is run this. And if I type, type, type. Oh, hey, look. The QR code did work because there's been a little QR code in there. That's fantastic. So the, so now we have some stuff in here, right? And the, the, the stuff that it has in theory should be based on the QR code saying hi. So what I'm going to do is hold up my phone here and I'm going to take a look. And the, this is a little hard for me to display, but like if you put this onto your YouTube, you'll probably see this says This says hi right here. So that's a beginning, right? But not exactly what we want to do. Like we want to have more control over it. So let's exercise some control over it. And the way we can do that is by, we've already established this happens whenever I do an onChange, right? So let's just have it be based on the text I actually typed. And if I were to say, okay, we'll add data, actually not of the word hi, which is what we had before, but we can say whatever came from the event. The event value. Make with event data here. Yep, great, great. So it came from the current event and its current value. And I will close this up and close this up. And now if I were to go over here, I can— oh hey, see, as I type, you see how it changes? That's because it's a different QR code each time. Now, one final consideration here is that the QR code is all sort of stuck in the corner, and that's because I'm making an image. And the image, if I were to just click on my dev tools to take a look at it, you can see it's sort of fixed on a height and width of 82 pixels. And because we're working through Unpackage and don't have that much control over this thing, we're kind of stuck with whatever its idea of height is. But well, we might be able to increase, and the cell size seems to be something different in here, and I'm not totally sure what's going on with that. I think that's QR code thing. But the, but what we can do is turn it into an SVG tag. So if we made it into an SVG, then we see we have a couple, we have another option available to us, which is scalable. So let's try that. Let's go over here. We're going to, you know, go over to the editor, click on the, you know, the workflow. Because remember the SVG, the, the the actual code, the actual QR code is being created by the workflow itself. So there's no real editor to be using that's, you know, gonna look at it through the control panel or what have you. I'm gonna say edit. And now instead of saying create image tag, I'm gonna say create SVG tag. And the ops is an object that we had over here. And so I can pass in a member called scalable and the value will be Let's see how this works. SVGs are, are fun. They're very lightweight and they are, so they're small to transmit, but they also scale really well 'cause they're vector images. So let's see if that works at all for us. Oh, look at that. To the full size. And now I can just say that I hope that you found a bit of this helpful. And if you want to learn more, you can learn more about all the hard things that we work on over at statechange.ai.