Demo Elixir Phoenix

Ramuan + Phoenix

Demonstrasi Elixir Phoenix, cara mengaktifkan dan menjalankannya, dan cara menerapkannya melalui Gigalixir.

Instal Erlang, Elixir, Node, Postgres

Instruksi pengantar:

http://elixir-lang.org
http://exponential.io/blog/2015/02/21/

Ada berbagai cara untuk menginstal:

Instal melalui asdf - untuk pengembang lintas platform
Instal melalui brew - untuk pengembang macOS yang lebih menyukai brew
Instal melalui kerl - wip
Instal melalui sumber - wip

Versi verifikasi setidaknya adalah sebagai berikut:

erl --version
Erlang/OTP 27 …

elixir --version
Elixir 1.17.3 …

psql --version
psql (PostgreSQL) 16.4

node --version
v22.9.0

Konfigurasikan basis data PostgresSQL

Untuk membuat pengaturan PostgreSQL lokal lebih mampu dan lebih spesifik untuk demo ini, buat peran baru.

Nama perannya adalah "demo_elixir_phoenix" karena cocok dengan nama proyek ini.
Kata sandi peran dapat menjadi kata sandi yang kuat karena merupakan praktik keamanan yang baik.

Hasilkan kata sandi yang kuat seperti 32 digit heksadesimal:

 printf " %sn " $( LC_ALL=C < /dev/urandom tr -dc ' 0-9a-f ' | head -c32 )

Contoh keluaran:

a9ed78cd8e4aa2bd2a37ad7319899106

Untuk membuat pengaturan PostgreSQL lokal lebih mampu dan lebih spesifik untuk demo ini, buat peran baru.

Nama perannya adalah "demo_elixir_phoenix" karena cocok dengan nama proyek ini.
Kata sandi peran dapat menjadi kata sandi yang kuat karena merupakan praktik keamanan yang baik.

Hasilkan kata sandi yang kuat seperti 32 digit heksadesimal:

 printf " %sn " $( LC_ALL=C < /dev/urandom tr -dc ' 0-9a-f ' | head -c32 )

Contoh keluaran:

a9ed78cd8e4aa2bd2a37ad7319899106

Terhubung melalui opsi khas PostgreSQL:

 psql --username postgres postgres

Terhubung melalui opsi macOS brew PostgreSQL:

psql --username " $USER " postgres

Gunakan psql untuk membuat peran:

 postgres=# CREATE ROLE demo_elixir_phoenix WITH CREATEDB LOGIN ENCRYPTED PASSWORD 'a9ed78cd8e4aa2bd2a37ad7319899106';

Memeriksa:

 postgres=# du demo_elixir_phoenix
                List of roles
      Role name      | Attributes
---------------------+------------
 demo_elixir_phoenix | Create DB

Perbarui campuran

Perbarui mix yang merupakan manajer paket Elixir:

mix local.hex --force

Keluaran:

 * creating …/.mix/archives/hex-2.1.1

Dapatkan kerangka Phoenix

Instal generator proyek baru Phoenix:

mix archive.install hex phx_new

Keluaran:

 * creating ~/.mix/archives/phx_new-1.7.14

Memeriksa:

mix phx.new -v

Keluaran:

Phoenix installer v1.7.14

Buat aplikasi baru

Campurkan direktori dan aplikasi baru Phoenix

Baru:

mix phx.new demo-elixir-phoenix --app demo_elixir_phoenix
cd demo-elixir-phoenix

Buat basis data

Ubah konfigurasi database di file config/dev.exs .

Dari nama pengguna dan kata sandi default:

 username : "postgres" ,
password: "postgres" ,

Ke dalam nama pengguna dan kata sandi khusus:

 username : "demo_elixir_phoenix" ,
password: "a9ed78cd8e4aa2bd2a37ad7319899106" ,

Berlari:

mix ecto.create
The database for DemoElixirPhoenix.Repo has been created

Lakukan perubahan yang sama pada username dan password pada file config/test.exs .

Perbaikan

Jika Anda mendapatkan kesalahan ini:

 ** (Mix) The task " ecto.create " could not be found

Kemungkinan besar Anda menjalankan perintah di direktori yang salah; verifikasi Anda menjalankan perintah dalam direktori dasar aplikasi.

Jika Anda mendapatkan kesalahan ini:

 ** (Mix) The database for DemoElixirPhoenix.Repo couldn ' t be created: an exception was raised:
** (DBConnection.ConnectionError) tcp connect (localhost:5432): connection refused - :econnrefused

Kemudian lakukan pemecahan masalah di sini:

https://github.com/sixarm/sixarm-postgresql-help

Tes

Berlari:

 mix test

Keluaran:

…
Finished in 0.03 seconds (0.01s async, 0.02s sync)
5 tests, 0 failures

Jalankan server Phoenix

Berlari:

mix phx.server

[info] Running DemoElixirPhoenixWeb.Endpoint with Bandit 1.5.5 at 127.0.0.1:4000 (http)
[info] Access DemoElixirPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 166ms.

Jelajahi:

http://localhost:4000

Anda akan melihat halaman selamat datang.

Perbaikan

Jika Anda mendapatkan kesalahan ini:

Error: Brunch 2+ requires node.js v4 or higher …
Upgrade node or use older brunch for old node.js: npm i -g brunch@1

Kemudian perbarui Node, NPM, dan brunch:

brew update
brew uninstall node
sudo rm -rf /usr/local/lib/node_modules
brew install node --with-full-icu
npm install -g npm
npm install -g brunch

Bekerja di aplikasi

Daftar rute

Anda mungkin ingin membuat daftar rute server:

mix phx.routes

Keluaran:

  GET   /                                      DemoElixirPhoenixWeb.PageController :home
  GET   /dev/dashboard/css-:md5                Phoenix.LiveDashboard.Assets :css
  GET   /dev/dashboard/js-:md5                 Phoenix.LiveDashboard.Assets :js
  GET   /dev/dashboard                         Phoenix.LiveDashboard.PageLive :home
  GET   /dev/dashboard/:page                   Phoenix.LiveDashboard.PageLive :page
  GET   /dev/dashboard/:node/:page             Phoenix.LiveDashboard.PageLive :page
  *     /dev/mailbox                           Plug.Swoosh.MailboxPreview []
  WS    /live/websocket                        Phoenix.LiveView.Socket
  GET   /live/longpoll                         Phoenix.LiveView.Socket
  POST  /live/longpoll                         Phoenix.LiveView.Socket

Hasilkan sumber daya

Hasilkan semua kode untuk sumber daya HTML lengkap: migrasi ecto, model ecto, pengontrol, tampilan, dan templat.

mix phx.gen.html Account User users 
    name:string 
    email:string

Keluaran:

 * creating lib/demo_elixir_phoenix_web/controllers/user_controller.ex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/edit.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/index.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/new.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/show.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html/user_form.html.heex
* creating lib/demo_elixir_phoenix_web/controllers/user_html.ex
* creating test/demo_elixir_phoenix_web/controllers/user_controller_test.exs
* creating lib/demo_elixir_phoenix/account/user.ex
* creating priv/repo/migrations/20240625211751_create_users.exs
* creating lib/demo_elixir_phoenix/account.ex
* injecting lib/demo_elixir_phoenix/account.ex
* creating test/demo_elixir_phoenix/account_test.exs
* injecting test/demo_elixir_phoenix/account_test.exs
* creating test/support/fixtures/account_fixtures.ex
* injecting test/support/fixtures/account_fixtures.ex

Susun ulang stempel waktu

Kami lebih suka stempel waktu migrasi kami dicantumkan sebelum kolom lainnya, jadi kami mengedit migrasi:

edit priv/repo/migrations/ * _create_users.exs

Hasil kami terlihat seperti ini:

 defmodule DemoElixirPhoenix.Repo.Migrations.CreateUsers do
  use Ecto.Migration

  def change do
    create table ( :users ) do
      timestamps ( type: :utc_datetime )
      add :name , :string
      add :email , :string
    end
  end
end

Tambahkan rute

Lihat file router lib/demo_elixir_phoenix_web/router.ex .

Standarnya adalah:

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser

    get "/" , PageController , :home
  end

Mengedit perute:

edit lib/demo_elixir_phoenix_web/router.ex `

Tambahkan sumber daya pengguna ke cakupan browser:

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser
    
    resources "/users" , UserController

    get "/" , PageController , :home
  end

Bermigrasi

Bermigrasi:

mix ecto.migrate

Keluaran:

Generated demo_elixir_phoenix app

[info]  == Running … DemoElixirPhoenix.Repo.Migrations.CreateUsers.change/0 forward

[info]  create table users

[info]  == Migrated … in 0.0s

Verifikasi rute

Verifikasikan bahwa rute pengguna ada:

mix phx.routes | grep users

Keluaran:

  GET     /users                                 DemoElixirPhoenixWeb.UserController :index
  GET     /users/:id/edit                        DemoElixirPhoenixWeb.UserController :edit
  GET     /users/new                             DemoElixirPhoenixWeb.UserController :new
  GET     /users/:id                             DemoElixirPhoenixWeb.UserController :show
  POST    /users                                 DemoElixirPhoenixWeb.UserController :create
  PATCH   /users/:id                             DemoElixirPhoenixWeb.UserController :update
  PUT     /users/:id                             DemoElixirPhoenixWeb.UserController :update
  DELETE  /users/:id                             DemoElixirPhoenixWeb.UserController :delete

Berlari

Jalankan servernya:

mix phx.server
…
[info] Running DemoElixirPhoenixWeb.Endpoint with Bandit 1.5.5 at 127.0.0.1:4000 (http)
[info] Access DemoElixirPhoenixWeb.Endpoint at http://localhost:4000
[watch] build finished, watching for changes...

Rebuilding...

Done in 152ms.

Jelajahi:

http://localhost:4000/users

Anda sekarang melihat halaman arahan pengguna, dengan teks seperti "Daftar Pengguna", "Nama", "Email", dll.

Keluaran dari konsol server:

[info] GET /users
[debug] Processing with DemoElixirPhoenixWeb.UserController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="users" db=0.4ms queue=0.5ms idle=974.7ms
SELECT u0."id", u0."name", u0."email", u0."inserted_at", u0."updated_at" FROM "users" AS u0 []
↳ DemoElixirPhoenixWeb.UserController.index/2, at: lib/demo_elixir_phoenix_web/controllers/user_controller.ex:8
[info] Sent 200 in 48ms

Memperluas