Reverse engineering the QR code generator and URL forwarder service with Mariatta

Hi

Speaker 1: everybody, so my name is Mariata and I'm really really excited to be here. I haven't been back to Django Kong for many many years, but this conference is really special to me. So I've been speaking at conferences for nine years and the first ever conference that I ever spoke at was Django Khan US in Philly. So and I I came back to give a keynote in 2018 and this so this is my third time speaking at DjangoCon US. And This is and as mentioned I've been speaking for nine years. I've continuously doing that and thanks to DjangoCon for like kickstarting that you know give me that confidence. Um this is actually my fourth conference talk of the year. And I'm s

Speaker 1: telling all of this not because I'm bragging, but actually I want to tell you that there is This unobvious problem that we face as public speaker. In that As a speaker, I need to share URLs. And I want you to actually visit these URLs. Because I want you to continue learning from the presentation. I want you to check on the website, the the code or whatever, right? You think sharing links is easy. It's not. Like it's hard to share links in a presentation in this kind of setting. Yes, this is an example of the the links I want to share in this presentation. Um my GitHub repo and the presentation slides. They're really long and like

Speaker 1: How do you click this? You can't, right? Do I need to like look around? Are you paying attention than typing this out yet? No, right? You you can't I can't expect you to type this out also like Autocorrect always think my name is spelled wrong. They always put a different letter there. It's not a good way to share links in presentations like this. And I have the same problem. As a community leader, as a conference organizer, like I'm a serial conference organizer. I've run conferences like PyCascades, PyCon US, and PyLadiesCon. Same thing as a conference organizer, I have lots of links to share. I want to share them and I want people to click on them Conference

Speaker 1: have many links to share. Like we have conference website, news, blog posts. We want you to donate, to sponsor, to volunteer. We want to hear your feedback. Lots of links And I also need to share these links when I'm at a booth at a conference. And this long text is not a useful way to share links. It's not useful in that setting. I can share this on a website, I can share this when I'm, you know, doing DMs or texting with you one by one. But not in this kind of setting, not in a conference booth Sharing links is hard as a public speaker and as a conference organizer. In those situations, the better way to share links is by providing QR code. And most people have phones now.

Speaker 1: You can just point your your phone camera and you can your camera can detect that oh this is a URL. It it suggests that open this in the browser This is the better way, the best way to share links in those kind of situations. But how do you create this QR code? You know, in the beginning I didn't know how to generate QR codes. So I went to the internet, I went to the search engine, like type how to generate QR codes. And it presents me with all of these different webs websites that tells you to generate QR codes. There's so many like freeqr. com, QRIO , I don't know Lots of surfaces you can use. And there are also browser extensions you can install right

Speaker 1: on your browser. So you didn't need those third-party websites. And you can all well all of those things you can generate for free. Websites and browser extensions. free but there's a catch. Like this is one of the QR code generator service I tried. Like when I try to create QR code it gives me this big giant ad Oh, I don't like this. I don't I don't want to use this. And this is another service. I try to point out I try to create a QR code. I put in my personal website But when it generated the QR code, it was free, no ad. It when I scan it, it doesn't show my website. It shows this weird URL, freeqr.

Speaker 1: com. Like what is this? So I I didn't want to click on it. I went to I used the request library then I wrote some Python code and try to like I'm gonna fetch this URL do like content check the content of this. So turns out it's like um HTML. There's um JavaScript in there it doesn't redirection after maybe 30 seconds. I don't know. Um and there's Google Analytics in it like I don't like this. I don't want to use this kind of service. And the the reason I'm wary, like I'm cautious about this, like a few months ago I received a flyer from my insurance company And it it says like scan this QR code to get a discount it or in serial. Like, yeah, I I wanna I wanna save money.

Speaker 1: I scan it and it was similar to this It doesn't show anything about the company, the insurance company URL. It was QR dot something something I don't want to click that, right? And you shouldn't click that. What if it's going to some inappropriate website? What if it's a scam? How do I know this is real, you know, prior from the insurance company? So I don't want to be sharing QR codes like this. I want you to click the link. To me it's important that the link being shown is legit and trustworthy. Like it has to be credible. This is another QR code generator surface that I found. It looks fancy. I like that it it lets you customize things,

Speaker 1: the color, the the border. Um and it says free. I didn't see an ad in there. But when I try to click download, it Like I couldn't download it. Say I need to create an account first. Give my email address. Why? I just need a small QR code. I I don't want this I went to check the browser extensions. Good, no, no ads, no account creation. But again, it gives me a something random URL, qrcode. app slash blah blah blah. Oh no, I don't want this. So yes, there are websites that lets you generate QR codes for free.

Speaker 1: But I don't I don't like it. It comes with a cost. Like I don't like being surf-ed. I don't like youth being surf-eds. I don't like that they're hiding my actual URLs and I guess I guess they'll do some kind of tracking But I don't know what they're tracking. I don't know what they're doing during that redirection. I don't know how they use the data. I don't like it. I'm not gonna use those. So how to generate QR code without those things? Then I realized a mistake, you know, instead of searching how to generate QR code I should have been searching for how to generate QR code in Python. Now it makes me happy and excited. The search result is more exciting. So there are various libraries you can use

Speaker 1: for generating QR code in Python. There is a QR code library and signal library. I don't know how to pronounce it. So one reason I'm talking about their code libraries because making it easier for myself. I don't know how to pronounce the other library. But they're both good. You should use them. Use whichever one you like. Uh fun fact, uh QR code library is made by Lincoln Loop, who is also a sponsor of Django Con. So thank you, Lincoln Loop, check out their book. I'm not affiliated, by the way. I just I love the library, that's all So how you can generate QR code in Python first, bit install it, pip install QR code after that you can do is it just

Speaker 1: right in your terminal. There's a one-liner QR, put in your URL, and then the file name you want to see the image to be saved. That's it. You just one line is super easy. And you can also write Python script Python code to do the same. So you would just import the library, import QR code, and then call QR code. make, pass in the URL, and then save the file. To get even more out of this, you can install the library with the Pillow Python Python image library. With that dependency, you can further customize your QR code. You can change the style, the color, you can even put a logo into your QR code.

Speaker 1: So this is an example like with some colors with the logo of my ladies. So I'll show you just how to do this. Here's a little code snippet for setting the colors in your QR code. Just import the library, instantiate the QR code class You call the qr. add data to and specify your URL. And then call qr. make image. You can pass in the colors That's all you like in here I put in color blue and pink and I get the the QR code for Pylides Vancouver in blue and pink You can further style the QR code using PL module drawers. So this is six different styles of the same URL.

Speaker 1: There is like rounded, square, horizontal bars, vertical bars, you know. It just really lets you customize how you want your QR code to look like, so you just have to try it out This is the code snippet for using the the build model drawers to to to generate like the vertical bars of QR code So basically when you call them make image you can pass in the image factory and the module drawer and then and then you save it This is another way to customize your QR code. You can have colors in the QR code. There are like six different colors. six different ways you can color like you can color the entire QR code or you can do some kind of gradient.

Speaker 1: In the last one, if you notice that I put in the Django logo into the QR so you get to see the the green um D and J letters in the QR code using the image color mask So it's really cool that you could do this with this library. Again, this is the code snippet on like example of how you can call the you can pass in the color mask when you call qr. make images. Pretty straightforward, just pass in different parameters. And this is yet another way to customize, like I get to put in the my my communities logo, the PyLadies logo in the middle as in the time in the middle of the QR code

Speaker 1: So basically when you call qr. make image, just pass in the embedded image path to my logo. That's how I come up with this. So thanks to Python and the QR code library, you can generate QR code for free, for real, really free. Add free, no tracking, no URL masking. It's great But uh why is there a but? You know, I find it tedious. It's it's really a lot of code to write. It's not a lot, okay? It's less than hundred lines Also, I write a code for living, so what's the problem? I should enjoy writing code. Well, I was excited to write all of this code the first time when I was learning, when I was exploring how to use a library.

Speaker 1: But once I know how to use it, I don't need to learn the same thing again and again. Like it's kind of slows me down. Like as a very busy speaker and conference organizer, like I just want to create this QR code easily, fastly, you know. I don't want to spend a lot of time writing the code to do this. I just find it tedious. Also tedious like having to switch from running my Python script in my IDE and then going to the browser to to check like I wanna see the QR code, I wanna test it, right? I have to open my browser to that. It's it's really it's a lot of back and forth. It's getting tedious. So I realized I need to write something. I need even more abstraction, maybe like some scripts.

Speaker 1: So I was thinking Maybe I need to expand that CLI interface to make it easier for me to generate lots and lots of QR code and and also like I want to be able to quickly preview it um the QR code. So I was started thinking like, okay, how should I design this CLI? And then I realized something, you know, why CLI? Why not the web form? Like I realized I missed the web UI from those third-party services. I think they have the right idea for creating a web interface for generating QR codes. But I still don't want to use them. So then I realized, oh, isn't there a web framework in Python that lets me create web apps and web forms?

Speaker 1: Yeah, why not use Django? And I I I love the the keynote this morning when Zach said like even without you know database ORM Django is still powerful and this is This is the this is the proof of that. All I need is a Django web app. One page, one form. Two fields, a button. And when I press the button, I can make it generate the QR code that renders on the same page. So why not? Like I didn't even need a database for this So I I made it. I I went ahead, um, didn't even need to deploy it anywhere. Like just run it on my localhost whenever I need the QR code. I start my you know Django and and I I got it quickly.

Speaker 1: So now you know about this, you too can do this really easily. And this is really all it takes. Like you need a form with two fields. And then you need a view handler. So when when the form is submitted, take the URL, call the QR code. make. Render the image on the same page. Super simple. So like having the Python library that lets you generate QR code is really, really great. But it's really It was after I used Django with it, having a web UI on top of it. That's what really makes it Easy, real easy to start generating lots and lots of QR codes. It really speeds up my productivity as a speaker, as a conference organizer.

Speaker 1: That's how I scale up my my operations. That's how I'm able to do all of these things. So I just started generating QR codes for everything when my community got invited to like to have boots at conferences, I was like like, yeah, I'm gonna use this chance to fundraise. I'm gonna tell people about my event, my conference. I want them to sign up. I want them to volunteer. I want them to donate. sponsor. I print out banners, flyers with lots of QR codes. And then after I printed out these banners, I realized something. Printing banners is not cheap. Um so I I spent like $150 for one of these banners, the Piladies Vancouver.

Speaker 1: It's not cheap. It's not a lot of money still like as a you know non-profit organization you you have to be careful with how you spend money. You don't want to spend just because you have the money And after I printed all of these banners, I realized that, hmm, conference links change every year. Oh what do I do? I already printed all of this, spent lots of money with this year's conference. Do I need to print this again next year? Oh I don't know. Like I guess it's too late for me. I'm stuck. Um like flyers are cheap at least, but still I don't like

Speaker 1: I just don't like the idea of wasting papers, right? It's too late now, but it just made me think of like what can I do better next year. That's when I realized like, oh yes, those QR code surfaces that was like it was masking my URLs, maybe they're on to something. Maybe what I need to print in the QR code is not the actual URL. Maybe I need some kind of dynamic URL, right? Like Like those URL forwarding URL shortener things. So maybe that's what I need. But still, I need it to be legit. I need the URL to be credible. I still want people to click and visit.

Speaker 1: that that is still important. So I still don't want to use those third-party services. Well I already have a Django app So why why not just build even more with Django? What's stopping me from that? How hard would it be to build my own URL forwarding with Django? So I started thinking about how to do it Let's build it. Um so to make a dynamic URL, all I really need is just a way to map a slot, like some kind of short URL with the long URL, right? I just need a model with two fields. That's all I needed. And then I just need to create a view that could redirect, like look up, you know, my whether I have such a slug in the database.

Speaker 1: If there is, just do an HTTP response redirect. If I couldn't, if there is none, just return a 404. That sounds so easy. Um, it's like I couldn't believe myself. Like, so how do I make it dynamic? I can just now that I have a slug and I have a URL, I can just easily go to Django admin and change my target URL I didn't even need to write even new code for this. It comes built in for free from Django Admin. Really this simple, but I need it to be credible. So I thought maybe if I just deploy it to a domain name that people trust, like maybe my own domain name, something that could associate it with me

Speaker 1: or even you know with my organization then it will be credible. Yeah, why not? So that's what I did. I built my own website into I deployed this whole thing to secretcodes. dev and I yes if Why secret code is I have this domain name I bought a long long time ago I never used I think it will be even more credible if I call it like marieta. io or whatever but For now, just proof of concept, just a demo, right? For now it's just secretcode. dev just to test it. So I will let me see if I can Go to the website. Woo!

Speaker 1: Go. Alright, this is my secret code. I made sure it says my name on top of it. Just so you know it's real. You didn't need to log in. Um you can just create something. I don't know. Let's try. Django project dot com Django that's website. Let's see. And click the QR code. No add no masking and uh you can test it You can point your your camera at it, but I have a reader here.

Speaker 1: And where it detects the QR code, it shows you the real URL, Django Project. com So that's that's the you know just the bare QR code generator that I built without ads, without needing to log in. But if I log in For now, I'm the only one who can do this. Let's see. Don't worry about this. I know about it. I just didn't do it correctly. Let's go back. Now when I'm logging, I have a secret URL. I can generate QR with

Speaker 1: uh with a slug. So for example, if I wanna share this super long presentation, is there a link somewhere here? Copy link. Copy link. Thank you. I can't see. How do I go back to the browser now? There This super long link, Maria Ta slides, Maharyata Jangokan So I give it a slug. And when I say generate QR code, it tells me the short URL. with the slides in there

Speaker 1: and you can test it by pointing at it. So let's look where is the There's a QR code reader when you scan it it says secret code instead of the really long Canva link and if you click on it you get Pointed oh lots of people are checking. Thank you. It works, so yeah, that's it. That's how I built my own QR code generator and forwarder Let me go back to my notes. Let's Let's see what do I do? Okay. Yes, that is how I built my own QR code generator and URL forwarder with Python and Django.

Speaker 1: I hosted the whole thing on Heroku and I uploaded the static images to DigitalOcean and I used Postgres database. And you can just check out the repository, although Don't expect this to be like production skills, you know, fancy code. It's really super simple. I don't even have uniped I'm sorry. I don't have documentation, but if you're looking for inspiration, like how to to create such a thing, you can see my examples example scopes. So that's it. So after I did all of that, I just started thinking like well those third-party services were adding tracking and analytics Can I do it too? Like I'm not actually interested in analytics

Speaker 1: or anything, but I thought maybe just an exercise. How can I start adding analytics? What what if I just start counting how many people visit the URL, right? Um can I do this with Django? That's all I was wanting to know So I guess I just need to add one more field like a a counter. Just one field and then whenever back in the when I was doing that redirection Whenever that redirection happens, I just need to increment the counter and save it. It's that simple. So then I started thinking like, oh I got lots of ideas about this, like maybe I should turn this into business. Like I should start charging maybe I should figure out how do I charge my friends their credit card to use this kind

Speaker 1: of I don't know or like I could charge some premium for those customization and logo like I don't know lots lots of ideas. But I'm not actually gonna do it. You're free to do this if you want, but you know, by now you know how to do it yourself. You know how to generate QR code for free without ads, without tracking You you don't need my surface like this. So now you learn something. Thank you so much for listening and coming to my talk.

Speaker 2: Thank you so much, Marietta.

Speaker 3: uh related to your code specifically but so i i was looking at uh scanning q io codes and on my android phone it shows me the link when i when i scan the u code but on my on my iPhone, it does not show me the link. And so do you have any insights there as far as you know like because again one of your concerns was the links being hidden in the second is this thing sketchy? Um do you have any sort of insights there.

Speaker 1: I don't know. Why doesn't you with unmac I I don't have an I I don't have an iPhone, I use Androids. Something to think about for web so before you click make sure it's legit.

Speaker 3: Thank you, Mariana.

Speaker 1: Yeah.

Speaker 4: Oh, that's right. Thank you. Thanks again, Marietta. Um I had a question with Sprints on the Mind. Are you looking for contributors for uh your Git repo?

Speaker 1: Oh, I don't know. I just so confession, I just pushed, I just made this public, this report public last night. Oops, don't tell Kenya. Um yeah, if if this is interesting to people, maybe like I haven't add in those uh customization. I'm not actually printing, I'm sorry, but I need I think I need to put in a license first. I I mentioned this is source code available. It's not really open source. I haven't put license in there. But Yeah, why not? If if you think this is useful, you have ideas on how to improve it and you want to just add it into it. I have to warn you right now I do have some

Speaker 1: hard-coded values there probably like into my you know secretcodes. dev domain. But maybe people can figure out how to make it even more less hard-coded. Sure. Does that help me? Okay, thank you. Thanks for a great question.

Speaker 2: Yeah, great question.

Speaker 5: Hi. Uh thanks for talk. Um my question is uh like Uh do you come across any kind of uh mobile app that validate the QR code before so it's aligned with the Kojos um kind of question where before clicking it because the issue with the QR code is like you don't know where you're gonna end up and if someone like Android has a if or some like a spam application then it's really getting dangerous. So and uh second like a statement like what do you see different than like in chat GPT I can put one prompt and it gives me QR code with the my logo as well. So uh I'm trying to get the value of it. I feel like uh making something validation of QR code might

Speaker 5: might be, I don't know.

Speaker 1: I think the validation was also something I was thinking, like maybe in the that form before I click submit, before it generated the QR code, it could test first whether is a real URL because right now it takes everything, right? Um that's an idea that I have for my own purpose. But I can't control what your bro your you know Android phone is doing or your iPhone is doing. Like yeah, why doesn't it preview the UL? That's that's a great idea and I I it made me think because I saw in Asia and maybe in South America they were able to make purchase payments with their phone with just QR code. And I've heard stories about like the link got hijacked.

Speaker 1: Like people were putting random their like, you know, their own QR code that people were making payment not to the vendor but to someone else. And that is also something I'm like, yeah, how do we make sure this link is secure, legit, credible? I don't have solutions yet, but definitely great to think about. And then your question about using Chat GPT I haven't tried it, so tell me about. I I do think it will be cool. And again, you gotta be careful, like is it really using is the URL correct? So Yeah.

Speaker 2: Thank you for the question. Any other questions? Okay. I appreciate it. Thanks so much.

Speaker 6: Uh thank you. Thank you so much. Uh your question about using your you're collecting your static images from DigitalOcean instead of in the Django, is that because you use those images and icons for something else and then just like as a place to keep all of those things together and you're choosing them for here in one one way?

Speaker 1: Yeah I did need to to save the file somehow and also like although in the beginning I said I didn't need database, right? As as I building out the actual forwarder I realized that I don't wanna keep generating the same if I already generate keyword for this URL. I could just retrieve it. Um I thought that might save something. I don't know whether it really save anything. But I did find because I deployed in Heroku, I don't have access to, you know, the static folder there. I still need to upload it to DigitalOcean or something. So that's what I did. Um so yeah, I I forgot to mention like now I I can't claim that it's free. I I'm paying for it, but It's okay, it's totally

Speaker 1: worth it. It's worth it than free but with ads, you know. Yeah.

Speaker 2: Any other questions Oh well thank you Marietta for an engaging wonderful talk. Let's get a