From 76f4d84d8a1e14236fca43e79e857f877cd5dc38 Mon Sep 17 00:00:00 2001 From: Kohei Watanabe Date: Mon, 7 Mar 2022 14:41:35 +0900 Subject: [PATCH] fix --- docs/README.md | 2 +- docs/create-vue-app.md | 20 +++++++++++++++----- frontend/src/App.vue | 2 +- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/docs/README.md b/docs/README.md index 16eee48..3f1c360 100644 --- a/docs/README.md +++ b/docs/README.md @@ -21,7 +21,7 @@ - [Hasura Cloud](https://cloud.hasura.io/) - すぐに利用可能なHasuraの環境 - [Heroku Postgres](https://jp.heroku.com/postgres) - すぐに利用可能なデータベース -- [CodeSandbox](https://codesandbox.io/) - フロントエンドのオンライン開発環境 +- [CodeSandbox](https://codesandbox.io/) (あるいは、[StackBlitz](https://stackblitz.com/)) - フロントエンドのオンライン開発環境 - [Vue 3](https://vuejs.org/) - プログレッシブWebフレームワーク - [Quill](https://quilljs.com/) - リッチテキストエディター diff --git a/docs/create-vue-app.md b/docs/create-vue-app.md index 4bde4ed..43f5f7f 100644 --- a/docs/create-vue-app.md +++ b/docs/create-vue-app.md @@ -1,18 +1,28 @@ # Vueアプリケーションの作成 -[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue) [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue) +[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue) いずれかのリンクにアクセスし、Vueアプリケーションを作成します。 -なお、URLに含まれる `memo-demo` は、Hasura Cloudプロジェクト名によって異なるので、適宜自分の作成したプロジェクトに合わせて読み替えてください。 - ```vue + {{#include ../frontend/src/App.vue}} ``` +ローカル環境で作成する場合は、CodeSandboxにアクセスし、左の[Files]パネルから[↓ (Export to Zip)]ボタンを押すと、ソースコード一式をダウンロードできます。ダウンロードしたZIPファイルを展開後、`npm install` コマンドなどで必要なパッケージを導入することで同様にVueアプリケーションを作成できます。 + +ソースコードの中には、HasuraのREST APIのエンドポイントURLが含まれます。そのURLに含まれるドメイン名の部分の `memo-demo` は、Hasura Cloudプロジェクト名です。プロジェクトによって異なるので、自分の作成したプロジェクトに合わせて書き換えましょう。 + +```js +// src/App.vue +{{#include ../frontend/src/App.vue:8:9}} +``` + +このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。 + +Hasuraを使用してPostgresデータベースに接続したREST APIを構築し、それを利用したWebアプリを作成できました 🎉 + Hasuraのコンソールにアクセスすると、実際にデータが更新されていることを確認できます。 ![](https://lh3.googleusercontent.com/twteosRUkmMlBoa8PXU3UXC9umek-TzQ1kwOWZIShW7fKvW_4tVtG7B3Ue-olldhxh05x1JTFtt_Oxn2nLxcDPEGBv32bkE2zjpqL7heEjV54jkDgYqOm1tEq02qvnKoqu5yaSKRZA=w800) - -Hasuraを使用してPostgresデータベースに接続したREST APIを構築し、それを利用したWebアプリを作成できました🎉 diff --git a/frontend/src/App.vue b/frontend/src/App.vue index b0a9dd8..e894b37 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -5,7 +5,7 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css"; import axios from "axios"; import debounce from "lodash.debounce"; -/* ここに作成したREST APIエンドポイントを指定します。 `memo-demo` の部分はHasura Cloudプロジェクト名です。 */ +// ここに作成したREST APIエンドポイントを指定します。 `memo-demo` の部分はHasura Cloudプロジェクト名です const endpoint = "https://memo-demo.hasura.app/api/rest/page/1"; export default {