If you prefer you can see the code there.
We're back with the first practical part of our Modern Talking with Elixir series, and this time we'll get the initial setup for our Phoenix LiveView-based Messenger app up and running.. We'll prepare our app for Phoenix LiveView and install all needed dependencies, design the app's Ecto schemas, related contexts, and database structure, to accommodate for the app's business logic. Phoenix LiveView is an exciting new way to build interactive, real-time web applications in Elixir, writing little or no custom JavaScript. The --live flag tells the mix phx.new generator command that we are creating a LiveView application.
You can follow the directions from my last tutorial if you want, but I’d recommend following the official Phoenix LiveView installation instructions.
To start out, let’s set up a new project with Phoenix LiveView. Since the API still isn’t fully figured out, following along there will mean this tutorial will still work a ways into the future. LiveView, built on Phoenix’s excellent websocket report, harnesses the Erlang VM’s ability to run millions of tiny, isolated, stateful processes.
A secret value can be securely generated using:And have the schema define relationship definitions - a message belongs to a conversation and a user, and has many seen message records and emoji reactions:The roles of these callbacks are:Now we need to reflect the not-null constraints in the schema, as well as using the unique constraints.A few configuration steps need to be taken now.
import LiveSocket from " phoenix_live_view " let liveSocket = new LiveSocket (" /live ") liveSocket. Next, decide where you want to use your LiveView. We need to configure a signing salt, which is a mechanism that prevents man-in-the-middle attacks.Stay up to date with the latest programming, marketing and services tips.Now create Phoenix's basic project structure using the installed script:You can send messages to the app, they'll appear on the page, and they'll still be there after you refresh it or restart the server.It's a good moment to commit the changes in your Git repository if you maintain one.This is a good moment to make an initial commit, by the way, if you'd like to.Thankfully, our experience tells us that it's not detrimental to page performance, so you shouldn't probably worry about it too much in the context of SEO and performance audits.We'll let you get into a conversation between two users, and do a simple message exchange between them.We'll prepare our app for Phoenix LiveView and install all needed dependencies, design the app's Ecto schemas, related contexts, and database structure, to accommodate for the app's business logic.The database now contains two pre-populated user records and a conversation between them.The good thing about this approach is that we'll have our context modules talk to the Ecto schema modules, and Phoenix controllers will only talk to domain functions in the appropriate context modules, which will help us keep code clean and organized.Note that we specified the names of unique constraints, beacuse these indexes are on multiple columns - the first one was automatically generated by Ecto, the second one was a name of our choice, describing the purpose of that index - related to the conversation owner.Since Phoenix LiveView is the main concern of this tutorial series, let's try creating our first LiveView-based page.Now, let Ecto, which is Phoenix's default data access library, create the database in your local DB server for you:Before we proceed to add LiveView to our project, let's design the data model driving the app's intended business logic.Each context will hold one or more Ecto schemas serving as data mappers for our tables - based on our functional requirements, here's an outline of what structure we'll use:We'll come back to playing around with our contexts later.
To start with let’s modify our LiveEEx template to show a checkbox next to each todo item.
After you install Elixir in your machine, you can create your first LiveView app in two steps: $ mix archive.install hex phx_new $ mix phx.new demo --live You should have a route that looks like this:Since this is a tutorial for a bigger project, I’ve created the entire thing on GitHub as well. You can use Phoenix.LiveView.Helpers.sigil_L/2 to inline LiveView templates.
So far, we have this working view of a … Elixir news and status updates from the community for Elixir and Phoenix Phoenix LiveView Tutorial for Complete Beginners! connect () This initiates a stateful connection that will cause the view …