nelsonic commented 4 years ago

We do not yet have any collaborative or team features in our App (as we're focussing on the solo experience) however we hypothesize that capturing thoughts, securely sharing them with relevant people (e.g: team or family members) and collaborating on getting things done are the "killer features" that people/teams/orgs will be willing to pay for if we build great UX.

In fact one of our main reasons for selecting Elixir/Phoenix for building the backend of our App(s) is because OTP (Erlang's "One Trick Pony") handling many concurrent connections effortlessly. 🚀

Objectives

Our key objectives are:

[ ] Learn how to use Phoenix Presence in the context of a simple App where it makes sense: Chat.
[ ] Capture as much of the learning as possible so that we can re-use it in the @dwyl app (there are many features where presence is useful in our app when we add "teams")
[ ] Practice some Elm with Elm-UI and ship an example that appeals to both Elixir + Elm devs!

Todo

[ ] Extend the Phoenix Chat Example https://github.com/dwyl/phoenix-chat-example to include Auth and Presence so that we can see a list of the Avatars of the people who are online/offline.
- [ ] Create a people schema and session controller similar to what we have in the MVP
- [ ] Add Google Auth with https://github.com/dwyl/elixir-auth-google
- [ ] Save Profile to people table so that we can display person.picture in UI.
- [ ] Port the UI from JS to Elm (practice for us and a good intro to Elm for the Community)
  
  We have basic Chat written in Elm: /dwyl/hapi-socketio-redis-chat-example/elm/src/Main.elm Potentially useful for Phoenix<>Elm interop: https://github.com/fbonetti/elm-phoenix-socket
- [ ] Add Phoenix Presence functionality that displays the profile of the person who is online
  
  There is already some code we can draw inspiration from: https://github.com/dwyl/phoenix-chat-example/pull/32 (if possible, merge the PR and temporarily break the build to acknowledge the contribution but we must write tests because the whole point of an example is to be exemplary) ✅
[ ] Write up all the steps you take in detail in a new file e.g: google-auth-phoenix-presence.md The file does not have to be prosaic it can just be a list of the steps taken (I will write it up later!) i.e. we aren't interested in just the "end result" we want to know exactly how it was done. If you're in any doubt what step-by-step instructions look like, see: /todo-list-javascript-tutorial The point of a Spike¹ is to share the knowledge acquired with the team (and in our case the wider @dwyl community)

Bonus Level

[ ] Allow the person using the app to specify a "status", e.g: "Working on my screenplay".
[ ] Allow the user to select from 3 possible status:
- "Online" (available if you need me)
- "Busy" (deep-working; only emergencies)
- "Offline" (invisibility cloak)

Note: We cannot afford this Spike to drag on for very long, we just want to prove that it works. Please ensure you estimate the work even if it means creating a new label e.g T2d 🙄

¹https://en.wikipedia.org/wiki/Spike_(software_development)

SimonLab commented 4 years ago

Add new Elm project to Phoenix

Make sure you have Elm installed: https://guide.elm-lang.org/install/
Create a new elm project in the assert folder cd assets & elm init

We should now have a elm.json file and a src folder in assets where our Elm code will be added

Compile Elm to js using Webpack

Phoenix is already using Webpack to create one javascript containing all the code imported in assets/js/app.js

Learn about the Webpack concepts https://webpack.js.org/concepts/
- entry: which file to start the bundling from (ie assets/js/app.js)
- output: where to save the bundle (for phx priv/static/js/app.js)
- loader: tool used to compile file.

There is a specific webpack loader for Elm: https://github.com/elm-community/elm-webpack-loader that we can use in our Phoenix project to compile and bundle the Elm application

install the Elm loader. Make sure you are still on the assets folder as it is where the package.json is defined and install elm-webpack-loader with npm:
```
cd /assets
npm install --save-dev elm-webpack-loader
```
add a new rule in /assets/webpack.config.js to use the elm loader to bundle the .elm files:

      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: {
          loader: 'elm-webpack-loader',
          options: {
            optimize: true
          }
        }

Create the Elm application

To test that Elm is working well with Phoenix and webpack we can create a simple application:

Create a Main.elm file in `assets/src with the following code:
```
module Main exposing (main)
import Html exposing (text)
```

main = text "This is Elm text!"

- Import the Elm application in `/assets/js/app.js`:

```js
// import Elm application
import { Elm } from "../src/Main.elm";

var app = Elm.Main.init({
  node: document.getElementById('elm-app')
})

Create the div html node where the Elm application will be added, for example in lib/app_web/templates/layout/app.html.eex we can add in the body:
```
<div id="elm-app"></div>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script
```
You can now run the Phoenix application with mix phx.server and you should be able to see "This is Elm text!".
You can add changes to the Elm code, Phoenix will automatically detect the modificaiton in app.js and reload the page

nelsonic commented 2 years ago

https://github.com/dwyl/phoenix-liveview-chat-example#14-presence

dwyl / app