Ember 1.0 Release: 5 Things Every Dev Needs to Know

The newest version of Ember.js is set to launch tomorrow (8/31/13). Here are some of the things you need to know.

Ember App Kit

Fire up a new Ember app easier than ever. Ember App Kit gives you a testing framework, Grunt tasks, and scaffold generators. This is going to make every Ember developers’ life significantly easier. In the future this will be rolled into Ember.js core.
Link to the Ember App Kit.

Ember Inspector

Already in the Chrome App store, the Ember Inspector extension will let you see what your Ember app is doing in production or your development environment. You can also use the inspector on other site’s Ember apps as well. Three cheers for easier debugging of your Ember app!
Link to the Ember Inspector.

Ember Components

Lets you create your own application-specific HTML tags. W3C is doing something similar with Web Components and the Ember team is trying to stick to the standard set by W3C. In the future when the standard is set you will be able to migrate to Web Components with ease.
Read more about Ember Components in the official docs.

1,733 lines of new documentation

In the past, Ember documentation has been painfully lacking. With the addition of massive amounts of new documentation, learning to develop Ember should be a lot quicker.
Link to the Ember guides.

Tentative Ember Data 1.0 beta with release of Ember 1.0

Now that Ember.js is about to go 1.0, the core team is turning their focus to Ember Data. They are rebooting Ember Data with the jj-abrams branch. There has been 32 commits already this week.
Follow along with their progress here.

My Code Fellows Project: Fun With Stripe

I recently got to play around with Stripe in my first big class project for Code Fellows. I have to say I was a little scared that I might be in over my head, but after working through a couple sample apps using Stripe and following the awesome docs on the Stripe site I felt a little more at ease.

To help anyone else looking to get started with Stripe, I thought I would share how I used it in my app to create customers with subscriptions.

First off, head on over to the Stripe site and create an account. You’re going to need your test API keys and then make a couple plans for your customers to subscribe to.

Next, add Stripe to your Gemfile.

gem 'stripe', :git => 'https://github.com/stripe/stripe-ruby'

After updating the Gemfile, we will create a file in our rails config/initializers folder. Let’s call it stripe.rb. Here, we will set up our app to use our Stripe API keys.

stripe.rb
1
2
3
4
5
6
Rails.configuration.stripe = {
:publishable_key => ENV['PUBLISHABLE_KEY'],
:secret_key      => ENV['SECRET_KEY']
}

Stripe.api_key = Rails.configuration.stripe[:secret_key]

In our newly created file, we set the :publishable_key and the :secret_key using environment variables (checkout dotenv). Then we configure Stripe to use our secret key whenever we call out to their API.

For the Subscription resources, we will use a scaffold generator rails g scaffold subscription email:string plan_id:integer stripe_token:string and then we’ll create a home contoller for our forms to live rails g contoller home index.

In our subscriptions controller, we will put the code to save a subscription to our database and then the code to create a new customer and assign them to a plan with Stripe.

subscriptions_controller.rb
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
def create
  # get params from form
  email = params[:email]
  plan_id = params[:plan_id]
  token = params[:stripeToken]

  # create a new subscription in the database
  s =  Subscription.new
  s.email = email
  s.plan_id = plan_id
  s.stripe_token = token
  s.save

  # create a new customer and associate them with a subscription plan
  customer = Stripe::Customer.create(
    :card => token,
    :plan => plan_id,
    :email => email
  )
  flash[:notice] = "You have created a subscription."
  redirect_to subscriptions_path

# handle errors
rescue Stripe::CardError => e
  flash[:error] = e.message
  redirect_to root_path
end

At the top of the create method we get the params from our submitted form. Under that, we create a new Subscription and pass in the params. Then we create a new customer with Stripe and associate them with the corresponding plan. Finally, we handle any card errors that Stripe might return.

Now we create the forms to handle our credit card data in our home/index.html.erb.

index.html.erb
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
<h1>Gold Subscription</h1>
<%= form_tag subscriptions_path do %>
  <%= label_tag :email %>
  <%= text_field_tag :email %><br>
  <%= hidden_field_tag :plan_id, 101 %>
  <script
    src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
    data-key=<%= Rails.configuration.stripe[:publishable_key] %>
    data-name="Stripe Tutorial"
    data-description="Gold"
    data-currency="usd"
    data-image="/128x128.png">
  </script>
<% end %>

<h1>Silver Subscription</h1>
<%= form_tag subscriptions_path do %>
  <%= label_tag :email %>
  <%= text_field_tag :email %><br>
  <%= hidden_field_tag :plan_id, 102 %>
  <script
    src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
    data-key=<%= Rails.configuration.stripe[:publishable_key] %>
    data-name="Stripe Tutorial"
    data-description="Silver"
    data-currency="usd"
    data-image="/128x128.png">
  </script>
<% end %>

Here, we use the form_tag instead of the normal form_for because we are using Stripe checkout to handle our credit card data and submit the form. We also use a hidden_field_tag to hold the id for our different plans. The plan ids correspond to the ids we set up while creating plans from the Stripe dashboard.

Thats it! You can now sign users up for subscriptions using Stripe.

The source for this sample app can be found on GitHub and below is a video of me demoing the app I made for Code Fellows.