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.