OASIS Map - ウェルビーイングを実現するための、地域の協調的幸福度の可視化プラットフォーム

目次

• OASIS Map - ウェルビーイングを実現するための、地域の協調的幸福度の可視化プラットフォーム
  • 目次
  • 本プロジェクトについて
  • OASIS Mapの始め方 クイックスタート
    • 概要
    • インストール方法
    • 基本的な使い方
      • 自治体管理者向け
      • 利用者向け
      • アプリケーション停止方法
  • 利用バージョン
  • ライセンス

本プロジェクトについて

基盤ソフトウェア「FIWARE (ファイウェア)」を用いて、地域の協調的幸福度を可視化するプラットフォーム

OASIS Mapの始め方 クイックスタート

概要

• docker composeで提供しております
• docker compose 2.21.0, docker 24.0.7 をインストール済みの Ubuntu 22.04.3 上で動作確認しております
• またインストールの中で curl を使用しております
• 対応ブラウザ
  • Chrome
  • Safari

インストール方法

1. git clone

   git clone [email protected]:c-3lab/oasismap.git

2. 作業ディレクトリに移動

   cd oasismap

3. MongoDBとPostgreSQLのユーザー、パスワードおよび地図の初期パラメータ値(緯度、経度、ズーム値)、KeyCloakの設定を.envに設定

   ~/oasismap$ cp _env .env
   ~/oasismap$ vi .env

   ※以下の環境変数は後ほど設定

   • KC_HOSTNAME_URL
   • KC_HOSTNAME_ADMIN_URL
   • KEYCLOAK_CLIENT_ISSUER
   • GENERAL_USER_KEYCLOAK_CLIENT_SECRET
   • ADMIN_KEYCLOAK_CLIENT_SECRET

4. ngrokのアカウントを登録する
   https://ngrok.com/

5. 手順に従いngrokをインストールする
   https://ngrok.com/docs/getting-started/

6. ngrok起動

   ~/oasismap$ ngrok http 8080

   Try the new Traffic Inspector dev preview: https://ngrok.com/r/ti                                   
                                                                                                       
   Session Status                online                                                                
   Account                       アカウント名 (Plan: Free)                                            
   Version                       3.6.0                                                                 
   Region                        Japan (jp)                                                            
   Latency                       5ms                                                                   
   Web Interface                 http://127.0.0.1:4040                                                 
   Forwarding                    https://xxxx-xxx-xxx-x-xx.ngrok-free.app -> http://localhost:8080     
                                                                                                       
   Connections                   ttl     opn     rt1     rt5     p50     p90                           
                                 1224    0       0.00    0.01    0.06    6.29                          
                                                                                                       
   HTTP Requests                                                                                       

7. Forwarding から https:// で始まるURLを取得する

8. 環境変数 KC_HOSTNAME_URL KC_HOSTNAME_ADMIN_URL KEYCLOAK_CLIENT_ISSUER に上記のURLを設定する

   KC_HOSTNAME_URL=https://xxxx-xxx-xxx-x-xx.ngrok-free.app
   KC_HOSTNAME_ADMIN_URL=https://xxxx-xxx-xxx-x-xx.ngrok-free.app
   KEYCLOAK_CLIENT_ISSUER=https://xxxx-xxx-xxx-x-xx.ngrok-free.app/realms/oasismap

9. Dockerコンテナを展開

   ~/oasismap$ docker compose up -d

位置情報の利用について

OASIS Mapでは現在の位置情報を利用します。
但し http で動作させた場合は実際の位置情報ではなく、仮の位置情報が使われます。
実際の位置情報を利用する場合は、Keycloakの他にOASIS Map本体も https で動作させる必要があります。
手順は 現在位置情報を利用した動作確認手順 を確認してください。

仮の位置情報で問題ない場合は本手順はスキップしてください。

Google Cloud 事前準備

1. Google Cloudに接続
2. プロジェクトを選択 から新しいプロジェクトを作成
3. 認証情報を作成 を選択して OAuth クライアント ID を作成
4. アプリケーションの種類に ウェブアプリケーション を選択して作成
5. クライアントID、シークレットを keycloak/variables.json の GoogleClientID GoogleClientSecret に転記

Keycloak 自動設定

1. keycloakディレクトリに移動

   cd keycloak

2. formatting-variables.sh を実行して都道府県名/市区町村名の情報を variables.json に設定

   ~/keycloak$ bash formatting-variables.sh cities.json

3. 自動設定スクリプトで利用する環境変数を設定

   ~/keycloak$ export KEYCLOAK_ADMIN={.envで指定した管理者ユーザー名}
   ~/keycloak$ export KEYCLOAK_ADMIN_PASSWORD={.envで指定した管理者ユーザーのパスワード}

4. keycloakディレクトリのパスを取得

   ~/keycloak$ pwd

5. 以下のコマンドを実行
   ※ 4で取得したkeycloakディレクトリのパスに書き換えて実行すること

   ~/keycloak$ docker run --network oasismap_backend-network --volume {keycloakディレクトリのパス}:/etc/newman/keycloak \
   postman/newman:latest run --bail --environment /etc/newman/keycloak/variables.json \
   --env-var "KeycloakAdminUser=$KEYCLOAK_ADMIN" \
   --env-var "KeycloakAdminPassword=$KEYCLOAK_ADMIN_PASSWORD" \
   /etc/newman/keycloak/postman-collection.json

環境変数の準備と追加

1. ブラウザから http://Dockerホスト名:8080でアクセスします。
2. 「Administration Console」をクリック
3. 環境変数 KEYCLOAK_ADMIN KEYCLOAK_ADMIN_PASSWORD に指定した認証情報でログイン

Google CloudにリダイレクトURIを設定

1. realm から oasismap を選択
2. 左のメニューバーから Identity providers を選択
3. google をクリック
4. Redirect URI の値をコピーして控えておく
5. Google Cloudに接続
6. 事前準備にて作成した認証情報を選択
7. 承認済みのリダイレクトURI に控えておいた Redirect URI を転記して保存

利用者向けクライアントシークレットの設定

1. realm から oasismap を選択
2. 左のメニューバーから client をクリック
3. general-user-client をクリック
4. Credentials をクリック
5. Client Secret の値を環境変数 GENERAL_USER_KEYCLOAK_CLIENT_SECRET に転記

自治体管理者向けクライアントシークレットの設定

1. realm に oasismap を選択
2. 左のメニューバーから client をクリック
3. admin-client をクリック
4. Credentials をクリック
5. Client Secret の値を環境変数 ADMIN_KEYCLOAK_CLIENT_SECRET に転記

コンテナを再起動して環境変数を反映させる

~/oasismap$ docker compose up -d frontend

orionにサブスクリプション設定を行う

1. バックエンドのコンテナにはいる

   docker compose -f docker-compose-dev.yml exec backend bash

2. 以下コマンドを実行してorionにサブスクリプションの設定を行う

   root@backend:/app/backend$ curl -iX POST \
     --url 'http://orion:1026/v2/subscriptions' \
     --header 'content-type: application/json' \
     --header 'Fiware-Service: Government' \
     --header 'Fiware-ServicePath: /Happiness' \
     --data '{
     "description": "Notice of entities change",
     "subject": {
       "entities": [
         {
           "idPattern": ".*",
           "type": "happiness"
         }
       ],
       "condition": {
         "attrs": []
       }
     },
     "notification": {
       "http": {
         "url": "http://cygnus:5055/notify"
       }
     }
   }'

基本的な使い方

自治体管理者向け

自治体管理者アカウントの準備

1. ブラウザから http://Dockerホスト名:8080 でアクセスします
2. 「Administration Console」をクリック
3. 環境変数 KEYCLOAK_ADMIN KEYCLOAK_ADMIN_PASSWORD に指定した認証情報でログイン
4. realm から oasismap を選択
5. 左のメニューバーから Users を選択
6. Add User を選択
7. Username,profile.attribute.nickname を入力して Create を選択
   ※ Username と profile.attribute.nickname は同じ値を入れてください
8. Credentials を選択して Set password からパスワードを入力してください
9. パスワード入力後, Temporary のチェックを外して Save
10. Save password から保存

自治体管理者機能の使い方

1. ブラウザから http://Dockerホスト名:3000/admin/login でアクセスします
   

2. 自治体管理者用アカウントでログインします
   

3. 右端のハンバーガーメニューの データエクスポート から幸福度情報をダウンロードできます
   

利用者向け

ログイン

1. ブラウザから http://Dockerホスト名:3000 でアクセスします
   

2. Googleアカウントを用いてログイン
   

3. ユーザー情報の入力
   ※重複するニックネームは登録できません
   

幸福度の入力

1. 画面下の 幸福度の入力 をクリックします
   

2. 任意の項目にチェックを入れて 幸福度を送信 をクリックします
   

利用者幸福度の表示

1. 右端のハンバーガーメニューをクリックします
   

2. 一覧から 利用者の幸福度 をクリックします
   

3. 利用者の幸福度 が地図上とグラフに表示されます
   

全体幸福度の表示

1. 右端のハンバーガーメニューをクリックします
   

2. 一覧から 全体の幸福度 をクリックします
   

3. 全体の幸福度 が地図上とグラフに表示されます
   

アプリケーション停止方法

• コンテナを停止

  ~/oasismap$ docker compose down

利用バージョン

• next 14.1.0
• nest 10.0.0
• react 18系
• typescript 5系
• eslint 8系
• prettier 3系
• jest 29.5.0
• Postgresql 16.1
• FIWARE Cygnus 3.5.0
• FIWARE Orion 3.11.0
• mongoDB 6.0.14
• node 20.10.0

ライセンス

• AGPL-3.0