Transcript
Hello, friends. So here I have an application where I have a list of companies and then I go to create a company. I would want, uh, the user to be able to input information about his company. And usually an official registered company has a name, uh, tax ID and official address and other official information that is registered in the, uh, governmental database. And, uh, what if you don't want the users to manually input this information and possibly input it incorrectly or input false information about a company that doesn't exist? What if you want to let them only input the real information about, uh, their company? So you could add a search where they could search for their company, and, uh, based on the search, you would, uh, just auto complete this information. For example, here I will search for a company bearer. I found this company, I found a list of companies that could also fit the search. I will click on the company that matches the company that I want to input and follow. I have, uh, autocomplete this information. I will click on Create Company. And I have created this company with, uh, this, uh, information that I could not input manually. I just found the company from the list. So how can you do it? Well, in this example I'm going to do it, uh, based on French open, uh, data. Uh, but you can, uh, apply similar, uh, approaches to other countries data. Uh, I've played with France, so you can, uh, I'm gonna do it with France. Uh, so here is an official, uh, company search, uh, website of the French government. I can try searching for this company. I will copy in the text, ID click on search. And here I found this, uh, company. I can try searching by just a name. And here will have a list of companies that manage the query the most. Uh, but, uh, this cannot be added to our application. We would need to access some kind of API. So again, going to the website there is this API portal. Uh, so API here. And, uh, we see that there is, uh, a free API that, uh, also has some rate limited, but yeah, it's free and you can use it without paying anything. So that's really cool. And they have this open API documentation. So let's go to this link and, uh, what do we have here? So we can search companies using the, uh, CURL. Let's, uh, cope this and, uh, put it into our terminal. So get we have this, uh, uh, URL. There is, uh, a search lab post is, uh, a name of a famous, uh, French postal service. The search, uh, won display the first page of the results and only display one result per page. Let's, uh, search. And here we have all this, uh, publicly accessible information about this, uh, company. We actually get, uh, an array of results, but there's going to be only one result in this array. Okay? So we could do it with a CRL, it Means we can also do it with, uh, uh, Ruby. Uh, how can we do it with Ruby? Well, first of all, I'm going to go to my, uh, application. I will, um, check out a comment where I haven't implemented this feature yet. So here I have just coupled the, a list of companies, nothing else. Um, I don't need this. Okay, let's try again. So here I just have, uh, an application where I have, uh, companies, I don't have the search field implemented yet. We're going to implement it, uh, together now. So, uh, I'm going to try to, uh, make this kind of, uh, accessible in the rails, uh, app. To do this, I would, uh, install the GM IDE to make a request bundle add ide. And, uh, let's run the rails console. So I will say require ide. Now, uh, this is the URL and the search for cfu. And we can put something inside the cfu. So let's say base URL equals, uh, this, um, then would have, uh, something like page one per page. Uh, let it be 25. I think that 25 is the limit that you can have, uh, uh, in this French API search. Uh, then we will, uh, have ri equals bear little bit the name of the company that we're searching for. Um, and, uh, would make a request with, so would say response equals Faraday do get. And the URL is going to be base URL, uh, concatenated with, uh, query, uh, concatenated with, uh, this. So page, uh, what page and per page. Okay, let's run the, uh, query and we'll see a response here. Have the response. And, uh, let's, uh, try getting the response. Body. Body here. We have the response body, and we can say JO pass response body. Okay, so it looks like, uh, we've got the results. The up to 25 companies, uh, let's say XX equals this. So here have all the results. Here we can say x, uh, results dot count. Okay, we have 25 results. Uh, uh, we can say results first and we can get the, uh, full name of the first results. So noncompliant. Okay. And we have the name of the company. So we made, uh, request with, uh, Ferdi and, uh, got, uh, a list of, uh, companies, and we got the name of the first company. Looks quite good. How can we make this spoke in our actual rails, uh, app, not just with Ruby? Uh, so here in the, the new company form, I'm going to add the, a search field. So, uh, I will go to the form and I can edit just like an any other field. I will have form dot text field com. Uh, search, just be search. Okay, here I have a search field, and whenever I type something, I want to make a request to this, uh, API with a clear parameters that I send. So I would actually do it with stimulus, um, I would say rail generate stimulus, uh, company search. And from inside the stimulus controller, I'm going to send the request somewhere. Anyway, let's, uh, first open the stimulus controller, company search controller. And uh, we'll have, uh, on search, we will display the event, uh, uh, what was it? Target dot, uh, value console log event, target value. And here have, uh, data controller will be company search and action on input. We will go to the company search controller and the search action. So whenever I input something into this field, I should, uh, log this content in the console. Let's see if it works. I will refresh the page so that we reit initialize the stimulus controller. I will go to the console and I start typing something. And you see all the results of what I'm typing are being displayed, uh, here in the console. So it looks good. Now, um, to put some rate limit, I'm going to display the information in the console only if I have more than, uh, uh, two symbols stepped in. So if, uh, yeah, it's as if, yeah, it's amazing. It's like reading in my mind. If the value length is, uh, more than, uh, more or equals than three, then we are going to log it in the console. Let's try on scan. Okay, so only as of three values, we log in the console. That's how we're not going to perform search when there are not enough characters. Okay? And, uh, now from here we're going to make a request, but, uh, we're not going to make the request to the API. They're going to make the request to, uh, to our app itself, uh, to a rails control. That is going to make the request to the API so that we can respond with the to both streams. Um, so I will import, uh, request G rails so that we can make external requests easily from our stimulus controllers. I will, uh, install it. I will, uh, add this to our GEM file bundle. Now I need to install request Gs, run this command rails, request GS installed. Okay? And now I will, uh, go to our search controller and say, uh, import get, uh, from at rails slash uh, what was it? Let's look at the docks from Rails slash js. Okay. And here we're going to make the ga, so, uh, gat, yeah, thank you. Auto complete company search. Uh, it'll be slash company slash search. Uh, mark theory equals, and we're going to also add the tub stream headers so that it is not an HTML request, but a tub stream, uh, uh, request. So, uh, it'll be something like, uh, headers, uh, accept, but not, uh, application json. It's going to be, uh, text slash VD to stream html. Okay, let's see if this works. It should make a request to slash company slash search, but this, your l shouldn't exist, so we should get an error in our console. Let's, uh, see our console and, uh, okay, couldn't find company with ID search, uh, to go to slash company slash search and query. So we need to add the roots. Let's go to our roots resource companies, do collection, do get search and, and go to our controller. I will create dev search and put a binding here. Okay, now I will search again. Yeah, I already hit the binding. Let's just try once again. I will, uh, search again. Okay, we hit the binding. Let's have a look at the request format. You see the request format is to stream. So we'll be able to return a tobo stream instead of HTML. And we can see, uh, pers. And in the perms theory we have, uh, this, uh, value JEF. So based on this, we can make the request to the open, uh, data and, uh, FA list of companies. So, uh, here I will have theory equals PERS theory. Uh, I will say base URL equals what was the base? URL here, let's go with this. Once again, it's going to be this. Uh, then, uh, full UL equals, um, base UL and this. And, uh, then they're going to make the request. So, uh, response equals faraday dot get full QRL. Let's try run all these commands response. Okay. Uh, then, uh, we can have something like, uh, uh, results equals JO pass response body. Here we have the results and we don't need the, the pagination for now. We don't need the, the top pages. We are going to just display the results on the first page. So, uh, let's just also put the results. So we have just a list of companies. Results dot count is, uh, yeah, we have one because we have one page. Page one, they'll have 25. Okay, this looks, uh, fine. We should, uh, be able to have that list of results. And now let's display them in our view. So I will create another div div with ID results. And, uh, here we are going to respond to this, uh, search controller action with, uh, Tobo Stream template. So I will go here and create search turbo, stream EB, and here will have equals turbo stream do update. We're going to update the content of, uh, this empty div. Uh, so the div's name is Results, and they're going to update it with, uh, the list of companies that we have in AT Results. At Results. Okay, this should work. Let me disable the binding. I will click continue. I will refresh the app and I will search. And here you see I have, uh, companies popping up. So whenever I search, uh, I search, uh, the companies, let's try searching just by, uh, company id. And, uh, yeah, it is unique. So we have only one result. Let's display not all this rubbish information. We don't need most of it. Let's display just the text id, the full name and the address of the company. So, uh, instead of having, uh, results, we'll have results. Uh, CRAN is the company text id, the full name. Then, uh, we will have the address that is, uh, nested inside the Sea team. So we'll have, uh, CGE and Inside Sea we have, uh, address. Okay, let's, uh, try searching once again. So I will search for this company name. Uh, okay, let me refresh it. Uh, nothing's been displayed. Okay, yeah, because I don't have, uh, a collection here, I should have, uh, a collection results dot, uh, each do result. And this is going to be inside the result. So I don't need the add here. Okay, let's try on scan. Okay, I have the company id, the name and the address, but they're all mixed up. Let's just put it, uh, put each of them into a separate div. Let's search again. Okay. And here I have, uh, each company in a separate line. Now, I will also remove this equals, so that they don't have this, uh, ugly array on the bottom. Okay, and have just one line. This fund company looks good. Let's search again for multiple companies. Looks fine. And what if, uh, now by clicking on one of the companies, we want to auto complete this info of the company. Let's make this field actually not use editable. Uh, let's make it only automatically completion. So, uh, here on this field, I will, uh, add the read only true to ensure that the user cannot type in it. Now refresh. You see, I cannot type in it. I can type, but I cannot type in this field, but I can still type here and search. And when clicking on this, I want to auto complete this one. So I'm going to create another stimulus controller for this. I will name it, uh, uh, company autofill or auto Complete Rails, uh, generate stimulus company auto complete and open the company auto complete controller. Here I'm going to have, uh, two targets the target that I'm completing. So this field and the collection. This one I'm going to, uh, close the collection, uh, when I click on one of them and auto complete. So, um, static targets will be, uh, paste. I'm going to paste here. And here I will have a results list and results. And here I will have an action paste. Um, let's have an event here. And, uh, I will put this company auto complete around all the forms. So I will say data controller, company auto complete, and here it'll be data company Auto. Complete Target will be Paste. So I'm going to paste here. And, uh, inside each of, uh, the results, I'm going to invoke the paste action when clicking on, uh, a result. So, uh, here I will have data action, uh, click company portal, complete, uh, based action. This based action. Okay, let's, uh, see if I can access this, uh, based action. I will say log event target value. Yeah, let's try this. I will, uh, so the server one scan, okay, let's open the console. Okay. Uh, now when I click on one of them, I should, uh, have something pop up in the console, but nothing pops up. So, uh, instead of popping up the target value, maybe the target doesn't have value, it would be text content, text, uh, content. Let's try again. Yes, you see the text content pops up. And, uh, I'm going to, when clicking on this, I'm going to update this, uh, element with this text content. So, uh, we have, uh, this dot based target value equals event target text content. Let's try again. I'm gonna search for a company and, uh, missing target element based company auto Complete Target. Yeah, I made it typo. Okay. And now you see it has been updated. There is enough, uh, place, but you see whenever I click on one of these, this info field gets updated. So it looks quite, uh, good. Let me just, uh, close the collection whenever I make a selection. So I will, uh, remove the content of these results and that's where I need the results target. And here I will say data company auto complete, uh, target equals results. And uh, whenever I click on paste, I'm going to, uh, remove everything from inside this results target. So this dot results target in H TM L is empty. Let's refresh and try again. I'm going to search for a company. I'm going to input its information, and whenever I select the company, the search, uh, is cleared. I will search again. I will select this one. The company information has been filled and the search has been closed. And that's basically it. You can add this, uh, kind of functionality for any Country. You just need to have, uh, different, uh, search queries in your, um, controller. And, uh, yeah, that's it. So, um, thanks for watching and see you in the next one. Uh.
1