Elixir Phoenix: Creating An App With Tests (Updated for Phoenix 1.4 and Elixir 1.8)

New and improved

I released the first version of this tutorial in May of 2017. Since then, it has seen two major revisions. Each one seemed like it took longer than the last. I have iterated on and improved the code each step of the way. I have also tried to improve the tutorial so it is easy to read and follow. Hopefully I have succeeded in that.

Originally using Phoenix 1.2.1., I have released updates using Phoenix 1.3 and now Phoenix 1.4. The introduction of contexts in Phoenix 1.3 necessitated a pretty major revision. The majority of changes in this version are code improvements. I have learned a lot since the last update and applied what I learned to this update. It was a crazy amount of work finishing this off and I loved every minute of it.

Last update I included code commits throughout the tutorial to make it easier to follow along. This update I went a step further and each part has its own associated branch.

A brief summary of each section follows. If you’re ready to dive in, head on over to Part 1 and get to coding!

Brief summary of the tutorial

Part 1: The Setup

A brief walk-through 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 Tailwind CSS

When you create a Phoenix app, it comes with Milligram built in. This is a change from the previous versions of Phoenix which integrated Bootstrap. Last update to this tutorial had us trying out Foundation instead of Bootstrap. I made another change and this version we use Tailwind CSS. I have been using it in my work projects and loving it.

Part 3: Navbar, Errors, and Homepage

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 GitHub, Twitter, etc. I chose Google because we are doing YouTube videos, and I have never used Google for signing in before.

We write a couple of new tests in this section for signing in with Google. We also create our first context.

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.

We also create a separate module which will take the YouTube URL, work its magic, and create our video record. While this module is large and complex, we will go over each part and learn what it is doing.

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 couple of plugs to handle this. However, unlike last time, we will be limiting the plug to be used only for certain pages.

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!