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

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

Rails6.1 | 民泊予約アプリ作成

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



このプロジェクトではRuby on Railsによる部屋の登録、予約、決済が出来るアプリケーションを実際に作成する方法を解説しています。
Railsのバージョンは6.1です。

ログイン機能

Google認証、Facebook認証にも対応したログインセッション機能を実装できます。

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

検索

ホームページから登録した部屋の検索ができます。

検索
検索

AJAX &Googleマップ

Googleマップにも対応したAJAX検索を実装できます。

AJAX検索とGoogleマップ
AJAX検索とGoogleマップ

PWA

PWAとは「Progressive Web Apps」の略で、Webサイトをネイティブアプリのように利用できるようにする仕組み・技術のことです。
スマートフォン表示にも対応したビューを実装できます。

PWA
PWA


クレジットカード決済

クレジットカードを登録し、決済ができます。

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

オーナーへの自動支払い

部屋を登録したオーナーへの報酬の自動支払いが可能です。

Stripeコネクトの実装
Stripeコネクトの実装


カレンダー予約管理

Full Calenderによる予約管理を実装します。

カレンダーによる予約管理
カレンダーによる予約管理


レビュー

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

レビュー機能
レビュー機能


画像アップロード

ドラッグ&ドロップによる画像アップロード機能を実装できます。

画像アップロード
画像アップロード



住所予測変換機能

住所の予測変換機能を実装しています。

住所予測変換
住所予測変換



メッセージ

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 | カラムの追加

mrradiology.hatenablog.jp

16 | ページ作成

mrradiology.hatenablog.jp

17 | モデル作成

mrradiology.hatenablog.jp

18 | コントローラー作成

mrradiology.hatenablog.jp

19 | ビューの作成

mrradiology.hatenablog.jp

20 | Dropzoneの利用

mrradiology.hatenablog.jp

21 | Amazon S3

mrradiology.hatenablog.jp

22 | Autocompleteとgeocoderの利用

mrradiology.hatenablog.jp

23 | Application Helper

mrradiology.hatenablog.jp

24 | Google Maps

mrradiology.hatenablog.jp

25 | Facebook認証

mrradiology.hatenablog.jp

26 | Google認証

mrradiology.hatenablog.jp

28 | Datepicker

mrradiology.hatenablog.jp

29 | 予約機能実装

mrradiology.hatenablog.jp

30 | 予約確認

mrradiology.hatenablog.jp

33 | Full Calendar

mrradiology.hatenablog.jp

34 | 予約ステータス

mrradiology.hatenablog.jp

35 | Pagination

mrradiology.hatenablog.jp

37 | Stripe Connect

mrradiology.hatenablog.jp

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

mrradiology.hatenablog.jp

39 | 予約確認メール

mrradiology.hatenablog.jp

40 | メッセージ

mrradiology.hatenablog.jp

41 | 会話表示

mrradiology.hatenablog.jp

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

mrradiology.hatenablog.jp

44 | production.rbの設定

mrradiology.hatenablog.jp

45 | コンパイルテスト

mrradiology.hatenablog.jp

46 | Herokuの接続とPush

mrradiology.hatenablog.jp

47 | Heroku postgresの設定

mrradiology.hatenablog.jp

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

mrradiology.hatenablog.jp





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

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)