LoginSignup
53
41

More than 3 years have passed since last update.

初学者がRuby on Railsでポートフォリオを作成しました。

Last updated at Posted at 2019-08-19

はじめに

今回の内容は就職活動中で作成しているポートフォリオの説明です。
アドバイスなどありましたらよろしくお願いいたします。

開発環境

  • Ruby 2.6.2
  • Rails 5.2.3
  • DB:Mysql5.6
  • AWS/S3
  • 少しだけVue.js
  • Route53,ACM,ALBでSSL化

修正箇所

  • RuboCop導入しました。(8/21)
  • モーダル実装しました。(8/23)
  • コメントで指摘していただいたHelper部分を修正しました。(8/23)
  • 画像のプレビュー表示を実装しました。(8/31)
  • Route53,ACM,ALBでSSL化を実装しました。(9/1)

アプリ概要

・業者などに頼むほどではない作業や困りごとを得意な人に助けてもらう。
・使う機会がないスキルや自分の得意なことを活かして、困っている人を助ける。
そのような人と人が助け合うアプリがあればいいなという思いから作成しました。

⚠️URLはデプロイなどで接続できないタイミングがございます。その際は少し時間をおいてから接続してください。
⚠️簡単ログインでログインした方は終わる時にログアウトもお願いいたします。

何ができるか?(機能)

Koto_Kotoは、以下のことができます。

・困りごと,スキルの作成/編集/削除

ezgif.com-video-to-gif.gif

困りごとを作成したいときは、demandボタン、スキルを提案したいときはsupplyボタンから作成することができ、目的別に分けて投稿ができます。
編集や削除は下の画像の赤丸のところからできます。
スクリーンショット 2019-08-19 21.52.53.png

・クレジット登録機能

クレジット登録機能

ezgif.com-video-to-gif (1).gif

Test用としてこちらを入力して頂ければ使用できます。

  • カード番号 4242424242424242
  • 有効期限 12/22
  • CVC番号 123
  • 名前   適当に入力してください

カードの削除も可能です。

・スキル,困りごとの助け合い機能(購入機能)

ezgif.com-video-to-gif (2).gif

カードを登録した場合のみ購入,助けることが可能です。(ポートフォリオなので、万が一購入しても、仮想的に作っているので、お支払いは発生しません。)

あと、助けるボタンを押した場合は、購入ではないので、クレジットからお支払いは発生しないような作りになっています。

・購入後のチャットのやりとり

ezgif.com-video-to-gif (3).gif

スキル購入、困りごとへの助けるボタンを押したら、チャットルームが作成される仕様になっており、お互いでやりとりが可能です。

・契約完了後の評価

ezgif.com-video-to-gif.gif
契約完了したら、スキル購入の場合は購入者,困りごと解決の場合は困りごと出品者がその契約内容に関して、評価する仕様になっています。その評価に応じて対象者の信頼スコア(各々が持っている評価指標。マイページの右側の円に囲まれたもの)が加算されます。信頼スコアが高ければ高いほど、その人の評価が高いことになります。

⚠️評価画面の見た目部分は後々、モーダルで作成したいため、いじっておりません。
8/23 モーダルで評価画面の見た目部分を実装しました。

・ポイント機能

スクリーンショット 2019-08-18 15.13.28.png

評価されて信頼スコアが上がるだけだとモチベーションupには繋がらないと思ったので、ポイント機能を作成しました。
信頼スコアをあげればあげるほど、ポイント倍率が高くなって、ポイントをためやすくなる仕様にしています。
今後、このポイントを使用して、スキル購入の時に割引として使えるなどの機能を実装したいと考えています。

・ユーザー登録/編集/退会機能

deviseは使用せずに作成しました。(Session&Cookieの概要を学ぶため)
ユーザー登録をすると、確認メールが届くようにしており、そのメールに書かれているリンクを押して初めて、ユーザーが登録される仕様になっています。

・簡単ログイン機能

スクリーンショット 2019-08-19 22.41.08.png

就活用に簡単ログイン機能を実装しました。
ボタン一つでログインできれば、就活の際に見てもらいやすくなるのではないかと考え実装に至りました。

・スキルや困りごとのコメント機能

スキルや困りごとに対してコメントができます。
ezgif.com-video-to-gif (5).gif

・レスポンシブ対応

ezgif.com-video-to-gif (6).gif

スマートフォンが主流なので、そちらでも使いやすくするためにレスポンシブ対応にしました。

課題&追加したい機能

  • vueでのモーダル実装(評価する部分)
  • 画像のプレビュー表示
  • ポイント機能の使用(スキル購入の時に割引として使えるなど)
  • カテゴリー別一覧表示
  • Rspecテスト

最後に

記事を読んでいただきありがとうございました。
また機能を追加次第、更新していきたいと思います。

53
41
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
53
41