Phoenix Drills

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.8.0", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Phoenix Drills

Drills help you develop familiarity and muscle memory with syntax through repeated exercises. Unlike usual problems, Drills are not intended to develop problem solving skills, they are purely for developing comfort and speed.

This set of drills is for the Phoenix framework. Follow the instructions for each drill and complete them as quickly as you can.

Hello World

Create a hello world and replace any existing content on the "/" route with “Hello World”.

$ mix phx.new hello_world --no-ecto

Random Number

Create a random number web app that generates a random number between 1 and 100 on the "/random_number" route.

$ mix phx.new random_number --no-ecto

Navigation

Create a Phoenix application as a navigation example.

$ mix phx.new navigation --no-ecto

Define three pages in router.ex such as “/home”, "/about", and "/projects". Each page should have it’s own controller such as HomeController, AboutController, and ProjectsController and display a simple text response.

Modify the existing root.html.heex file to include a link to each page.

You can use mix phx.routes to find the available paths and Path Helpers to link to the correct path.

<%= link "Home", to: Routes.home_path(@conn, :index) %>

Alternatively, you can use the static path, but it’s generally recommended to use Path Helpers because path helpers ensure we use actually defined routes.

<%= link "Home", to: "/home" %>

Counter

Previously in the Phoenix 1.6 reading material you walked through creating a counter application.

You’re going to create another Counter application, this time on your own without referring to the reading material (as much as possible). However, you are encouraged to reference the Phoenix and Phoenix HTML documentation.

$ mix phx.new counter --no-ecto

Store the current count in a GenServer or some other process under the application’s supervision tree. Render the current count on the "/" route. The user should be able to increment the count by pressing a button, and set the amount to increment the count by using a number input.

Make sure you do not overwrite any existing counter project.

Bonus: GitHub

Create a new GitHub repository for each of your Phoenix applications above and add them to your GitHub.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "phoenix_drills_reading"
    "exercises" -> "phoenix_drills_exercise"
  end

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, save_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(
      progress_path,
      Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
    )
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout -b phoenix-drills-exercise
$ git add .
$ git commit -m "finish phoenix drills exercise"
$ git push origin phoenix-drills-exercise

Create a pull request from your phoenix-drills-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.

Up Next