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を使ったデザインの実装を行いました。
完成した画像はこちらです。
- トップページ
- ログインページ
- ログインボタン後の遷移画面
- マイページ
感想
今回はログイン機能とデザインを主にやりましたが、思った以上に苦戦しました。
特にログインしたときにユーザー名が表示できるようにし、プルダウンメニューでログアウトボタンを実装するのはかなり時間がかかりました。
また、GitHubでログインボタンのデザインにも悩み苦戦しました。
ただ、自分で試行錯誤して実装すると、今まで理解が浅かった部分がわかり、力になっていることを実感できました。
次回は、フォーム・データモデルの実装を行っていきたいと思います。