[1ヶ月でAngular] はじめてのアプリ制作!名言メモアプリを作る!

2018年1月16日から始めたAngularですが、早いものでもうすぐ一ヶ月が経とうとしています。

公式のtutorialとUdemyのチャットアプリ教材でAngularを学んできました。

ありがちな1ヶ月で〇〇を作ってみたみたいにAngular初心者がどこまでできるようになるかを残しておこうと思います。復習も兼ねて。

今回は名言メモアプリを作ってみようと思います。

アプリ名は「Now Remind」です。

Now Remind製作

では作るアプリについての概要を説明していきましょう。

用途

今、自分が大切だと思うことを残しておくウェブアプリです。

色んな所に触手を伸ばしているせいか色んな言葉を見聞きします。

その度に、感嘆し、いい言葉だと思い、何か決意もしている・・・はずですが、影響受けた言葉を覚えていることはあまりありません。

そこで、影響を受けた言葉たちを残しておくアプリを作ってみます。

また、Now Remindはというアプリ名は言葉によって動いた忘れてしまうかもしれない今の自分の感情を思い出すという意味で命名しました。

アプリ一部分であるの言葉の表示イメージとしては次のようになります。

機能

用途が固まりました。

次に用途を満たすために必要な機能を考えてみます。

必須基礎機能

画面系

  • メモリストを表示する画面
  • 新規ユーザー登録画面
  • ログイン画面
  • メモ新規作成画面(編集も兼ねる)
  • ヘッダー

データ授受

  • データベースに書き込む
    • 新規作成
    • 編集して上書き保存
  • データベースから特定のユーザーのメモリストデータだけを読み込む
    • ユーザー管理して自分のメモリストだけ表示(ログイン機能)
  • データベースの特定のデータを削除
    • 別の配列にデータを移動

ユーザー管理

  • 新規ユーザー登録
  • ログイン
  • ログアウト
  • ユーザー削除

こんなところでしょうか。

今は実装するつもりはありませんが、今後の追加予定の機能も載せておきます。

追加予定予定

  • 新規登録や編集画面をポップアップで表示
  • 削除メモを表示するごみメモリストの表示画面
  • ユーザーのメモリストの公開(メモ詳細情報に公開可能かチェックボックも)
  • 他人のメモを自分のメモリストに取り込み
  • 人気ユーザーランキング
  • ユーザー間チャット

ここまで機能が実装できたら結構おもしろいアプリになりそうです。

今回は基本機能までの実装になります。

appフォルダ構成

機能を実装する上でファイル構成はこのようになりそうです。

一つの機能が膨らんだ場合は分散するために若干完成は変わってくるでしょう。

  • app
    • class
      • memo:memo型定義
      • user:user型定義
    • core
      • header
      •  service
        • auth.service
        • user.service
    • error
    • login
    • pipe
    • shared
    • sign-up
    • memo
    • memo-detail
    • memo-trash

udemyの教材とほとんど同じです・・・。

アプリ開発

では、だいぶアプリの具体的なイメージがまとまったので、実際に作ってみましょう。

基礎機能製作

こちらでアプリデザインも含めた基本的な機能の制作過程を解説しています。

[1ヶ月でAngular] はじめてのアプリ制作!メイン機能編 – まんくつ

この段階で次のGIFのように基本的な機能を実装しました。

ユーザー制御編

製作中・・・

シェアする

  • このエントリーをはてなブックマークに追加

フォローする