Preparar el proyecto base de Ontimize Web

¿Que es Ontimize Web?

Ontimize Web es un potente framework basado en la tecnología de Angular para construir software de negocio de manera rápida y eficaz, comunicándose mediante servicios REST, permitiendo que las aplicaciones puedan ser consumidas tanto en dispositivos móviles como en dispositivos de sobremesa.

Prerrequisitos

Para poder desarrollar este tutorial, debemos tener instalados en nuestro ordenador los elementos que se detallan en la página de prerrequisitos

El backend que nosotros emplearemos está realizado con Ontimize Boot y se puede obtener al clonar el repositorio de Github.

Tenemos que seguir las instrucciones del fichero README.md para lanzar el backed y que permita consultar datos a la aplicación web

Descargar la seed de Ontimize Web

Una vez descargados e instalados todos los programas que necesitamos en la sección anterior, tendremos que descargar la seed del proyecto de Ontimize Web que está preparado para funcionar junto con un servidor de Ontimize Boot. Podremos clonar el repositorio de la seed en nuestro directorio de trabajo mediante el siguiente comando:

Nota

El valor bankmanager-web se utiliza para utilizar un nombre personalizado para la carpeta para la carpeta del proyecto.

git clone --single-branch --branch 15.x.x https://github.com/OntimizeWeb/ontimize-web-ngx-jee-seed.git bankmanager-web

Desde el Visual Studio Code, abriremos la carpeta dónde hemos clonado/descargado el contenido del repositorio, Archivo > Abrir carpeta … y añadiremos un terminal integrado para ejecutar todos los comandos necesarios Ver > Terminal integrado. Ahora navegamos en el terminal hasta la ruta donde hemos ubi cado el contenido de la seed. Si se ha clonado el repositorio, eliminaremos la carpeta oculta .git que se encuentra en el directorio raíz de la aplicación.

Estructura de la aplicación

  • e2e: Esta carpeta contiene los datos necesarios para realizar test end-to-end (e2e) mediante el uso de protactor, una herramienta destinada para este fin.
  • node_modules: Esta carpeta (que aún no aparece) contiene todas las dependencias que necesita la aplicación para ejecutarse y compilar, distribuidas en carpetas y algunos archivos fuera de ellas, según el fichero package.json. Esta carpeta se ignora completamente. Aparecerá en el siguiente paso de este tutorial (aunque, debido a su tamaño, no aparecerá en estos árboles desplegables).
  • src: Contiene todo el código y los recursos de la aplicación.
    • app: Contiene todos los módulos, componentes y rutas de la aplicación. Los ficheros contenidos dentro de app, con extensión app.component.(ts,html,css), define el componente App y el resto de los componentes en sus respectivos ficheros, junto con un platilla HTML, una hoja de estilos CSS. Aquellos, con extensión *.module.ts, declaran el módulo que indica cómo montar los componentes y los módulos de routing. Los ficheros con extensión *-routing.module.ts son los encargados de definir el enrutamiento dentro del módulo al que pertenece el fichero.
      • login: Contiene el módulo, componentes y rutas acerca de la pantalla de inicio de sesión.
      • main: Contiene el módulo, componentes y rutas acerca de la pantalla de inicio de la aplicación.
        • home: Contiene el módulo, componentes y rutas acerca de la pantalla principal de la aplicación.
      • shared: Contiene el módulo, servicios y el menú de la aplicación.
    • assets: Contiene todos los recursos de la aplicación.
      • css: Contiene las hojas de estilo de la aplicación y de la animación de inicio.
      • i18n: Contiene las traducciones de la aplicación a diferentes idiomas.
      • icons: Contiene los iconos que se emplean en la aplicación.
      • images: Contiene las imágenes que se emplean en la aplicación.
      • js: Contiene scripts necesarios para el funcionamiento de la aplicación.
  • .browserslistrc: Fichero que permite indicar la compatibilidad que tendrán los navegadores citados en este fichero con la aplicación.
  • .editorconfig: Fichero que ayuda a mantener estilos de codificación consistentes para todos los desarrolladores que trabajen en el mismo proyectos y varios editores o IDE’s
  • .eslintrc.json: Fichero de configuración para ESLint, una herramienta de JavaScript y TypeScript que permite analizar el código y señalar posibles problemas, errores o prácticas que podrían subsanarse.
  • .gitignore: Este fichero contiene las rutas que Git no incluirá en el seguimiento de las versiones, para asegurarse de que los archivos autogenerados no están comprometidos con el control del código fuente.
  • angular.json: Este fichero contiene la configuración de Angular. En este archivo puede establecer varios valores predeterminados y también configurar qué archivos se incluyen cuando se construye el proyecto. Poco hay que configurar en este fichero, salvo tal vez modificar las apariciones de ontimize-web-ngx-jee-seed por el nombre del proyecto (aunque no lo haremos).
  • karma.conf.js: Este fichero se utiliza para configurar Karma, una herramienta de ejecución de pruebas unitarias en Javascript que está integrada con Angular
  • ngsw-config.json: Este fichero contiene la configuración de Service Worker para PWA, para ofrecer funcionalidades cuando la aplicación no tiene conexión.
  • package-lock.json: Fichero generado automáticamente por NPM par bloquear las versiones exactas de las dependencias del proyecto, garantizando las mismas versiones para todos los desarrolladores
  • package.json: Contiene información sobre el proyecto, como el nombre, versión, scripts, dependencias de proyecto, etc. En los scripts, para cuando lancemos la aplicación, podemos modificar el puerto, cambiando el valor de 4299 a 4200, y añadiendo las propiedades -host localhost para indicar el host que se utilizará o -o para que abra el navegador automáticamente
  • README.md: Información básica sobre versiones y scripts de npm que se pueden usar
  • tsconfig.app.json: Fichero de configuración TypeScript específico para las aplicaciones Angular.
  • tsconfig.json: Fichero de configuración TypeScript que se utiliza para definir opciones de compilación y configuraciones para proyectos TypeScript
  • tsconfig.spec.json: Fichero de configuración específico para las pruebas unitarias en proyectos Angular.

Para más información acerca de la estructura de una aplicación en Angular, consultar la documentación oficial de Angular en el siguiente enlace

Configurar la plantilla de la aplicación

tutorial_o_web_1.png

Abrimos el fichero app.config.ts (pulsando la combinación de teclas Ctrl+P) y configuramos las propiedades de apiEndpoint, y opcionalmente la propiedad uuid, title y locale. De esa manera, indicaremos a la aplicación a que punto de entrada debe hacer las peticiones REST.

app.config.ts

import { Config } from 'ontimize-web-ngx';

import { MENU_CONFIG } from './shared/app.menu.config';
import { SERVICE_CONFIG } from './shared/app.services.config';

export const CONFIG: Config = {
  // The base path of the URL used by app services.
  apiEndpoint: 'http://localhost:8080/bankmanager-jee/services/rest',
  bundle: {
    path: 'bundle'
  },
  // Application identifier. Is the unique package identifier of the app.
  // It is used when storing or managing temporal data related with the app.
  // By default is set as 'ontimize-web-uuid'.
  uuid: 'com.ontimize.web.bankmanager',

  // Title of the app
  title: 'Bank Manager',

  //  Language of the application.
  locale: 'es',

  // The service type used (Ontimize REST standart, Ontimize REST JEE
  // or custom implementation) in the whole application.
  serviceType: 'OntimizeEE',

  // Configuration parameters of application services.
  servicesConfiguration: SERVICE_CONFIG,

  appMenuConfiguration: MENU_CONFIG,

  applicationLocales: ['es', 'en'],

  exportConfiguration: {
    path: '/export'
  }
};

A continuación, podemos modificar el fichero package.json, para modificar la propiedad name y el script start, cambiando el puerto al que accede (con la opción --port 4200), permitiendo que se abra el explorador automáticamente, (la opción -o), y estableciendo la dirección del host (con la opción --host localhost)

package.json

{
  "name": "bankmanager-web",
  "version": "15.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4200 -o --host localhost",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "production": "ng build --base-href=/ontimize-web-ngx-jee-seed/"
  },
  "private": true,
  "engines": {
    "node": "^18.10.0"
  },
  "dependencies": {
    "@angular/animations": "^15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/material-moment-adapter": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/pwa": "^15.2.9",
    "@angular/router": "^15.2.9",
    "@angular/service-worker": "^15.2.9",
    "ontimize-web-ngx": "15.0.0-beta.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.9",
    "@angular-eslint/builder": "15.2.1",
    "@angular-eslint/eslint-plugin": "15.2.1",
    "@angular-eslint/eslint-plugin-template": "15.2.1",
    "@angular-eslint/schematics": "15.2.1",
    "@angular-eslint/template-parser": "15.2.1",
    "@angular/cli": "^15.2.9",
    "@angular/compiler-cli": "^15.2.9",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.28.0",
    "typescript": "~4.9.5"
  }
}

Con estos ficheros modificados, podemos ejecutar el comando npm install para instalar las dependencias, y la generación de la carpeta de dependencias node_modules. Una vez termine de instalar las dependencias, podemos ejecutar el servidor de Node.js con el comando npm start. Lanzamos la base de datos y el servidor Tomcat (ambas del proyecto descargado del repositorio de Github) desde nuestro IDE, y una vez inicializado el servidor Node.js, se abrirá el navegador en la dirección que nosotros hemos establecido en el script start, en este caso, localhost:4200.

tutorial_o_web_2.png tutorial_o_web_3.png

El título de la página web se puede modificar, editando el fichero index.html y cambiando el contenido de la etiqueta <title>. Todos los cambios que hagamos dentro de la carpeta src serán detectados automáticamente, y se recargará el servidor, por lo que no hará falta que nosotros paremos y arranquemos de nuevo el servidor, se hará automáticamente.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bank Manager</title>
  <base href="/">

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Styling -->
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" type="text/css" href="./assets/css/loader.css">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#ffcc00">
</head>
<body>
  <!-- Loader -->
  <div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
  </div>
  <!-- The application tag-->
  <o-app></o-app>

<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

Guardamos los cambios y se reflejarán automáticamente en la ventana del navegador.

tutorial_o_web_4.png

Próximo tutorial arrow_forward