Page d'accueil>Lié à la programmation>Autre code source
Télécharger

Démo Elixir Phoenix

Élixir + Phénix

Démonstration d'Elixir Phoenix, comment le rendre opérationnel et comment le déployer via Gigalixir.

Installer Erlang, Elixir, Node, Postgres

Instructions d'introduction :

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

Il existe différentes manières d'installer :

  • Installer via asdf - pour les développeurs multiplateformes
  • Installer via Brew - pour les développeurs macOS qui préfèrent Brew
  • Installer via Kerl - wip
  • Installer via la source - wip

Vérifiez que les versions sont au moins celles-ci : 

erl --version
Erlang/OTP 27 …

elixir --version
Elixir 1.17.3 …

psql --version
psql (PostgreSQL) 16.4

node --version
v22.9.0

Configurer la base de données PostgresSQL

Pour rendre la configuration locale de PostgreSQL plus performante et plus spécifique pour cette démo, créez un nouveau rôle.

  • Le nom du rôle est "demo_elixir_phoenix" car il correspond au nom de ce projet.

  • Le mot de passe du rôle peut être un mot de passe fort car il constitue une bonne pratique de sécurité.

Générez un mot de passe fort tel que 32 chiffres hexadécimaux : 

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

Exemple de sortie : 

a9ed78cd8e4aa2bd2a37ad7319899106

Pour rendre la configuration locale de PostgreSQL plus performante et plus spécifique pour cette démo, créez un nouveau rôle.

  • Le nom du rôle est "demo_elixir_phoenix" car il correspond au nom de ce projet.

  • Le mot de passe du rôle peut être un mot de passe fort car il constitue une bonne pratique de sécurité.

Générez un mot de passe fort tel que 32 chiffres hexadécimaux : 

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

Exemple de sortie : 

a9ed78cd8e4aa2bd2a37ad7319899106

Connectez-vous via les options PostgreSQL typiques : 

 psql --username postgres postgres

Connectez-vous via les options macOS Brew PostgreSQL : 

psql --username " $USER " postgres

Utilisez psql pour créer le rôle : 

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

Vérifier: 

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

Mettre à jour le mix

Update mix qui est le gestionnaire de packages Elixir : 

mix local.hex --force

Sortir: 

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

Obtenez le framework Phoenix

Installez le nouveau générateur de projet Phoenix : 

mix archive.install hex phx_new

Sortir: 

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

Vérifier: 

mix phx.new -v​

Sortir: 

Phoenix installer v1.7.14

Créer une nouvelle application

Mélangez un nouveau répertoire et une nouvelle application Phoenix

Nouveau: 

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

Créer une base de données

Modifiez la configuration de la base de données dans le fichier config/dev.exs .

À partir du nom d'utilisateur et du mot de passe par défaut : 

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

Dans le nom d'utilisateur et le mot de passe personnalisés : 

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

Courir: 

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

Faites le même changement de nom d'utilisateur et de mot de passe dans le fichier config/test.exs .

Correctifs

Si vous obtenez cette erreur : 

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

Il est alors probable que vous exécutiez la commande dans le mauvais répertoire ; vérifiez que vous exécutez la commande dans le répertoire de base de l'application.

Si vous obtenez cette erreur : 

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

Ensuite, effectuez le dépannage ici :

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

Test

Courir: 

 mix test

Sortir: 

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

Exécutez le serveur Phoenix

Courir: 

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.

Parcourir:

  • http://localhost:4000

Vous devriez voir une page de bienvenue.

Correctifs

Si vous obtenez cette erreur : 

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

Mettez ensuite à jour Node, NPM et 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

Travailler sur l'application

Liste des itinéraires

Vous souhaiterez peut-être lister les routes du serveur : 

mix phx.routes

Sortir: 

  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

Générer une ressource

Générez tout le code pour une ressource HTML complète : migration ecto, modèle ecto, contrôleur, vue et modèles. 

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

Sortir: 

 * 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

Réorganiser les horodatages

Nous préférons que nos horodatages de migration précèdent le reste des champs, nous modifions donc la migration : 

edit priv/repo/migrations/ * _create_users.exs

Notre résultat ressemble à ceci : 

 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

Ajouter l'itinéraire

Voir le fichier du routeur lib/demo_elixir_phoenix_web/router.ex .

La valeur par défaut est : 

  scope "/" , DemoElixirPhoenixWeb do
    pipe_through :browser

    get "/" , PageController , :home
  end

Modifiez le routeur : 

edit lib/demo_elixir_phoenix_web/router.ex `

Ajoutez la ressource utilisateur à la portée du navigateur : 

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

    get "/" , PageController , :home
  end

Émigrer

Émigrer: 

mix ecto.migrate

Sortir: 

Generated demo_elixir_phoenix app

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

[info]  create table users

[info]  == Migrated … in 0.0s

Vérifier les itinéraires

Vérifiez que les routes utilisateur existent : 

mix phx.routes | grep users

Sortir: 

  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

Courir

Exécutez le serveur : 

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.

Parcourir:

  • http://localhost:4000/utilisateurs

Vous voyez maintenant une page de destination des utilisateurs, avec du texte tel que « Liste des utilisateurs », « Nom », « E-mail », etc.

Sortie de la console du serveur : 

[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
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout