-
Notifications
You must be signed in to change notification settings - Fork 0
/
memo
199 lines (163 loc) · 12.2 KB
/
memo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
Todoアプリ in Rails and Vue 9/17~9/24
機能:(ルール)
1. タスクをつけられる。→OK
- せっかくなのでdeleteもつけてみることに→ok asyncができてないが、、→apiなので、それはできないっぽい
2. ユーザーごとにつける 仕様を大幅に変更する必要がある。api通信でsessionが残せない。→一応ok
3. axios通信. vue通信→成功
4. レイアウトはmaterize? →一応試せた
5. メール機能搭載→OK letter_openerでやったが、gmailでもできた
6. scaffold, deviseの使用は禁止 →使わなかった
7. １日で完成(クオリティは低くてOK) → さすがに１日じゃきついが学ぶことは多かった！！
8. gitに公開 → ok
おまけ:
1. rails admin管理画面を作りたい
- 全ユーザー、全タスクを観れる
要件:
1. Task Model
- name:string, is_done:boolean, user_id:string
2. User Model
- name:string, mail:string, password:text
-------------------------------------------------------
手順
User周り
1. Modelの作成
2. 画面作成 componentsあたりで苦戦していた。また次回やろう
3. components周りをカンニングしながら構築していこう。
- sign_upをcomponentsで表示させたい。
- routerを作る必要があり。router.jsの中身なんだっけ
- vue-routerクラスは必要みたい（なぜだか知らんが）
- routesの中にpathとそれにあったcomponentsをつけていく。配列で入れる
- vueRouterのインスタンスを作成しroutesを入れる。
- template内はdivで加工必要があるらしい（なぜだか知らんが）
- controllerのrenderでjson: というのが必要でした。(これがないと500エラーが出る)
- sign_inをしたい
- loginもpostみたいだ。getで画面をrenderして、submitでpostをする。
- viewが減ったので綺麗になったのかな？多分 → やっぱりget new みたいのはいらなかった。rederで一つのページにまとめられるので。。。
- user.jsのrouterから表示したい。render h(app)観たいのは使いたくないのだ。
- しかし、うまくいかない。。うまくいった。
- vue-routerのmodeが必要だったみたいだ。後vue-routerにはdefaultで<router-view>というものが存在した
- sign_inのresponseURLがなぜか/sign_upになっているという。。よくわからん
- error後のrender,redirectするところがうまくいかない。
- session周り
- sissionの設定の仕方がよくわからない。application_controllerに@current_userを設定するも、うまく動かず。。
- resqueとは
- exceptionのcatchみたいなもの
- apiでユーザー登録をするのはcsrf的によろしくないので、form actionで作成することにする
- もしかしてもうできたりする？意外と簡単だったりして。。
4. パスワードをsecureにする OK
- gem 'bcrypt' の導入
- rails generate migration add_password_digest_to_users password_digest:string
- どうやらpassword_confirmationはフロントサイドでの確認のようだ。サーバーにconfirmationを送ったりはしない
だからエラーが起きていたのだ。
5. エラーメッセージ validate message
- @user.errors.full_message.eachに格納されているらしい？
- エラーメッセージは表示できた。しかし、なぜかpasswordのところが自動的にpresenceのvalidationがかかっている。
- そのため英語で表示されているのだが、よくわからん。
6. フラッシュの表示がされない。
- なぜだろう。リダイレクトが失敗していた。
- できた
7. railsの値(@userなど)をvueで表示するやり方がわからない。どうやらpropsに入れてやるみたいだが、、
- api連携じゃないとvueはきつそうだ。というかメリットがあまりないと思われる。
8. メール機能搭載
- 意外と簡単だった。
-------------------------------------------------------
カンニングしたところ
1. Task controllerのclass部分(最初の名前のところ。いつも自動だったので、知らん)
2. api/tasks.jsonが表示されない。何がおかしい？
- controllerがactioncontrollerになってた
- ディレクトリの構造をapi/tasks/tasks_controllerにしていた。。。
- api/tasks_controller.rbでした。そしたらできました。
3. axiosが動かなかった。protect~が書いていない。。どこだか忘れた
- protect_from_forgery with: :null_session
- application controllerでした。。
- axiosのgetの書き方がわからない。axiosのapiの叩き方講座
- まずは中かっこを書きましょう。
ex) ((res) => { return hoge }); みたいに
-axiosで配列をgetする時の注意点。
1. まず配列をdata function内で定義をする必要がある。
2. その後mountedでfunctionを作成 そこにメソッドチェーンを繋げる
3. getAjaxメソッドを作成してapiを叩く
4. this.function; this.objectであるようにthisを忘れない！！！
※注意点: dataにtasksを配列で入れるようなことはできない。。
まずはdataは初期値かnullである
4. vueを入れたことにより、アクセスするごとに毎回buildしてる。これだと時間がかかってしまうので、
serverを立てて自動で更新するようにします。やり方を知らないのでカンニング
- 必要なもの, やること
1. Procfile, Proc.dev, bin/server かな
- bin/server内にbundle installとprocfile.devの実行が入っている。
これで自動的に読むようにしている。herokuでprocを書くようにと言われたが、
ここで書けばそれ通りに実行するということだったのか。なるほどー
2. Procfile.devの中身
- bundle exec rails s ← serverの起動
- ./bin/webpacker-dev-server よく見るやつ
- local用の便利なサーバらしい
- 中身はnode.js, expressサーバ
- 自動ビルド後、自動ロードする優れもの
- 編集したモジュールのみを更新するHot module replacementが使われている！
3. bin/serverはpermission denied されるのでchmodで権限を付与
4. bin/serverで実行できる！なんて簡単だ！！
5. カンニングはしてないがメモを残す. axiosでpostをする. urlがcreateになる。
さてこれは簡単にできるのだろうか。
- 一回目とりあえずノリでgetと同じようにpostも書いて観たが、500のエラーがあった。
- nullで作成されている。postはうまくいっているようだ
- nameがnullで保存されている。なぜだ。わかりました。。
1. tasks_controllerでTask.new()内のparamsが:nameになっていた。
ここはparams.fetch()で取る必要があった（ちょっとよくわからない）
どうやらstrong parameterというらしい
rubymineのdebugを使って観たらめちゃくちゃ分かりやすかった。
0> params<ActionController::Parameters {"task"=>{"name"=>"aaaaeeee"}, "format"=>"json", "controller"=>"api/tasks", "action"=>"create"} permitted: false>
0> params.fetch(:task).permit(:name)=> <ActionController::Parameters {"name"=>"aaaaeeee"} permitted: true>
おもしろ！！！
2. dataの取り方がおかしかった。paramsを変更した後resに来るのはres.dataに
nameが入っているデータが来たのでそれをunshiftすることにしました。
6. deleteの部分の実装は比較的簡単であったが、リアクティブにならなかった。
その原因は・・・
- よくわからん。。今度聞いてみよう。とりあえずwindow.location.reload()で回避
--------------------------------------------------------
気になったところ
1. jsonbuilderのsetってなんぞや
- showを作る必要なくね
2. foremanとは
- procfileを実行するもの 手動でコマンドを叩かず、自動でやってくれる
3. timezoneはconfig/applicationで変更できる
4. 感嘆符のあるなし。find_by, find_by! これは!がついたときにexception例外を発生してくれる。ない場合はnullを返す
5. json のerrorsのやつ。errorメッセージの時に使うのか。初めて気づいたぜ。
6. javascriptのfor文の書き方.配列内のオブジェクトを書く時ちょっと違う。添え字をgetしてしまうので、res.data[data]みたいにする必要がある。
7. protect_from_forgeryとは何か
- exceptionにするとcsrfのエラーが出る。null_sessionにすると大丈夫。
- csrf対策らしい。どうやらapiの時はexceptionをしてcsrfの対策をoffにする必要があるみたいだ。
- というわけでユーザーごとのセッションを残すのにapiを作ることは無理みたいだ。
8. メールを送る時にgmailからではsmtp認証がかかってしまう。そのため2段階認証でアプリのパスワードを手に入れる必要があった。
- これで無事にメールが送られるようになった。パスワードをコードに書くのは危険なので、注意をしたい
-------------------------------------------------------------------------
一応完成。トータルで1週間。正直触っていない間もあったので、コミット時間はだいたい20~30時間くらいだろう。
１日5,6時間を複数日使った感じだ。
会員登録,タスクの追加ができ、登録の際にメールも送られる。
今回学んだこと
- vue.js
- mailer
- apiとdb
- フロントエンド,バックエンドの連携
- 多言語化
- rubymineでの構築
まずはvueを試したかったので、タスクアプリを真似て作ってみた。
ユーザー機能もdeviseで楽をしていたので、一から構築をしてみた。意外と手間取ったが、以前作っていたこともあり、
なんとかなった。
cssはmateriarizeという結構リッチなものを使った。bootstrapに飽きていたので、ちょうど良かった。
メールも今まで試してなかったが、意外と簡単にできた。
多言語も割と簡単にできた。今まで書き方がよくなかったのだろう。
rubymineの使いやすさにびびった。デバッグが少しやりづらいが。。総じてメソッドやリレーションがわかるので、とても使いやすい。
phpstormで使い慣れていたので、atomから脱出できて良かったと思う。
このようにメモに書きながらコードをするのが比較的効率出来だと思った。何がわからないのか、どこでつまずいたのか。
どこが難しかったけど、突破したのか。これを理由を含めて書けるようになると非常にスキルが身につく気がする
次やるときも同じようにしてみよう。本当はqiitaとかにそのままあげるのが良いのだろうけれども。。
今回手間取ったところ
ユーザーをapiで作ろうとしたところ。apiで渡すとcsrf対策でsessionが効かなくなってしまうので、結構手間取った。
vueは使わずに直接コントローラーに渡して書いた。
一番いいのはvueで<%= @user.hoge %>みたいなのができることである。ただ、propsの定義やdataの受け渡しでうまくいかなかった。
次やる時はそこをうまくやりたい。まあ全部が全部reactiveにしなくても良いとは思うが。
次のプロジェクト
一応もう決まっている。それは単語カードアプリである。
最近スペイン語を勉強してるが、あまり良いとは思っていない。そこで自分で作っちゃおうと思ったのである。
どれくらいかかるかわからないがとりあえず、始めてみようと思う。
機能はちゃんとした定義書にまとめたので、そっちをみよう。