Skip to content

2. Setup del proyecto

Jump to bottom
Mauricio Cassola edited this page Oct 17, 2022 · 8 revisions

Requisitos

Para la aplicación que vamos a construir, será necesario tener la última versión de Elixir instalada (versión 1.14)

Aquí hay una guía de cómo instalar Elixir en caso de que no lo tengas, utilizando una herramienta que recomendamos.

En caso de tener que instalar Erlang, recomendamos la versión 25.0.

Creamos un nuevo proyecto

Desde una terminal corremos el siguiente comando para generar una nueva app Phoenix con LiveView instalado y configurado:

mix phx.new world_cup --live --no-ecto

Si no tenías Elixir 1.14 instalado aún, puede que se necesario correr este comando antes de ejecutar el anterior:

mix archive.install hex phx_new

Como podemos ver en la salida, se crean varios carpetas y archivos. También se instalan varias dependencias (confirmando con Y+ENTER, o simplemente ENTER) que se necesitan para la app.

Continuando con las sugerencias que se muestran en la salida, nos movemos a la carpeta del proyecto recién creado, y ejecutamos el servidor:

cd example

mix phx.server

Visitamos http://localhost:4000/ desde un navegador para ver nuestra aplicación, y deberíamos poder ver lo siguiente:

Welcome page

Podemos parar el proceso presionando dos veces CTRL+C en la terminal donde corrimos el servidor.

Agregamos estilos

Para ponerle un poco de color y darle una mejor visualización a lo que vamos a ir construyendo, tenemos preparada una hoja de estilos que nos vamos a traer para nuestro proyecto.

Visitamos este link y copiamos el contenido de dicho archivo dentro de nuestro app.css.

Por último, removemos el header que se autogenera en root.html.heex al crear una aplicación Phoenix nueva para que no nos ocupe espacio en los siguientes pasos:

  <body>
-   <header>
-     <section class="container">
-       <nav>
-         <ul>
-           <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
-           <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-             <li><%= link("LiveDashboard", to: Routes.live_dashboard_path(@conn, :home)) %></li>
-           <% end %>
-         </ul>
-       </nav>
-       <a href="https://phoenixframework.org/" class="phx-logo">
-         <img
-           src={Routes.static_path(@conn, "/images/phoenix.png")}
-           alt="Phoenix Framework Logo"
-         />
-       </a>
-     </section>
-   </header>
    <%= @inner_content %>
  </body>
</html>

Nuestro primer commit en git

Usaremos Git para ir gestionando los cambios en el proyecto, haciendo commits individuales después de cada paso en el workshop. Antes de empezar a usarlo debemos configurarlo usando un nombre y cuenta de correo.

Para ello necesitamos movernos a una nueva pestaña en la consola, dado que la actual contiene el servidor. CTRL+SHIFT+T permite abrir una nueva pestaña en la consola.

Una vez allí ejecutamos lo siguiente:

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

Luego, creamos un nuevo repositorio git para nuestra aplicación.

git init

Y finalmente, nuestro primer commit.

git add .
git commit -m "Setup del proyecto"

Se puede comprobar lo que se hizo ejecutando lo siguiente:

git log

Y viendo un commit con texto Setup del proyecto.

Siguiente: 3. Creación de la liveview

Notas para esta parte:

  • Charlar algo sobre Mix?
  • Charlar sobre la flag --no-ecto
  • Breve recorrida por el código
    • Hacer notar el world_cup_web vs world_cup
  • Lifecycle de LV (hasta mount/render)
    • Explicar assigns?
    • Pueden jugar las imagenes que usamos para el wyelabs
  • En los pasos siguientes usar las clases que ya existen vs. inline style
Clone this wiki locally