作ったもの最近お金が減るのが早くなった気がしたので、家計簿をつけようと思い立ちました。アプリをダウンロードしてきてもよいのですが、せっかくなので自分で作ることにしました。タブレット、スマホ、パソコンのどれでも見れるようレスポンシブ対応を行ったのですが、タブレット(iPad)からみると以下の画像のようなものになっています。Gatewayを用いて作ったAPIを通して行います。LambdaのコードはPythonで書いています。簡単な図にすると、以下の画像のようになります。共通部分フロントエンドフロントはVue.jsを使って実装します。以下の画像の赤枠で囲った部分に表示するコンポーネントを切り替えます(URLの遷移はしないSPAとなります。この部分のソースコードは以下のようになっています。</body></html>サーバサイド基本的に私しか使わないので、アクセス元となるIPアドレスは限られます。そのため、特定のIPアドレス以外ははじくようにS3を設定します。こちらの記事を参考に設定しました。線グラフ特定期間の支出額の遷移を線グラフとして表示します。ソースコードは以下です。},})ここでは、親コンポーネントから受け取った値をもとにチャートの描画を行うのですが、このデータはAPIから非同期で取得するものであるため、watchプロパティで変化を監視しないと、うまく画面が切り替わりません。watch以外でも、computedプロパティでもうまくいくそうです。円グラフ特定期間の支出の種類を円グラフとして表示します。ソースコードは以下です。},})サーバサイドAWS上のAPIはRESTfulな構成としており、チャート描画処理ではGETメソッドを用いて情報を取得しています。以下がPythonによるソースコードです。"success"記入画面フロントエンドユーザの入力を受け付ける部分のソースコードは、以下のようになっています。}})サーバサイド新しくデータを加えるには、POSTメソッドを用います。以下がソースコードです。"success"取引一覧画面フロントエンドただ表にするだけでなく、列をクリックしたら、登録情報を変更できるよう「記入画面」へ遷移をするようにします。}})サーバサイドデータを削除するには、DELETEメソッドを用います。requestStockLike277@KMim文系出身社会人2年目です。