学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.1 | 仕事売買アプリ作成

↓↓クリックして頂けると励みになります。



フリーランスの方が仕事を売るために利用できるさまざまなウェブサイトがあります。
以下は、その中でよく知られているいくつかのプラットフォームです。

  • Upwork (アップワーク): グローバルで最大級のフリーランスプラットフォームの一つで、さまざまなスキルセットのフリーランサーがプロジェクトを見つけ、クライアントと協力できます。
  • Freelancer (フリーランサー): 世界中のフリーランサーとクライアントがプロジェクトに参加できるプラットフォームです。仕事の種類は多岐にわたります。
  • Fiverr (ファイバー): フリーランサーが自分のスキルやサービスを提供し、クライアントがそれを購入できる独自の形式を持つプラットフォームです。
  • Toptal (トプタル): 高度な技術スキルを持つフリーランサーと企業をマッチングするプラットフォームです。エンジニアやデザイナーなどが参加しています。
  • 99designs (ナインティナインデザインズ): デザイナー向けのプラットフォームで、クライアントはデザインのコンペを開催し、最も気に入ったものを選ぶことができます。
  • クラウドワークス: 日本発のプラットフォームで、日本国内のクライアントとフリーランサーが仕事を進めることができます。

これらのプラットフォームは、フリーランスとして活動する人々にとって仕事を見つける手段として一般的です。

このようなプラットフォームを作成するために必要なノウハウをチュートリアルにまとめてみました。
開発ははMacで進めましたが、Windowsでの作成も可能です。
バージョンを揃えれば動作に大きな支障はないと思います。
是非、開発にチャレンジしてみてください。

スタイリッシュなホームページ

検索機能を兼ね備えています。
デザインはBootstrap5.3で書いています。

スタイリッシュなホームページ
スタイリッシュなホームページ


PWA

ホームページ(ウェブサイト)のPWA(Progressive Web App)とは、従来のウェブサイトよりも優れたユーザーエクスペリエンスを提供するために設計されたウェブアプリケーションの形態です。
PWAは、ウェブ技術を使用してネイティブアプリケーションのような機能と性能を実現し、以下の特徴を持っています。

PWA
PWA


ログイン機能

deviseを利用したログイン機能を実装しています。
また、GoogleやFaceBookによる認証も実装しています。

ログイン機能
ログイン機能


ダッシュボード

仕事の登録やアバターの管理を行えるダッシュボード機能を実装しています。

ダッシュボード
ダッシュボード


写真アップロード

ドラッグ&ドロップによる写真のアップロード機能を実装しています。
AmazonS3を利用したクラウドアップロードにも対応しています。

写真ドラッグ&ドロップ
写真ドラッグ&ドロップ


検索機能

カテゴリーや各種条件による検索機能を実装しています。

検索機能
検索機能


クレジットカード決済

Stripeを利用したクレジットカード決済を実装しています。
Stripeコネクトを利用してフリーランサーに自動で送金できる仕組みも組み込んでいます。

クレジットカード決済
クレジットカード決済


メッセージ

LINEのように会話形式でメッセージを送信する仕組みを組み込んでいます。

メッセージ
メッセージ


カレンダー

フルカレンダーを利用して、購入された仕事をカレンダー管理できるよう実装しています。

カレンダー
カレンダー


レビュー機能

星付きのレビュー機能を実装しています。

星付きレビュー機能
星付きレビュー機能


デプロイ

実際に作成したアプリケーションを公開するまでの手順を解説しています。

01 | 開発環境を整える

mrradiology.hatenablog.jp

02 | Rails6.1のインストール

mrradiology.hatenablog.jp

03 | アプリケーションの作成

mrradiology.hatenablog.jp

04 | Bootstrap5.3の利用

mrradiology.hatenablog.jp

05 | deviceの利用

mrradiology.hatenablog.jp

06 | ナビゲーションバーの利用

mrradiology.hatenablog.jp

07 | ログイン機能の実装

mrradiology.hatenablog.jp

08 | 日本語化

mrradiology.hatenablog.jp

09 | Notyの利用

mrradiology.hatenablog.jp

10 | Gmailの利用

mrradiology.hatenablog.jp

11 | ダッシュボード追加

mrradiology.hatenablog.jp

12 | Googleフォントの利用

mrradiology.hatenablog.jp

13 | Font Awesomeの利用

mrradiology.hatenablog.jp

14 | Active Storageの利用

mrradiology.hatenablog.jp

15 | Amazon S3

mrradiology.hatenablog.jp

16 | カラムの追加

mrradiology.hatenablog.jp

17 | Facebook認証

mrradiology.hatenablog.jp

18 | Google認証

mrradiology.hatenablog.jp

19 | ページ作成

mrradiology.hatenablog.jp

20 | モデル作成

mrradiology.hatenablog.jp

21 | コントローラー作成

mrradiology.hatenablog.jp

22 | ビューの作成

mrradiology.hatenablog.jp

23 | Fakerの利用

mrradiology.hatenablog.jp

24 | ステップ処理

mrradiology.hatenablog.jp

25 | 仕事登録ビュー

mrradiology.hatenablog.jp

26 | Dropzoneの利用

mrradiology.hatenablog.jp

27 | 仕事公開

mrradiology.hatenablog.jp

29 | Application Helper

mrradiology.hatenablog.jp

31 | Orderの確認

mrradiology.hatenablog.jp

35 | 仕事とリクエスト

mrradiology.hatenablog.jp

37 | ActionText

mrradiology.hatenablog.jp

38 | SQLによる検索機能実装

mrradiology.hatenablog.jp

39 | ホームページ

mrradiology.hatenablog.jp

40 | Pagination

mrradiology.hatenablog.jp

42 | Stripe Connect

mrradiology.hatenablog.jp

43 | クレジットカード決済

mrradiology.hatenablog.jp

44 | メッセージ

mrradiology.hatenablog.jp

45 | 会話表示

mrradiology.hatenablog.jp

46 | ファイル添付コメント

mrradiology.hatenablog.jp

47 | Full Calendar

mrradiology.hatenablog.jp

48 | Herokuアカウントとアプリケーション作成

mrradiology.hatenablog.jp

49 | production.rbの設定

mrradiology.hatenablog.jp

50 | コンパイルテスト

mrradiology.hatenablog.jp

51 | Herokuの接続とPush

mrradiology.hatenablog.jp

52 | Heroku postgresの設定

mrradiology.hatenablog.jp

53 | 本番環境のコールバック

mrradiology.hatenablog.jp

54 | 機密情報 ENVの設定

mrradiology.hatenablog.jp



↓↓クリックして頂けると励みになります。