AdventCalendar2021

データ構造を考える

2021-12-12

各画面で必要な項目からデータ構造を作る。 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

authを追加

2021-12-11

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 次はデータの読み書き

画面を作る

2021-12-10

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

画面モック作成続き

2021-12-09

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

画面モックを作る

2021-12-08

昨日洗い出した画面をとりあえず書いてみる。画面遷移に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 ファイル作るところまでで今日は時間切れ。。

画面遷移を考える

2021-12-07

初日にあげた機能をもとに、必要な画面とそれらの関連を考える。イベントページの作成と編集イベントの検索参加エントリー、キャンセルコメント投稿 UI Flow図で書いてみた。 https://github.com/umemak/eventsite/blob/main/doc/uiflow.txt とりあえずこんな感じかな。足りないところがあればその都度足していく方針で。

リポジトリを作って初期化する

2021-12-06

チュートリアルで雰囲気をつかんだので、実際に使うリポジトリを作って、必要なパッケージなどセットアップする。 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

3 4

umemak