+1

MailChimp + Gibbon + Rails: Tạo danh sách email (cơ bản)

Bạn mất nhiều thời gian khi muốn gửi thư cho một danh sách email? Hiện có nhiều nhà cung cấp dịch vụ email (ESP), có ưu nhược điểm riêng. Một gợi ý cho bạn là sử dụng MailChimp vì chúng cho phép lên một kế hoạch chuyên nghiệp khi cho phép gửi 12000 email mỗi tháng cho 2000 người - và tất nhiên là miễn phí.

Chúng tôi sẽ xây dựng một ứng dụng Rails đơn giản, hiển thị một form thu thập địa chỉ email người dùng và thêm chúng vào danh sách email MailChimp. Ứng dụng sẽ tích hợp MailChimp với Rails sử dụng gem Gibbon.

Cần có kiến thức cơ bản về Ruby (v. 1.9.3) và Rails (v. 4.0.2) (bài viết này hơi cũ nhưng vẫn áp dụng được như thường 😄 - nd).

MailChimp

Trước khi làm việc với Rails, bạn cần làm 3 việc sau: 1) lấy khóa API, 2) tạo danh sách email với MailChimp, 3) lấy ID của danh sách đó.

  1. Sau khi đăng nhập tài khoản MailChimp của bạn, hãy nhìn sang trái, chọn tên của bạn sau đó vào "Account Settings" trong menu popup. Tiếp theo, nhấp vào dropdown menu "Extras" và chọn "API Keys". Ok, bạn đã có API key.

  2. Để tạo danh sách email, hãy chọn "List" từ trình đơn ở bên trái. Ở góc trên cùng bên phải, nhấp vào "Create List" để bắt đầu.

  3. Để có được ID của danh sách vừa tạo. hãy chọn "List" từ trình đơn bên trái. Điều này sẽ hiển thị một list các danh sách. Nhấp vào tên của danh sách bạn vừa tạo, sau đó chọn "Settings" và chọn "List name & defaults". Bây giờ bạn có ID của danh sách. Wow!!!

Rails

Cần thực hiện 5 bước sau: 1) thêm gem Gibbon vào gemfile của bạn; 2) tạo ra một tập tin khởi tạo; 3) tạo controller; 4) tạo view; và 5) cấu hình routes

  1. Thêm gem Gibbon vào gemfile và chạy bundle trong terminal. Gibbon là một wrapper API cho các API của MailChimp, nói cách khác, một đoạn code có thể thả vào dự án của bạn và nhanh chóng hoạt động.

    gem 'gibbon', git: 'git://github.co/amro/gibbon.git'
    
  2. Tạo một tệp khởi tạo mới 'gibbon.rb' trong 'config / initializers' để khai báo khóa API của bạn và hai biến khác. Đặt throws_exception thành false sẽ cho bạn một hàm băm đẹp trong trường hợp có lỗi.

    Gibbon::API.api_key = "YOUR-API-KEY"
    Gibbon::API.timeout = 15
    Gibbon::API.throws_exceptions = false
    
  3. Tạo emailapi_controller để xử lý các cuộc gọi của API và tạo một phương thức 'subscribe' sẽ chịu trách nhiệm nhập email người dùng và đẩy nó vào danh sách gửi mail của bạn.

    def index
    end
    
    def subscribe
    
        @list_id = "YOUR-LIST-ID"
        gb = Gibbon::API.new
    
        gb.lists.subscribe({
          :id => @list_id,
          :email => {:email => params[:email][:address]}
          })
    
    end
    

    Các biến @list_idgb được xác định tương ứng là ID của danh sách bạn đã tạo và là một thể hiện của wrapper API. Sau đó là kéo từ 'app/config/initializers/gibbon.rb'.

    Tiếp theo, chúng ta thực hiện gọi API .lists.subscribe() - trên thể hiện của nó (self). Sẽ lấy một hàm băm làm đối số, và trong bảng băm này, chúng ta truyền hai tham số: :id liên kết với ID của danh sách của bạn và :email liên kết với email của người dùng (điều này sẽ trở nên rõ ràng hơn sau khi xây dựng view).

  4. Sau khi hoàn thiện controller, tạo tệp 'index.html.erb' trong '/app/views/emailapi' .

    <h1>Get My Awesome News Letter</h1>
    <p>Give me your email and keep up to date on my cat's thoughts.</p>
    <%= form_tag('/emailapi/subscribe', method: "post", id: "subscribe", remote: "true") do -%>
       <%= email_field(:email, :address, {id: "email", placeholder: "email address"}) %>
       <%= submit_tag("Sign me up!") %>
    <% end %>
    

    Bên dưới các phần tử html <h1><p> sử dụng một Rails helper form_tag để tạo mẫu đăng ký. Thông qua bốn yếu tố: 1) hành động của form hoặc nơi form sẽ summit; 2) method HTML thực hiện (trong trường hợp này là post); 3) ID của form; 4) thiết lập remote thành true để JS driver không thay đổi hành vi của form.

    Cuối cùng, phương thức submit_tag tạo thẻ <input>. Form html sẽ giống như sau:

    <h1>Get My Awesome News Letter</h1>
    <p>Give me your email and keep up to date on my cat's thoughts.</p>
    <form accept-charset="UTF-8" action="/emailapi/subscribe" data-remote="true" id="subscribe" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>   <input id="email" name="email[address]" placeholder="email address" type="email" />
       <input name="commit" type="submit" value="Sign me up!" />
    </form>
    

    Tìm hiểu thêm về các mẫu form tại đây. Thông tin về subscribe API tại đây.

  5. Cuối cùng, thiết lập routes trong 'config/routes.rb'.

    root 'emailapi#index'
    post 'emailapi/subscribe' => 'emailapi#subscribe'
    

Kết luận

Như vậy là ứng dụng đã hoàn thành, chúc bạn thành công.

Nguồn: http://cheshireoctopus.github.io/blog/2014/01/23/mailchimp-plus-gibbon-plus-rails-create-a-basic-sign-up-form/


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.