イベント着陸ページ管理システムの構築

フロントエンドjoedietrich-dev/event-page-client
バックエンドjoedietrich-dev/event-pages-server

インスピレーション
私はこれを構築するためにインスピレーションを与えられたときに私は単純なHTMLのランディングページをコーディングハンドを繰り返していた.これは費やされた時間に関して非効率的で、私はページを維持することができるか、どんな変更もすることができた唯一の人であることを意味しました.私はコンセプト/MVPイベントページビルダーの証明を作成するために設定します.それは、私がそれらの手でコード化されたページを構築するために必要とするほとんどすべての実体を持っています.

基本機能
これはコンセプト・イベント・ページ作成者の単純な証明のバックエンドです.これは、次のようにイベントを構築できるように設計されています.

ホスト

ホーリー

パネル＆パネリスト

異なるレベルのスポンサー

使ったもの

フロントエンド

React / Create React App

React Router v6 - クライアント側ルーティング用

MUI - UIコンポーネントライブラリ

MUI Icons - 図像のために

バックエンド

Sinatra - アプリケーションのAPIフレームワークをビルドするために使用されるドメイン固有の言語

ActiveRecord - RailsのORM、ここでは、データベースにRubyクラスをマップするためにSinatraと共に使用されます

SQLite - このプロジェクトで使用されるデータベースエンジン

Rake - コマンドラインでコマンドを実行するには

Faker - シードデータを生成するために使用する

実体とその関係
データベースの移行をする前に、私は座ってデータ構造を計画しました.以下は、アプリケーションのデータベース内の別のテーブルと、それらの関係を示す図です.


フェーカー
私はアプリケーションのフロントエンドを構築する前に、私は仕事をするためのデータを必要と知っていた.本当の探しているデータを持つことは、設計プロセスで役に立ちます、そしてFaker あなたの手でデータベースを構築する必要はありません.
Fakerは、あなたのデータをより現実的にするために使用することができます別のジェネレータを持っている場合でも、もう少し創造的に取得したい.私は使用し、推奨する

会社の発電機

Loremのipsumプレースホルダーのテキスト

数ジェネレータ

国家と趣味の発電機-ややセンセーショナルなイベント名(例えば2022マレーシアの太鼓賞)

英語(または英語隣接)テキストプレースホルダ

名前とジョブジェネレータ-人々の名前とジョブのタイトル

これらのすべては一緒に私は合理的なプレースホルダのデータを作成するのに役立ちました.

孤児記録の排除
私はアプリのインターフェイスの構築を開始したとき、私は、イベントやパネルのような特定のエンティティを削除すると、孤立したレコードを残すことに気づいた.これらは、彼らの親実体―特にパネルとパネリストとイベントとスポンサーの間の関連記録―を独立して論理的に存在できない記録でした.孤立したレコードがスペースを取っているので、私はこれを望みませんでした、そして、最高で、予想外のふるまいは最悪で起こりかねませんでした.
私はこの問題を解決した dependent: :destroy 私のモデルの関連のいくつかのオプション.

class Panel < ActiveRecord::Base
  belongs_to :event
  has_many :panel_panelists, dependent: :destroy
  has_many :panelists, through: :panel_panelists
  has_many :panel_sponsors, dependent: :destroy
  has_many :sponsors, through: :panel_sponsors
end

を取るPanel クラスの例です.パネルはイベントに属し、モデルをリンクすることで多くのパネリストとスポンサーを持っています.パネルが削除されるとき、彼らが多くのパネルと関連することができるので、パネリストとスポンサーは残ります.連結記録panel_panelists and panel_sponsors 削除されているパネルに一意です.With dependent: :destroy , それらのレコードはパネルとともに削除される.

終わり
読書ありがとう!チュートリアルでは、見てください.