[教學][JDStore] 後端+前端 功能彙整

後端功能

[教學][JDStore] 輕鬆產生商品「倒數計時器」



[教學][JDStore] 輕鬆產生商品「優惠折扣」



[教學][JDStore] 4步驟輕鬆做出「搜索商品」功能



[教學][JDStore] 5分鐘輕鬆做出「一個商品多張圖片」功能



[教學] [JDStore] 輕鬆加入「QR Code」支付連結


前端功能

[教學][JDStore] 上傳 Heroku 後 CSS 失效?



[教學][CSS] 好看的登入畫面

小幫手

[教學] 測試時自動為訂單「生成地址」



[教學][JDStore] 輕鬆使用seed.db 產生「多圖片商品」



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



如果获得2等奖,我会从投票给我的VIP学员里抽出1位赠送这本有香气的励志书


[ORID] 5/25 JDStore Day 6

Objective

今天完成了什麼事情? (與哪些人、事、物有關)

看了NIC 直播
實驗了第一版的+-按鈕

什麼部分印象最深刻?


Reflective

今天的整體感覺如何? (情緒或感受)

前端的美感不知道是天生的還是可以培養的
覺得隊友也很強啊,至少比我強
https://mp.weixin.qq.com/s/sJI8IUEz1lgAYDtxiqugmA

高峰是什麼?

看到隊友改版的畫面,覺得蠻讚的

低點是什麼?

還處於崩潰狀態,寫個簡單的後端都失敗寫不下去


Interpretive

今天有什麼關鍵轉捩點嗎?

常見的 Ruby on Rails 工程師面試問題
剛好看到這個,跟Jimmy聊了一下,順便問了一下JS的寫法
Jimmy建議有空可以做看看 12 in 12 challenge

有什麼重要的領悟?

參加全棧就是為了跟優秀的同學學習,不應該帶入負面情緒
甚至可能影響到同學。心力要花在學習上

為什麼很重要?

「為你自己學 Ruby on Rails」,如其標題,學習不需要為公司、不需要為長官、同事、不需要為別人,只為你自己。


Decisional

我們會如何用一句話形容今天的工作?

爆炸的一天,靠隊友carry

明天要做什麼事情?有什麼需要繼續努力的?

寫個簡單的後端
去旅行走走,找朋友
看一下ihower的直播, 放輕鬆,看能不能把小功能做完
宣傳頁
試做幾個should have的功能
做幾個功能推送到github試試
做完新教程+功課
寫一兩個後端功能
母親節,抽空把 不會的語法寫到logdown,準備週一與隊友開會
參加meetup, 把教程第二遍做完,並交作業
使用封閉式思考,把代辦事項化為最小項目寫進Tower裡面,跟隊友開會。

[ORID] 5/24 JDStore Day 5

Objective

今天完成了什麼事情? (與哪些人、事、物有關)

幫人debug 倒數計時器
複習關於RoR
http://disco26.logdown.com/posts/168410-novice-to-novice-ruby-on-rails-introduction

什麼部分印象最深刻?

加強認知Ruby與Rails的關係
RoR最主要還是拿來做網站,可替代性比較高
http://wpvsblogger.com/ruby-on-rails-vs-wordpress/
課程結束後,後面應該加強學習Ruby或是Python


Reflective

今天的整體感覺如何? (情緒或感受)

想多做幾個後端功能練習

高峰是什麼?

成功debug了倒數計時器,
其實就跟seed一樣,寫完教程以後如果別人做不出來就滿緊張的,怕害到人

低點是什麼?

雖然沒寫什麼code,本來想讀本書,結果也沒讀!


Interpretive

今天有什麼關鍵轉捩點嗎?覺得要開始加強後端能力

https://www.reddit.com/r/dailyprogrammer/comments/6coqwk/20170522_challenge_316_easy_knights_metric/

有什麼重要的領悟?

想一下什麼時候可以寫出 Fizzbuzz
記得上次寫的時候沒寫出來

為什麼很重要?

This is computational thinking


Decisional

我們會如何用一句話形容今天的工作?

等隊友pull到最新的進度,發呆

明天要做什麼事情?有什麼需要繼續努力的?

去旅行走走,找朋友
看一下ihower的直播, 放輕鬆,看能不能把小功能做完
宣傳頁
試做幾個should have的功能
做幾個功能推送到github試試
做完新教程+功課
寫一兩個後端功能
母親節,抽空把 不會的語法寫到logdown,準備週一與隊友開會
參加meetup, 把教程第二遍做完,並交作業
使用封閉式思考,把代辦事項化為最小項目寫進Tower裡面,跟隊友開會。

[ORID] 5/23 JDStore Day ?

Objective

今天完成了什麼事情? (與哪些人、事、物有關)

與隊友開會zoom
聊一下進度
幫張鵬飛解決了多圖上傳seed的問題

什麼部分印象最深刻?

協作出問題,需要練習


Reflective

今天的整體感覺如何? (情緒或感受)

今天感受非常不好,有種與社會脫節的感覺,不知道為什麼要做這些事

高峰是什麼?

決定來寫ORID

低點是什麼?

整個心情都很不好,覺得對不起家人


Interpretive

今天有什麼關鍵轉捩點嗎?

有什麼重要的領悟?

需要查一下找工作的事

為什麼很重要?

雖然李笑來說所有的技能都很重要
但還是要先確認自己做的事在短期內的幫助


Decisional

我們會如何用一句話形容今天的工作?

隊友歸隊,重新學習協作

明天要做什麼事情?有什麼需要繼續努力的?

去旅行走走,找朋友
課程還沒練3遍,後端也不熟
看一下ihower的直播, 放輕鬆,看能不能把小功能做完
宣傳頁
試做幾個should have的功能
做幾個功能推送到github試試
做完新教程+功課
寫一兩個後端功能
母親節,抽空把 不會的語法寫到logdown,準備週一與隊友開會
參加meetup, 把教程第二遍做完,並交作業
使用封閉式思考,把代辦事項化為最小項目寫進Tower裡面,跟隊友開會。

[筆記] 網站上傳檔案使用雲端空間 [七牛雲]

gem carrierwave
要先安裝carrierwave才能上傳檔案
git checkout -b qiniu

註冊七牛

https://portal.qiniu.com/bucket
註冊七牛之後到

個人面板 ->密鑰管理,找到AK跟SK

新建儲存空間
產品列表 -> 對象儲存

安裝對應的GEM

Gemfile
+ gem 'carrierwave-qiniu'
+ gem 'qiniu-rs'

bundle install
bundle update
touch config/initializers/carrierwave.rb

使用carrierwave上傳時用下面的帳密設定,不直接顯示,帳密透過figaro保存

config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  config.storage             = :qiniu
  config.qiniu_access_key    = ENV["qiniu_access_key"]
  config.qiniu_secret_key    = ENV["qiniu_secret_key"]
  config.qiniu_bucket        = ENV["qiniu_bucket"]
  config.qiniu_bucket_domain = ENV["qiniu_bucket_domain"]
  config.qiniu_block_size    = 4*1024*1024
  config.qiniu_protocol      = "http"
  config.qiniu_up_host       = "http://up.qiniug.com"  #选择不同的区域时,"up.qiniug.com" 不同

 #華東 "http://up.qiniug.com" 

 #華北  "http://up-z1.qiniu.com"  

 #華南 "http://up-z2.qiniu.com"  

end

單圖上傳器,上傳到七牛

app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
...()
- storage :file
+  if Rails.env.production?
+    storage :qiniu
+  elsif Rails.env.development?
+    storage :file
+  end
...()

多圖上傳器,上傳到七牛

app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
...()
- storage :file
+  if Rails.env.production?
+    storage :qiniu
+  elsif Rails.env.development?
+    storage :file
+  end
...()

使用Figaro保存密碼

gem 'figaro'
bundle install
figaro install
cp config/application.yml config/application.yml.example

config/application.yml
 production:
   qiniu_access_key: xxxx  # 你的 qiniu AccessKey

   qiniu_secret_key: xxxx  # 你的 qiniu SecretKey

   qiniu_bucket: xxxx  # 你的 qiniu bucket

   qiniu_bucket_domain: xxxx  # 你的 qiniu bucket domain


 development:
   qiniu_access_key: xxxx  # 你的 qiniu AccessKey

   qiniu_secret_key: xxxx  # 你的 qiniu SecretKey

   qiniu_bucket: xxxx  # 你的 qiniu bucket

   qiniu_bucket_domain: xxxx  # 你的 qiniu bucket domain

figaro heroku:set -e production
可以看到密碼已設定
heroku config

git push origin qiniu
git push heroku qiniu:master
heroku run rake db:migrate

網站使用上傳功能應該就會傳到七牛的空間



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



只要¥1,就能解救穷苦台湾同胞

[教學] [JDStore] 輕鬆加入「QR Code」支付連結

預計時間:1分鐘

因為要開通微信支付或是支付寶,必須要是真正的商家才能申請
如果沒有辦法開通的話,我這邊提供一個方法,「QR Code」支付。
點擊支付按鈕後會跳出QR Code,再點擊QR Code才會進行支付。

成果

修改如下

app/views/orders/show.html.erb
<% if !@order.is_paid? %>
<div class="group pull-right" >
    <button onclick="we_on()" class="btn btn-danger">以微信支付
      <div id="wechat_pay_overlay" onclick="we_off()">
        <%= link_to(image_tag('http://微信qr.jpg'),
        payment_with_wechat_order_path(@order.token), method: :post, class: "btn btn-danger") %>
        <br><h3>~可隨意打賞,感恩~</h3>
      </div>
    </button>

    <button onclick="ali_on()" class="btn btn-danger">以支付宝支付

      <div id="alipay_overlay" onclick="ali_off()">
        <%= link_to(image_tag('http://支付寶qr.jpg'),
        payment_with_alipay_order_path(@order.token), method: :post, class: "btn btn-danger") %>
        <br><h3>~可隨意打賞,感恩~</h3>
      </div>

    </button>

</div>



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



如果获得2等奖,我会从投票给我的VIP学员里抽出1位赠送这本有香气的励志书


[教學][JDStore] 上傳 Heroku 後 CSS 失效?

如果有遇到 商店在本地localhost跑的時候 一切顯示正常

但傳到Heroku以後圖片格式通通跑掉,變得好醜

看起來是 CSS都沒有讀取造成的話

解決方法如下

config/environment/production.rb
-    config.assets.compile = false
+    config.assets.compile = true

再執行
$ rake assets:precompile

  • 上傳heroku, 成功啦!!!



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



如果获得2等奖,我会从投票给我的VIP学员里抽出1位赠送这本有香气的励志书


[ORID] 5/19 JDStore Day3

Objective

今天完成了什麼事情? (與哪些人、事、物有關)

做了折扣功能,沒debug

什麼部分印象最深刻?

後端功能一開始是隨便做做也沒想會成功,晚上突然就成功了
還是要找人交流完善一下


Reflective

今天的整體感覺如何? (情緒或感受)

隊友身體不好,辛苦他了,身體不好的時候做什麼都困難

高峰是什麼?

低點是什麼?

Amazon這爛公司, keep bothering me, i cant believe how shit their services can be.
do they even understand english? inactive account doesnt euqal to incorrect password, fucking moron


Interpretive

今天有什麼關鍵轉捩點嗎?

參考同學寫宣傳頁的手法自己畫了一篇

有什麼重要的領悟?

感覺Ruby很多功能都不是很好找,
比起Wordpress, 功能性差滿多的

為什麼很重要?

不太明白為何要用RoR寫網頁
....要問一下助教.....


Decisional

我們會如何用一句話形容今天的工作?

延續昨天
成功開發出新功能,明明這種功能應該隨便google都找得到代碼抄啊

明天要做什麼事情?有什麼需要繼續努力的?

看一下ihower的直播, 放輕鬆,看能不能把小功能做完
宣傳頁
試做幾個should have的功能
做幾個功能推送到github試試
做完新教程+功課
寫一兩個後端功能
母親節,抽空把 不會的語法寫到logdown,準備週一與隊友開會
參加meetup, 把教程第二遍做完,並交作業
使用封閉式思考,把代辦事項化為最小項目寫進Tower裡面,跟隊友開會。

[必備][JDStore] 輕鬆產生商品「優惠折扣」

效果

沒有折扣功能的店太坑爹了!快裝吧

預計時間:5分鐘

  • 給商品在資料庫裡建立一個折扣

$ rails g migration add_discount

db/migrate/XXXXXXX
  def change
    add_column :products, :discount, :integer
  end

rake db:migrate

app/controllers/admin/products_controller.rb
  def product_params
-    params.require(:product).permit(:title, :description, :price, :quantity, :image)  
+    params.require(:product).permit(:title, :description, :price, :quantity, :image, :discount)
  end
  • 優惠幅度須大於0%,小於100%
app/models/product.rb
+ validates_numericality_of :discount, :greater_than => 0, :less_than => 100, :allow_blank => true 
  • 後台管理員可以設定折扣幅度

app/views/admin/products/edit.html.erb
<div class="group">
  <%= f.input :discount,:label => "Discount % (eg. $100 x 80% = $80)" %>
</div>
  • 如有有打折,就把價格改為特價的價格
app/controllers/products_controller.rb
  def discount_price
    @product = Product.find(params[:id])
    if @product.discount.present?()
      @product.price = @product.price * (@product.discount / 100 )
    end
  end
  • 如有有打折,就顯示特價的價格

app/views/products/show.html.erb
-        <div> 数量 : <%= @product.quantity %> </div>
-    <div class="product-price">  <%= @product.price %> </div>
+      <!-- 如果有折扣 -->
+      <% if @product.discount.present? && @product.quantity > 0 %>
+        <!--  顯示折扣% -->
+        <%= @product.discount %>% off
+        <!--  顯示原價,加上刪除線 -->
+        <s><div class="product-price">  <%= @product.price %> </div></s>
+        <!--  顯示優惠價 -->
+        <div class="product-price discount"> <%= @product.price = @product.price * @product.discount/100 %></div>
+      <% else %>
+        <!-- 沒折扣 -->
+        <div class="product-price"> ¥ <%= @product.price %> </div>
+      <% end %>
+        <br>
+        <div> 数量 : <%= @product.quantity %> </div>
  • 修改整體商品頁面價格

app/views/products/index.html.erb
-      <%= product.title %> ¥ <%= product.price %>
+      <%= product.title %>
+      <% if product.discount.present? %>
+        ¥ <%= product.price = product.price * product.discount/100 %>
+      <% else %>
+         <%= product.price %>
+      <% end %>
  • 購物車總價計算
app/models/cart.rb
def total_price
    sum = 0
    cart_items.each do |cart_item|
      if cart_item.product.price.present?
        if cart_item.product.discount.present?
          sum += cart_item.quantity * cart_item.product.price * cart_item.product.discount / 100
        else
          sum += cart_item.quantity * cart_item.product.price
        end
      end
    end
    sum
  end
  • 購物車顯示
app/views/carts/index.html.erb
-        <td><%= cart_item.product.price %></td>
+           <% if cart_item.product.discount.present? %>
+            <td><%= cart_item.product.price * cart_item.product.discount / 100 %></td>
+          <% else %>
+            <td><%= cart_item.product.price %></td>
+          <% end %>
  • 帳單顯示
app/views/carts/checkout.html.erb
-        <td><%= cart_item.product.price %></td>
+           <% if cart_item.product.discount.present? %>
+            <td><%= cart_item.product.price * cart_item.product.discount / 100 %></td>
+          <% else %>
+            <td><%= cart_item.product.price %></td>
+          <% end %>


延伸教學 - [JDStore] 輕鬆產生商品「倒數計時器」

目前Database要怎麼把倒數計時器與折扣價連動在一起還沒做出來,歡迎同學一起討論研究



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



如果获得2等奖,我会从投票给我的VIP学员里抽出1位赠送这本有香气的励志书


[教學][JDStore]測試時自動為訂單「生成地址」

預計時間:1分鐘

每次測試購買時,最麻煩的事我想就是要填寫資料了

尤其是填寫地址,居然還要填寫四次

雖然填寫過一次之後可以用auto,下次按一下選擇之前用過的地址

但如果能完全不用填寫地址就好了!

我懂你!



只要在f.input的後面加入, input_html: { value: "地址" }
就不用再輸入地址啦,趕快試試看吧
app/views/carts/checkout.html.erb
  <legend>订购人</legend>
  <div class="form-group col-lg-6">
    <%= f.input :billing_name, input_html: { value: "123 Street, XJP, China" } %>
  </div>
  <div class="form-gropu col-lg-6">
    <%= f.input :billing_address, input_html: { value: "123 Street, XJP, China" }%>
  </div>

  <legend>收货人</legend>
  <div class="form-group col-lg-6">
    <%= f.input :shipping_name, input_html: { value: "123 Street, XJP, China" }%>
  </div>
  <div class="form-group col-lg-6">
    <%= f.input :shipping_address, input_html: { value: "123 Street, XJP, China" }%>
  </div>



希望您喜歡這篇文章,請抽空幫我投一票,謝謝!



如果获得2等奖,我会从投票给我的VIP学员里抽出1位赠送这本有香气的励志书