Tech Talk: "Integrating Lorem Picsum into Canva" mit Andreas Braumann von Kaleido

Tech Talk: "Integrating Lorem Picsum into Canva" mit Andreas Braumann von Kaleido

Thanks for inviting me to this devjobs.at TechTalk – I greatly appreciate this chance to talk. And what I want to talk about today is a little project I did just for this talk and the title of the of the project is called „How to Integrate Lorem Picsum into Canva in 15 minutes.“ So I don't know if you know the Lorem Picsum website - specifically it’s a website where you can enter the dimensions of an image and then you get just test images in these dimensions. I thought it would be nice to integrate that into Canva and I will try to show that today in a live coding session. So just for notice this presentation was done in Canva so you can use Canva for presentation too - awesome!

So how do you start? So for Canva there is this developers platform, there's a screenshot here as you can see. You can build three types of extensions: content extensions, editing extensions and publish extensions. So we will create a content extension which means we will add content into the platform. And editing extension means you can modify existing content like greyscale or blur or stuff like that. Publish extensions means you can publish on your platform the content you made in Canva.

What's nice about this is you can get your app in front of 20 million+ users. So Canva is huge and if you have an app you can just upload it, code it, then Canva we reread it and then it's live. And it's just nice to have this kind of traction which you can’t have when you do your own app, your own platform basically. So you have a huge user base there already. OK, so what's the basic idea? The basic idea is you have Canva and you have an empty design and then you want to have a placeholder image, which is exactly 100 x 100 pixels, because it has to be the exact pixels dimension for some – I don't know - some other tool that requires some pixel perfect images. And right now there is of course a lot of placeholders in Canva so you can have all the pixabay and pexels images in Canva – they are integrated but you don't know the dimensions. So you can say, OK it should be square or it should be like a portrait or landscape but you cannot have the exact dimensions and that's the problem I wanted to solve with this app if that's a problem for someone.

So we will have three features in our app that we do in 15 minutes. We will have custom dimensions to into the search field of Canva. We will be able to enter the dimension of the image like 100 x 100, and then you will also be able to add custom parameters. So the Lorem Picsum site has this custom parameters in the end and we will support two of them, the blur and the greyscale, which means when you pass the blurred the images will be blurred already and if you pass greysacle, they will be turned into greyscale. So that's thing that we will build today. And of course as you see in the bottom, we will use picsum.photos. It's an independent platform, it's not affiliated with Canva or Kaleido. I didn't ask them so that I can use it but that's just a test project and I don't think it will be used to many people, but maybe we'll see how it goes.

OK, so now we start a live coding session which will be awesome and yeah - we will use Glitch for that. Glitch is a platform were you basically code in the browser and the nice thing in Glitch is you can do a Node.js project, a simple one with express server so it’s just basic stuff. And as soon as it's saved basically it restarts the server with your code so there's no deployment and there's no like GitHub actions or whatever so it's just like instant deploys. And it's also the platform that's recommended by Canva for developing the apps. If you want to publish the app you should use another platform because Glitch is slow and it hibernates your app basically so then you should publish it on some other cloud provider. But for testing it is awesome.

OK, so I will stop the presentation now and let's start coding. So I prepared already this boilerplate here. It’s always nice if you do live coding and then you start already with 116 lines of code. But this is basically a template that's provided by Canva. If you go to Canva here. I'm not sure, but there's like this content extension website where you can say “Start with a template”. And what I added to this is the verification of the requests - so that you have to do it to implement it into the platform. I don't know why they didn't do it, but I did that. So we will go quickly through that and then I will start adding our functionality. In this tab there is already the finished code - so it's for cheating.

OK so it's basically it's just a standard express app, so you have the JavaScript, in the package JSON there's some additional modules. I won’t show the environment variables but what you have to make sure is that in your app you get the secret key and you have to set this Glitch because then you can verify the request and you can not impersonate somebody else. Other than that I mean there is just a readme - it's not so exciting. But here you can see the app basically how it looks like. So you have Canva and here's the Lorem Picsum app. And then for the search requests you put 150 x 250, blur is 3 and greyscale - and these parameters are all passed to Picsum.photos and then you get this list here. And they are really all 150 by 250, they are blurred and they are greyscale so its a neat little thing. OK so we go through the existing code, so this is just a standard express app setup. Also here this is for the verification so here we say we should actually verify the request. This is the endpoint thats called by Canva. So the platform is calling content/resources/find - this is for content apps, for the other apps there is other endpoints of course. And this is just basically: give back the platform a list of images. We will talk about the contents of this later and then on the bottom there is basically just boilerplate code - there's also like a tutorial on the developers platform in Canva where they show you how to program that. So it's just copy paste basically, it's just about verifying that the call is authenticated, it's really by the Canva platform, not somebody else. And also it's validating that you are basically the app that the requested the data from. So it's not so interesting, you can look into it.

OK so let's go, this is running on Glitch right now. This is live, as you can app status is OK. You can here also can have the lock - so if you want to have a lock here. This is basically a live running log of the platform, also you can debug if you have errors inside and this can actually be right now already called. So let's talk about this endpoint post, its a post endpoint and not get so that's the specification. So when can I calls it, it basically expects a response with an array of images. And what’s in here now is also from the default sample in Canva. So they have it like a boilerplate that you can remix – how it is called in Glitch. And what this sample does is, it gets a list of images from picsum.photos. So not to confuse, it's not the lorem picsum but it's a different platform that just gives out random photos. And basically just adds this into an array and returns it. So there is no processing here of any inputs as you can see. So the first thing I would do is start by removing this code and then adding the other one.

Okay can we have a small cut I need my second monitor. OK we have now changed our set up a little bit so that we can code live and I can cheat on my second laptop because… it's easier to code when you have already prepared the result. OK, also the font is now bigger so hopefully you can read it better.

Yeah, so we will start with implementation of our endpoint. So I talked about this - so basically it gets from picsum.photos the response and what we want to do is we want to get it from the other side and also we want to decode the parameters in the search field. So if you check the Canva documentation about the search field, there is the query and you get the query in the requestbody. So this is the query and in this query we have basically what the user enters for our plugin and what we want to do is we want to decode this and basically have all the parameters like the width and the height, the blur and the grayscale decoded so that they can pass it to the website. So we define parameters which will hold the parameters that we will pass to the URL in the end, and then we check if there's a search query. So it's also possible that there is no search query - if you just open the plug in for the very first time there is no search query. And then we split this by comma. As you saw here in the presentation which is gone. Yeah, you can take the presentation afterwards, the link is in the description. So we want to separate the parameters by commas - so I basically can write it here. We want to have „200x200,blur=3,grayscale“.

So we split by the comma and then we get the dimensions. So the dimensions is always the first parameter. I mean it's just, you know, for playing around. So you split with the x - that means „width x height“ and then in the dimensions you have an array with the width and the height. We could check if this is really two and if there are not too many parameters inside or if it's just one parameter we could say it's square but we don't do that yet. So we say „width = dimensions[0];“ and „height = dimensions[0];“.

It's like a standing desk here - it's a very, very healthy. We have that also in the office if you want to know. This is already employer branding isn't it? We have standing desks!

OK so we defined the parameters there so we have them. We don't need this then. OK, so now we have to width and the height from our query and then for the rest we make a small trick. We don't decode them or anything but they just say we take them as they are and just format them as a query string so that they can pass it to the Lorem Picsum site. So we say „parameters = queries“. So in queries we have basically the splitted queries, so it's an array and then we say we splice it with one. So we remove the first one because it's the width and the height dimensions and then we join them again, the rest of them, with the ampersand – I think it’s called – so that they have this typical URL scheme where we have questionmark parameter equals parameter and parameter equals parameter. So you can see blur is 3, greyscale. You can also omit it if you want. So now we have the parameters ready and then we can basically do the call already. Yes, we could also have default values for width and height if it's not provided. So we should do that, because if we open it for the first time then there should be default values.

OK. Yes, the next thing. So I am reading from this from the finished project which you also can find in the description or in the presentation - so you can have the code and everything and play around with it. So the Canva-app also provides you with a limit. So it tells you how many images you should return. So we will read that out. It's in the request.body.limit. I found out it's 20 all the time so you could also set it to 20 or you can return any number. It actually doesn't matter. And then the next thing we will do is, we want to have a seed. So what's nice about picsum.photos is you get random photos all the time, but then you cannot identify these photos for Canva and they need basically an ID where they know this photo is exactly this. So if you drag it in, then they get the same URL. So you need to define a seed and you pass this seed and with this seed and URL you always get the same photo. So that's nice. So we have to define a seed and not just one, but basically so many seeds that we have 20 or „limit“ images like a seed limit images. So we now define a for-loop. So, I should be able to do that by heart actually after my career, and then we just generate a seed - so I do, it's just a random number. That's the times, something, it doesn't matter, you can give - there is no format for the seed, for the for the website and then we push it. Alright so that we have all the seeds. And now we define a helper function that says createResourcesFromSeeds, because we want to be very good programmers and we have this functionality in a function that we could actually unit-test them if we want to. So then we have the width, the height that we decoded and the parameters. And what this function returns, should be the resources that they pass to Canva basically.

So we say response.send and then we say type should be success. That's the same code that's actually there we can see, which is in sample from Canva to just expect it like this and then we say resources.

OK, we can remove that, all of that - we just have to create this function and then this function should return the resources. He doesn't like me, delete that. OK, so we define this function now and then we are done and then we can see it in action - and hopefully it works. So just define the parameters using error functions, because it's cool. OK, this is actually quite straightforward so the end is near – don’t sleep.

So what we do here is a little bit of a tricky thing because I wanted to create all of those resources in parallel basically, and then add them to the array so that they don't have basically a long process time. So it's all about speed and that's why we create promises for of them and then we wait for all of them. So the seeds holds all the seeds and we map them so that we iterate through it. And then for each seed we return a new promise. It's actually quite hard to say something different than to write. OK, so but I heard you have to talk because otherwise it's boring. OK, so now it's the meet. So now iterate over all seeds and the promises all wait for all of those promises to finish. And now we generate the URL, which is basically the holy grail of this plugin. So we generate the URL, we send it to picsum.photos, picsum.photos sent us a list of images or basically one image, because what we said is we want this specific image with the seed and we add this to the array and then return it to the Canva platform. So the URL is like this. The first thing is just the API endpoint from picsum.photos and then you need to call the endpoint seed and here we add the seed from the array. As you can see, I use this – how are they called, JavaScript strings where you can add the parameters with the dollar.

First one who writes in the comments how they are called gets a free beer from DevJobs in Linz. But they could cut it out, so I don't know.

Width, height - so this and then we attach the parameters. OK so just to explain, just writing it out. So what do we have here? So we pass the seed, then we pass the width and the height that we have from the user input and the parameters hold basically string with all the rest of the parameters and that's basically the URL. And what we do now is we just resolve this and return the array that's going into the resources and then we return that. So the type is the image. There's also other types in the Canva platform, there is container and something else. I'm not sure - it's in the documentation. So you can also return whole containers, but I'm not so familiar with that. Then the seed is an ID. Then we give it a name because Canva displays the name of every image there. So basically we just say Lorem Picsum, width, height - we could give the seed here but I didn't think it's so valuable for the user. Then they want basically the contents, so they have the thumbnail URL and then the real URL for simplicity which just passed the same URL twice. And then the content type, they want this image jpeg – that’s it.

Tada! That’s it, we have our finished implementation. So just to reiterate: we decode the parameters, then we call this function createResourcesFromSeeds where we put in the seeds that are generated. It's just a random number, like a limited amount of random numbers. And here we return an array with basically just the URLs that we generate from these parameters. OK so this is already live now and I see an error. So we have to fix that. There's always errors with live coding. So who in the audience spots the error?

I think it's this one - Is it? OK, thank you, Makus! He pointed it out. So here I see a typo.

OK, so what they do is you have that? Basically you just create a new app. So I will show it quickly to you how that works. So you go to developers integrations, then you say create an app. This screen is very special because you can never change the selection you have here for this app. So that's holy. So either you want to have it as a public app then it will be reviewed by Canva or you have it as a team app, then it will be reviewed by your team admin. So it's an internal app. And you can never change it when you have a app - you have to make a new version, copy everything. Been there, done that. So choose wisely here. And I already created this app as you can see here. So this is the app. I mean there's some text and some logos and the most important thing is the signature verification test that we talked about in the beginning. So this has to work. Could be slow with Glitch. Timeout. Glitch is something sometimes very slow or it's just not working. I see errors. Probably there's no query. So you see i just edited it and then relaunches it, it's really awesome, Glitch. Oh, look at that. OK and also I mean what you did when you created the app is that we have this URL here, base URL, that's basically pointing to the Glitch instance. You can have this here and go to share - this is the live site with the endpoint. What I did in my in my sample project here, I was doing it in this one. I check if the user-agent is Postman or insomnia, so you can test the endpoint locally and not only from Canva. So I have here the insomnia client, which just fires the post request and you can send it. And you can see there is no entries, nice. So there should be like a list of images here. Well, OK. And then how do you test your app: you go to Canva, as you know, and love it all and then at more you can see your app. If you don't find your app you have to search for it. Lorem Picsum and then you have to connect to it. And then he tried out by entering a value and then hope for the best.

So these are all 200 by 200 images, 200 by 200 pixels. You can use them and if it's really a pixel perfect, then you have to exact. And now we try the advanced version.

Blur is 3, greyscale. You see the are greyscaled, they are blurred. Yeah and as you may have noticed there's two versions of this app. So there's one that I did like as a team app so that you can improve it ourselves. It's faster. And I also did a public one which will be approved or rejected to that second as I heard. So it takes like one or two weeks for them to look into it and maybe if they approve it, it will be life and people can use it. Let's see. Unfortunately you cannot judge for it yet. That will not be the next Unicorn, the Lorem Picsum integration but if it's live 20 million people can use it every day and maybe they will.

So let’s continue with the presentation. There is some last slides. So we had all this, all this – fast forward. So the best practices just to reiterate very quickly: what you do when you want to create a Canva app. So you go to this URL, create an app, app audience cannot be changed - I told you, then you develop it on Glitch and publish in the cloud so you can choose whatever you want AWS, Azure or whatever. You can fork my Lorem Lipsum project if you want because it includes already the signature verification code – the Canva one does not. So mine is better. Maybe they will take mine. I will let them know as a boilerplate for the future. Then don't forget to set your client secret because it determines if the authentification works and there’s a link for all the documentation she can have or want, developing the apps and the platform will grow rapidly. So it is just a start. I think this will be the new app store soon - also with payments.

OK so why am I here? We are Kaleido. We are now part of the Canva family. That’s me with the Schnitzel here if you can see. We are growing rapidly, we are happy. If you want to know more about – this is last slide by the way – more about us go to our website. We have now 13 plus current job openings and there's many, many more coming. And it's fun to work there. And I'm also working there. So if you want to meet me virtually or in real life soon then apply. Good luck and I'm out, bye!

 

Technologien in diesem Artikel