 So let's just jump into it. So, okay, so I like to introduce myself. Hello, my name is Ivan Zuzek and today I'll be talking about Algolia Search in Drupal. And this isn't gonna be a full how to use it. I'll just show you how to quickly get started and also things that I've discovered while using it. Okay, so just a bit about myself. My name is Ivan Zuzek. I've been doing Drupal for, I don't know, 12 years, 15 years, a very long time. And I also write about Drupal over at webwash.net. So if you wanna learn about tutorials and I do have a few free courses about Drupal, I am in the process of writing about other things, believe it or not, because I believe, you know, Drupal's at this point where it's great and you can integrate it with a lot of other things. So this is a good example of integrating Drupal with Algolia. And I also do freelancing as well as a Drupal consultant or as a Drupal freelancer and I am available. So if you do have any, so if anyone's looking for a Drupal Dev and looking for somebody on the East Coast of Australia, just hit me up. Okay, so let's jump into it. So what is Algolia? Well, Algolia is a SAS search engine. So it is delivered as software, as a service. So there's nothing required. So there is nothing for you to install locally. It's not like solar or elastic search, okay? Everything is run in the cloud and all you have to do is set up your system, in our case Drupal, to just send data into it and then Algolia handles the rest. Of course you need to pay for it, but it is a software as a service. And if you wanna learn more about it, head over to Algolia.com. Now, just to mention that I am not being paid by the company. I'm not affiliated with them. I just use their service and I found it very interesting and it was fun to use. So I just wanna iterate that because yeah, it's not open source. You can't download it and run it yourself locally. So that's just something to be aware of. But if you do wanna learn more about it, just type in Algolia in Drupal. You'll probably spell it wrong like I do, but Google will figure it out. Now recently on a project, I worked with another person and the client wanted to use Algolia because from a client standpoint, it actually gave a lot of great analytics because think of it like this, if you run an e-commerce website and you have hundreds or thousands of products, a lot of people will search for things and from a business standpoint, it's important to try and figure out what people are searching for. Of course, certain websites, if you're running a basic blog, nine times out of 10, people won't really be using your search, but if you are building an e-commerce website, search is very important. So the client came to us and asked us to do a proof of concept to integrate Algolia in Drupal. And at first I thought, oh, here we go, just use solar. Don't worry about it. But I was pleasantly surprised with what Algolia offered. And so here's another screenshot of what some of the analytics looks like. Now, I mentioned the client side of it. Now, from a dev standpoint, Algolia has a lot of backend libraries. So you can integrate it with PHP, Symphony, so frameworks, JavaScript, Java, and you can see a lot of platforms that you can push out of because you first need to get your data into Algolia. So that's the first part. And then once it's in there, they also have a front-end library called Instant Search where you can build powerful search pages. And best of all, it's actually available in libraries such as Vue, Angular, React, or even vanilla JavaScript. And if you are developing on iOS or Android, you can also use it. And this instant search is really what caught my attention because it was actually fun to build a pretty powerful search page just by using React. So for the rest of this presentation, I'm gonna be focusing on the React implementation of Instant Search. So here is a perfect example. So I think on this side, this is a screenshot of code sandbox. And this bit of React code wall, I wanna say it's a bit what it's about. Like 20 lines of React code is all that is required to build this search page here on the right. Of course, they're still styling, getting injected in, but from an actual physical code that you need to write, it's just about 20 lines of code. Then up the top, and I'll show you later on, you're just importing a whole bunch of stuff. But as you can see, it's actually very quick and easy to get these type of search pages built. And then they also have extensive documentation. So here, this is an example of all the components you can use the React components. And then if I zoom in a bit, you can see that you have like refinement list menu, hierarchical menu, infinite hits, and these are all components you can use to build out these search pages. And so that's a bit of an overview of what our goal is. And now let's quickly talk about how you would implement it in Drupal. Well, the first thing you need to do is you need to create an account and also create a free index. Now, they actually do have a community plan, which is free, but it's only free for non-commercial use. And when you do create an index, you do get, I think, a 14-day trial of the starter plan, which starts at $29. Now, $29 to me doesn't really sound like a lot, especially if you're making money off your website. But I do know from experience, clients will kick and scream to avoid paying $29, but they'll be more than happy to spend hours in a meeting or something. But yeah, if your site is making money, starting at just spending $29 at the beginning for powerful search is a no-brainer, really. But you can use the community one for free to test things out. And then once you've created your index, you want to go ahead and create an API key. Now, I'll show you later on, but you do actually have an admin API key. Now, of course, you shouldn't use that because that API key has access to absolutely everything. So instead, you would want to go and create a custom API key, but most importantly, you need to configure the right ACL permissions. Or in Search API, you'll get fatal errors because certain methods aren't allowed because the user doesn't have access to it. And so instead of Search API telling you, you don't have access to it, well, it does tell you that you don't have access to it because it just throws up a fatal error. So after a bit of research, I figured out that it was these five permissions you needed to actually run it nicely in Groupor. And then of course, to integrate all of this into Drupal, you will need to use Search API Algolia. Now, Search API is a great module in Drupal that allows you to index your content and also create search pages. And the great thing about Search API is that the backend is abstracted away. So you can create your index once and then you can have your index stored in solar, in the database, in Elasticsearch, or in this case, Algolia. So this module offers a backend to simply push your data, your search index, into Algolia. And one thing I will just mention, a bit of a side thing, I actually now appreciate just how powerful Search API is because I was working on another CMS, I had no module like Search API and it was actually very difficult to build a decent search page. And sometimes I take that for granted, just how powerful Search API is, just for creating random search pages. All right, so I think that's it for the slides. So let me now go ahead and show you a few things. So I'm just looking at my notes. Okay, one thing I will mention is that let me go to an actual issue. So if your site is set up for, so if your site is a multilingual site, the Search API and Algolia won't work because essentially what happens is that if your site is configured with multiple languages, then let me just zoom in, it tries to do funky things like putting like an underscore then language for the index name. And so it kind of just breaks. And that's one thing I kind of discovered because I was hoping to use in this demo, I was hoping to use Umami, which is a test installation profile with a bit of proper data in it, but that installation profile is multilingual. And then so yeah, everything just kind of died. So that's just one thing to be aware of. If your site is multilingual, you might have trouble. Well, at this point, this ticket is critical. So it doesn't really work. So now let's just go and check out the backend. Well, let me just log in. So what I'll quickly do is just show you the backend. And then so here is the actual UI to manage everything. So if you go to API keys, as I was mentioning, the first thing you wanna do is set up the API key. You can see that the admin API key isn't shown, but you do have this search only API key and this key is meant to be used in your front-end code. So this one is safe to show because if you have it in your front-end code, people can query your content and people will be able to figure it out. But if you then go to all API keys, you can then see a list of all of the API keys. Now, if we go here, you can see the actual individual index and you can see also, so then if we go to configuration, you can see all of the options that you have here. By default, you need to, well, by default, the searchable attributes is empty, so you need to tell Algolia which fields you wanna search on. And then you do have a lot of other options like ranking and also sorting, custom ranking, which I think is pretty good because I know it's come up a few times where the client just wants one piece of content to appear above all else. And then you need to explain to him that, how search actually works and it's kind of hard to build that functionality for that only one piece of content to appear because it just depends how it all works. But by using this system, you can just hand this over to the client and say, here, go not. And then if you wanna set up facets, you can also do so as well just by selecting one of your attributes and configuring it as a facet. And then you can check out stats and do all sorts of stuff and see how it's used. And then you can also see, and then you can even, think it's this one, yeah, you can go in and edit the records and you can even search for things as well. And you can see all of the attributes here. Okay, so let me now just quickly show you in Drupal what it looks like. Well, it's configuring it in Drupal now. I did have to use the develop generate to generate a bunch of content. I hate using that module. It would be good if there was a module that can generate real content. I don't know what that real content will be. And that's why I was trying to use Oumami because it was kind of real content because this stuff is, yeah, it's not the best type of content. But then if you go to configuration and then search API, you can just configure your search, our backend, and then setting up your index is pretty straightforward. You set it up just like any other search API index. One thing I did notice is that this available indexes option here wasn't available until you saved the index. So you had to kind of save it, then come back and then you have, yeah, you just configure your fields and you can configure it here. And then normally with the processes in search API you would do a bit of configuring here but I've just kind of left that and left our goal here to do a lot of that stuff because you can actually configure stop words in our goal here. So it's kind of like, okay, well, who's going to do the processing as a search API or is it our goal here? I don't know what the answer is really, but that's, but in this case, I've just stopped it from indexing content that's unpublished. Okay, so from a Drupal standpoint, I really haven't done much other than installed search API, configured our goal here and then just sent the data into our goal here. Now what I'll do is quickly just show you is this code sandbox.io. Now this is actually pulling out of, let me move this, okay. This is actually pulling out of the index now. So if I just search for things, it is me instantaneous. And that's one thing I actually noticed straight away was that the auto-complete is ridiculously fast. And if anyone's done auto-complete in Drupal, you know, just how slow it can be. This is absolutely quick. There's, to me, it feels like no lag. You just click on it and you can go and you can just search for things. Now from a code standpoint, as I was mentioning earlier, like this is all just normal boilerplate react code. You put in your API app key, put in your search API key, and this is the meat of it essentially. And that's it. So if you want to define a refinement list, this is essentially just this type facet down here. Because if I just remove that, they go type facet gone. And when I was playing around with this, I actually had a thought, it's like how hard would it be to grab this and chuck this into Drupal? Because one thing that I've kind of, well, I've always felt this with Drupal and especially views, if you try and create crazy search pages in Drupal, sometimes it's just easier to write custom code to handle it. Instead of spending hours bending views in a particular way, sometimes it's just better to just write it in custom code. And so I thought, how hard would it be just to grab this bit of react and then just chuck it in Drupal so that you could essentially just display it in Drupal? So that's what I did. And let me grab this. So I created a basic module here. And it's all it's doing is this is a block and it's loading up an attached library. And I've got, I am importing in, well, I'm adding in this external instant search.css. So this just gives it a nice look and feel. Well, it just doesn't make it look terrible. And then here in the JS, I've got the same bit of code. So if we have a look here, all right, it's bringing it in. And then I was playing around with a few extra things like transforming the items and this just puts it all to uppercase. And you can see here all of the options here. So this is the bit of the same bit of code. And then if I go here and what I ended up doing is I ended up just creating a search page, basic page. And I just added the block to the content region. It's a bit hacky, I understand. But I just want to door for this demonstration and I just put a block visibility setting. But now this search is looked as if it's in Drupal. And this is one thing that I feel I'll be doing a lot in the future where if you do get crazy search requirements, I mean, you don't have to use our goal now. Just build your search pages in React, especially if there's like crazy interactivity if they want. And I think this is maybe the future of Drupal where you're just dropping these little applications, little React applications or VR applications on top of things. So yeah, this is absolutely like the speedies. It's hard to actually show you the speed of it, but it is me instantaneous. And that's one thing I really do like about it. Now, one thing I will just finish off with is that every single time you make a change, here, if you click here, here, here, here, okay? That's considered an operation. And if you look in the analytics, I think in the overview, yeah, you can see that it does slowly, oh, no, not that one, let's pop this off. So if we have a look here and you take a note of this analytics and you just, you will notice that it does creep up and change and it moves up pretty quickly. So I don't know how quick you would go through the 50,000 operations if you have decent amount of traffic, but that's just something to be aware of. But I think for the paid one, it's 250,000 operations. So that's pretty much it. It's a good platform. I would recommend that you look at it. And yeah, I thought I'd share it with you. So that's about it. Any questions? Hey, Ivan, I have a question. Did you have any weirdness with things like caching or, I mean, looking at it, it's all pretty much done on the page, but is there anything you'd want to consider going forward if you're using CDN? Is there going to be any issues, do you think? Well, with the CDN, you're going directly to our goalier search. You're not even touching Drupal. So as soon as your content is indexed, it goes to our goalier search. And so here, if I search for things, you'll see that this query appears. So this goes directly to our goalier. You don't even touch Drupal. So there's real location issue because you're not even touching Drupal. And that's why this operation counts every single time you do any type of operation like this. So yeah, there's really no caching issues because you're not even touching Drupal. And that's the same as performance as well. Yeah. Cool, thanks. There is another question. Does it search for content in files like PDF, TXT that are attached to the node like extracting content from the file? Not out of the box. You'd probably have to do that yourself. So there's ways of doing that. You could use like that. What is it, Tikka library? And you'll probably have to write custom code to, you'll probably, you could do that by creating a custom processor in search API, extracting the data, converting it into either, I think that Tikka converts into HTML and then get that content indexed. I don't think Algolia has that functionality. I'm no Algolia expert. I'm not sure if it's got that type of functionality to read it, but there's, of course, there's workarounds you can do. As long as you can extract that data into some type of text, then you can easily attach it to a search API property. And then as soon as it's a search API property, then you can get indexed into Algolia. So yeah, there is search API attachments, but I'm not sure how integrated it will be with the Algolia search API module. So that's kind of, you know how in Drupal, it's like, yeah, you have two modules, but you just write that bit of custom code to just kind of link them up together. That's probably what you have to do. Can it search data source beyond cache data? For example, data tables. Well, if you're using search API, search API itself can only, it only works on, it only works on, well, search API technically can work on any data source that it integrates with. So out of the box, it integrates with the entity system. So what you could do is, I think the Algolia search does download. Let me just double check. I think it does use a library, an actual PHP library. So at the end of the day, you can just use the actual user, Algolia search client PHP library and then just push your content up by writing custom code. So at the end of the day, you can always just write custom code, but I think with search API, it may not be that easy out of the box because generally you use it to index entities. Sorry, just one real quick one, not really related, sorry, I was just, I'm trying to find it myself, but this is sort of unrelated to the technology, right? But when you signed up for the service, did you find anything in a clause or terms and conditions that sort of limited the type of content that they will index? Are there any restrictions on things that they will store? Like, just saying, just saying, can I upload bomb-making instructions to this thing? Oh, Ivan looked at the terms and conditions that way. No, Ivan. I'm not sure. I'll try and find it myself. Sorry, just wondering if you came across the way you were looking. Because oddly enough, it doesn't come up in search on this site. So, yeah, it should be fine. Yeah, I don't know. Yeah, that is a good question. It's not a very healthy question, I realize. I'm sorry, Tim, but just as an example, I'm just wondering if there are any. Yeah, absolutely, absolutely. Because yeah, the last thing you want to do is have, yeah, be kind of de-platformed for some reason because you have, because it's looking through your search content. Yeah, absolutely, no. It's a good legitimate question. I do know that on the free plan, it's only non-commercial content. Now, when you think about it, what does, what, no, sorry, non-commercial use. So, you know, what's non-commercial use, who knows? Well, it's obvious to figure out, but yeah, that's a bit of a gray area.