Blog: Posts

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

Navigation

Return Home Report An Issue

Blog: Posts

You’re going to build a Blog application to learn more about Phoenix and Ecto.

$ mix phx.new blog
$ mix ecto.create

blog posts should have a title, subtitle, and content. It should also have relevant timestamp information.

classDiagram
  class Post {
    title: :string
    subtitle: :string
    content: :text
  }

Use Phoenix Generators to generate the Controller, Context, and other infrastructure for the post resource.

Example Solution

Generate the resource.

$ mix phx.gen.html Posts Post posts title:string subtitle:string content:text
$ mix ecto.migrate

Then add the resource to router.ex.

scope "/", BlogWeb do
  pipe_through :browser

  get "/", PageController, :home
  resources "/posts", PostController
end

Ensure all tests pass.

mix test

Stage and commit your changes.

git add .
git commit -m "initialize blog project with posts"

Create a GitHub repository and follow the instructions to connect your local blog project with the remote repository.

Bonus: Validation

Add the following validation rules to your Post.

• :title must be between 3 and 50 characters.
• :subtitle must be between 3 and 100 characters.

Ensure these validations are enforced when you create or edit a post.

Bonus: Skip The Generators

To solidify your understanding of Phoenix, recreate your blog application without using generators.

Mark As Completed

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

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

default = Map.get(existing_progress, file_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, file_name, completed)))
  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 solutions
$ git checkout -b blog-setup-exercise
$ git add .
$ git commit -m "finish blog setup exercise"
$ git push origin blog-setup-exercise

Create a pull request from your blog-setup-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 instructor by including @BrooklinJazz in your PR description to get feedback. You (or your instructor) 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.