Usando Algolia InstantSearch.js com Angular 4

Normalmente não sou muito blogueiro ou orientado para a comunidade, mas acabei de fazer um blog sobre minha experiência com o Angular 4 e o Algolia InstantSearch.js.

Eu estava desenvolvendo um projeto que precisava de um serviço de busca otimizado, quando descobri o Algolia Search por meio de um amigo meu. Eu queria usá-lo, mas infundi-lo em meu projeto foi difícil porque não consegui encontrar nenhum tutorial, como este que você está lendo, que pudesse me ajudar a aprender Algolia e Angular 4.

Chega de introdução – vamos direto infundir o Algolia InstantSearch.js com Angular 4!

Primeiro, temos que instalar o Angular CLI para nosso projeto:

npm install @angular/cli@latest --save 

Após inserir o código acima em nossa linha de comando, criaremos um novo projeto.

ng new alsearch
cd alsearch
ng serve 

Navegue para http: // localhost: 4200 / . O aplicativo será recarregado automaticamente se você alterar qualquer um dos arquivos de origem.

Você pode configurar o host e a porta HTTP padrão usados ​​pelo servidor de desenvolvimento com duas opções de linha de comando:

ng serve --host 0.0.0.0 --port 4201

Depois de brincar com a linha de comando, você pode voltar ao seu projeto e vincular o Algolia InstantSearch.js ao seu projeto Angular 4 inserindo o código abaixo em seu arquivo de ambiente.

Environment.ts está localizado na pasta de ambiente, que está localizada na pasta src /src/environments/environment.ts.

 export const environment = {
 production: false,
 algolia: {
  appId: 'APP_ID',
  apiKey: 'SEARCH_ONLY_KEY',
  indexName: 'getstarted_actors',
  urlSync: false
 }
}; 

Depois de fazer isso, precisamos instalar o pacote instantsearch.js para que possamos usar os diferentes pacotes do Angolia Search.

npm install instantsearch.js --save

Se você quiser usar o CSS e os modelos do Algolia, adicione as seguintes linhas ao cabeçalho do arquivo index.html.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0/dist/instantsearch.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.0.0/dist/instantsearch-theme-algolia.min.css"> 

Componente de pesquisa
Nosso recurso de pesquisa inteiro estará agrupado no search.component.ts, que você pode gerar com a pesquisa de componente ng g. Durante o ngOnInit, você configura o InstantSearch com suas variáveis ​​de ambiente e chama .start () para inicializá-lo. Use declare var instantsearch: any para limpar alguns erros que podem ser encontrados ao usar InstantSearch.

 import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js';
declare var instantsearch: any;
@Component({
 selector: 'search',
 templateUrl: './search.component.html',
 styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
 search: any;
 constructor() { }
 ngOnInit() {
  const options = environment.algolia;
  this.search = instantsearch(options);
  this.search.start();
 }
} 

Você pode construir a interface de pesquisa do Algolia adicionando widgets a ela. Vamos começar adicionando um campo de pesquisa e os resultados (acessos) ao nosso componente.

this.search.addWidget(
 instantsearch.widgets.searchBox({
  container: '#search-box'
 })
);
// initialize hits widget
this.search.addWidget(
 instantsearch.widgets.hits({
  container: '#hits',
 })
); 

HTML de pesquisa
No modelo, você pode identificar os elementos que deseja substituir pelos widgets.

<div id="search-box">
 <!-- SearchBox widget will appear here -->
</div>
<div id="hits">
 <!-- Hits widget will appear here -->
</div> 

Para usar um modelo personalizado para os resultados mostrados em vez do texto simples padrão, você pode usar o código abaixo.

Você também pode adicionar modelos a certos widgets com Mustache e interpolar dados com chaves duplas. No widget de ocorrências, exibo o nome e a imagem do ator em vez do JSON bruto.

 this.search.addWidget(
 instantsearch.widgets.hits({
  container: '#hits',
  templates: {
   empty: 'No results',
   item: `<img src=https://image.tmdb.org/t/p/w300{{image_path}} width="50px">
   Result {{objectID}}:
    {{{_highlightResult.name.value}}}`
  },
  escapeHits: true
 })
); 

Código Completo

//search.component.ts
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import * as instantsearch from 'instantsearch.js';
declare var instantsearch: any;
@Component({
 selector: 'search',
 templateUrl: './search.component.html',
 styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
 search: any;
 constructor() { }
 ngOnInit() {
  const options = environment.algolia;
  this.search = instantsearch(options);
  this.search.addWidget(
   instantsearch.widgets.searchBox({
    container: '#search-box'
   })
  );
// initialize custom hits widget
 this.search.addWidget(
  instantsearch.widgets.hits({
   container: '#hits',
   templates: {
    empty: 'No results',
    item: `<img src=https://image.tmdb.org/t/p/w300{{image_path}} width="50px">
    result {{objectID}}:
     {{{_highlightResult.name.value}}}`
    },
    escapeHits: true
   })
 );
 this.search.start();
 }
}

 //search.component.html
<div id="search-box">
 <!-- SearchBox widget will appear here -->
</div>
<div id="hits">
 <!-- Hits widget will appear here -->
</div>

Se você tiver alguma dúvida, deixe um comentário abaixo!