Skip to content
code-polaris044 edited this page Aug 4, 2023 · 32 revisions

ログイン機能付きメモアプリケーション

各画面の仕様

signup.vue

ユーザー登録画面です。 ユーザー名・メールアドレス・パスワード・確認用パスワードをご入力いただいて、新規登録ボタンを押下すると、ユーザー登録されログインページに遷移します。

signin.vue

ログイン画面です。 ユーザー登録画面で登録したメールアドレスとパスワードをご入力いただくと、メモ一覧ページに遷移します。

gallery.vue

メモ一覧の画面です。(未実装)

メモ追加ボタンから、メモ新規登録画面に遷移できます。メモが新規登録されると、一覧表示され、編集ボタンと削除ボタンから各メモに対して操作できます。

newSingle.vue

メモ新規登録画面です。 メモタイトルからタイトルをご入力できます。「ご入力ください。」欄にはメモの詳細をご入力できます。両方誤入力していただかないと保存ボタンが押下できない設計になっております。

保存ボタンを押下すると、メモタイトルと内容が保存され、メモ一覧画面に遷移します。一覧へボタンを押下するとメモ一覧画面に遷移します。

single.vue

メモ新規登録画面と同様の仕様です。(未実装)

はじめに

選考課題として、ログイン機能を持つメモ帳アプリケーションを構築する。 

アプリケーション名: Save Inspiration(s.i)

使用技術

開発スケジュール

7月25日~8月3日(20日) - (私用日数:4日) = 16日程度

発表資料

各画面仕様書をgithubのwikiを使用し記載

実際に動かしながら説明して難しかったところを発表

フロントエンド開発(こだわった箇所・難しかった箇所)

  1. デザインカンプはfigmaで制作: https://www.figma.com/file/NkbnHii7kfg5urEcL4E77L/%E7%94%BB%E9%9D%A2%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%88%B6%E4%BD%9C?type=design&node-id=6%3A4&mode=design&t=atSh1070izeg2p7P-1

  2. 配色はスプリットコンプリメンタリー(分裂補色)

  3. TOPページは、背景色をグラデーションにして、アニメーションで動かしています。(sass)

  4. 新規登録・ログインページは、一般的なデザイン

  5. メモ一覧ページは、メモ追加されたらスクロール

  6. メモ新規登録(編集)ページは、保存ボタンを押下すると一覧ページに遷移されます。

  7. vueのscoped(margin:8px)

ログイン機能 (難しかった箇所)

  1. ルーティング

  2. vuexとログインとログアウトの判別

  3. axios

ユーザー登録機能(難しかった箇所)

  1. modelsへのデータの受け渡し

  2. dbへの登録

スクリーンショット 2023-08-04 4 07 34

メモ追加機能(難しかった箇所)/一覧表示機能・編集機能について

  1. vue内でのaxios

  2. トークン分解

  3. author_idのid

  4. 一覧表示機能・編集機能は未着手

スクリーンショット 2023-08-04 4 06 49

良い点・反省点・改善点

  1. 大野さんにご相談してリスケジューリングした点について(反省点)

  2. コミュニケーションの改善点(チャットワーク・meet・来社)

  3. 得られたスキルの中で良かった点

概要

ログイン機能付きメモアプリケーション

アプリケーション名: Save Inspiration

memo

  • はじめに

    課題について

  • フロントエンド開発

    デザイン・マークアップ

  • ユーザー登録機能

    ユーザー名、メールアドレス、パスワード登録

  • ログイン機能

    メールアドレス・パスワードでログイン

  • メモ追加/編集機能

    メモを新規作成(入力項目は、メモタイトル、本文とすること)

  • 良い点・反省点・改善点

    スケジューリング・スキル・コミュニケーション

Clone this wiki locally