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]

lib/hits_web/templates/layout/app.html.eex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Hits</title>
    <!-- <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/> -->
    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css"/>
  </head>
  <body class="">
    <main role="main"">
      <!-- <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
      <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> -->
      <%= render @view_module, @view_template, assigns %>
    </main>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </body>
</html>

lib/hits_web/templates/page/index.html.eex

<h2 class="bg-teal white h-25 tc ttu f1 lh-title lh-solid mt0 pa2 pb3 mb0 pb0">
  Hits!
  <a href="http://hits.dwyl.io/" >
    <img src="http://hits.dwyl.io/homepage.svg" alt="Hit Count" class="pa0 ba bw1 b--white">
  </a>
</h2>
<h4 class="mt0 tc fw5 f5 teal pa2 mb0">
  The <em>easy</em> way to know how many people are
  <strong><em>viewing</em></strong> your GitHub projects!
</h4>

<h2 class="mt0 fw5 tc f2 bg-teal white pa2"><em>How?</em></h2>
<div id="how" class="dn pa3">

  <table class="collapse pv2 ph3 w-100 pa4">
    <tr class="bb-0">
      <td class="pv2 ph3 w-30">
        Input your <strong class="fw5">GitHub Username</strong>
        (<em> <strong class="u">or</strong> org name</em>):
      </td>
      <td class="pv2 ph3 w-30">
        <input class="input-reset f4 pa2 ba mr5 w-80" type="text"
        id="username" name="username" placeholder="username" autofocus maxlength="50">
      </td>
    </tr>
    <tr class="">
      <td class="pv2 ph3 w-40">
        Input the <strong class="fw5">GitHub Project/Repository</strong>
        name:
      </td>
      <td class="pv2 ph3 w-40">
        <input class="input-reset f4 pa2 ba mr5 w-80" type="text"
        id="repo" name="repo" placeholder="repo/project" maxlength="100">
      </td>
    </tr>
  </table>
</div>

<h3 class="mt3 fw5 tc db f3 bg-teal white pa2">Your Badge <em>Markdown:</em></h3>
<pre id="badge" class="fw4 ba bw1 pa3 ma2" style="white-space: pre-wrap; word-break: keep-all;">
  [![HitCount](http://hits.dwyl.io/{username}/{repo}.svg)](http://hits.dwyl.io/{username}/{repo})
</pre>

<p class="pl2" id="nojs">
  Using the above markdown as a template, <br />
  <em>Replace</em> the <strong class="code">{username}</strong> with <em>your</em> GitHub username <br />
  <em>Replace</em> the <strong class="code">{repo}</strong> with the repo name.
</p>

<p class="pl2 ml2">
<em>Copy</em> the markdown snippet and <em>Paste</em> it into your
<strong class="code">README.md</strong> file <br />
  to start tracking the view count on your GitHub project!
</p>

<h2 class="mt0 fw5 tc f4 bg-teal white pa2 mt5"><em>Recently</em> Viewed Projects (<em>tracked by Hits</em>)</h2>
<div class="h5 pl2" id='hits'>
  <div style="display:none">Dummy Child Node for insertBefore to work</div>
</div>

<style>
  .teal {
    color: #4DB6AC;
  }
  .bg-teal {
    background: #4DB6AC;
  }
  body { /* dwyl font */
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
</style>

app.js

// Markdown Template
var mt = '[![HitCount](http://hits.dwyl.io/{user}/{repo}.svg)](http://hits.dwyl.io/{user}/{repo})';

function generate_markdown () {
  var user = document.getElementById("username").value || '{username}';
  var repo = document.getElementById("repo").value || '{project}';
  // console.log('user: ', user, 'repo: ', repo);
  user = user.replace(/[.*+?^$<>()|[\]\\]/g, '');
  repo = repo.replace(/[.*+?^$<>()|[\]\\]/g, '');
  return mt.replace(/{user}/g, user).replace(/{repo}/g, repo);
}

function display_badge_markdown () {
  var md = generate_markdown()
  var pre = document.getElementById("badge").innerHTML = md;
}

setTimeout(function () {
  // show form if JS available (progressive enhancement)
  document.getElementById("how").classList.remove('dn');
  document.getElementById("nojs").classList.add('dn');
  display_badge_markdown(); // render initial markdown template
  var get = document.getElementsByTagName('input');
 for (var i = 0; i < get.length; i++) {
     get[i].addEventListener('keyup', display_badge_markdown, false);
     get[i].addEventListener('keyup', display_badge_markdown, false);
 }
}, 500);

Start from scratch (keeping meta files and README.md...)

 git rm -r assets/ config/ lib/ priv/ test/

[nelsonic]

The effect of starting again from scratch is fewer lines of code in the project, that's a good thing:

[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. ✅