自分の分身を作りたい

理系の大学院生だよ

グループで技術書を共有するアプリを作ってみた(Node.js)

ぜひフォローしてください

f:id:daigakukabuu:20181127134014p:plain どうもこんにちは。

最近趣味でプログラミングをやったりしているわけですが、やはりエンジニアとして仕事をしていくとなるとアピールできるようなものを形にしている方が評価される訳です(当たり前)。

そういうこともあり、サーバーサイドもフロントエンドも一通り学んでおかなければなと思い、N予備校のを使ってNode.jsサーバーサイドの勉強ができるコースをやってみた訳です。

そのコースではNode.jsを使って予定調整アプリを作るのですが、すでにそんな機能LINEなんかにあるし完成させるモチベーションが湧かなかったので、もっと欲しいものを作りたいということで、予定調整アプリのチュートリアルを参考にしながらタイトルのようなものを作ってみる事にした。

手っ取り早くコードだけ見る-> GitHub - SoyaManabe/share-shelf

動機

  • 技術書大好き
  • 積ん読になりがち

-> 自分の読んだ本を記録する事でモチベーションと達成感アップ

  • 独学でプログラミングを勉強している
  • 周りのプログラマーがどんな本で勉強しているか知りたい

-> リンクを共有している中でお互いの読んだ本を共有したい

===> 仮想的な本棚で仲間と技術書を共有できるアプリを作りたい

要件定義

  • 読んだ本を投稿できる
  • 仲間が読んだ本を見ることができる
  • 自分が投稿した本の編集、削除
  • 言語技術によって本を絞る
  • メンバーのプロフィール作成や編集

今回はこれらの定義を満たすアプリをExpressというフレームワークを用いて作成しました。

Express - Node.js Web アプリケーション・フレームワーク

tree

.
├── app
├── app.js
├── app.json
├── bin
├── models
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── routes
├── test
├── views
└── webpack.config.js

各ディレクトリの中身はGitHubのページで確認できます。

  • app.js アプリを実行した時の起点となるファイル
  • models 作成したデータベースの定義をしているファイルたち
  • public 画像とかスタイルシートとか
  • routes 各ページに移動する時のルーティングをする
  • test 意図通りに動作しているかテストするファイルたち
  • views 各ページのレンダリングファイル(pug)

動作の様子

f:id:daigakukabuu:20181127132748p:plain
ホーム画面、ログイン前は何も見れません

f:id:daigakukabuu:20181127132808p:plain
GitHubアカウントでログインすると共有本棚が見れるようになります

f:id:daigakukabuu:20181127132826p:plain
本をクリックするとその本の詳細を見ることができます

f:id:daigakukabuu:20181127132840p:plain
投稿者であれば詳細の編集が可能

f:id:daigakukabuu:20181127132856p:plain
ユーザーを選択してその人が読んできた本を確認できる

これから改良する点

  • ユーザープロフィールの編集機能を実装する
  • 本の画像をアップするために使うISBNを自動で取得できるようにする(スクレイピングか何かで)

ISBN - Wikipedia

  • クソみたいなUIをなんとかする

この辺りを改善するたびにブログに報告しようと考えています。