オリジナルアプリのまとめ（自分用）

1.　アプリについて

　Footan => https://footan.herokuapp.com/

　アプリの名前は『 Footan 』です。food × 探索( ≒検索 )で組み合わせて付けました。
　アプリの概要は自分の好きな店の料理をほかの人と共有できるアプリです。
　制作目的は人にとって食事は幸福の時間だと思い、その喜びを他人と共有できたり紹介出来たりすると、嬉しくなると思ったからです。
　機能について下記に述べます。
　- 投稿一覧機能
　- 投稿詳細表示機能
　- 投稿/編集/削除機能
　- ログイン機能
　- 画像添付機能
　- ぐるなびAPIを用いた店舗検索機能

2.　開発環境について

　AWSのcloud9上でコードを書きました。
　今回用いた言語はRuby 2.5.3とrails 5.2.2です。
　データの管理はgithub、設計はcacoo、デプロイはherokuを用いました。

3.　制作手順について

企画=>設計=>プログラミング=>デプロイという流れでやりました。

　まず初めに企画をしました。1.で述べたようなアプリを作りたいと考えました。
　次にcacooを用いた設計をしました。サイトマップ、ワイヤーフレーム、データベース図を描きました。
　サイトマップはWebサイトにあるページの一覧を書き出した設計図です。
　ワイヤーフレームは実際のWebサイトのレイアウトを描きだしたものです。
　データベース図はテーブルの構成を書き出したものです。別名ER図とも呼ばれます。
　次にプログラミングですが、今回の記事の大部分となるため、次の章で述べます。
　最後にherokuでデプロイしました。開発環境と本番環境でエラーが出る違いがありました。

4.　プログラミングについて（分かりにくかったこと)

　流れとしてトップページ=>ユーザー関連=>ログイン機能=>店舗検索=>投稿機能=>いいね機能の順で作りました。
　タイトルのようにいろいろと書いていると量が膨大になってしまうので、わかりにくかった部分を書いてアウトプットしたいと思います。

passqord_digest, has_secure_password: パスワードを平文で表示するのは危険なため暗号化する。またpassword, password_confirmationのカラムを作成する。

require_user_logged_in : 事前にユーザーのログインが必要という意味

correct_user : ユーザーがcurrent_userか見極め、違った場合ページに入らせない

Shop.find(params[:id]) : Shopクラスの該当するidをもつデータを探し出す

API部分
require 'net/http'
require 'json'
require 'uri'　を最初の部分に書いておく

base_url='https://api.gnavi.co.jp/RestSearchAPI/v3' : 親元のURL。この下にパスが加わることでいろいろなページに飛ぶ。

freeword = params[:search] : toppageで入力されたものが受け渡しされ、それをfreewordに代入

parameters = {
'freeword' => freeword,
'format' => 'json',
'keyid' => ENV['GURUNAVI_API_KEY']
}
それぞれのパラメータに指定が入り、それをparametersとする。keyidは人によって変わる。ENVで隠ぺいを行っている。

uri = URI(base_url + '?' + parameters.to_param) : ここである程度のurlを絞りこむbase_urlにparametersを組み合わせる。

response_json = Net::HTTP.get(uri) : 結果をJSON形式で受け取る

response_data = JSON.parse(response_json) : JSON形式のデータを可読化

rests = response_data['rest'] : その結果のrest部分だけをrestsに代入する

@rests = []
rests.each do |rest|
　Shop.find_or_initialize_by(shop_code: params[:shop_code])
　shop.shop_code = rest['id']
shop.name = rest['name']
　end
@rests << shop
end
　@restsを配列に設定する。restsを繰り返し処理を行って分ける。その時にもし新しくshop_codeが見つかったらshop_codeを作成する。rest['']というかたちで特定のデータを取り出して、代入する。@restsに得たshopのデータを受け渡す。

画像添付機能
gemfileにgem 'carrierwave'を追加したbundle install
rails g uploader imageで画像アップロード用のクラスを作る
データベースに画像アップロード用のカラムを追加する。
mount_uploader :image, ImageUploader
を実装したいクラスに追加
ストロングパラメータにimageカラムを追加
viewファイルに
<%= form_for(@user) do |f| %>
<%= f.file_field :image %>
　　<%= f.submit '更新する', class: 'btn btn-primary' %>
<% end %>
という風に書く。

5. 大変だったこと

　やはり4.で書いたAPI機能です。ものすごい数のエラーにやられて、１週間ぐらい悩みました。API機能については実際に用いてプロジェクトを作っているという記事を見つけられなかったです。本当にわからなかったため、メンターの方に質問して教えてもらいながら作りました。そのおかげである程度どういう風にデータを取り出せばよいかわかりました。難しくて扱えなかった機能がちゃんと動作したときはすごいうれしかったです。

6. 改良点

　現在はフリーワード検索のみしかないがこだわり検索みたいに条件を絞り込んで検索する機能を追加してもいいと思った。そうすれば自分にマッチしたお店が見つけやすくなると考えたからです。
　画像の大きさがバラバラなのも見栄えが悪いのでそろえればもっといいアプリになると考えている。
　スマホなどで開くとレイアウトが崩れてしまうのでレスポンシブデザインをこだわる