Search system with algolia part#1 Set up algolia, Set up algolia in javascript, Data generator and Display search result

duski.harahap (68)in #utopian-io • 6 years ago

Repository

https://github.com/Algolia

What Will I Learn?

Set up algolia in dashboard
Set up algolia in javascript(frontend)
Create Data generator with Mockaroo
Displaying search results

Resources

Algolia - https://www.algolia.com
Mockaroo - https://mockaroo.com

Difficulty

Intermediated

Tutorial Content

In this tutorial, we will get acquainted with one very cool tool really, that is Algolia. Algolia is useful as a search engine, not a search engine like google. but the search engines used to search our internal data. such as a search system for products in e-commerce. Algolia is not limited to specific programming languages, to use algolia we need to register to be able to access dashboard algolia. Before we create a search system with algolia, we need to do the settings on the dashboard algolia page.

Setup Algolia

After we have signed up, we will be given access to dashboard algolia to start making a project, to create a new project, we need to create an index, we can see the image dashboard algolia as below:

We can click Indices on dashboard algolia. we will be directed to dashboard Indices.

Create new index

We can create a new index that we will use in our search system, I named tutor_utopian, then we click create to create the index.

After we create the index we are given a choice of 3 ways to enter data into index tutor_utopian we have created. for more details, We can see the explanation in the picture below:

Add records manually: We can add data manually by creating data in JSON form.
Upload JSON or CSV: If we already have a data that has shaped JSON or CSV we can upload it in this section and in this tutorial we will use this way to add data in our application.
Use the API: If we already have an API as our application search system's data source, we can choose this way.

We will choose to upload data in CSV format to fill in the data in the application that we will create, for that we need to make a data generator. We will use the mockaroo tool to generate JSON or CSV data.

Create data generator with Mockaroo

We will use the data generator to create data that we will enter in our algolia application. We will use Mockaroo. You can visit the website https://mockaroo.com to generate the data . for more details you can see the picture below:

We can choose what data we will generate such as the name of the film, the name of the animal, the name of the plant and others, then we can download the data format we want. In this tutorial, the same download is in the form of CSV.

Note: Need to remember Mockaroo has nothing to do with Algolia, Mockaroo is just a tool to generate data that we will later use on our application.

Upload Data to algolia

After downloading the data, we will upload it to the algolia application, after we have successfully uploaded we can see the results of the data that we uploaded. for more details, we can see the picture below.

ezgif.com-video-to-gif.gif

Start Using Algolia

We will start using Algolia in our search application, algolia supports many programming languages but in this tutorial, we will use javascript.

Using algolia in javascript

Before we use algolia in javascript we need to install it, you can visit the documentation from algolia https://www.algolia.com/doc/, then you can choose api-reference https://www.algolia.com/doc/api-client/javascript/getting-started/.

Install via NPM:
npm install algoliasearch --save

Install via Bower
bower install algoliasearch -S

Via CDNs

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>

In this tutorial I will use CDNs to use algolia. I will create an index.html file.

Setting Algolia in the frontend

I will import CDNs from Algolia in the index.html file that we created. We will do the setting on Algolia in the frontend. we will enter the required keys so that our search application can run, for more details we can see the code below.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Duski Tutor</title>
    <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
</head>
<body>
    <h1>Algoia search</h1>
    <script type="text/javascript">
        var client = algoliasearch('PACBZRD3Z1','ab4b2b226200fec5d58aa85e25b1032d')
        var index  = client.initIndex('tutor_utopian')
        index.search('enim', function(err, data){
            if (err)
                console.log(err)
            else
                console.log(data)
        })
    </script>
</body>
</html>

var client , we will set the API keys credentials that we use in our application with the algoliasearch () method. algoliasearch()requires two parameters, namely application ID and Search-only API key algoliasearch('PACBZRD3Z1','ab4b2b226200fec5d58aa85e25b1032d'). We can see the key in the API keys menu on our algolia account dashboard:

var index, then we will initialize to choose which index we will use, you can see the index in indices menu. to select the index we can use the initIndex() method then we pass the index name we want client.initIndex('tutor_utopian'). to see the index we will use, you can go to indices menu like the following picture:

Then to use its search system we can use search (). search () method has two parameters, The first parameter is the keywords we want to search and The second parameter can be used for callback function to see the error(err) and result(data).

Example:

index.search('enim', function(err, data){
            if (err)
                console.log(err)
            else
                console.log(data)
        })

enim is the keyword that we are looking for. for the moment, I will hardcode the keywords we are looking for, later we will retrieve keyword values from user input.
function(err, data) in this callback function we have two parameters are err and data. err contains errors and data contains search results. to see the results I will do console.log (), you can see the result as shown below:

ezgif.com-video-to-gif (1).gif

Using algolia on the frontend

We have set up and tested our search system, now we will use it on our frontend. I will make an input that will be used to enter keywords in our search system.

Add Input text to search

Example:

<input type="text" name="" placeholder="search.." id="searchBox">
    <ul id="resultBox">
    </ul>

I made a <input/> with id = "searchBox" which we will initialize in javascript and and I will display data in the form of <list>, so I will create a <ul> to display the list. I give id = "resultBox" so that later we can initialize in javascript.

Connecting inputs with javascript

as we discussed above we will initialize the <input> and <ul> in javascript. then we will use addEventListener() to monitor what event is being done in the searchBox input.

Example:

<script type="text/javascript">
    var client = algoliasearch('PACBZRD3Z1','ab4b2b226200fec5d58aa85e25b1032d')
    var index  = client.initIndex('tutor_utopian')
    //initialize input and Ul
    resultBox = document.getElementById('resultBox')
    searchBox = document.getElementById('searchBox')
    //add event listener
    searchBox.addEventListener('keydown',search)
    searchBox.addEventListener('change',search)
    //create function search()
    function search(){
        query = searchBox.value
        index.search(query, function(err, data){
            if (err)
                console.log(err)
            else
                console.log(data)
        })  
    }
</script>

We will listen to any events that are running, there are many events that we can use, but in this tutorial I will only add two events, namely keydown and change.
We can use the javascript function that is addEventListener() to listen to what event is running. This function has two parameters , the first is event name and the second is the function that we call searchBox.addEventListener('nameOfevent',functionName).
We can create a function search() that will search on our application, if I previously wrote the keywords in hardcode, then this time I will write them based on the text we input on the frontend.

ezgif.com-video-to-gif.gif

Displaying search results on the frontend

We have succeeded in getting the result of the search, but we have not shown it on the frontend because we are still doing console.log() on the data. the following is the code:

Example:

function search(){
            query = searchBox.value
            index.search(query, function(err, data){
                if (err)
                    console.log(err)
                else
                    resultBox.innerHTML = ''
                for (var i=0; i < data.hits.length; i++) {
                    var li = document.createElement('li')
                    li.innerText = data.hits[i].description
                    resultBox.appendChild(li)
                }
            })  
        }

In the previous section we have initialized <ul> as resultBox. We must remove the contents of <ul id="searchBox"> with resultBox.innerHTML = ' '
then we will repeat with reference from the data, We can create a new element <list> with document.createElement ('li').
li.innerText = data.hits[i].descriptionto fill the text on the <li> element we created.
resultBox.appendChild(li)then append list on ul <ul id = "resultBox">.

when finished we can see the results as shown below, we will get the results in the form of a list based on the keywords we are looking for.

ezgif.com-video-to-gif (1).gif

We have successfully created a search system with algolia, this is the first tutorial of my series tutorial on search systems, I will discuss more deeply and make better features in the next section, thank you hopefully useful for you.

Proof of work done

https://github.com/milleaduski/searchSytemAlgolia

#tutorials #javascript #algolia #web

6 years ago in #utopian-io by duski.harahap (68)

$53.06

Sort:

Trending

[-]

portugalcoin (72) 6 years ago

Thank you for your contribution.

Put some comments on your code, plus the explanation you've already made.

Very interesting tutorial. Thank you for your good work.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]