angular search experience

Experiencia de búsqueda angular

Desarrollado por

Descargo de responsabilidad

Esta aplicación de referencia utiliza la biblioteca de búsqueda de bajo nivel de Algolia. Si está creando una aplicación similar, utilice la biblioteca oficial de Angular InstaSearch.

Configurando el proyecto

Clonando los archivos fuente

Para descargar (clonar) este proyecto en su máquina, necesita tener instalado git . Lea más sobre cómo instalar Git en su sistema.

Una vez instalado, abra un terminal y clone este repositorio usando el siguiente comando:

 > git clone https://github.com/manekinekko/angular-search-experience.git

Instalando las dependencias

Necesitará npm install para instalar las dependencias de este proyecto. A continuación, utilizando su terminal, deberá cambiar el directorio a la carpeta donde previamente clonó este proyecto; de forma predeterminada (si copió la línea de comando desde arriba), esto sería angular-search-experience :

 > cd angular-search-experience
> npm install

Servidor de desarrollo

Hemos decidido proteger la función de nube (esta es una buena práctica). Entonces, para solicitar la API search , deberá agregar un encabezado Authorization a sus solicitudes. Aquí está el encabezado requerido Authorization: SearchToken this-is-a-fake-token . Vea un ejemplo del comando cURL a continuación.

Antes de iniciar el servidor, deberá agregar un par de variables de entorno dentro de un archivo .env, en la carpeta /functions . Puede utilizar este archivo de plantilla env como ejemplo (cámbiele el nombre a .env, que se ignora en git) y configure:

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

Puede encontrar la identificación de su aplicación y su clave API en https://www.algolia.com/apps en la sección Claves API. Debe crear una cuenta para obtener su clave API.

Opción 1 (recomendada): Express

Para probar el servidor en su máquina local, ejecute el siguiente comando: npm run start:backend

Opción 2 (avanzada): el backend (función de nube)

Esta opción requiere que haya iniciado sesión en su cuenta de Firebase y tenga acceso a este proyecto (en Firebase). ¡Solo los cuidadores tienen acceso al proyecto Firebase!

Otra versión del backend se basa en una arquitectura sin servidor implementada mediante Cloud Functions para Firebase.

Este proyecto viene con firebase-tools como dependencia local. Esta herramienta es un conjunto de herramientas de interfaz de línea de comandos (CLI) de Firebase que pueden generar, ejecutar e implementar un proyecto de Firebase. Tenga en cuenta que esta dependencia generalmente se instala globalmente.

Además, el tiempo de ejecución de Firebase utiliza una versión anterior de Node.js: v6.11.5 . Hemos incluido una carpeta .nvmrc en /functions . Este archivo especial es un archivo de configuración utilizado por NVM para cambiar fácilmente a una versión requerida de Node.js dentro de una carpeta específica. Si aún no tiene NVM instalado, lea la guía de instalación.

Use NVM para instalar la versión requerida de Node.js y luego úsela (solo dentro de la carpeta /functions ):

 > nvm install 6.11.5
> nvm use

Ahora que está utilizando Node.js v6.11.5 , está listo para ejecutar (es decir, emular) la función search en la nube localmente. Para eso, ejecute npm run start:backend:firebase . Este comando hará dos cosas:

1. Cambie el directorio a la carpeta /functions (que se encuentra en la raíz del proyecto). Esta carpeta contiene todo el código backend.
2. Sirve la función search en la nube localmente en http://localhost:5000/angular-search-experience/us-central1/search

Importante: tenga en cuenta que la función search implementa solo los métodos POST y DELETE HTTP, lo que le permite agregar y eliminar una entidad, por lo que necesitará un cliente HTTP, como cURL o Postman , para poder solicitar la función de nube.

la aplicación frontal

En la raíz del proyecto, ejecute npm start para iniciar el servidor de desarrollo front-end. Navegue hasta http://localhost:4200/ . La aplicación se recargará automáticamente si cambia alguno de los archivos fuente.

La aplicación front-end se generó con Angular CLI versión 6.1.2.

Construir

Ejecute npm run build para construir el proyecto. Los artefactos de compilación se almacenarán en el directorio dist/angular-search-experience/ . Utilice el script npm run build:prod para una compilación de producción.

Desplegar

Usamos alojamiento Firebase para publicar la aplicación front-end. Antes de implementar una nueva versión, necesitamos crear un paquete de producción usando el siguiente comando:

 > npm run build

Luego, podemos implementar la nueva compilación en Firebase:

 > npm run deploy

IMPORTANTE: la implementación en Firebase requiere privilegios de acceso (al proyecto de Firebase).

Entornos de producción

backend

Los endpoints de producción (función nube) están disponibles en:

1. ENVIAR: /api/1/apps
2. ELIMINAR: /api/1/apps/:id

Para solicitar la función de nube de producción, puede utilizar estos comandos cURL:

Agregar una nueva entrada al índice de Algolia

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -H "Content-Type: application/json" -X POST -d '{}' https://example.com/api/1/apps

{"createdAt":"2018-04-19T13:17:10.343Z","taskID":29343382,"objectID":"10788302"}

NOTA: no validamos el objeto application a propósito.

Eliminar una entrada del índice de Algolia

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -X DELETE https://example.com/api/1/apps/10788302

{"deletedAt":"2018-04-19T13:30:42.190Z","taskID":29353102,"objectID":"10788302"}

Interfaz

Arquitectura y características disponibles (UI)

Arquitectura de componentes

1. Componente: <app-search></app-search>
2. Componente: <app-search-input></app-search-input>
3. Componente: <app-category></app-category>
4. Componente: <app-search-result></app-search-result>
5. Componente: <mat-nav-list></mat-nav-list>
6. Directiva: [appRating]
7. Tubería: freePriceLabel

Lea más sobre la documentación de la API aquí: https://manekinekko.github.io/angular-search-experience/index.html

Características

Cuadro de búsqueda

Resultados de búsqueda con aspectos destacados

Opciones de clasificación

Opciones de facetas

Carga diferida

Enlaces profundos

ZONA DE PELIGRO: ¡HUEVO DE PASCUA POR ADELANTE!

¡¡Huevo de Pascua adentro!!

Hemos incluido un chatbot en esta aplicación. Puede ayudarle a buscar aplicaciones usando su voz. Solo pídele que te ayude a buscar una aplicación meteorológica o encontrar un juego .

Para habilitar el bot, deberá encender el micrófono y los parlantes. Luego, simplemente haga clic 6 veces en el logotipo de la aplicación (el encabezado).

NOTA: La implementación de este bot es experimental (¡y por diversión!) y no fue entrenada contra un gran conjunto de expresiones de los usuarios.

Problemas conocidos

Módulo incompatible encontrado

error [email protected]: El "nodo" del motor es incompatible con este módulo. Versión esperada "~8.0".

 yarn install v1.5.1
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~8.0".
error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Solución alternativa:

• Ejecute nvm use 8.0 dentro de la carpeta /functions .
• Ejecute npm install .
• Ejecute cd .. luego npm run start:backend .