spanner fts demo

Spanner Full Text Search Demo

Aperçu

spanner-search-demo est une application Web qui permet aux utilisateurs d'effectuer des recherches de texte et d'afficher les résultats. L'application est construite à l'aide de Vue.js pour le frontend et optez pour le backend. Cette application est conçue pour présenter les capacités de recherche en texte intégral de Cloud Spanner.

Condition préalable

• Node.js (version 20 ou ultérieure recommande)
• Golang (version 1.23.0)
• Google Cloud Project avec Cloud Spanner activé
• Compte de service avec des autorisations pour accéder à Spanner (voir https://cloud.google.com/iam/docs/creating-managing-service-accouts)

Configuration du projet

Installer des dépendances

Pour installer les dépendances nécessaires, exécutez:

npm install

Compiles et recharges à chaud pour le développement

Pour démarrer le serveur de développement avec le chargement à chaud, exécutez:

npm run serve

L'application Web est ensuite accessible de la manière suivante:

  App running at:
  - Local:   http://localhost:3000/
  - Network: http://192.168.0.192:3000/

Compiles et minifie pour la production

Pour construire le projet de production, exécutez:

npm run build

Configuration du backend

Installer les dépendances GO

Assurez-vous que vous avez installé. Ensuite, installez les dépendances GO nécessaires en fonctionnant:

go mod tidy

Importez des exemples de données sur Cloud Spanner

Créez une instance Spanner, une base de données et une table.

 CREATE TABLE Restaurants (
  id STRING(MAX) NOT NULL ,
  dateAdded TIMESTAMP OPTIONS (
    allow_commit_timestamp = true
  ),
  dateUpdated TIMESTAMP OPTIONS (
    allow_commit_timestamp = true
  ),
  address STRING(MAX),
  categories STRING(MAX),
  primaryCategories STRING(MAX),
  city STRING(MAX),
  country STRING(MAX),
  keys STRING(MAX),
  latitude FLOAT64,
  longitude FLOAT64,
  name STRING(MAX),
  postalCode STRING(MAX),
  province STRING(MAX),
  sourceURLs STRING(MAX),
  websites STRING(MAX),
  name_token TOKENLIST AS (tokenize_fulltext(name)) HIDDEN,
  categories_token TOKENLIST AS (tokenize_substring(categories)) HIDDEN,
  city_Tokens TOKENLIST AS (TOKENIZE_FULLTEXT(city)) HIDDEN,
) PRIMARY KEY (id);;

Créer l'index pour la recherche de texte intégral

CREATE SEARCH INDEX RestaurantsIndex ON Restaurants(name_token, categories_token);

Utilisez les exemples de restaurants de restauration rapide des données à travers l'Amérique et importez-les dans Cloud Spanner pour démontrer ses capacités de recherche en texte intégral. EDIT import.go pour configurer les paramètres de votre Spanner.

go run main.go -import -file=Datafiniti_Fast_Food_Restaurants_Jun19.csv

Exécutez le serveur backend

Pour démarrer le serveur backend, modifiez main.go pour configurer vos paramètres de Spanner, puis exécutez la commande suivante:

go run main.go

Configuration du frontend

En utilisant l'application

Effectuer une recherche

1. Ouvrez l'application dans votre navigateur Web.
2. Entrez votre requête de recherche dans la barre de recherche.
3. Cliquez sur le bouton "Rechercher" pour effectuer la recherche.

Affichage des résultats de recherche

Les résultats de la recherche seront affichés sous la barre de recherche. Chaque résultat comprend des détails tels que le pays, la ville, le nom, l'adresse, les sites Web et les catégories.

Débogage

Imprimer la requête exécutée

L'application imprime la requête SQL exécutée à la console à des fins de débogage. Cela aide à vérifier l'exactitude de la requête.

Imprimer les résultats de la recherche

L'application imprime également chaque résultat de recherche sur la console. Cela aide à vérifier l'exactitude des résultats de recherche.

Structure de répertoire

 project-root/
├── main.go
├── importer/
│   ├── import.go
├── search/
│   ├── search.go
│   └── results.go
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   │   └── tailwind.css
│   ├── App.vue
│   └── main.js
├── babel.config.js
├── postcss.config.js
├── tailwind.config.js
├── package.json
├── README.md
└── vue.config.js

Informations Complémentaires

CSS du vent arrière

Le projet utilise CSS à vent arrière pour le style. Assurez-vous que la configuration CSS du vent arrière est correctement configurée dans tailwind.config.js et postcss.config.js.

Configuration Vue

La configuration Vue est définie dans Vue.config.js, qui définit le port de serveur de développement et d'autres paramètres.