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

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

Rails7.1 | 動画学習アプリ作成

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



動画を見ながら学習できるアプリを作成します。
プロジェクト、タスクを登録し、Stripeの決済機能を利用してサブスクリプション方式で購入させることができます。
レビュー機能、メッセージ機能も実装しました。

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

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

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

スタイリッシュなデザイン
スタイリッシュなデザイン


PWA

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

PWA
PWA


ログイン機能

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

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


ダッシュボード

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


写真アップロード

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

写真アップロード
写真アップロード


クレジットカード決済

Stripeを利用したクレジットカード決済を実装しています。

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


メッセージ

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

メッセージ
メッセージ


レビュー機能

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

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


Wistiaによる動画再生機能

Wistiaを利用した動画再生機能を実装しています。

Wistia
Wistia




01 | 開発環境を整える

mrradiology.hatenablog.jp


02 | Rails7.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


21 | プロジェクトとタスクモデル

mrradiology.hatenablog.jp


22 | アクションテキスト(ActionText)

mrradiology.hatenablog.jp


23 | コントローラー

mrradiology.hatenablog.jp


24 | プロジェクトの登録

mrradiology.hatenablog.jp


26 | タスクの登録

mrradiology.hatenablog.jp


27 | プロジェクトビュー

mrradiology.hatenablog.jp


28 | Markdown関数

mrradiology.hatenablog.jp


30 | サブスクリプション

mrradiology.hatenablog.jp


31 | 購入プロジェクト表示

mrradiology.hatenablog.jp


33 | クレジットカード決済の実装

mrradiology.hatenablog.jp


35 | ホームページ

mrradiology.hatenablog.jp


36 | 購入確認電子メール

mrradiology.hatenablog.jp


37 | メッセージ

mrradiology.hatenablog.jp


38 | 会話表示

mrradiology.hatenablog.jp


39 | 通知

mrradiology.hatenablog.jp





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

関連記事(外部サイト)