Flatiron学校からのプロジェクトを強化すること

目次

The First Build

The Project Now

CSS & JavaScript

Challenges

Heroku Deployment & Establishing A Connection To The Database

学校教育経験

2019年11月から2020年5月までフラチトロン校に通った.それは私が今まで経験した中で最も驚くべき経験の一つでした.学生は、プログラムの5つのモジュールの各アプリケーションを構築する必要があります.私は速いペースでプログラムしていたので、各モジュールは1ヶ月長く続きました.最初の月は、手続きとオブジェクト指向プログラミングの学習Ruby .
このブログでは、私が最初にFiztironでSinatraアプリケーションを作成したときの違いを示します.

フラティオン月2

Flatironの2番目の月は、新しいモジュールを始めましたSinatra . これは、Rubyで書かれた無料のオープンソースソフトウェアWebアプリケーションライブラリとドメイン固有の言語(DSL)です.シナトラはFlatironが最初にWebアプリケーションを学ぶためにあなたを紹介するものです.

Webアプリケーションの構築

最初の造り

私はユーザーが店の“壁の穴”タイプについての意識を広めることができるアプリケーションを構築したい.最初のビルドは正確にそれを行いました.
"ホーム"ページ:

レビューは新しい形式のページです.

何も本当に特別な.それは裸骨の造りだった.アプリケーションがクラッシュするreviews , しかし、こわないstores or favorites . ユーザーがサインアップしてログインすることができますが、削除したり、アカウントを編集できませんでした.

プロジェクト今

アプリケーションは、今よりも多くの機能を持つことができます.私はフィードバックなしでより良いウェブサイトを設計する方法を知りません、そして、何人かの非常にすばらしい友人は私が彼らが実行されたことを望む何かを話すために彼らの時間をとりました.私がCSSを更新するとき、私はまた、私が加えた特徴に関してこのブログをアップデートします.
ここでは、ライブアプリケーションを表示できます.https://hole--in-the--wall.herokuapp.com/

ユーザーは今サインアップとログインできます.また、編集したり、アカウントを削除します.

店を作成することができます＆Googleマップだけでなく、編集にリンクします.

レビューをすぐに作成、編集、および削除することができます.

店のお気に入りは今作成し、削除することができます.

アプリケーションの機能semantic HTML .

を使用して

この素晴らしい拡張機能を使用すると、Webページ上のアクセシビリティの現在の状態を表示することができます.

CSS

使用するFlexbox レイアウトがもっとシンプルなページで.
使用するMedia Queries ブレークポイントが適切に設定されていることを確認します.

ジャバスクリプト

私は、ユーザーが特定のボタンをクリックしたときに表示されるフォームを望んでいたページにJavaScriptを実装erb .
私はしたくなかったfetch このアプリケーションの情報.私は、ちょうどSinatraバックエンド/フロントエンドアプリケーションとしてまっすぐにしたかったですerb ビューJavaScriptが必要なのは、どのように多くのビューをテンプレートを短縮することでした.

挑戦

このアプリケーションをアップグレードする課題:Heroku展開、Sinatra宝石、ActiveRecordクエリ、JavaScript、およびCSS.
たとえば、Sinatra contrib gemの名前空間機能は、ラックの名前空間に干渉するので、アプリケーションで機能しません.Sinatraは、最新の更新プログラムをリリースしたので、近い将来、名前空間の機能を更新するかもしれない.
Flatiron ActiveRecordの基本を教えてもそれはあなたが本当にどのように動作するかを把握することです.このアプリケーションを更新する私を確認し、物事のようなものを扱うことができますActiveRecord method chaining , ActiveRecord::Relation , ActiveRecord::Result , クエリの戻り値、セキュリティ、および熱心な読み込みをグラブまたは変換する.
Herokuはあなたのウェブサイトを展開するときSQLite 3を許可しません.Herokuからのアプリケーションの代わりにPostgreSQLデータベースを提供しました.
SQLite 3とPostgreSQLは同じ種類の問い合わせを許可しません.例えばSQLite 3では以下のようになりました.

Store.select(
            "stores.id, 
            stores.name, 
            stores.state, 
            count(favorites.store_id) AS favorites_count"
).joins(:favorites).limit(5).group(:name).order(
"favorites_count DESC"
).as_json

しかし、PostgreSQLでは動作しません.この場合、.group メソッド.

Store.select(
            "stores.id, 
            stores.name, 
            stores.state, 
            count(favorites.store_id) AS favorites_count"
).joins(:favorites).limit(5).group(
"stores.id, 
stores.name, 
stores.state"
).order("favorites_count DESC").as_json

野奥展開

私の環境を設定して、データベースへの接続を確立するには、ActiveRecordでこれを行うために利用できるブログや記事だけが、この例のようにActiveRecord自体に直接接続を確立しています.

require 'bundler/setup'
Bundler.require

configure :development do
 ENV['SINATRA_ENV'] ||= "development"
 require 'bundler/setup'
 Bundler.require(:default, ENV['SINATRA_ENV'])

ActiveRecord::Base.establish_connection(
  :adapter => "sqlite3",
  :database => "db/#{ENV['SINATRA_ENV']}.sqlite"
)
end

configure :production do
 db = URI.parse(ENV['DATABASE_URL'] || 'postgres:///localhost/mydb')

 ActiveRecord::Base.establish_connection(
   :adapter  => db.scheme == 'postgres' ? 'postgresql' : db.scheme,
   :host     => db.host,
   :username => db.user,
   :password => db.password,
   :database => db.path[1..-1],
   :encoding => 'utf8'
 )
end

これはフラチロンでも教えられました.それは知って良いですが、このアプリケーションでは、実際には、データベースへの接続を確立するためのより簡単な方法です.
あなたが行くならばsinatra-activerecord Githubページには、以下のようなことが必要です.
「Sinatra/ActiveRecord ' gemをあなたのSinatraアプリケーションに要求し、データベース接続を確立します.」

# app.rb
require "sinatra/activerecord"

set :database, {adapter: "sqlite3", database: "foo.sqlite3"}
# or set :database_file, "path/to/database.yml"

「あなたがいるならconfig/database.yml ファイルは、自動的に、それを指定する必要はロードされます.また、生産では$DATABASE_URL 環境変数が自動的にデータベースとして読み込まれます(そうでなければ指定しない場合)."
これは文字通り私の環境です.rbは次のようになります.

require 'bundler/setup'
Bundler.require
require_all 'app'

それから私のapplication_controller :

configure do
    set :public_folder, 'public'
    set :views, 'app/views'
    set :database_file, "config/database.yml"
    enable :sessions
end

configure :test, :development do
    set :session_secret, File.read("config/keys/session_secret.txt")
    set :google_api, File.read("config/keys/API_KEY.txt")
end

configure :production do
    set :session_secret, ENV['SESSION_KEY']
    set :google_api, ENV['GOOGLE_API_KEY']
end

私がしなければならなかったのは、どこで私のdatabase.yml ファイルがあり、データベースへの接続を設定しました.
The Sinatra Readme また、設定を設定するconfigure 上記のメソッド.
Herokuでは、アプリケーションの環境変数を設定できます.見つけることができますhere .
Heroku also requires that you include a Procfile アプリケーションのルートレベルで、アプリケーションを起動するときに実行するコマンドを指定します.このアプリのためだけに含まれます:

   web: bundle exec rackup config.ru -p $PORT

フィードバック

私は、あなたがこのブログを読む時間をとって、私のアプリケーションがすることができるものを見たことを大いに感謝します.あなたがコードを通して見てみたいならば、私が非常に感謝されることができたどんな改善もあるかどうか見てください.
私は私ができるときにアプリケーション/機能に修正プログラムを追加します.追加したいものがあるなら、Githubにプッシュしてください.

私に手を差し伸べる

に貢献するhole-in-the-wall Github repo

これは私が好きなアプリケーションであり、使用し続けるのが大好きだ.私は別のフレームワークとツールを使用して、このアプリケーションを更新します.