IDの指定ができるようになったので、それをキーに更新ができるようにする。 ここはそれほど悩むことなく実装できた。

イベント作成と一覧が確認できたので、個別表示と編集のためのパラメータを渡す方法を調べる。 参考： API (GraphQL) - Create, update, delete data - JavaScript - AWS Amplify Docs API.graphql の戻り値を見ればよさそうだけど、長いIDだ、、 まあとりあえずはこれで。 router.js にパラメータ追加して、props: trueも設定。 props設定が抜けていて、“Variabl Read more

昨日、CORSのエラーで躓いていたものの解決ができず。 チュートリアルでやったときも出てたのか、出てなかったのか今となっては確認が面倒。。 問題の切り分けをするため、hostingに上げてみる。 $ amplify add hosting ? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) ? Choose a type Manual deployment $ amplify publish エラーは出ない。やっぱりCodespacesで実 Read more

データの格納先ができたので、画面からデータ登録できるようにしてみる。 参考： Tutorial - Connect API and database to the app - Vue - AWS Amplify Docs Codespacesでnpm run serveで実行してアクセスすると、ブラウザのコンソールにInvalid Host/Origin headerが出ている。 package.json を修正して回避。codespaces前提だけど。 "serve": "vue-cli-service serve --public ${CODESPACE_NAME}.githubpreview.dev", 参考： AWS Read more

データ構造を考えたので、それをスキーマ情報に落としていく。 の前にamplifyコマンド $ amplify add api ? Select from one of the below mentioned services: GraphQL ? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue ? Choose a schema template: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) ⚠️ WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules GraphQL schema compiled successfully. Edit your schema at /workspaces/eventsite/amplify/backend/api/eventsite/schema.graphql or place Read more

各画面で必要な項目からデータ構造を作る。 event 項目名 name type ID id int イベント名 title string 開催日時 start timestamp 開催場所 place string 公開期間From open datetime 公開期間To close datetime 作成者 author int -> user.id user 項目名 name type ID id int ユーザー名 username string eventUser 項目名 name type ID id int イベントID eventid int -> event.id ユーザーID userid int -> user.id upload 項目名 name type ID id int イベントID eventid int -> event.id 資料URL url string comment 項目名 name type Read more

https://docs.amplify.aws/start/getting-started/auth/q/integration/vue/#authentication-with-amplify この手順 amplify add auth amplify push ログイン情報を保存するために、storeを使用する 参考： 【AWS Amplify × Vue.js 簡単サーバーレスアプリ構築チュートリアル】③ Authでユーザー登録、ログイン機能実装編 - Qiita npm install vuex@4 次はデータの読み書き

各画面のファイルができたので、必要な項目を並べていく作業。 uiflow作ったときにおおむね書いておいたので、それをタグに落としていく。 一通り書いて、ボタンで画面遷移もするようにできた。 次はログイン機能をつける（チュートリアルでやったやつ）。

参考にしたページ Vue.js 3 入門 「ルーティング」（Vue Router） - Qiita このままだと動かなかったので、vue-routerをバージョンアップ。最初インストールしたときはバージョン指定しなかったせいか3系が入っていた。 npm install vue-router@4 これで画面が表示されるようになった。

昨日洗い出した画面をとりあえず書いてみる。 画面遷移にvue-routerを使うので、インストールしておく。 npm install vue-router 各画面は、src/views/に置く。 $ ls -1 src/views/ CancelConfirm.vue EntryConfirm.vue EventCreate.vue EventDetail.vue EventEdit.vue EventSearch.vue Login.vue MyPage.vue Top.vue ファイル作るところまでで今日は時間切れ。。