fields demo

Quick demo of the fields package to build Phoenix Apps much faster.

Jump to the section that interests you:

• fields demo
  • Why?
  • What?
  • Who?
• How?
  • 1. Clone from GitHub
  • 2. Setup Dependencies & Database
  • 3. Run the App
• TODO: add GIF of inputting data.
• Build Log?
• Register for Awesome Conf!
• FieldsDemo

Why?

To showcase fields in a basic Phoenix App a complete beginner can understand in 5 minutes.

What?

A tiny demo/example app using fields to store an "event participant registration form" that uses as many of the fields as possible in real-world ways.

Who?

This is aimed at people getting started with fields, both @dwyl and the wider Elixir community.

How?

Run the demo on your computer!

1. Clone from GitHub

Clone the project from GitHub:

git clone git@github.com:dwyl/fields-demo.git

2. Setup Dependencies & Database

Setup the project on localhost:

mix setup

3. Run the App

Run the app:

mix s

Open the app in your browser, you should expect to see:

TODO: add GIF of inputting data.

Build Log?

We wrote a comprehensive step-by-step log of everything we did when creating the fields-demo app:

If you feel we have skipped a step or anything is unclear, please open an issue

Register for Awesome Conf!

4. Create attendee schema

The goal is to allow people attending Awesome Conf to submit the following data:

• first_name - how we greet you. Will appear on your conference pass.
• last_name - your family name. Will appear on you conference pass.
• email - to confirm attendance
• phone_number - to verify your access when attending the secret event.
• address - so we can send the welcome pack
• address_line_2 - if your address has multiple lines.
• postcode - for the address.
• gender - for venue capacity planning.
• dietary_preference - for meals and snacks provided by the conference.
• website - share your awesomeness and have it as a QR code on your conference pass.
• description - brief description of your awesome project.
• feedback - Feedback or suggestions

4.1 gen.schema

Using the mix phx.gen.live command, run:

mix phx.gen.live Accounts Attendee attendees first_name:string last_name:string email:string --no-context

You should expect to see output similar to the following:

* creating lib/fields_demo_web/live/attendee_live/show.ex
* creating lib/fields_demo_web/live/attendee_live/index.ex
* creating lib/fields_demo_web/live/attendee_live/form_component.ex
* creating lib/fields_demo_web/live/attendee_live/index.html.heex
* creating lib/fields_demo_web/live/attendee_live/show.html.heex
* creating test/fields_demo_web/live/attendee_live_test.exs

Add the live routes to your browser scope in lib/fields_demo_web/router.ex:

    live "/attendees", AttendeeLive.Index, :index
    live "/attendees/new", AttendeeLive.Index, :new
    live "/attendees/:id/edit", AttendeeLive.Index, :edit

    live "/attendees/:id", AttendeeLive.Show, :show
    live "/attendees/:id/show/edit", AttendeeLive.Show, :edit

FieldsDemo

To start your Phoenix server:

• Run mix setup to install and setup dependencies
• Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.