Thursday, March 24, 2016

Rails 商務網站 x 即戰力班 心得


對網站建置有興趣的人總是聽說,用Rails架站很快,Ruby 語法人性化又易讀,功能強大,擁有龐大生態系,不管什麼應用,總是找得到相對應的gem。是適合新人至高手都可以使用的成熟技術。

事實上是這樣嗎?是的,是這樣的。不過,前提是,要有人帶。不是不能自己摸索自學,而是,Liffe is short,你我有更多想要追求的目標,時間往往不夠用。除非你是程式潔癖愛好者,非自己摸索出來的不算數。

是的,Life is short。看著那些大神級的人物飛快的demo影片,恨不得自己也跟他們一樣,能夠三把兩下就把網站搞定,做出又酷又炫的效果,讓眾人朝拜一番。總想自己也能夠像武俠小說裡的主角,某天遇到一位深藏不露的高手,就把畢生絕學傳授給你,打通任督二脈,瞬間獲得超過一甲子功力,從此能夠華山論劍,笑傲江湖啊~~。

是的,「Rails 商務網站 x 即戰力班」就是這樣子橫空出世了!

相關的資訊,例如學徒制、串接金流、線上助教解答等等特色,網站上都查的到,我要說的是查不到的東西。

我的經驗。

我是一位 IT 及 ERP資深導入顧問。也是一位專業攝影師、影像創作者(攝影集、攝影展)。我的豐富人生經驗告訴我,要成為業界的頂尖人物,除了努力學習之外,還要「有效率的學習」。什麼是「有效率的學習」?就是要把知識經驗盡量以下面的形式學習消化之:

  • 去蕪存菁的理論基礎
  • 別人寶貴的實戰經驗
  • 因地制宜的權衡變通
  • 自我恆常不斷的練習

我之所以會超過一項的專業技能,除了是興趣之外,有效率的學習是很重要的因素。所以學習 Rails,我也是用這種方式在自我學習著。而「Rails 商務網站 x 即戰力班」剛剛好符合我「有效率學習」的原則。


一,去蕪存菁的理論基礎

雖然理論很重要,它能讓學者見樹又見林,知道在這個體系中的來龍去脈。但是在實際應用上,其實不需要太過於學術性的東西,太沉浸其中,反招葛藤。所以,理論以實用為主,用以見其大架構為主,不拘泥於小節。

這個班的教學,在有需要的地方才會提到相對應的理論背景,而不是像教科書般宣說一堆術語與抽象名詞。

二,別人寶貴的實戰經驗

實戰經驗是無價的,參考別人走過的路,自己往往可以省下龐大的摸索時間與資源。

Xdite 在 Rails 的豐富經驗就不用多說,跟著走絕對是一條捷徑。

三,因地制宜的權衡變通

固然學習別人的經驗是非常重要,但是總歸是別人的。自己的環境與時間等條件不同,一定要懂得因地制宜。

像我之前也上過在美國開班,遠端上課的 Rails 課程。在金流方面用的是Stripe,但在台灣便用不上。此班用的是智付寶,完全符合台灣的環境。在金流串接這塊完全是本地化。


四,自我恆常不斷的練習

不斷的練習是避免生疏的不二法門,也是得到該學門更深層體悟的最佳方法。我在攝影這塊,一直奉行不渝,只要有空,就會帶著相機出門練習。

而此班亦然,非常強調實作。Xdite 強調,一定要把作業做三遍以上,做到不需要看解答為止。我覺得這一點,其實是最最重要的。很多時候,在一片通紅的錯誤中,會看到自己的盲點;  更多時候,在第n遍的練習中,忽然體悟到,「啊!原來如此」,瞬間了解 Rails 的設計邏輯與慣例。

(不過,做三遍以上的壓力很大,我那幾週除了上班、吃飯、睡覺之外,其他時間都在做練習。也因壓力過大,造成胃痛好幾天。)

--------------------

說到這裡,您不覺得從此功力大增,新手者極速入門,老鳥者,溫故知新,前後貫通,更上一層樓。

但是.........

並不是從此海闊天空。

因為,這個班的作法,是在極短時間內,壓縮大量 Rails 的知識及 Xdite 個人經驗,密集的傳授給學員。所以,想要笑傲江湖,還要達成以下目標:

新手者:

1. 練習、練習、再練習。
2. 千萬要補足基礎的知識:如 Ruby 語言的基礎、OOP的基礎、database 的基礎、html、http、javascript、jQuery 等等的網頁基礎。
3. 自己的 bug 自己解。雖然此班的助教解救深陷bug的學員功力一流,但我深深覺得,要想徹底了解 Rails ,一定要自己來解bug而不靠別人。這樣學習來的經驗才是自己的。

老鳥者:

1. 包含新手的注意事項
2. 作業的延伸。如:自己再加功能、更多 user story。
3. 自己自創專案。自己做想要做的網站。
4. 行有餘力,了解各種行業的商業邏輯。像ERP的理論及架構,是了解企業內部運作的最佳範例。寫商務網站,不可能不觸及企業運作。

----------------------

寫到這裡,應該要結束了。

如果你認為,以上的文字很多都是 sales talk,我承認。

但是,人生是自己的。記住:Life is short!




Wednesday, October 1, 2014

My Recent Works

Here are my recent works:





flkrshare - A flickr sharing urls generator.(Link)


The flkrshare application is a flickr sharing urls generator.

It starts from getting a valid flickr user. Flickr will ask for the permission to read the original size of the photos and then show all photosets owned by the user. It will generate the sharing urls of all photos after user choose one photoset. The users just copy the sharing urls, paste to their blog html editors and starts to write article.

The Techniques used:
  • flickr APIs wrapped by flickraw
  • Bootstrap 3 for responsive web design
Steps to operate:
  1. input a valid flickr user name.
  2. give permission on flickr page.
  3. select the photoset.
  4. review the photos.
  5. generate the sharing urls.

Project source repo at Github: https://github.com/chaoyee/flkrshare






MyFlix - A production quality video web site(Link)


MyFlix is the example of showing the professional capability of a Ruby on Rails developer.

Several key points such as:
- TDD (Test Driven Development) and Agile development practice.
- Social networking features.
- Administration features such as adding videos.
- Background jobs for asynchronous processing of emails (Sidekiq).
- A third-party e-commerce system integration of wrapping APIs, credit card payment and recurring billing for customers (stripe.com).
- Users can watch video clips, leave reviews and invite friends to join the site.

Project source repo at Github: https://github.com/chaoyee/myflix
Demo site: http://myflixch.herokuapp.com/





PostIt! - A mini posting system to post interesting links on it(Link)


- A mini posting system that allows people to post some interesting things or thoughts on it.
- The users can have comments to the post.
- Everybody can do a positive or negative vote to both posts and comments.
- The users who want to post, comment or vote must register to the system.
- Only the user with admin role can manage the system such as creating categories.

Project source repo at Github: https://github.com/chaoyee/PostIt
Demo site: http://postitch.herokuapp.com/


Monday, June 30, 2014

Making a Flickr sharing utility using Flickr API

Flickr is a well-known photo sharing service. I have used it since 2006. It’s a stable, easy to use and powerful site for sharing my photography. Further more, I used Flickr as a photo bed to serve the photos to my blog site. It’s a perfect match for saving space of my blog web site as well as better performance.

Since I am a photographer, I always like to put many photos in one article. That make me feel troublesome since I have to copy the shared urls of each photo and paste it to the html file of the article manually. If I have 20 photos in that photoset, I have to do it 20 times. It’s really a nightmare.

Therefore, I decide to find some utilities to help me do the job. I have found quickr pickr is quite helpful which can generate a HTML file from the selected photos. However, I can not find a way to select photos from a certain photoset. I decide to build my own utility web to solve this problem.

Firstly, I visit Flickr API web site to study how to utilize the Flickr APIs. I also found some gems of Ruby wrapper such as flickr_fu, flickraw and more. I tried flickr_fu first because I found this article “Integrating Flickr into your rails website”. There are detailed explainations of how to use the wrapper and get the photos shown on the web pages. However, I got stuck while I tried to call the wrapper. There was a message: “95: SSL is required, SSL is required to access the Flickr API.” It is because of this article on the Flickr Blog: “Flickr API Going SSL-Only on June 27th, 2014”. Flickr API does not allow non-SSL connections any more. Well, flickr_fu is not support SSL. It is time to change another wrapper.

“flickraw” is quite promising since it supports SSL. I found it is extremly easy to use. Also, developers can save times because there are many handy helpers to use.
After a hard working time, flkrshare is releasing!

The flkrshare application is a flickr sharing urls generator.

It starts from getting a valid flickr user. Flickr will ask for the permission to read the original size of the photos and then show all photosets owned by the user. It will generate the sharing urls of all photos after user choose one photoset. The users just copy the sharing urls, paste to their blog html editors and starts to write article.

The Techniques used:

  • flickr APIs wrapped by flickraw
  • Bootstrap 3 for responsive web design

Steps to operate

  1. input a valid flickr user name.
  2. give permission on flickr page.
  3. select the photoset.
  4. review the photos.
  5. generate the sharing urls.

App on Heroku

http://flkrshare.herokuapp.com/

Thursday, May 22, 2014

How to write better rspec tests

It is a great issue of writing rspec tests because it needs a lot of practice to get used to it for a new programmer. I have found a guide for a better rspec writing: “Pro tips for writing better rspec tests” written by Josh Software. These giidences are quite easy to realize and follow. Sample codes are also provided as reference.
There are ten tips as follows:
  1. Follow Rspec style guide
  2. Independent tests
  3. Use expect and not should syntax
  4. Use the new syntax for object creation
  5. Use let variables instead of instance variables
  6. Use correct expectations for a spec
  7. Use shared examples
  8. Use conditional hooks
  9. Profiling your examples
  10. Tagging
For the document “Rspec style” on Githib, it must be read and followed first. it is the basic guide for rspec test. I see no reason why you didn’t study this guide before starting to write rspec tests.

< Traditional Chinese 繁體中文>
撰寫 rspec 測試是一件大工程,對新手而言,必須有大量的練習才能夠熟悉它。我剛好找到有一篇如何撰寫好的rspce tests的文章: “寫好rspec測試的專業訣竅 (Pro tips for writing better rspec tests)” 由 Josh Software撰寫。這些指引是非常容易了結及遵循的,也包含參考用的範例程式碼。
文中提供十個訣竅:
  1. 遵循 Rspec樣式 指引
  2. 獨立測試
  3. 使用 expect 而非 should 語法
  4. 建立物件時使用新語法
  5. 使用 let 變數來取代實例變數(instance variable)
  6. 對規格使用正確的期待值
  7. 使用 shared examples
  8. 使用條件式掛勾
  9. 對 examples 加以剖析
  10. 標記
對於在 Github 上的 Rspec style 文件,我們必須先要詳讀以及遵循,它是 rspec test 的基本指引。我覺得在你開始撰寫 rspec test 之前,沒有理由不先詳加閱讀。

Saturday, November 23, 2013

Using Fabrication and Faker to generate test objects

Assigning text or value to a test object is quite often a tedious thing. Nevertheless, it has been an auto-generator to do this: 'Fabrication' and 'Faker'.

Fabrication (GitHub site) is a simple and powerful object generation library. Just define Fabricators, the schematics for your objects, it fabricates objects quickly as needed. Faker library that generates fake data. By combining these two gems, an automatic test object generator is ready to go for the rspec test.

Installation: Just add the following two lines to Gemfile and run bundle install to install the gems.
gem 'fabrication'
gem 'faker'
Just create the fabricator file for the Video Model object as:
spec/fabricator/video_fabricator.rb
Add the following lines to generate the two attributes of Video object:
Fabricator(:video) do
  title { Faker::Lorem.words(5).join(" ") }
  description { Faker::Lorem.paragraph(2) }
end
And it's ready to go!

In model/video_spec.rb, you have to create a Video object using:
Video.create(title: "Bones", description: "Great movie!")
When using 'Fabrication' and 'Faker' gem, all you have to do is:
let(:video)      { Fabricate(:video) }
And that is it!

Friday, November 22, 2013

Primitive Obsession


Primitive Obsession is using primitive data types to represent domain ideas. For example, we use a String to represent a message, an Integer to represent an amount of money, or a Struct/Dictionary/Hash to represent a specific object.  

In fact, if we can create an object to represent the data type, not only the basic data but also more functional attributes can be created and managed.

For example, we need to create a message type with attributes 'title', 'body', 'sender', 'receiver', 'created_date', 'attachment', 'is_deleted' and so on.  You can realize at once that it's impossible ( or at least very difficult ) to use 'String' data type to represent all the attributes, including 'created_date'. The best way is to utilize object-oriented programming features: 'OBJECT'!  Just create a 'Message Object'.

There is a good article with better explainations:    
Get Rid of That Code Smell – Primitive Obsession

The things happen while upgrading from Rails 3.2 to 4

The things happen while upgrading from Rails 3.2 to 4

Oops! Here comes the deprecation warning.  It's the "secret_key_token".
The secret_key_base is not required, however,  you will get a deprecation warning if this line is missing:

DEPRECATION WARNING: You didn't set config.secret_key_base.

There is a new value for that initializer in config/initializers/secret_token.rb
Myapp::Application.config.secret_token = '6839bw..' # your current token
Myapp::Application.config.secret_key_base ='db6s..' # secret value, this needs to be added
In order to generate a random secret_key value, you can use rake task:

rake secret

Just copy the value generated to the second line above, then restart the server and it's done!

More details: Upgrading to Rails 4.0 from Rails 3.2 – Test case

BootstrapForm

BootstrapForm is a form builder that makes it super easy to integrate Twitter Bootstrap-style forms into your Rails App.


I found it is very powerful to use when you try to build a data-binding form.

Installation 
gem 'bootstrap_form'
Note that there are "bootstrap-form" and "bootstrap_forms" gems, so don't make mistake!

Here's a quick example you can start up with:

<%= bootstrap_form_for(@user, html: { class: 'form-horizontal' }, help: :block) do |f| %>
  <%= f.alert_message "Please fix the errors below." %>

  <%= f.text_field :twitter_username, prepend: '@', label: 'Twitter' %>
  <%= f.text_field :email %>
  <%= f.password_field :password, help: 'Must be at least 6 characters long' %>
  <%= f.password_field :password_confirmation, label: 'Confirm Password' %>
  <%= f.control_group :terms do %>
    <%= f.check_box :terms, label: 'I agree to the Terms of Service' %>
  <% end %>

  <%= f.actions do %>
    <%= f.primary 'Create My Account', disable_with: 'Saving...' %>
  <% end %>
<% end %>

The magic of BootstrapFrom is as this screen slice below shows:




If there are errors, they will be shown just aside or below the input box. An error notice is also shown as well. It's a really nice feature. 

Just a note for it!

Haml!

Haml (HTML Abstraction Markup Language)

「Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document, without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ERB, and ASP. However, Haml avoids the need for explicitly coding HTML into the template, because it is actually an abstract description of the HTML, with some code to generate dynamic content.」

So what does haml looks like?

haml:
    %one
      %two
        %three Hey there
html:
    <one>
      <two>
        <three>Hey there</three>
      </two>
    </one>

Haml doesn't use close tag such as </xxx>. Therefore, indentation is so important. At the beginning, the haml code was not easy to read, but eventually I got used to it gradually.

GitHub Flow

The GitHub Flow mentioned by Scott Chacon is by using a simplified workflow to manage the version control instead of the complicated git-flow.
Here is the points of the whole idea:
  • Anything in the master branch is deployable.
  • To work on something new, create a descriptively named branch off of master (ie: new-oauth2-scopes).
  • Commit to that branch locally and regularly push your work to the same named branch on the server.
  • When you need feedback or help, or you think the branch is ready for merging, open a pull request.
  • After someone else has reviewed and signed off on the feature, you can merge it into master .
  • Once it is merged and pushed to 'master' , you can and should deploy immediately.
There is a web page explaining how to use GitHub in Traditional Chinese, pretty concise!
Here: 在 GitHub 當中使用的 work flow

Easy to follow! Enjoy!

Friday, November 8, 2013

Some notes about Github flow and code review

GitHub Flow: a simplified and useful approach
  • Anything in the master branch is deployable
  • To work on something new, create a descriptively named branch off of master (ie: new-oauth2-scopes)
    git checkout -b Mod0      # -b : create branch locally
                ----\    
                   branch name
    
  • Commit to that branch locally and regularly push your work to the same named branch on the server
    git push origin Mod0
    
  • When you need feedback or help, or you think the branch is ready for merging, open a pull request.
    • from my own module branch to my own master branch )
    • ask for code review from others
    • finally, merge to the master branch
  • After someone else has reviewed and signed off on the feature, you can merge it into master
    • so after this step, we can check out the branch again from Github to the local master.
    git pull origin master
    • do development again.
  • Once it is merged and pushed to ‘master’, you can and should deploy immediately.
    git push heroku master