Ruby on Rails #56 Generate QR codes, Barcodes, use ServiceObjects

hello so in this episode we are going to go through creating barcodes and qr codes in ruby on rails application now qr codes are used usually to go to a link on the web and barcodes are used to identify a product and we're going to do both now and it's quite easy thanks to the gems iqr code and the gemma bobby now here is a case we have a list of posts and we want to generate 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 iqr code so we will say bundle add iqr code this way it 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 say require a qr code and generate a qr code for this website for example okay let's say require a qr code generate a qr code and let's display it we'll say qr so here it is and will display it as a string so we'll say puts qr2s so here's the cure but it isn't quite readable well this is some basic qr stuff like these squares on the sides but again it's not too really readable and it is not a png image for example it's just a stream that is displayed in the console so we want to save it and display it somewhere as uh as an image how can we do this well 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 pre-installed with rqr code uh anyway i will say bundle add the chunky png because uh bobby doesn't have it uh as a dependency by default so we're going to also say bundle add chunky png okay going out and saying bundle add chunky png so it should be also added here okay and now let's try to generate a png so here is the code we require our 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 you type in g 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 file is going to be this png 2s okay let's see if it works io bin right 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 good now let's actually see if it works i will try to save it locally so i will download it and here's some kind of online tool that can decode the a qr code i'll just take it okay submit query and here is the past result so here is the url okay it seems to be working now let's uh try to actually make it folk for an image inside our application so uh let's go maybe to our app models pose.rb and yeah we'll want to save these uh images inside our storage as active storage and attach them to our posts so for this we will need to use active storage so we will say 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 db migrate okay and now we can say a post has one attached a barcode or actually qr code okay and we are going to have a method to generate a qr code so let's say after grade or actual after create generate qr code and we'll say def generate qr and here we'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 we can generate a url that we like let's say url4 and we will say controller will be posts then action will be show then the id will be the id of dispose so self.id and uh what else uh do you want to say we would say only off 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 superrails.com okay and we can actually add some kind of params if you like so uh let's say uh source would be like uh from qr so it would be visible in the ul when somebody opens our post show page through iqr this uh from your qr would be added to the url let's see if this works so when i uh try to just display generate qr inside our post then we should have a link to the post and with the source from qr let's see if it works i'll just go to our posts start the server views posts index and somewhere here i will say uh [Music] post dot generate qr and this will just give us the url hopefully okay expecting a closed gap let's see yeah i forgot a coma here okay if we have an undefined method url for it is because inside our models we are not by default uh using our url helper so we want to use this url helper in our model and for this would say something like include rails dot application dot roots dot url helpers okay let's try once again okay and here we have the kind of url that we will be generating for each post so we have the link to the application uh we have the id of the post and we have some additional params like source from qr so that we can actually track how many visits have been from the qr okay this is the url for each of the posts and the 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 your l4 and so on okay and now how to 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 next we will have qr code equals iqr 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 terrible let's uh keep on so next we're going to generate a png let's generate the png png will be this qr code as png and again we have all these default 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 readable yet so now we are going to try to save this png in our 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 png so each of them will have a unique name let's provide a unique name let's say image name equals secure random dot hex and we will write to the image name as image name dot png and png 2s okay so now in theory when we call generate qr this should generate the [Music] an image and write it to the temp folder of our application for each of the posts now i think if i refresh it will actually take some time [Music] and what has happened you see we've generated all these png images so each post has its unique qr code you see that different okay and 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 file to our post we would run something like self dot generated qr no self dot qr code yeah we keep in qr code dot attach and we are going to reference one of these files but 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 the storage folder now the storage folder will usually be your aws s3 storage or any cloud provider storage that you've got so first we are going to save this image from our temp to the cloud to our active storage and then assign the blob to our post so we are going to assign a blob and based on this we are going to create a blob so we'll say blob equals active storage and the command would be something like uh blob so active storage blob create after upload and inside would have some params so io is the file itself so we would say file dot open and we are going to reference one of these files so it would be something like uh dm p and then we're going to have the image name [Music] so image name dot png you see this is going to be this 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 png okay something like this so we are creating the blob and attaching it and here instead we are going to display the qr code so let's see if it works i will refresh and you see we have this active storage attached one so let's see if it's actually attached qr code dot attached it will give us a true or a false and it says false now why is it because we are going to run this command generate after create so let's try to create a new post let's say new post with a qr post now we'll go to posts and you see here we have true so it has something attached so now we can actually try to display the qr code we would say an image tag inside we are going to have the post qr code and we will 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 save the image and it would be like for the post number 11. let's try to decode it so i'm going to go to browse i'm going to go to this qr code submit query and here it is it works so we've managed to generate a qr code for this particular post looks good but not good enough again here we have this giant [Music] method of generating a qr code that is sitting inside our post.ob and it's not basically great to have it inside our post.rb so this is like a one gen single responsibility action that could potentially be used not only for our posts but for other stuff so um it makes sense to move it somewhere else out of our model and i think the perfect place would be a service object so we can create 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 directory app services here's the new directory and inside they're going to have two files so echo app services slash application service dot rb and another one is going to be something like generate qr so generate qr okay here we have the files and now we are just going to do some setup for these service objects so here we are going to say class application service and uh inside we will have def uh self.call then orgs and block now if you want to learn more about service objects and this specific setup why it works like this you can have a look at some kind of rubicon talks and so on but basically this application service and this uh method that i'm writing now is just saying that we are going to be able to have a method like def call inside our services and inside our post or wherever i'm just going to say something like generate qr dot call and we're going to pass in the object so it's going to be self okay anyway going back new orgs and block and dot co okay i guess something like this and here inside our uh generate qr service we're going to say class generate qr that inherits from application service and and we're going to have an at the reader post and we'll say def initialize so post and we'll say at post equals post and and and now we can have this call method inside and move all our logic from our post rb into this generate qr code method so let's take 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 call method right here okay and we will also move these helpers like require a qr code and require uh and include rails application roots url helper we'll also move this into this generate qr so we'll put it somewhere here above our call method okay so what should happen you see we've really cleaned up our post.rb and moved to our generated qr code into a service and contain about services that they are kind of executables so we just pass in some params and they execute some logic and the cool thing there like ideal 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 actually delete everything they have at the moment so i'll say rails db 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 dot or b you see i see the post 10 times so then i see the database this uh after create callback should fire their generated qr service and an active storage blob should be assigned to each of the posts so each post should have a qr code let's see i will say railsdb reset okay we got undefined method id let's see let's see what do we mean by undefined method id so we say self dot id okay yeah we're just going to have replace the cell with the post here i'll say post id and post your code do we have the self anywhere else here no we don't okay again i will say railsdb 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 rails server let me refresh okay i will 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 post has a qr code and what did it do we've added this uh method generate qr in our post.rb 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 or rails console and say active storage blob dot count so you see we have 10 objects saved in our storage and the one for each of our posts so seems to be working well now let's try to do the same but for qr for barcodes so for barcodes we have this gem named barbie let's install the chum i'll say bundle add barbie okay and 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 url of your post or it could be uh like the idea of the post well usually it is some kind of like a unique id so it would be just some kind of hex or slug that references 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 bobby and create the barcode i'll say barcode yeah so not shown as much yet and let's try to display it as an image or something now here we have these outputters so let's have a look at these barbie outputters okay so we will look at png so we will require bobby outputter png outputter next 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.png you see it was actually saved in the root folder of our application now this is far from perfect but here we have a barcode and now we can apply a similar logic as we did for qr codes for generating the barcodes okay now let's actually first try deleting all this uh clutter so i would say something like rails uh tmp clara build vocabulary not otm dump okay anyway i'm sure that there is a command i just don't remember how to remove all this rubbish from our tnp folder i will now try to just do the same command as we did with our pngs but save it inside the tmp but not the root folder of our application i will say rails console and go back to bobby run these commands then go to outputters create the blob okay here is the blob and i will save this blob boot to our tmp folder so i will say image name secure random to hex and i will generate an image but here that we had this blob vote so i'm going to use blob dot 2 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 a barcode based on this we can create here the barcode okay so um let's uh for example create and you service to create a barcode i will go to our services and say new file generate barcode dot rb okay now we'll just copy everything from here and some lines are going to be modified so what will the barcode 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 try that so i will add these lines require bobby will not need to require a qr code and here it will be generate barcode okay and we'll have this barcode equals barbie and we'll have some kind of uh string here so this can be something like uh post dot title for example okay and next we are going to require this output.png outputter 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 let's say image i am removing this code okay we'll have an image name and we will put this image here or we can say just png to 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 tmp folder and then we save it as a blob and we will then attach it to our post but not as a qr code but as a barcode so we will say has one attached to barcode okay so we'll say pose dot barcode attach blob okay and now let's uh say that when we create a post we are going to generate a qr and generate a okay and we will display both so image tag post qr code and post.barcode just like this now let's restart so railsdb reset and now all the posts are going to be recreated and each post should have both a qr code and a barcode okay you see a lot 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 image is still loading but hey here they are so each post has a unique qr code and a unique barcode so it looks like we have accomplished our mission now let's just create a new post 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 decode the qr codes and also buckle so you see this code one two eight and the kind of encoding we did for our barcode is this code128 so it should possibly be able to decode it so i'm going to take this barcode submit query and you see the past result is with both qr and barcode so it is the post title just as we expected so that's it and basically in this episode we went through creating the qr codes creating barcodes using service objects and a bit of active storage so thanks for being with me and have a great time coding

Channel: SupeRails

Views: 686

Keywords: ruby, rails, ruby on rails, tutorial, programming

Id: 2AG-JR_zbSU

Length: 32min 17sec (1937 seconds)

Published: Wed Oct 06 2021

Reddit Comments

[u/yarotheking]

& source code changes for the episode: https://github.com/corsego/56-qrcode-barcode-serviceobject/commit/340e12e7a1e58a5f22a2935cbfc33e6420327262

If you have any idea how to improve it further - please share them! [like adding active job, removing temp files ;) ]