TODOサンプル

このサンプルアプリは、シンプルなTODO管理ツールです。作業状況をステータスで表示できます。

TODOサンプル

デモを実行する#

※ 登録した内容は、予告なく消去する場合があります。

管理画面で操作する#

TODOサンプル_管理画面

ソースコード#

TODOサンプルをオープンソースソフトウェアとして提供しています。

事前準備#

  • node.js
  • npm

ローカルでの実行#

Vue サンプルの準備#

Github からサンプルコードを取得する

git clone git@github.com:b-eee/hexa-vue-example1.git

実行に必要なパッケージの取得

npm install

アプリケーションの実行#

npm run serve

ログインする#

  • ブラウザで、Network: http://192.168.1.8:8080/ にアクセスする
  • デモ環境に接続する >> デモ用のIDとパスワードでログインする
  • 自分のワークスペースに接続する >> 自分のIDとパスワードでログインする

設定ファイル#

アプリケーションの動作に必要な設定は、利用するバックエンドにあわせて修正してください。 設定ファイルは、以下の通りです。

  • .env
  • src/constants/datastore.js

.env#

意味説明
VUE_APP_HEXACLOUD_URLhexabase API の URLhexabase API の URL:バックエンド実行環境の「 https://xxx.hexabase.com 」に対して「 https://xxx-api.hexabase.com 」となります
VUE_APP_HEXACLOUD_PATHhexabase API の URL 以降の固定パス
VUE_APP_APPLICATION_IDhexabase アプリケーションの IDワークスペースに複数のアプリケーションがある場合に設定します。application_id の display_id を指定します
VUE_APP_DATASTORE_IDhexabase データベースの IDアプリケーションに複数のデータベースがある場合に設定します。datastore_id の display_id を指定します

src/constants/datastore.js#

意味説明
DATASTORE_TITLEサンプルアプリケーションで表示するデータベースのタイトルフロントエンドアプリケーションに合わせて設定します
FIELDSデータベースの画面項目 IDHexabase の設定に応じて変更できます
OPTIONS.CATEGORY選択肢の値と IDHexabase の設定に応じて変更できます
STATUS_ACTIONSステータスとステータスアクションの ID と名前Hexabase の設定に応じて変更できます

利用上の注意#

TODOサンプルのフロントエンドアプリを利用する場合は、管理画面で、TODOサンプルを含んだワークスペースを選択した状態にしておいてください。

TODOサンプルのフロントエンドアプリは、ワークスペースを選択する機能を持っていません。そのため、複数のワークスペースを持つアカウントで利用する場合、管理画面で、TODOサンプルを含んだワークスペースを選択していないと、タスク一覧が表示されません。

開発する場合、process.env を使わないでください。あなたのアプリケーションをデプロイするときに問題になる場合があります。フロントエンドアプリケーションの実行環境などを切り替えたい場合は、process.env 以外を使ってください。たとえば、Nuxt.jsの場合 nuxt.config.js が利用できます。

関連ページ#

  1. 基本的な設定を確認する
  2. 基本的な設定を変えてみる
  3. カテゴリの選択肢を追加する
  4. デザインを変えてみる
  5. ステータスを追加してみる
  6. フィールドを追加してみる
  7. 検索機能を追加してみる