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
ID	id	int
イベントID	eventid	int -> event.id
ユーザーID	userid	int -> user.id
コメント	comment	string
投稿日時	postedAt	datetime

とりあえずこんな感じかな。

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

ここまででAmplifyが使用可能になった。

Amplify続き

2021-12-05

昨日のチュートリアルでかかった費用、0.03ドルくらい。

Amplify Tutorialやってみた

2021-12-04

Getting started - Vue - AWS Amplify Docsをやってみた。

GitHubにリポジトリ作って、Codespaceで開いて。

小一時間で認証付きのToDoアプリができた。

意外と待ち時間が長かったのは、最初だけなのかCodespaceの力不足なのか。たぶんCloudFormationの実行待ち時間な気がするから、最初だけだと思っておく。

アーキテクチャはこれで全部賄える気がしてきたので、Amplifyで行けるとこまでやってみようと思う。 Firebaseなら無料なところが、AWSのお試し期間過ぎてるから課金されそうなのが気になるけど、、

Amplify使ってみる

2021-12-03

昨日は使うツールなどを考えた。

AWSのAmplifyを使う予定でいたら、なんかすごいのが発表されてた。［速報］AWS、ローコードでWebのフロントエンドを開発できる「AWS Amplify Studio」発表。バックエンド管理機能も統合。AWS re:Invent 2021 － Publickey

生成されるコードはReactらしい。今回はVue.jsを触ってみる目的もあるので、Amplify Studioはまた今度。

AWS Amplify（アプリケーションの構築とデプロイ）| AWS これ見ると、必要そうな機能は用意されてる気がする。

3 4