JDStore大賽總結 - 檢視自己的不足,並改進


作品網址
https://fullstack.xinshengdaxue.com/works/560

比賽

由於Joblisting一開始對於這個比賽的定義不是很清楚,所以在比賽開始前我都在做Joblisting的練習,想不到很多同學在比賽還沒開始前就已經在做參賽作品了,我發現到後期上線的作品比較沒人來看,反饋也會比較少,沒有反饋後面迭代也不容易找到方向。

所以本次比賽就提前開始做準備,將商店需要的功能先寫好User Story
但後遺症就是前面的練習不足,但有了Joblisting的教訓,這也是無可奈何的事。

組隊

開始前問了文班長組隊是全栈會有配對還是要自己找,文班長說是要自己找的,我稍微問了一下上期比賽前幾名的同學,發現他們很快就已經被人找去組隊了,加上我Joblisting並不突出,不容易徵到好的隊友,所以就寫了一篇自介文找隊友,也鎖定了在Joblisting作品在20~40名的同學找他們推薦自己,後來找到廣州的Sylvia同學, 因為與他的溝通很順暢,我有我想做的主題跟想法,Sylvia也都能配合。最重要的是Sylvia是一個很負責任的人,也很會適時的鼓勵我,事後也覺得真是找到了一個好的隊友。

分工

分工這方面倒是沒有花很多時間,我們兩個人都是覺得前端後端都可以,Sylvia讓我選,我就選了後端,事後證明也是對的。因為Sylvia的前端做得比我做得好看太多啦,我覺得設計美感上不是一兩天就能做到的, 韵儿爸爸 雖然作品沒能拿下第一,但整體來看他的作品我認為是所有作品裡前端做得最好看的。Sylvia也是Joblisting的網站就做得很漂亮,我在這方面還需要加強,向他們學習。

比賽前一週

當時正好Nic跟文班介紹到Tower這個工具,所以我們就把user story寫進Tower裡面,很快的大方向就出來了,後端該做什麼功能,前端至少先把welcome跟product美化,後端只做實用的功能。
比如「倒數計時」、「折價」、「分類」、「收藏」、「搜尋」等等,
裡面比較困難的部分居然也很順利的讓我在第一週就成功做出來了
PS.我個人認為折價功能非常非常重要,到比賽結束時看到大部分作品都沒有做,這是商店核心功能,可惜我沒有多去推廣一下。

部署到Heroku

Sylvia是一期學員,所以他看得到後面的教程,當我們二期還沒看到AWS跟七牛時,Sylvia就已經把他部署好了,一切看似美好,BUT人生就是有BUT,Sylvia由於身體不適需要住院幾天,部署好的AWS我也沒有密鑰所以無法上傳Heroku,而且人在海外的我申請AWS失敗(Amazon服務真的很糟)
人在廣州的Sylvia安裝七牛失敗,變成我們無圖床可用,Heroku也無法上傳。

Sylvia住院也沒帶電腦,我也希望他好好休息,所以我緊急申請了七牛的服務
把專案改傳到我的Heroku,ˊ終於有驚無險的在比賽第二天成功讓圖片顯示。

第一週

第一週因為Sylvia住院的關係,我們前端是我臨時做的,老實說不怎麼好看,


我都在做後端功能,又加入了一些我認為必備的功能,比如修改網址讓客戶一眼就知道你在賣什麼,多圖上傳功能+多圖seed,客服等等,至此其實一個購物網站的基本功能都完成了。我們已經把Tower裡面[Must]跟[should have]的功能都完成了,剩下[Good to Have]還沒做。
也把這些功能寫成教程,有興趣可以看看以下連結。
[JDStore] SweeTart 後端+前端 功能彙整

第二週

這週因為Sylvia回來了,前端陸陸續續的美化,我讓Sylvia自己決定怎麼做,
我認為前端兩個人做風格一定會有衝突,我只有覺得功能上有影響的才會提意見,比如倒數計時我希望能字體大一點顯眼一點,讓客人看到在倒數會覺得好像非買不可,優惠快結束了,至於要用什麼顏色,位置,我都尊重Sylvia的選擇。

然後不知道是不是第一週比較緊繃,這週後端嘗試了幾個功能都失敗,後來想想是User Story寫的不明確,覺得先做了再說,但沒想清楚要怎麼做,而且把github搞得很醜。

  • 後端功能一定要完全想明白邏輯才開始做,不能只有個大概就開始,幾乎是必定會做失敗。

怠惰期

比賽後期因為不知道還要做什麼功能,加上全棧為了照顧還沒參賽的同學,比較沒有明確的指示,所有的同學都專注在要怎麼獲得票數,我發現我們無法追上這些同學增加票數的速度,又不想學他們拉票的方式,所以有點不知道要做什麼,Sylvia也有這種感覺。試著去學習AJAX跟百寶箱的東西,卻也忘不了比賽,陷入了很沒有效率的一週。

拉票

一開始因為作品上的早,寫了教程有不少同學來問我問題,也拉到一些VIP票,後面就沒有主動出擊,Sylvia拉完票以後票數就停滯了,陷入不知道怎麼辦的情形。

一些不正常的拉票就不說了,其實因為台灣並不流行weChat,所有參賽的台灣同學微信的朋友都不多,所以普通票都低得可憐( Anndo+Jimmy 兩位就蠻吃虧的,當初半開玩笑建議她兩人組隊沒想到後面微信票這麼重要)

韵儿爸爸的拉票方式讓我很讚賞,一個一個去欣賞他人的作品點出優點,
感覺得出來他真的是有花時間去感受到作者的用心

最後幾天可能還沒投票的同學都出來投票了,又陸續收到一些feedback
因為後期我們也放棄拉票了,一些功能推上去也沒人知道,
像下面陳同學很認真的幫我們測試,我沒有宣傳的功能他都有發現,
真的要很認真測試才會發現,看到時真的蠻開心的。

PS 我也幫黃鴻亮測試了台灣手機收發短信的功能,我發現他兩次做的主題跟我想的都一樣( 或許我倆很合?哈哈,可惜的是我為了完成作品都選擇比較簡單的內容 )

虎頭蛇尾

比賽最後的四天因為正好跟我們家族旅行的時間衝突到,我雖然帶著電腦想做一些功能,但沿途坐車坐船行程又很滿,根本無法寫code,所以只好放棄。加上Sylvia也要回醫院看病,有點遺憾無法努力到最後。

反省

1.後期都沒寫ORID,做了新功能也沒有紀錄,Commit也比較隨便
隨便紀錄,之後可能連自己都看不懂,自己就是豬隊友。
2.拉票,自我宣傳,不一定要靠燃燒人脈,不要輕言放棄


3.因為自己在Slack上的經驗不好,比較沒有去Slack主動幫助同學,都是被動等同學來問,覺得一些技巧掌握的不是哪麼熟,應該厚臉皮主動去教同學。

感謝

通過參加全棧Meetup認識許多積極厲害的同學,不論是文班主持的線上meetup或是台北線下meetup都讓我收穫很多。
學習了 Jimmy Wang(Social Share功能) 吉翔(FB登入功能)
感謝:刘華佼,张鹏飞,郑笑飞,刘潇阳,蔡东言 陈玲敏,黃鴻亮,韵儿爸爸,
Siobhan rswong Alix 葉峻榳 潘泓宇 5cc Megan_Ho anndo leeangyueh Olive TimHsu zick.dawz
以及其他有投票給我們,或是來給予建議或問我問題的同學,謝謝你們。

AJAX-1

第一課

在用$("xxxx")jQuery選擇器的時候,HTML必須先加載完,jQuery才能夠找得到元素。
所以HTML要寫在上面,把script寫在下面。如果倒過來的話就沒有效果:

<p>
  <a id="my-click">Click Me</a>
</p>

<div id="foo" style="border: 1px solid red;">
  <p>bar</p>
</div>

<script>
  $("#my-click").click(function(){
    $("#foo").html('<h1>zoo</h1>');
  })
</script>

解說:

<script>...</script> 包起來的部分就是寫JavaScript 的地方
這個錢號 等同於jQuery
$("#my-click")是jQuery的選擇器用法,會挑出id是my-click的元素,在這裡就是指Click Me的超連結。在HTML上id是唯一的,不能有重複的id。
.click( function(){...} ) 會綁訂一個點擊(click)事件在該元素上面,當用戶點擊這個元素時,就會執行里面的function
$("#foo").html('<h1>zoo</h1>') 會把#foo 這個元素的內容置換成 <h1>zoo</h1>





如果JS寫錯

從錯誤的地方開始,以下的JavaScript 程序都不會執行喔

想在JavaScript程序中觀察變量的話,可以用alert語法,去找哪裡有錯誤

  $ ( "#my-click" ). click ( function (){ 
    alert ( "test" ); 
  })

或用 console.log 就会出现在开发者工具的 Console 里面:

  console.log("checkpoint A");

  $("#my-click").click(function(){
    console.log("checkpoint C");
  })

  console.log("checkpoint B");

JS寫在前面的話用$(document).ready 是一個瀏覽器的事件,會在加載HTML 完成之後,才執行里面的function,
就可以解決JS讀不到這個問題。

$(document).ready(function(){
code包在裡面
})

[必備] [JDStore] 讓客戶一眼就知道你在賣什麼

效果說明:

當有人微信推薦你這兩個商品,你會想打開哪一個?

在製作購物網站時非常重要的一個功能

你的「網址」必須讓人一眼看出是在賣什麼

馬上來修改吧!

預計時間: 3分鐘

rails g migration add_friendly_id_to_events

db/migrate/xxxx_add_friendly_id_to_events.rb
 +  def change
 +     add_column :products, :friendly_id, :string
 +     add_index :products, :friendly_id, :unique => true
 +
 +     Product.find_each do |e|
 +       e.update( :friendly_id => SecureRandom.uuid )
 +     end
 +  end

rake db:migrate

app/models/product.rb
 +  validates_presence_of :friendly_id
 +  validates_uniqueness_of :friendly_id
 +  validates_format_of :friendly_id, :with => /\A[a-z0-9\-]+\z/
 +  before_validation :generate_friendly_id, :on => :create
 +
 +  def to_param
 +   self.friendly_id
 +  end
 +
 +  protected
 +
 +  def generate_friendly_id
 +   self.friendly_id ||= SecureRandom.uuid
 +  end

將原本以ID搜尋改為以名稱搜尋

app/controllers/admin/products_controller.rb
def show
 -    @product = Product.find(params[:id])
 +    @product = Product.find_by_friendly_id!(params[:id])

def edit
 -    @product = Product.find(params[:id])
 +    @product = Product.find_by_friendly_id!(params[:id])
 
def update
 -    @product = Product.find(params[:id])
 +    @product = Product.find_by_friendly_id!(params[:id])
 
def destroy
 -    @product = Product.find(params[:id])
 +    @product = Product.find_by_friendly_id!(params[:id])
 
    def product_params
 -    params.require(:product).permit(:title, :description, :price, :quantity, :image)
 +    params.require(:product).permit(:title, :description, :price, :quantity, :image, :friendly_id)
    end

同樣修改以下show destroy add_to_cart
只要有@product = Product.find(params[:id])的地方就換成
@product = Product.find_by_friendly_id!(params[:id])

app/controllers/products_controller.rb
def show
def destroy
def add_to_cart
 -    @product = Product.find(params[:id])
 +    @product = Product.find_by_friendly_id!(params[:id])

新建或修改產品時就可以自己輸入喜歡的網址了
現在朋友在微信上還沒打開就可以知道你給他看的是什麼

大大提高網站的曝光率!

添加Admin輸入網址的欄位

app/views/admin/products/edit.html.erb
 +<div class="form-group">
 +  <%= f.label :friendly_id %>
 +  <%= f.text_field :friendly_id, :required => true, :class => "form-control" %>
 +  <p class="help-block">限小写英数字及横线,将作为网址的一部分</p>
 +</div>
app/views/admin/products/new.html.erb
+<div class="form-group">
 +  <%= f.label :friendly_id %>
 +  <%= f.text_field :friendly_id, :required => true, :class => "form-control" %>
 +  <p class="help-block">限小写英数字及横线,将作为网址的一部分</p>
 +</div>

以上內容是全棧營教程所教,我改為適合JDStore的配置
參考 Rails百寶箱 1



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



如果获得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裡面,跟隊友開會。