bpeldi2oerkd8の開発日誌

とあるひよっこエンジニアの成長の記録。

Web開発の勉強8- 自作サービス作り1

今回もWeb開発に関する記事です。
前回の記事でようやくWeb開発の入門コースが終わりました。
developer-bpeldi2oerkd8.hatenablog.com

今回から自分でサービスを1つ作ろうと思います。

何を作るか

せっかく「予定調整君」を作ったので、これを活かして自ら使うサービスを作れないかと考えました。

身近な問題として「研究室の出欠登録と確認が大変だ」という課題がありました。

このため、習った知識を生かし、Slackのbotを用いて出欠を簡単に登録できるようにし、それをサイト上で確認できるようにするというサービスを考案しました。

このサービスをLab(研究室)+Attendance(出席)の造語として「Lattendance」と名付けました。

今回からはこのサービスを作っていこうと思います。

設計

ページ構成は以下の通りです。

  • トップページ/マイページ(自ら作った予定の一覧)ログアウトはボタンを押すとできるようにする
  • ログインページ(Githubのログインへのリンク)
  • 予定表示/出欠一覧ページ(Slackのbotから登録した出欠情報を表形式で表示)
  • 予定作成ページ

注意点として、出欠の登録はSlackのbot経由でのみ可能です。

これによって、無関係者が出欠の登録をすることを防ぎます。

使う技術

開発言語:Javascript, HTML, CSS, SQL
フレームワーク:Node.js, Express, Bootstrap, Jest
環境:Linux, VS Code, heroku
データベース:PostgreSQL
プロジェクト管理:GitHub, Git

雛型の作成

今回はログイン機能の実装とBootstrapを使ったデザインの実装を行いました。

完成した画像はこちらです。

  • トップページ

f:id:bpeldi2oerkd8:20201010235558p:plain

  • ログインページ

f:id:bpeldi2oerkd8:20201010235644p:plain

  • ログインボタン後の遷移画面

f:id:bpeldi2oerkd8:20201010235749p:plain

  • マイページ

f:id:bpeldi2oerkd8:20201010235812p:plain

感想

今回はログイン機能とデザインを主にやりましたが、思った以上に苦戦しました。

特にログインしたときにユーザー名が表示できるようにし、プルダウンメニューでログアウトボタンを実装するのはかなり時間がかかりました。

また、GitHubでログインボタンのデザインにも悩み苦戦しました。

ただ、自分で試行錯誤して実装すると、今まで理解が浅かった部分がわかり、力になっていることを実感できました。

次回は、フォーム・データモデルの実装を行っていきたいと思います。