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 ファイル作るところまでで今日は時間切れ。。
初日にあげた機能をもとに、必要な画面とそれらの関連を考える。 イベントページの作成と編集 イベントの検索 参加エントリー、キャンセル コメント投稿 UI Flow図で書いてみた。 https://github.com/umemak/eventsite/blob/main/doc/uiflow.txt とりあえずこんな感じかな。 足りないところがあればその都度足していく方針で。
チュートリアルで雰囲気をつかんだので、実際に使うリポジトリを作って、必要なパッケージなどセットアップする。 GitHub Codespacesでやっていく。 基本的には、デフォルトの選択肢で次々進めてOK。 npm install -g @aws-amplify/cli amplify configure npm install -g @vue/cli vue create . > vue3 を選択 npm install npm run serve --open ここまででvueの動作確認ができる。 amplify init npm install aws-amplify @aws-amplify/ui-components ここまででAm Read more
昨日のチュートリアルでかかった費用、0.03ドルくらい。
Getting started - Vue - AWS Amplify Docsをやってみた。 GitHubにリポジトリ作って、Codespaceで開いて。 小一時間で認証付きのToDoアプリができた。 意外と待ち時間が長かったのは、最初だけなのかCodespaceの力不足なのか。 たぶんCloudFormationの実行待ち時間な気がするから、最初だけだと思って Read more
昨日は使うツールなどを考えた。 AWSのAmplifyを使う予定でいたら、なんかすごいのが発表されてた。 ［速報］AWS、ローコードでWebのフロントエンドを開発できる「AWS Amplify Studio」発表。バックエンド管理機能も統合。AWS re:Invent 2021 － Publickey 生成されるコードはReactらしい。今回はVue.jsを触ってみ Read more