1. Què és Play Framework?

Play Framework és un framework web per a Scala (i també per a Java) que facilita el desenvolupament d'aplicacions web i serveis RESTful. És conegut per la seva alta productivitat, escalabilitat i facilitat d'ús. Algunes de les seves característiques clau inclouen:

  • Arquitectura basada en MVC (Model-View-Controller): Separa clarament la lògica de negoci, la presentació i la gestió de les dades.
  • Desenvolupament reactiu: Suporta la programació reactiva, la qual cosa permet construir aplicacions altament escalables i responsives.
  • Hot-reloading: Permet veure els canvis en el codi immediatament sense necessitat de recompilar l'aplicació.
  • Integració amb SBT: Utilitza Scala Build Tool (SBT) per a la gestió de dependències i la construcció del projecte.

  1. Configuració de l'Entorn

2.1. Requisits previs

Abans de començar, assegura't de tenir instal·lats els següents components:

  • Java Development Kit (JDK): Play Framework requereix JDK 8 o superior.
  • Scala: Tot i que Play Framework pot utilitzar-se amb Java, aquest curs se centra en Scala.
  • SBT: Scala Build Tool és necessari per gestionar el projecte.

2.2. Instal·lació de Play Framework

  1. Instal·la SBT:

    • A Linux/MacOS:
      echo "deb https://dl.bintray.com/sbt/debian /" | sudo tee -a /etc/apt/sources.list.d/sbt.list
      sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 642AC823
      sudo apt-get update
      sudo apt-get install sbt
      
    • A Windows: Descarrega l'instal·lador des de sbt download page i segueix les instruccions.
  2. Crea un nou projecte Play:

    • Executa el següent comandament per crear un nou projecte:
      sbt new playframework/play-scala-seed.g8
      
    • Segueix les instruccions per configurar el projecte.
  3. Inicia el servidor Play:

    • Navega al directori del projecte i executa:
      sbt run
      
    • Obre el navegador i ves a http://localhost:9000 per veure l'aplicació en funcionament.

  1. Estructura del Projecte

Un projecte Play Framework típic té la següent estructura:

my-play-app/
 ├── app/
 │   ├── controllers/
 │   ├── models/
 │   ├── views/
 ├── conf/
 │   ├── application.conf
 │   ├── routes
 ├── public/
 │   ├── images/
 │   ├── javascripts/
 │   ├── stylesheets/
 ├── project/
 ├── target/
 ├── build.sbt
 └── README.md
  • app/: Conté el codi de l'aplicació.
    • controllers/: Conté els controladors que gestionen les peticions HTTP.
    • models/: Conté les classes de model que representen les dades de l'aplicació.
    • views/: Conté les plantilles HTML.
  • conf/: Conté els fitxers de configuració.
    • application.conf: Fitxer de configuració principal.
    • routes: Defineix les rutes de l'aplicació.
  • public/: Conté els recursos públics com imatges, JavaScript i CSS.
  • build.sbt: Fitxer de configuració de SBT.

  1. Primer Controlador i Vista

4.1. Creació d'un Controlador

Crea un fitxer HomeController.scala dins del directori app/controllers/:

package controllers

import javax.inject._
import play.api.mvc._

@Singleton
class HomeController @Inject()(val controllerComponents: ControllerComponents) extends BaseController {

  def index() = Action { implicit request: Request[AnyContent] =>
    Ok(views.html.index())
  }
}

4.2. Creació d'una Vista

Crea un fitxer index.scala.html dins del directori app/views/:

@(message: String)

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Play</title>
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
  </head>
  <body>
    <h1>@message</h1>
  </body>
</html>

4.3. Definició de la Ruta

Edita el fitxer conf/routes per afegir la ruta al controlador:

GET     /                           controllers.HomeController.index

4.4. Executa l'Aplicació

Reinicia el servidor Play (sbt run) i visita http://localhost:9000 per veure la teva primera pàgina Play Framework.

  1. Exercici Pràctic

Exercici

Crea una nova pàgina que mostri una llista d'elements. Segueix aquests passos:

  1. Crea un nou controlador ListController.scala:

    package controllers
    
    import javax.inject._
    import play.api.mvc._
    
    @Singleton
    class ListController @Inject()(val controllerComponents: ControllerComponents) extends BaseController {
    
      def list() = Action { implicit request: Request[AnyContent] =>
        val items = List("Item 1", "Item 2", "Item 3")
        Ok(views.html.list(items))
      }
    }
    
  2. Crea una nova vista list.scala.html:

    @(items: List[String])
    
    <!DOCTYPE html>
    <html>
      <head>
        <title>Item List</title>
      </head>
      <body>
        <h1>Item List</h1>
        <ul>
          @for(item <- items) {
            <li>@item</li>
          }
        </ul>
      </body>
    </html>
    
  3. Defineix la nova ruta al fitxer conf/routes:

    GET     /list                       controllers.ListController.list
    

Solució

Després de completar els passos anteriors, reinicia el servidor Play (sbt run) i visita http://localhost:9000/list per veure la llista d'elements.

  1. Conclusió

En aquesta secció, hem introduït Play Framework, configurat l'entorn de desenvolupament, creat un projecte bàsic i desenvolupat una pàgina web simple. Play Framework és una eina poderosa per al desenvolupament d'aplicacions web en Scala, i en les properes seccions explorarem més característiques avançades i millors pràctiques per construir aplicacions robustes i escalables.

© Copyright 2024. Tots els drets reservats