diff --git a/README.md b/README.md
index c7ebe95..5322ce4 100644
--- a/README.md
+++ b/README.md
@@ -16,14 +16,15 @@
[](http://hits.dwyl.com/dwyl/sleep)
**Try it**: [**sleepdev.herokuapp.com**](https://sleepdev.herokuapp.com/)
-
+
-Sleep is the single most important activity in life;
-it restores our tired bodies
-and consolidates neural connections to help form/retain memories.
+Sleep is the cornerstone of a healthy life;
+it restores your tired body
+and consolidates neural connections
+to help form/retain memories.
A good night's sleep
can dramatically increase effectiveness
in all areas of your life.
@@ -38,19 +39,36 @@ aspect of health and longevity.
When you sleep well and feel rested,
you have mental clarity and energy
-to focus on Deep Work tasks.
+to focus on making progress in life.
By contrast if you don't get a good night's sleep
virtually everything about your day
will be worse.
+We wanted a simple way to:
+**a)** ***Track*** our own sleep/wake time & quality.
+**b)** ***Visualize*** our sleep patterns over time.
+**c)** ***Share*** that data with our significant other or any other relevant person.
+
+## Why Write a _Tutorial_? 💭
+
+We decided to write this as a **step-by-step tutorial**
+because it's a great opportunity
+to document the whole process of building the App.
+And it means anyone following along
+can
+[grok](https://en.wikipedia.org/wiki/Grok)
+it
+and even **_extend_ it**
+to add their own features.
+
# What? 📱 🛌
This App is the simplest possible **sleep tracker**
-(_other than using a paper notepad + pen
-or a note taking App on your phone ..._)
+(_other than using a notepad + pen
+or a notes App on your phone ..._)
A **_deliberately_ basic** version of an App is
commonly referred to as Minimum Viable Product ("MVP")
@@ -78,8 +96,8 @@ You can start using the MVP _now_ (_tonight_)!
> If you're reading this past **22:00**,
go straight to the "***Try it!***" section
and start recording your sleep _now_.
-Bookmark (⭐) the project
-and come back to it tomorrow.
+Please bookmark (⭐) the project
+and come back to it tomorrow when you're fresh.
@@ -95,9 +113,9 @@ and may _extend_ it!
There are 3 steps to this:
-1. Try it! (2 mins)
-2. Run it! (5 mins)
-3. Build it! (20 mins)
+1. _Try_ it! (2 mins)
+2. _Run_ it! (5 mins)
+3. _Build_ it! (20 mins)
Let's get started.
@@ -105,9 +123,10 @@ Let's get started.
## 1. _Try_ it!
-Firstly, if you haven't already,
-you can _try_ the App via Heroku:
-https://sleepdev.herokuapp.com
+First, if you haven't already,
+_try_ the App via Heroku:
+[sleepdev.herokuapp.com](https://sleepdev.herokuapp.com)
+to get a sense for the interface.
# @TODO: insert GIF of _performing_ the actions!
@@ -143,7 +162,7 @@ https://hexdocs.pm/phoenix/installation.html
+ [x] Postgres:
https://www.postgresql.org/download
-### _Check_ You Have Everything _Before_ Starting
+### _Check_ You Have Everything Ready _Before_ Starting
Check you have the _latest version_ of **Elixir**
(_run the following command in your terminal_):
@@ -190,7 +209,9 @@ postgres 529 Alex 6u IPv4 0xbc5d729e55a89a13 0t0 TCP localhost:postgre
This tells us that PostgreSQL is "_listening_" on TCP Port `5432`
(_the default port_)
-With all those "pre-flight checks" performed, let's get _going_!
+With all those
+[pre-flight checks](https://en.wikipedia.org/wiki/Preflight_checklist)
+done, let's get _flying_!
@@ -241,8 +262,8 @@ and you have a reference implementation
that you _know_ works on your computer,
it's time to write some **`code`**
-**GOTO**:
-[https://github.com/dwyl/sleep/blob/main/tutorial.md](https://github.com/dwyl/sleep/blob/main/tutorial.md)
+## `GOTO:`
+[`tutorial.md`](https://github.com/dwyl/sleep/blob/main/tutorial.md)
@@ -267,4 +288,5 @@ you will not be able to function.
> Insert table of good vs. bad sleep.
--->
\ No newline at end of file
+-->
+
\ No newline at end of file
diff --git a/lib/app_web/templates/page/index.html.heex b/lib/app_web/templates/page/index.html.heex
deleted file mode 100644
index f844bd8..0000000
--- a/lib/app_web/templates/page/index.html.heex
+++ /dev/null
@@ -1,41 +0,0 @@
-
- <%= gettext "Welcome to %{name}!", name: "Phoenix" %>
- Peace of mind from prototype to production
-
-
-
-
- Resources
-
-
-
- Help
-
-
-
diff --git a/tutorial.md b/tutorial.md
index d00c75d..cbb2479 100644
--- a/tutorial.md
+++ b/tutorial.md
@@ -1,27 +1,29 @@
+
+
# _Tutorial_ 👩💻
-This step-by-step tutorial
-takes you through _building_
+
+
+This **step-by-step tutorial**
+guides you through _building_
a sleep tracking App from scratch
-so you can _understand_ how it works.
-If you get stuck, _please_
-[**ask questions**!](https://github.com/dwyl/sleep/issues)
-Expect it take you around **`20 minutes`** to complete.
+so you can _understand_ how it works.
+Expect it take around **`20 minutes`** to complete.
Set your pomodoro timer and turn off other distractions!
## Implementation Note 💡
-This MVP App is built using using
+This App is built using using
[**`Elixir`**](https://github.com/dwyl/learn-elixir),
[**`Phoenix`**](https://github.com/dwyl/learn-phoenix-framework)
and
-[**`LiveView`**](https://github.com/dwyl/phoenix-liveview-counter-tutorial)
+[**`LiveView`**](https://github.com/dwyl/phoenix-liveview-counter-tutorial#liveview)
because it's one of the simplest ways
-to build web applications
+to build mobile-first responsive web applications
from first principals.
-Our objective is to get to a _useable_ app
+Our objective is to create a _useful_ app
as **_fast_ as possible**
so we can start inputting/saving data.
You will see below,
@@ -34,6 +36,9 @@ in **`20 minutes`**.
Anyone who knows basic programming
(e.g. `Python`, `JavaScript`, etc.)
should be able to follow along.
+If you are completely **new** to Phoenix or LiveView,
+we recommend starting with the more basic
+[LiveView Counter Tutorial](https://github.com/dwyl/phoenix-liveview-counter-tutorial).
If you get stuck, please don't suffer in silence,
[**open an issue**!](https://github.com/dwyl/sleep/issues).
@@ -49,6 +54,8 @@ https://twitter.com/iamdevloper/status/787969734918668289
## 1. Create a New Phoenix App 🆕
+In a new terminal window, run the following command:
+
```sh
mix phx.new app --live --no-mailer --no-dashboard
```
@@ -62,7 +69,7 @@ and we don't want unused/untested code.
When you see the prompt asking you
to fetch and install the dependencies:
-```
+```sh
Fetch and install dependencies? [Yn]
```
@@ -70,20 +77,21 @@ Type `y` followed by the `Enter` key.
You should then see:
-```
+```sh
* running mix deps.get
* running mix deps.compile
```
To start the Phoenix server:
-* Install dependencies with `mix deps.get`
-* Create and migrate your database with `mix ecto.setup`
-* Start Phoenix endpoint with `mix phx.server`
++ Change working directory into the App, e.g: `cd app`
++ **Install** dependencies with `mix deps.get`
++ **Setup** the database with `mix ecto.setup`
++ **Start** the Phoenix App with `mix phx.server`
-You should see the following output in your terminal:
+You should see output similar to the following in your terminal:
-```
+```sh
[info] Running AppWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.5.tgz
[info] Access AppWeb.Endpoint at http://localhost:4000
@@ -93,19 +101,16 @@ You should see the following output in your terminal:
When you open http://localhost:4000 in your web browser,
you should see see something similar to the following:
-
-
-
-
+
So far so good.
+
-#### Quick Note on App Naming Conventions 📛
+### Quick Note on App Naming Conventions 📛
-You will often see Phoenix apps with the name of the app in the project files
+You will often see Phoenix applications
+with the name of the app in the project files
e.g: in the **`Chat`** example
[github.com/dwyl/phoenix-chat-example](https://github.com/dwyl/phoenix-chat-example)
@@ -128,7 +133,7 @@ defmodule ChatWeb.Router do
```
Having `Chat` or `ChatWeb` namespace can be useful
-if you're working on multiple Phoenix apps _simultaneously_
+if you're working on _multiple_ Phoenix apps _simultaneously_
and need to context switch.
That's why we use the `Auth` namespace
in our Authentication App:
@@ -153,7 +158,7 @@ we will re-use some of the code in our "main" App.
[github.com/dwyl/app](https://github.com/dwyl/app)
This means it's easy to
"lift and shift" the code & tests
-without needing to waste time with "find & replace".
+without needing to waste time with messy "find & replace".
If you prefer to namespace your app differently, go for it!
@@ -164,7 +169,9 @@ If you prefer to namespace your app differently, go for it!
Open the project in your editor/IDE of choice.
-### Create `/live` Directory
+
+
+## 2. Create `/live` Directory
Since we are using Phoenix LiveView for this App,
we need to create a new `live` directory
@@ -173,7 +180,7 @@ with the following path:
e.g: `mkdir lib/app_web/live`
-### Create `app_live.ex` File
+## 3. Create `app_live.ex` File
Inside that newly created `/live` directory,
create a new file called
@@ -192,18 +199,95 @@ defmodule App.AppLive do
end
def render(assigns) do
- AppWeb.AppView.render("messages.html", assigns)
+ AppWeb.AppView.render("index.html", assigns)
end
end
```
+If you attempt to compile the project now you will see a warning:
+
+
+```elixir
+warning: AppWeb.AppView.render/2 is undefined
+(module AppWeb.AppView is not available or is yet to be defined)
+ lib/app_web/live/app_live.ex:9: App.AppLive.render/1
+```
+
+## 4. Create `app_view.ex` File
+
+Create a new file with the path:
+`lib/app_web/views/app_view.ex`
+
+Insert the following code into the file:
+
+```elixir
+defmodule AppWeb.AppView do
+ use AppWeb, :view
+end
+```
+
+This just tells our new view to `use` all the code
+in the `AppWeb` `:view` module (part of Phoenix).
+
+> If you're _curious_ how `Views` work in `Phoenix`,
+see:
+[`guides/views.md`](https://github.com/phoenixframework/phoenix/blob/master/guides/views.md`)
+
+
+## 5. Edit the `index.html.heex` and `root.html.heex` Templates
+
+First **rename** the **`/page`** folder
+as we won't be using "pages" in this project.
+
+From:
+`lib/app_web/templates/page/`
+To:
+`lib/app_web/templates/app/`
+
+e.g:
+```sh
+mv lib/app_web/templates/page lib/app_web/templates/app
+```
+
+Then edit the template at `lib/app_web/templates/app/index.html.heex` replacing the contents with the following line:
+
+```html
+App Goes Here!
+```
+
+Finally to make the layout simpler,
+Update the `` section of the
+`lib/app_web/templates/layout/root.html.heex`
+file to the following:
+
+```html
+
+
+ <%= @inner_content %>
+
+```
+
+Don't worry, we will improve on both of these files later.
-### Update `router.ex`
+### 6. Update `router.ex`
-and navigate to the
-`lib/app_web/router.ex` file.
+Open the `lib/app_web/router.ex` file and
+replace the line:
+```elixir
+ get "/", PageController, :index
+```
+
+With:
+
+```elixir
+ live "/", AppLive
+```