プログラム学習記録をメインに雑多に書いてます。

初アプリ開発#01 アプリ概要、設計を考える。

ついにオリジナルアプリ開発

こんにちは、もりのです。
4月からRailsの学習を始め、やっとオリジナルアプリ開発にまでこぎつけました。

学習初期の段階から「最も力がつくのは、実際に自分で作ることだ!」と、ネットで見て「早く基礎学習を終わらせ、オリジナルアプリ開発に着手するぞ!!」と意気込んでいましたが、Railsチュートリアルにボコボコにされ泣いていたら4ヶ月もたってしまいました。。。

何はともあれ、初のオリジナルアプリ開発に着手しましたので、今後はブログで進捗状況を残しながら開発して行きたいと思います。

まずはアプリの設計からです。
UIのモックも作成してみたので、そちらも参考にしながらアプリの概要や開発環境などを考えてみました。

目次

  • 開発環境
  • アプリ概要
  • 基本機能
  • 必要ページ
  • 導入gem
  • DB設計

    開発環境

  • Ruby 2.5.0
  • Ruby on Rails 5.2.0
  • テキストエディタ: Atom
  • ターミナル: Macにデフォルトでインストールされているもの

    アプリ概要

自分が調べた単語名と、その意味を登録することができるアプリ
学術書などを読んでいるときに多くの未知単語が出てくるので、それらを洗い出してまとめておき、後からまとめて意味を登録しやすくしたメモアプリです。

基本機能

  • ユーザー登録機能(ログイン/ログアウト)
  • TwitterAPIでのユーザー登録
  • 単語登録機能(編集/削除)
  • 意味登録機能(編集/削除)
  • 単語検索機能
  • ページネーション機能

    必要ページ

  • サービスTopページ(ログイン前のページ)
    • 新規登録ページ
    • ログインページ
  • 単語新規登録/意味未登録単語一覧ページ(ログイン後のTopページ)
    • 単語編集ページ
    • 単語一覧ページ
    • 単語詳細ページ

必要とするページは上記の計7ページです。
各ページのUI設計を[Moqups](https://moqups.com/)という無料で使えるUI設計ツールを利用して作成したので、画像を記事の最後に載せておきます。興味がある方は見て下さい。

導入gem

  • devise(ユーザー認証)
  • kaminari(ページネーション機能)
  • ransack(検索機能)
  • bootstrap(デザイン)

    DB設計

    users

  • id
  • name
  • email
  • password

    words
  • name
  • content
  • user_id

以上が今回作るアプリの設計になります。
次回からはアプリの進捗状況を少しずつ書いていこうと思います。



各ページのモック

サービスTopページ(ログイン前のページ) f:id:does1026:20180810124902p:plain
新規登録ページ f:id:does1026:20180810125344p:plain
ログインページ f:id:does1026:20180810125800p:plain
単語新規登録/意味未登録単語一覧ページ(ログイン後のTopページ) f:id:does1026:20180810125840p:plain
単語編集ページ f:id:does1026:20180810125945p:plain
単語一覧ページ f:id:does1026:20180810130035p:plain
単語詳細ページ f:id:does1026:20180810130111p:plain