#56 Generate QR codes, Barcodes, use ServiceObjects

Hello. So in this episode we're going to go through creating barcodes and uh, QR codes in the ribbon rails application. Now, QR codes are used usually to, uh, go to a link on the web and barcodes are used to identify a product, and they're going to do both now, and it's quite easy thanks to the GEMS IQR code and the Gem Bobby. Now, here is a case. We have a list of posts and we want to generate, uh, a QR code and a barcode for each post and store them in our application. So we are going to use active storage for that. Now we are going to start with the QR codes. So let's have a look at the documentation. Uh, basically they're going to install the GEM R QR code. So we will say bundle add RQR code. This rate will be added to our GEM file and bundled. Okay? And now we can already, uh, generate a QR code. So let's try, we will go to our console and, uh, say, require a QR code and generate a QR code for this, uh, website, for example. Okay, let's say require a QR code, generate a QR code, let display it, it'll say qr. So, uh, here it is, and we'll, uh, display it as a string. So we'll say, put QR to S. So here's the qr, but it isn't quite readable. Well, this is some basic, uh, QR stuff like these squares on the sides, but again, it's not really readable and it is not an PNG image, for example. It's just a stream that is displayed in a console. So we want to save it, uh, and uh, display it somewhere as a, uh, as an image. How can we do this? Well, um, there is this option as SVG or SPNG. So what if we want to save it as A PNG? Well, for this we would need the, this external dependency, chunky PNG, and I think it actually comes preinstalled with RQR code. Uh, anyway, I will say bundle add the chunky p and g Because, uh, bar doesn't have it, uh, as a dependency by default. So they're going to also say bundle add chunky, P and G. Okay, going out and saying bundle add chunky, P and G. So, uh, it should be also added here. Okay. And now let's try to generate the PNG. So here is the code. We require a QR code, then we generate the QR code, and then we generate a PNG based on this QR code. Okay? So let's try Rails console, generate QR code, then we generate A PNG. Okay, so if it type PNG, well, here it is again, it isn't readable yet. So how do we make it readable? Well, we can save it in our local storage. So we can say something like IO binge write to our temp folder and a name for the file. And the, the file is going to be this P and g to S. Okay, let's see if it works. IO binge write. Now did it work? Let's have a look at our DMP folder. Now it looks like it didn't work. I will, uh, possibly remove this slash and here we've generated a file. Let's have a look at this file. Okay, here is a file looks, uh, good. Now let's, uh, actually see if, uh, it works. I will try to save it, uh, locally. So I will, um, download it and here's some kind of online tool that can, uh, decode, uh, a QR code. I'll just take it. Okay, submit query. And here is the past results. So here is the URL. Okay, it seems to be vCAN. Now let's, uh, try to actually make it VO for an image inside our application. So, uh, let's go, uh, maybe to our app models post B. And uh, yeah, we'll want to save these, uh, images inside our storage as active storage and attach them to our post. So for this, we'll need to use, uh, active storage. So we will say, uh, rails active storage install. Okay, we've created a migration. Now let's go to DP Migrate. Here is the active storage migration. I will say rails, DP migrate. Okay? And now we can say, uh, post has one attached, uh, barcode or actually QR code. Okay. And, uh, they're going to have a method to generate, uh, a QR code. So let's say after create, do, uh, or actually after create, uh, generate QR code and we'll say dev, uh, generate qr. And here they're going to have the code. So the URL should be the URL of this uh, post. So what would the URL or the post be? For this, we would need to use a URL helper. Let's first see if, uh, we can generate a URL that we like, let's say URL four, and we will say controller will be posts. Then, uh, action will be show. Then the ID will be the idea of this post. So self ID And, uh, what else? Uh, do we want to say? We would say only both false, I guess. And we would say that we want to have a base, URL. So host, host will be the name of your main application. So for example, super rails.com okay? And we can actually add some kind of, uh, perms if you like. So, uh, let's say, uh, uh, source would be like, uh, uh, from qr, so it'll be visible in the URL. Then somebody opens, uh, our post show page through our qr. This, uh, from U QR would be added to the URL. Let's see if, uh, this works. So then I, uh, try to just display, generate QR inside our post. Then we should have a link to the post and with a source from qr. Let's see if it works. I'll just go to our posts, start the server use posts index, and somewhere here I will say, uh, uh, post generate qr. And this will just give us, uh, the URL, hopefully. Okay, expecting, uh, closed cap. Let's see. Yeah, I forgot a coma here. Okay, we have an undefined method, URL for it is because inside our models we are not by default, uh, uh, using our URL uh, helper. So we want to use this URL helper in our, uh, model. And for this, we would say something like, uh, include, uh, rails application. Do, uh, roots u RL helpers. Okay, let's try on scan. Okay? And here we have the kind of URL that we will be generating for each post. So we have the, uh, link to the application. Uh, we have the idea of the post, and we have some additional prompts like source from QR so that we can actually track, uh, how many visits have been from the qr. Okay? This is the URL for each of the posts. And, uh, now we want to generate a QR based on this URL. So here's the first step. We generate a URL, let's say QR, URL equals URL four, and so on. Okay? And now how do we generate a QR code? We will say require RQR code. So also here, and here is the code to generate a QR code, for example. Okay? So, uh, next we will have QR code equals RQ QR code new. And here we will have our generated URL, so QR, URL. Okay, so here we generate the QR code. Let's see what happens if we just refresh this page. Okay, here is the kind of generated QR code looks, uh, terrible. Let's, uh, keep on. So next we're going to generate a PNG. Let's generate a PNG. PNG will be this QR code as PNG. And again, they have all these default uh, options. You are free to explore them, change the colors, change the sizes, and so on. So now we generate a PNG. Let's see what happens. Okay, here is the PNG, but it is not, uh, readable yet. So now we are going to try to save this PNG in our, uh, temp storage. So how would we do it? We would say something like IO bin, right? And so on. Let's see how we can do it. I would say IO bin, right? Then TMP and the name of this, uh, particular PNG. So each of them will have a unique, uh, name. Let's, uh, provide a unique name. Let's say image, name equals secure random hacks. And we'll write to the image name as image name, PN, G and PG to S. Okay? So, uh, now in theory when we call, uh, generate qr, they should, uh, generate, uh, an image and write it to the temp folder of our application for each of the both. Now, I think if I refreshed, it'll actually take some time. And, uh, what has happened, you see, we've generated all these, uh, PNG images. So each post has, uh, its unique, uh, QR code. You see that different, okay? And, uh, again, we just see the blob IDs or whatever here, so it's not what we want. We've just generated the QR codes in our temp folder, and now we want to save them inside active storage and assign them to our post. So to assign a, uh, file to our post, we would run something like, uh, self dot generate qr, no self QR code. Yeah, they keep it in the QR code attach, and they're going to, uh, reference one of these files. But, uh, this file has to first be saved in our application storage. So this will be like the storage of the application itself, not the temp storage. You see we have the temp folder and we have that storage folder. Now, the storage folder will usually be your AWS storage, storage or any cloud provider storage that you've got. So first we're going to save this image from our temp to the cloud to our active storage, and then assign the blob to our, uh, post. So we are going to assign a blob, and based on this, we're going to create a blob. So we'll say blob equals active storage, and the, the command would be something like, uh, uh, blob, so active storage blob, uh, create after upload, and inside we would have some, uh, brands. So IO is the file itself. So we would say file open, and we are going to reference one of these files. So it'll be something like, uh, uh, TM P, and then we're going to have the image name. So image name, png. You see this is going to be this, uh, image. Okay? Then we're going to have the file name again, it's going to be the image name. And we're going to have the content type that is going to be BNG. Okay? Something like, uh, this. So they're creating the blob and attaching it. And here, instead they're going to display the QR code. So let's see if it works. I will, uh, refresh. And you see we have this active storage, uh, attached V. So let's see if it's actually attached QR code attached. It'll give us a true or a false, and it says false. Now, why is it so? Because, uh, they're going to run this command generic after create. So let's try to create a new post. Let's say new post, uh, with a QR create post. Now we'll go to posts. And you see here we have tool, so it has something attached. So now we can actually try to display the QR code. We would say an image tag inside. We're going to have the post QR code, and we'll display it if a post has an attached QR code. Okay? Let's see. And here for this post, we have a QR code. Now, let's see if it works. I will, uh, save the image and it would be like for the post number 11, let's, uh, try to decode it. So I'm going to go to browse, I'm going to go to this, uh, QR code, Submit querying, and here it is. It works. So we've managed to generate the, a QR code for this. Uh, particular post looks good, but, uh, not good enough. Again, here we have this giant, uh, method of generating a QR code that is sitting inside our post A B, and, uh, it's not, uh, basically great to have it inside our post a B. So this is like a one gen singular responsibility action that could potentially be used not only for our posts, but for other stuff. So, um, it would make sense to move it somewhere else out of our model. And I think the perfect, uh, place would be a service object. So we can create, uh, basically ruby objects inside the additional folder inside the our app folder. So let's, uh, try to move this logic out of our post model. So I'm going to go out and say, make a directory, app slash services. Here's the new directory. And inside they're going to have, uh, two files. So echo, uh, app slash services slash application service, rb. And another one is going to be something like, uh, generate qr. So generate qr. Okay, here we have the files. And uh, now we are just going to do some setup for these, uh, service objects. So here we're going to say class, application Service. And uh, inside it'll have, uh, def, uh, cell call, then ARGs and uh, block. Now if you want to learn more about service objects and this specific setup by it works like this, you can, uh, have a look at some kind of, uh, Rubicon talks and so on. But basically this application service and this, uh, method that I'm writing now is just saying that, uh, we are going to be able to have a method like dev call inside our services and, uh, inside our post or wherever, I'm just going to say something like, generate QR call and they're going to pass in the object. So it's going to be self okay anyway, going on back new orgs and block and call, okay, I guess something like this. And here inside our, uh, generate your service, we're going to say class generate QR that inherits from application service. And, and we're going to have an editor reader, uh, post and we'll say dev initialize. So post, and they'll say, add post equals post. And, and, and now we can have this, uh, call method inside and, uh, move all our logic from our post RB into this generate QR call method. So let's take, uh, all this logic for getting the QR URL, generating a QR code, generating an image, generating an image name, saving the image to local storage, uh, creating an active storage blob and assigning the blob to our particular post. Let's take all this logic out and put it inside this, uh, column method right here, okay? And we'll also move these helpers like require Q code and require, uh, and include rails application Route URL helper will also move this into this generate qr. So we'll put it somewhere here above our goal method. Okay? So what should happen? You see, we've really clean, leaned up our post RB and move the our generate QR code into a service. And the thing about services that they are kind of executables, so we just pass in some pers and they execute the some logic. And the cool thing there, like DL usage of all services are that they should be like single responsibility. So one service does one thing from your business logic. Okay? So let's, uh, see if it works. Now I will, uh, actually delete everything they have at the moment. So I'll say rails, the B reset. And if I reset the database in theory, whenever the posts are created. So I already have some seeds here. Let's see, I'll go to seeds. RB, you see, I see the post 10 times. So then I see the database. This, uh, after create Kohlberg should fire that generate QR service. And an active storage blog should be assigned to each of the posts. So each post should have a QR code. Let's see, I will say rails to be reset. Okay, we got undefined method id. Let's see, let's uh, see what do we mean by undefined method id? So we say self, uh, id, okay, yeah, we're just going to have replaced the self with the post here. I'll say post it and post your code. We have the self, uh, anywhere else here. No, we don't. Okay. Again, I will say rails will reset, okay? And you see a lot of files were created in our storage and even more are in our temp folder. Now, if I go to the rail server, Let me refresh, okay? I'll first log in, I'll create an account, okay? And you see each of our posts has a unique QR code. So looks like the generation was actually quite successful. Now, each of our posts has a QR code. And what did it do? We've, uh, added this, uh, method generate QR in our post rrb and all the logic, the whole heart of the process is in this service, okay? And we can actually have a look at our active storage, let's say rails concern, oh, rails console and say active storage blob dot count. So you see we have 10, uh, objects saved in our storage and, uh, one for each of our boths. So seems to be working valve. Now let's try to do the same, but for qr, oh, for barcodes. So for barcodes, we have this gem named Barbie. Let's, uh, install the gm. I'll say bundle add Bobby, Okay? And, uh, here's the code. So it would require Bobby and then generate the barcode for, well, any string that you would like. So I know this could be the UL of your post, or it could be, uh, like the idea of the post. Uh, well usually it's some kind of like unique id. So it would be just some kind of, uh, hx, uh, or slug that references, uh, uh, one of the products in your database. So let's, uh, just try to see how it works in the console. First of all, I'll say rails console, okay? Require bar and create the barcode. I'll say barcode. Yeah, so not showing us much yet, and let's try to display it as an image or something. Now, here we have these putters. So let's have a look at these Bobby putters. Okay? So we'll look at PNG. So we'll require Barbie output, PNG output. Next, uh, we will create a blob for the barcode. Here it is. And we can, well open this as a file. So if we run this command file, open barcode, p and g. You see, it was actually saved in the root folder of our application. Now, this is far from perfect, but uh, here we have a barcode, and now we can apply a similar logic as we did for your codes for generating the barcodes. Okay, now let's actually first try leading all this, uh, clutter. So I would say something like rails, uh, TMP clear build it not, or TMP dump. Okay? Anyway, I'm sure that there is a command. I just don't remember how to remove all this, uh, rubbish from our TMP folder. I will now try to just do the same command as we did with our, uh, PNGs, but save it inside the TMP, but not the root fold of our application. I would say rails console. And, uh, go back to Bobby, run these commands, then go to putters, create the blob. Okay, here is the blob, and I will save this blob to our, uh, TMP folder. So I will say image, name, secure and random to hacks, and I will generate an image. But here we had this blob route. So I'm going to use blob two s, okay, here we've generated A PNG. So now we generate in the right folder in our TMP. And based on this, we can create the, uh, barcode. Based on this, we can create, yeah, the barcode. Okay, so, um, let's, uh, well for example, create a new service, uh, to create a barcode. I will go to our services and say new file generate, uh, barcode rb. Okay? Now I'll just copy everything from here. And some lines are going to be, uh, modified. So what will, uh, the buckle code be? It doesn't have to be a URL, it can be, for example, any random string. What if we just put the title of the post as an example? Let's, uh, try that. So I will add this lines require, Bobby will not need to require QR code, and here it'll be generate barcode, okay? And we'll have this barcode equals Bobby, and we'll have some kind of, uh, uh, stream here. So this can be something like, uh, uh, post title for example. Okay? And next we are going to require this output, A PNG output. So we'll put it here and we are going to generate this blob and display this blob. So Here we generate the barcode, then we generate the, uh, let's say image. I'm removing this code, okay? We'll have an image name and we will, uh, put this image here, or we can see just PNG. We have the same kind of name, okay? So we generate the barcode, we generate the PNG from the barcode, we give it a name and we save it inside our team P folder. And then we save it, uh, as a blob and we will then attach it to our post, but not as a QR code, but as a barcode. So we'll say, has one attached to barcode. Okay? So we'll say post barcode, attach blob. Okay? And now let's uh, say that when we create, uh, post, they're going to generate a QR and generate a barcode. Okay? And we'll display both. So image tag, post QR code, and post barcode, just like this. Now let's, uh, restart. So rails to be reset. And now all the posts are going to be recreated and each post should have both QR code and a barcode. Okay? You see out of additional files were added to our storage. Well, actually it was recreated. Let's run the rail server. I'll refresh. Okay, again, I will log in because I've reset the database. And let's see. Now it looks like the images are still loading, but hey, here they are. So each post has a unique QR code and a unique, uh, barcode. So it looks like we have accomplished our mission. Now let's just create a new post, uh, with both QR and barcode. We create a post and you see it was given a QR code and a barcode. So looks great. And Just for the final touch, let's uh, download this barcode and try to decode the name. So I will save it. I'm saving the barcode. Now I'll go to this random online tool. And you see it can, uh, decode QR codes and uh, also barcode. So you see this code one to eight, and the kind of encoding we did for our barcode is this code one to eight. So it should possibly be able to decode it. So I'm gonna take this barcode, submit query, and you see the past result is with both QR and barcode. So it is the post, uh, title, just as they expected. So that's it. And basically in this episode, we went through creating, uh, QR codes, creating barcodes, using service objects, and a bit of active storage. So thanks for being with me and having a great time coding.