[PR] Flutter + Phoenix Channels Demo Initial Implementation.

[LuchoTurtle]

closes #1

This PR will create a Flutter application that will connect to a Phoenix server through websockets
stating who is online or not.

[LuchoTurtle]

Still on the fence about using dwyl/phoenix-chat-example#152 or just creating my own Phoenix server that only has presence to check who is online or not...

Will focus on creating the Flutter app first, try to connect to a simple channel on a locally-developed Phoenix and then tackle this.

[LuchoTurtle]

Will be having both Phoenix and Flutter in their own respective folders in this repo.
I found the Phoenix server in dwyl/phoenix-chat-example#152 much more complex than it needs to be for this demo (e.g. we don't need a database for this repo).

I'm going to create a simple Phoenix server here and develop both Flutter and Phoenix along the way. Each folder has instructions on how to get both up and running. The main README of this repo makes reference to both of them and clarifies that you need different terminal/VSCode windows if you want to give this project a whirl.

[LuchoTurtle]

I finally got Flutter and Phoenix to connect. It wasn't working initially because the Phoenix Socket URL wasn't quite clear which one I had to connect to.

Turns out
ws://localhost:4000/socket/websocket is the correct one. The topic has to be specified or else it errors out.

I've added Presence and I'm trying to "catch" user disconnects to properly show the list of connected users on the Flutter counterpart. I've tried using Hoppscotch for this but I can't seem to send parameters (user information) through here (at least successfully).


Trying to get two emulators working so I can check multiple clients and see the presence_diff on both joining and leaving scenarios...

[LuchoTurtle]

Finally got it working.

At first I was a bit confused with how presence_diff from Presence was actually going to be captured in Flutter. With LiveView, this was trivial:

Finally, a diff of presence join and leave events will be sent to the client as they happen in real-time with the "presence_diff" event. The diff structure will be a map of :joins and :leaves of the form.

I had to use presence_diff so I knew which processes were connected to the Phoenix Server (after, obviously, setting up Presence and tracking users after joining the channel).

However, I couldn't get this to work with Flutter. I tried capturing the events normally in the channel (like pinging or shouting (broadcast)) from Elixir to Flutter but Flutter wasn't capturing anything.

Turns out that tI needed to use PhoenixPresence(channel) object and specify the channel and use the onSync callback to capture both presence_state and presence_diff.

From there on out, I could parse and map the meta information in each.

All of these steps will be detailed in the README file, just wanted to give an update on the matter.

[nelsonic]

@LuchoTurtle looking good. thanks for capturing as much of your learning as possible. 👍

[LuchoTurtle]

I think it looks good for review.
This also addresses dwyl/learn-flutter#9 (comment).

[nelsonic]

The README.md doesn't contain the instructions required to actually run the finished demo. 🤷‍♂️

It just goes straight into Creating the App.
Also, I don't understand why you don't have a basic homepage in the Phoenix App ... 🤷‍♂️

What is the advantage to having a 404 when the person opens http://localhost:4000/ in a browser? 🤷‍♂️
I can't say I understand this decision.

[nelsonic]

This GIF is microscopic:

Why? 🤷‍♂️

[LuchoTurtle]

In the section, I state that each folder (which have links to their readmes) has instructions on how to run each component, inclusively saying that each one should be run on a different terminal.

The Phoenix server only serves web sockets, it's not meant for the person to access it in the browser. They just need to fire up the server in the terminal, as suggested in the README. The Phoenix server was created without any HTML, mailer, swoosh or Ecto (as described in the instructions) to keep the code as simple as possible and focus solely on the web sockets component.

And I personally don't find the gif microscopic (?), I actually made it have these dimensions intentionally so they wouldn't take the whole width needlessly.

[nelsonic]

Nope.
The first thing I did was open two terminal windows:

There are no instructions there.
There's no mention of having to open the two separate README.md files.
"follow the instructions inside each one" is not instructing me to open a README.md file contained within the directories. It's making an assumption that I will "figure out" where these instructions are ... we don't like assumptions.

[LuchoTurtle]

I thought adding "follow the instructions inside each one" would grammatically make sense after saying "folders". But if it's not clear to you, it's no bueno.
Assign the PR back to me and I'll re-write it 👍

[nelsonic]

Why are you using an iPhone 14 Pro MAX as your simulator device?

Are you deliberately trying to make your screenshots as big as they possibly can be? 🤷‍♂️

The content you are showing in the App is tiny:

Why not pick a device that doesn't fill my screen with more than 50% of whitespace?
You know ... something like the iPhone 13 Mini that is far more accessible and uses considerably less screen real-estate:

Yes, it's an "inferior" device. But as noted in:
https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=1477%3A3375
We want to focus on the smaller device and then make sure that all our UI/UX "scales" to the bigger devices.

[nelsonic]

This demo could definitely have been a lot simpler by connecting the Flutter app to the Chat Example: https://phoenix-chat.fly.dev/ which has Phoenix Channels.
So this demo only needed to focus on the Flutter part and not force them to understand how the Phoenix part works. Not that we don't want people to understand both parts. But if we can simplify it for people learning that's a good thing.

Anyway, merging. It's fine. 👌