Elixir Phoenix: Creating An App With Tests (Updated for Phoenix 1.3)

Teaching while learning

Back in April, I started learning Elixir and Phoenix. It was the second programming language I learned and my first functional programming language. It was quite a shift in thinking coming from Ruby on Rails. Since Elixir and Phoenix were written by people with a Rails background, you will find some similarities. Even though they are vastly different, I think the similarities helped me pick up the language.

After building the first app on my own, I decided I wanted to write a series of blog posts walking someone through doing the same. You can find that series of blog posts here: https://medium.brianemory.com/elixir-phoenix-creating-an-app-part-1-the-setup-6626264be03. The original version was using Phoenix 1.2 and I have just updated it to using Phoenix 1.3. This was a lot of work as I rebuilt the app and took the time to give it some much needed refactoring.

Why the tutorial

There were a couple of main reasons I decided to write the tutorial. Most tutorials I came across ignored writing tests (this was true with Ruby on Rails as well). If you were lucky they might dedicate a small section to talking about testing. This is a disservice to those going through the tutorial. A well tested app is very important. It comes in especially handy when you decide to do some large scale refactoring. My tutorial will be writing tests for all that we do.

By writing the tutorial, it gave me an opportunity to think more about what I was doing and better understand it. It also gave me chances to see areas to improve between writing out what I was doing and creating the GitHub gists for sharing the code. There are things I could have easily missed if I was only trying to finish a part of the app and move on.

I gained a new appreciation along the way for those who have written books and full-fledged courses. This nine-part blog series took a lot of time but it is only a drop in the bucket compared to what those take. A big thank you to anyone that has ever written a programming book or full-fledged course (unless you excluded testing ;) ).

Brief summary of the tutorial

Part 1: The Setup

A brief walkthrough of creating our app and setting up our database. In the event you do not have Elixir, Phoenix, or Postgres installed on your local machine, I have included links to help. We will fire up our server to see our “Welcome to Phoenix!” homepage, and see the tests our app created for us all pass.

Part 2: Using Foundation

When you create a Phoenix app, it comes with Bootstrap built in. This makes it easy to get off and running with a CSS framework. I wanted to mix things up and use a framework I have not used before. After being unsuccessful getting Semantic UI to work, I switched to using Foundation. It would have been really simple to drop cdn links in our app.html.eex. However, by taking the approach of using npm to install, it gives us an additional learning opportunity.

Part 3: Homepage, Navbar, and Errors

We get a little bit into editing our default tests in this section. We will also write our very first test. We strip out all of the boilerplate that came with Phoenix, and add our own code for the index.html.eex. This includes our background image and a navbar.

Part 4: Using Google Überauth

In this section, we will set our app up to sign users in with Google. It could just as easily be Facebook, GitHub, Twitter, etc. I chose Google because we are doing YouTube videos, and I have never used Google for signing in before. Like using Foundation, I wanted to try something new.

We write a couple of new tests in this section for signing in with Google. We also create our first context. If you are unfamiliar with contexts, they are the replacement for models with Phoenix 1.3.

Part 5: Setting a Current User

Like any good app, when a user is signed in, we want to know about it so we can tailor how the site looks. For example, a signed in user does not need to see a “Sign in with Google” link but rather a “Sign out” link. This also sets us up for later when we want to make sure you only see a delete button for videos that you have added. We will be creating our first plug in this section.

Part 6: Using the YouTube API

We will be using the YouTube API to take a submitted URL and turn it into an embedded video. This saves the user from having to input each part of the video information to add it. We will also be adding more tests to ensure our functionality is working as expected. The YouTube API returns the data in JSON so we use HTTPoison and Poison to parse and decode that data into something easier to use.

Part 7: Setting Up Authorizations

Now that we have users adding videos, we want to make sure only signed in users can add them, and you can only delete videos you have added. Imagine the chaos that would ensue without these checks in place. We will be creating a plug to handle this. However, unlike last time, we will be limiting the plug to be used only for certain pages. This will be accomplished by adding an additional pipeline and scope to our router.

Part 8: Making Things Look Nicer

Our back-end work is pretty much completed but our pages do not look that great. Our index page is a basic table and our show page does not have the embedded video. We take care of both of those issues as well as adding a test for our show page.

Part 9: Search, Sort, Pagination

For our final step, we will add search, sort, and pagination to our index page. We do not want to have hundreds of videos showing up all at once. Being able to sort and search the videos will make it easier to find what we want as we are limited the amount of videos shown at one time. There is also a link to deploying the app to Heroku if you so choose.

Give the tutorial a whirl and let me know what you think. I would love to hear your thoughts on things you liked or things I could do better.

Follow me on Twitter @thebrianemory. Follow me here, click the hands below to show some appreciation, leave a comment, and get in touch!