Saltar al contenido principal
Version: Next (5.0)

awe-101 Su primera aplicación AWE

Construya una pequeña aplicación AWE en pocos minutos. Este tutorial parte de la ruta rápida de Primeros pasos y se centra en los primeros pasos útiles: generar la aplicación, ejecutarla, entender las carpetas generadas y hacer un pequeño cambio visible.

Ruta rápida​

  1. Genere un proyecto a partir de un arquetipo de AWE.
  2. Ejecútelo en local en http://localhost:18080.
  3. Inspeccione los recursos generados en application/<your-acronym>/.
  4. Cambie un valor de configuración y reinicie la aplicación.

Antes de empezar​

Necesita:

  • Java 21 o superior
  • Maven 3.x o superior
  • Un terminal y su editor preferido

Si aún no ha generado un proyecto, siga primero Primeros pasos.

Paso 1: Genere la aplicación​

Este ejemplo utiliza el arquetipo de AngularJS porque es el proyecto inicial clásico de AWE. Si prefiere React, utilice el mismo comando y sustituya awe-boot-angular-archetype por awe-boot-react-archetype.

Utilice la versión actual de AWE de Maven Central: Version

mvn -B archetype:generate \
 -DarchetypeGroupId=com.almis.awe \
 -DarchetypeArtifactId=awe-boot-angular-archetype \
 -DarchetypeVersion=[Archetype version] \
 -DgroupId=com.example.app \
 -DartifactId=my-app \
 -Dversion=1.0-SNAPSHOT

Cuando el comando termine, entre en el proyecto generado:

cd my-app

Paso 2: Ejecute la aplicación​

Arranque la aplicación generada:

mvn spring-boot:run

Después abra:

http://localhost:18080
info

La aplicación generada está configurada con server.port=18080.

Notas de formación antiguas de AWE documentan las credenciales test / test para la aplicación de pruebas de ejemplo. Trátelo como una indicación específica de una versión y verifíquela con la versión del arquetipo que haya generado antes de fiarse de ella.

Paso 3: Entienda la estructura generada​

No necesita aprender todo el framework el primer día. Empiece por estos archivos y carpetas:

RutaPor qué es importante
pom.xmlArchivo principal del proyecto Maven.
src/main/resources/application.propertiesNombre de la aplicación, puerto, tema, base de datos y ajustes de arranque.
src/main/resources/application/<your-acronym>/global/Descriptores XML compartidos de AWE, como queries, maintain, services y actions.
src/main/resources/application/<your-acronym>/screen/Archivos XML de pantallas. Aquí viven las pantallas de la interfaz.
src/main/resources/application/<your-acronym>/menu/Menús de navegación públicos y privados.
src/main/resources/application/<your-acronym>/locale/Textos de la aplicación por idioma.
src/main/resources/application/<your-acronym>/profile/Reglas de acceso y restricciones de perfil.

Regla de alto nivel:

  • screen/ define lo que ven los usuarios.
  • menu/ decide cómo llegan los usuarios a esas pantallas.
  • global/ contiene las definiciones XML compartidas orientadas al backend.
  • locale/ almacena las etiquetas traducibles.

Si más adelante quiere una explicación más completa, continúe con Estructura del proyecto.

Paso 4: Haga una pequeña primera personalización​

Para el cambio inicial más pequeño y seguro, actualice el tema generado.

  1. Abra src/main/resources/application.properties.

  2. Busque la línea awe.application.theme=. El valor generado depende del arquetipo:

    # Angular archetype
    awe.application.theme=sunset

    # React archetype
    awe.application.theme=default

  3. Sustituya el valor actual por otro nombre de tema de la lista de temas de la demo de AWE a la que remite el comentario de ese mismo archivo.

  4. Detenga la aplicación y ejecute de nuevo mvn spring-boot:run.

  5. Actualice el navegador y confirme que el estilo de la aplicación ha cambiado.

Es una buena primera edición porque es visible, fácil de revertir y le ayuda a confirmar que el proyecto generado ya es suyo.

Qué explorar a continuación​

Cuando esté listo para el siguiente paso, abra estas carpetas por orden:

  1. src/main/resources/application/<your-acronym>/menu/
  2. src/main/resources/application/<your-acronym>/screen/
  3. src/main/resources/application/<your-acronym>/global/

Ese recorrido refleja cómo crece la mayor parte del trabajo en una aplicación AWE: primero la navegación, después las pantallas y, por último, la lógica compartida.

Vídeo de referencia​

Si prefiere ver el proceso de configuración en un IDE, puede seguir usando el vídeo original con IntelliJ: