LiveView Course Update #9: Form Create
July 09, 2020
Happy summertime to you! đ
Weâre back with another update on our Phoenix LiveView course. In the next four videos, weâre going to unpack:
- Form Create
- Live Validations
- Toggling State
- Real-Time Updates
To demonstrate these common UI scenarios, imagine youâre an event coordinator in a post-pandemic world where we can socially gather again. Your event requires a bunch of volunteers and so you need a way to keep track of everyone. Specifically, you want to:
- collect each personâs name and phone number in a form
- validate each name and number
- add each volunteer to a database
- display a list all the volunteers and their current status
- toggle a volunteerâs state between checked in/out
- keep everything updated in real-time
Oh yeah, and you want to do it all without full page reloads.
No sweat! đ LiveView can handle all this with only ~100 lines of code. Weâll show you how in the next four videos!
Live Create With Ecto Changesets
In this weekâs 22-minute video we start off the app by using Ecto and changesets to dynamically create volunteers and check in each one to the event, like so:
If youâre unfamiliar with Ecto changesets, we recommend checking out âModule 17: A Peek At Phoenixâ in our Elixir & OTP course.
Live Create Servers
Some of you told us that the exercises for sorting and pagination were too copy/paste-y. Well, we canât have that! This weekâs example is intended to give you a little challenge.
Remember the live navigation example that listed servers? Wouldnât it be convenient if we had a way to add servers to that list? đ To do so, youâll need to create a live form and build on what you know about live navigation.
Hereâs the goal:
Hopefully this exercise keeps your fingers away from those tempting copy, paste, find, and replace keys. đ If youâve already picked up a copy of the course, youâll find this new video and exercise in your account today.
Enjoy!