はじめに
こんにちは、おおくまと申します！
私は現在、とあるプログラミングスクールに通い、完全未経験からWebエンジニアへの転職を目指しています！
学習を開始して約3ヶ月が経過しましたが、Webアプリを制作する機会がありましたので、その成果をご紹介させていただきます！
まだまだ学習中のため、内容に誤りがある場合があります！
コメント等で教えていただけると幸甚です！
作成したサービス
・サービス名：ZooMania
・GitHub：https://github.com/kumaryoya/zoo_mania
開発の背景
最近、動物園に行きましたか？
私は幼少期から動物園が好きで、社会人になってからも一人で足を運び楽しんでおります！
しかし、年齢を重ねるごとに周りの友人や同僚たちは動物園に行く機会が減っているように感じておりました！
動物園は低価格であるにも関わらず、非常に癒される空間であるため、多くの人に「動物園に行きたい」という気持ちを喚起させるサービスとして、「ZooMania」を開発いたしました！
実装機能
動物園に行く人も、行かない人も楽しめるように実装しました！
- ユーザー登録・退会機能
- ログイン・ログアウト機能
- Googleアカウントログイン・ログアウト機能
- パスワード再設定機能
- プロフィール表示・編集機能
- 動物園一覧・詳細表示機能
- 動物園詳細ページにGoogleMap表示機能
- 動物園日本地図機能
- お気に入り動物園登録・編集機能
- 動物園人気ランキング表示機能
- 画像投稿・編集機能
- 投稿いいね機能
- 投稿いいねランキング表示機能
- 動物園一覧、投稿一覧における動物園検索・絞り込み機能
- 動物園スタンプラリー機能
- 位置情報による動物園レコメンド機能
- Twitter共有機能
- LINE通知機能
- PWA機能
- 管理ユーザー機能
技術選定
- Ruby 3.2.2
- Rails 7.0.6
- Node.js 20.2.0
- CSS tailwind, daisyUI
- Webアプリケーションサーバ heroku
- データベース PostgreSQL
- ファイルサーバ AWS S3
主に使用したgem
- sorcery
- carrierwave
- kaminari
- ransack
- googleauth
- line-bot-api
- fog-aws
- aws-sdk-s3
- carrierwave-aws
拘った機能
実装した機能の中で、特に拘った機能は以下の2つです！
- 位置情報による動物園レコメンド機能
ユーザーの位置情報を取得し、その地点から近い動物園5つをおすすめします！
この機能には、Googleの2つのAPIを使用しています！
- Geocoding API
- Maps JavaScript API
- LINEによる新着投稿通知
ZooManiaのLINE公式アカウントを友だち追加しておくと、新しい投稿があった際に、通知されます！
こちらは、LINE Developersで、ZooManiaの公式LINEアカウントを作成し、そちらにAPIリクエストを送るかたちで、実装してみました！
最後に
今回、初めて1人で、0からWebアプリを作成してみました！
また、APIを使ったのも初めてでした！
この経験を通じて、分からないことが多く、機能を1つ1つ実装していくのは、大変でしたが、非常に学びになりました！
もっともっと勉強して、すごいアプリを作れるようにこれからも頑張っていきたいと思います！
技術記事とは程遠い、拙い記事でしたが、最後まで読んでいただきありがとうございました！