導入

これは私が今までに構築した最も洗練された、完全なプロジェクトです.BundlはRailsフレームワーク上に構築されたソーシャルネットワーキングアプリケーションです.それは人気のあるグループのアプリ、meetupに基づいています.
ユーザーは、参加することができますログインだけでなく、グループやイベント、ポストディスカッション、RSVP、およびグループに参加を作成します.目標は、ユーザーが同様の興味を持つ人々のグループを見つけることを許可することです.グループには、名前、説明、場所、メンバー、RSVPとのイベント、および議論があります.

計画

私がコードの1行を書く前に、私は私の便利なノートブックを取り出しました.それからモデルと属性の図を描きました.私がどのように私のUXが欲しかったかについて考えて、この過程の間、ものすごい助けでした.私はリバースエンジニアリングのように考えました.私は私が私の頭でそれと対話しているユーザーを見た方法をUXを構築しなければなりませんでした.私のプロジェクト構造の基本的な理解で、コーディングを始めました.

アプリのビルド

私の通常のアプローチを取って、ユーザーモデルから始めて、私は私のアプリコアコンポーネント最初、グループを構築することを決めた.これは、ほとんどの相互作用が私のアプリケーションで行われるところです.グループの名前、説明、場所、所有者またはユーザーがあります.ユーザーは、表示することができます参加し、グループを残し、同様にネストしたコンポーネントの束にアクセスします.
これは、createstraグループです.RB

class CreateGroups < ActiveRecord::Migration[6.0]
  def change
    create_table :groups do |t|
      t.string :name
      t.text :description
      t.string :location
      t.integer :user_id
    end
  end
end

次に、私はグループが話題を必要とすると決めました.トピックは複数のグループに属することができます.
日本語訳),RB

class CreateTopics < ActiveRecord::Migration[6.0]
  def change
    create_table :topics do |t|
      t.string :title
    end
  end
end

ユーザーはグループに参加することもできます.私は、これをする最も良い方法がメンバーシップと呼ばれている結合モデルであると思いました.このメソッドを使用すると、グループに参加してグループを終了する機能を' @メンバーシップで作成できます.破壊する.
メンバーは、そのグループのイベントを表示することができます.ここでは、グループ、タイトル、説明、場所、開始時刻、終了時刻を持つイベントモデルを追加しました.
日本語訳),RB

class CreateMemberships < ActiveRecord::Migration[6.0]
  def change
    create_table :memberships do |t|
      t.integer :group_id
      t.integer :user_id
    end
  end
end

ユーザモデル

私は考案したユーザモデルを考案しました.私のアプリケーションの機能のほとんどは、ユーザーアカウントが必要です.私のユーザーモデルは、名前、電子メール、パスワードを受け入れます.私は、ユーザーの行動のためのユーザーのルートとユーザーのコントローラを設定するために考案を使用します.
チェン/bunn/config/ルート.RB

Rails.application.routes.draw do
     devise_for :users, path: '', path_names: { sign_in:    "login", sign_out: "logout", sign_up: "join" }
end

私は私のユーザーの参加とログインフォームの構築を開始することを決めたので、私はそれらを構築する私のアプリの他の機能をテストを開始することができます.デフォーとシンプルな形でエラーメッセージをより簡単にします.私は、私の見解/見解/登録を加えました/新しい.HTML ."erb "と次のコードを書いた.
竜華Bundl/アプリ/ビュー/登録/新しい.HTML .ERB

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
     <%# <%= f.error_notification %>

     <%= f.input :name,
             required: true,
             label: "Full Name",
             input_html: { autocomplete: "name" }%>

     <%= f.input :email,
             required: true,
             autofocus: true,
             input_html: { autocomplete: "email" }%>

     <%= f.input :password,
             required: true,
             hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length),
             input_html: { autocomplete: "new-password" } %>

     <%= f.input :password_confirmation,
             required: true,
             label: "Confirm Password",
             input_html: { autocomplete: "new-password" } %>

     <%= f.button :submit, "Sign up" %>
<% end %>

ユーザーのログインフォームは似ていますが、電子メールやパスワードのフィールドがあります.

グループ

この時点で私のグループモデルを作成したので、新しいグループを作成する機能を構築しました.私はグループコントローラに新しいアクションを追加し、新しいビューを構築しました.
それから、名前、説明、話題と場所のためにバリデーションを加えて、ユーザーがすべての必須のフィールドを満たすことを確実としました.
私はRSVPとディスカッションモデルを作成し、グループのページを表示する名前、説明、ボタン、およびメンバーのリストを表示します.if @ groupなどの条件を書きました.ユーザ=だけに高度なオプションを表示するには、ユーザ= = currentRunuser '.グループメンバーには、非メンバーより多くのオプションがあります.


グループは、関連性とネストされたルートの様々な機能.これは、各グループのユニークな議論、メンバーやイベントのページを構築することができました.

resources :groups do
    resources :memberships, only: [:index], path: "/members"
    resources :discussions, only: [:index, :create, :destroy]
    resources :events, only: [:index, :show, :new]
end

タグ

これは私が気まぐれで追加機能です.私はユーザーがグループを閲覧するために別の方法を欲しかったので、私はそれがユーザーが彼ら自身のタグを作成するのに良い考えであると思いました.タグとグループに属するGroupTag結合モデルを作成することで、この機能を実装しました.ユーザーがタグタイトルを入力すると、アプリケーションはタグを作成するか、タグが既に指定されたタイトルで存在する場合にタグを見つける.
私はこの新しいモデルで創造的になって、ユーザーがコンマで区切られた複数のタグを入力し、グループの新しいフォームのテキスト領域に入れることを決めました.
あなたは上記のスクリーンショットでそれを見たかもしれません.これは、tagCountリストとtagCount list =(value)という2つのインスタンスメソッドを使って動作します.

def tag_list 
    self.tags.map { |t| t.name }.join(", ")
end 

def tag_list=(value)
    tag_names = value.split(/,\s+/)

    self.tags = tag_names.map { |name| Tag.where('name = ?', name).first or Tag.create(:name => name) }
end 

最初のメソッドは、コンマで区切られたすべてのグループタグを表示し、2番目のメソッドはテキスト領域から入力を受け取り、コンマで区切り、指定した値を持つタグを検索または作成します.

検索

彼らは使用することはできませんどのような良いタグですか?ここは検索モデルが入っているところです.このモデルの目的は、タグによってグループを検索することです.
以下にフォームを示します:

フォームが送信されるたびに、新しい検索インスタンスが作成されます.これはまた、各検索結果が検索インスタンスIDでユニークな表示ページに表示されることを意味します.これは、結果をフィルタリングするグループインデックス検索フィールドよりも少し進んでいます.

オーウット

最後のステップは、バックエンドまで、OAuth、特にOAuth Facebookをセットアップしていました.これはユーザーがFacebookアカウントを使ってアプリケーションにログインできるようにしました.
最初に私はユーザーテーブルにomniAuth列を追加しました.
Chord - Bendl/db/migrate/20201105220126 6 createpers検索RB

class AddOmniauthToUsers < ActiveRecord::Migration[6.0]
   def change
     add_column :users, :provider, :string
     add_column :users, :uid, :string
   end
end

私はバンドルをインストールしてomniauth Facebookとdotenv宝石.工夫は実際にOmniAuthで動作するので、私はこの行のコードを私の考案初期化装置に加えることができました.

config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], {}

上記のコードを見ると、定数は、“FacebookClose appkes ID”と“FacebookClose appchen秘密”に気づくでしょうこれらの定数はdotenvに保存され、私のユニークなIDと秘密を保持します.これにより、情報が露出しないようにする.
OmniAuthは私のFacebookのアプリにユーザーを指示するために、これらのコードを使用し、私のアプリケーションに戻ってください.これは、Facebookのユーザーのメールと名前Bundlアプリケーションでユーザーアカウントを構築するプル.これは、ユーザーがリダイレクトされ、その情報がデータベースに格納されている背景に発生します.

ロードブロック

私の柵のアプリケーションを構築する過程でいくつかの頭痛があった.最も困難な部分は座って仕事になっていた.多くの可動部分があるので、私は圧倒的になりました.私は1つの特徴から別のものにジャンプしていて、どこから始めればよいのかわからない.私が開発にさらに進んだので、この感じは徐々に消えました.
私の最大の闘いはフォームだった.時々、私のフォームフィールドデータは通過しません.私は、新しいグループがなぜ話題を持たないために無効として戻ってきたかについて理解しようとしている時間を過ごしました.それは私のグループテーブルにtopicrage id列を追加し、私のモデルの関連付けを固定するように簡単になった.私はグループ' Hassure One :トピック'として設定していたときに、適切な関連付けられているときに'所有物'トピックです.

最後の思考

このプロジェクトの構築は巨大な学習体験でした.私は、私が関連付け、検証、認証、入れ子になったフィールド、入れ子になったルート、検証を表示し、ヘルパーメソッドを使用して、モジュール全体で学んだすべてを利用しました.私はレールのしっかりした理解を開発しました.ここで私の経験からいくつかのキーを取るのです.

あなたのアプリケーションをテストし、それを中断しようとすると

Byebugを使用し、それを頻繁に使用する

は、あなたのプロジェクトを小さな部品に壊します

ドキュメントハンディ

でタブを保持します