spanner fts demo

スパナフルテキスト検索デモ

概要

spanner-search-demoユーザーがテキスト検索を実行して結果を表示できるWebアプリケーションです。アプリケーションは、フロントエンドのVue.jsを使用して構築され、バックエンドに移動します。このアプリケーションは、Cloud Spannerのフルテキスト検索機能を紹介するように設計されています。

前提条件

• node.js（バージョン20以降の推奨）
• Golang（バージョン1.23.0）
• Cloud Spannerを使用したGoogle Cloud Projectが有効になっています
• SPANERSにアクセスする権限を備えたサービスアカウント（https://cloud.google.com/iam/docs/creating-managing-service-accountsを参照）

プロジェクトのセットアップ

依存関係をインストールします

必要な依存関係をインストールするには、実行します。

npm install

開発用のコンパイルとホットレロード

ホットレロードで開発サーバーを起動するには、実行してください。

npm run serve

Webアプリケーションに次の方法でアクセスできます。

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

生産のためにコンパイルして模倣します

生産のためのプロジェクトを構築するには、実行してください。

npm run build

バックエンドのセットアップ

依存関係をインストールします

インストールしていることを確認してください。次に、実行して必要なGO依存関係をインストールします。

go mod tidy

サンプルデータをCloud Spannerにインポートします

Spannerインスタンス、データベース、テーブルを作成します。

 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);;

全文検索のインデックスを作成します

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

アメリカ全土のサンプルデータファーストフードレストランを使用し、クラウドスパナにインポートして、フルテキスト検索機能を実証します。 import.goを編集して、Spannerの設定を構成します。

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

バックエンドサーバーを実行します

バックエンドサーバーを起動するには、 main.goを編集してSpannerの設定を構成し、次のコマンドを実行します。

go run main.go

フロントエンドのセットアップ

アプリケーションを使用します

検索の実行

1. Webブラウザでアプリケーションを開きます。
2. 検索バーに検索クエリを入力します。
3. [検索]ボタンをクリックして検索を実行します。

検索結果の表示

検索結果は検索バーの下に表示されます。各結果には、国、都市、名前、住所、ウェブサイト、カテゴリなどの詳細が含まれます。

デバッグ

実行されたクエリを印刷します

アプリケーションは、デバッグ目的で実行されたSQLクエリをコンソールに印刷します。これは、クエリの正しさを確認するのに役立ちます。

検索結果を印刷します

アプリケーションは、各検索結果をコンソールに印刷します。これは、検索結果の正しさを確認するのに役立ちます。

ディレクトリ構造

 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

追加情報

Tailwind CSS

このプロジェクトでは、スタイリングにTailwind CSSを使用しています。 Tailwind CSS構成がtailwind.config.jsおよびpostcss.config.jsで正しくセットアップされていることを確認してください。

Vue構成

VUE構成は、開発サーバーポートおよびその他の設定を設定するVue.config.jsで定義されています。