Why? What? How?

[nelsonic]

Why?

Phoenix is awesome and a phoenix/elixir implementation will be far more stable than the current (node.js) version which keeps crashing.
see: dwyl/product-roadmap#7 and #62, #63, #64 & #65

Note: we could add more error handling to the Node.js App and use PM2 to monitor the process see: https://github.com/dwyl/learn-devops/blob/master/nodejs-pm2-zero-downtime.md and we could also migrate the node.js version to use PostgreSQL, but I feel that the app will be considerably more robust in Phoenix.

For anyone following along wondering why I'm pouring my time into this re-build when it isn't the highest priority item on my List ... I'm doing it for the following reasons:

• Right now we don't have a Open Source App (that we "Own" that we can invite contributions from the community ... there are several "Client" Apps that are Open Source and we are proud of e.g: The Science Museum, Healthlocker (NHS) and Club Soda ... which people can read and learn from) we want an App that is useful to the community and we can invite people to contribute to because they will benefit directly from the improvements and practice their skills on a "real" app that is in Production and has millions of "Users".
  We will have our own Mobile App sooooon ... but in the meantime this is a good way to introduce people to the @dwyl community.

What?

Migrate the node.js Hits app https://github.com/dwyl/hits
to Phoenix using code written for https://github.com/dwyl/hits-elixir
Use a PostgreSQL database to store data so that we can run more interesting/advanced queries

How?

Going to document this as go but the the outline is:

• First make sure I have the latest version of Phoenix! to avoid: Could not install from "../deps/phoenix" as it does not contain a package.json file hits-nodejs#3
  see: https://hexdocs.pm/phoenix/installation.html#phoenix

mix archive.install hex phx_new 1.4.4

• Create app: mix phx.new hits
• Render Home Page (Static Content): Why? What? How? #66 (comment) (quick win)
• Create users schema for storing user data:

mix phx.gen.schema User users name:string 

The two reasons I was considering going with a single table is speed and simplicity.
The fact that a GitHub repository can belong to a user or an org means that we need to determine this before inserting the data ... but I think for now we can just call it a user and we can determine the type later on (e.g: user or org). 👍

• Create repos schema for storing repo data:

mix phx.gen.schema Repository repositories name:string user_id:references:users

• Create useragents schema for storing user agent data:

mix phx.gen.schema Useragent useragents name:string ip:string

• Create schema and HTML (views+templates) hits for storing and viewing hit data:

mix phx.gen.schema Hit hits repo_id:references:repositories useragent_id:references:useragents

• Create endpoint for "happy path" /:user/:repository

  • should render an svg badge
  • Edge Cases: GOTO: URL Edge Cases #67

• Extract the metadata (useragent and ip address) from the conn headers:
  https://github.com/dwyl/hits-elixir/blob/b2ed9c10aabc20a36f24c185a5f2a9831b1652d3/lib/hits.ex#L45-L54

• INSERT the hit into the dabase

• Query PostgreSQL for the hit count for that repo How to SELECT COUNT(*) FROM hits WHERE repo_id = $1 #71

• Create the SVG using string interpolation:
  https://github.com/dwyl/hits-elixir/blob/b2ed9c10aabc20a36f24c185a5f2a9831b1652d3/lib/hits.ex#L29-L31

• Return the SVG

• Update screenshots to reflect change in TCP Port 8080 > 4000

[nelsonic]

After running all the schema generators (above), 10 of the default tests are failing:
https://travis-ci.org/dwyl/hits/builds/527891160#L704

[nelsonic]

Fixed by adding the /hits resource to the router.ex file and now these tests pass. ✅

Onto the next failing test:

Continue tomorrow: mix test test/hits_web/controllers/hit_controller_test.exs:40

[nelsonic]

You will see that four tests are failing:

[nelsonic]

Home page (static content) served by Phoenix:

Need to tidy up the padding around the body and width of inputs ... but it's working. 👍

[nelsonic]

The issue was conflicting styles from Phoenix app.css which I've commented out.

[nelsonic]

ER Diagram after creating schema:

[nelsonic]

Decided to add the DBeaver UI as context to help people understand how to find the ER diagram:

[nelsonic]

Having the DBeaver "Quick Access" UI on the next line because I constrained the width of the window was bugging me! So I expanded the window and re-took the screenshot:

(I think I have an OCD problem with screenshots ... 🙄humour me and play spot-the-difference ... 😜)

Also took a screenshot of the Schema Migrations table to give some insight:

[nelsonic]

Continue: https://hexdocs.pm/phoenix/contexts.html

[nelsonic]

After reading about contexts, I've concluded that they aren't useful in the Hits app (at least for the foreseeable future) so I'm going to back-track a step and do a mix phx.gen.schema instead of mix phx.gen.html for the Hits table/schema.
That will both reduce the noise from unnecessary files (that I was just going to have to delete)

and remove the failing tests which would have definitely put beginners off.

[nelsonic]

Feature parity achieved:

[nelsonic]

Updated screenshots:

[nelsonic]

[nelsonic]

If you are interested in a step-by-step tutorial/example, leave a comment on #74

[nelsonic]

This issue is now complete. Closing. ✅