Skip to content
Snippets Groups Projects
Commit cd6323a5 authored by Otto Zaiser's avatar Otto Zaiser
Browse files

Update del README respecto a la UI

parent ecd738c8
No related branches found
No related tags found
No related merge requests found
......@@ -125,7 +125,7 @@ La api tiene dos endpoints:
lista de stampers de ese objecto junto al nro de bloque en el que lo hizo.
### UI
La primera vez hay que ejecutar lo siguiente dentro del directorio ```ui```
Para el desarrollo de la UI, la primera vez hay que ejecutar lo siguiente dentro del directorio ```ui```
```bash
npm install
```
......@@ -134,6 +134,8 @@ La aplicación está escrita con Vue.js. Para correr el servicio hay que ejecuta
```bash
npm run serve
```
**Ver más detalles en el README dentro del directorio ```ui```**
## Instalación en producción
Para correr en producción se deben compilar la UI y la API. Una vez hecho eso
ya se está listo para correr la API y tirar los assets de UI donde se desee.
......@@ -197,29 +199,37 @@ node dist/index.js
### Deploy de la UI
Al buildear se crea el archivo ```ui/dist/index.html``` y todo el resto de los recursos
necesarios. Al acceder al index.html sólo se ve el componente de Stampeo. El html se ve así:
```html
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>ui</title>
<link href=/css/app.47c5343e.css rel=preload as=style>
<link href=/js/app.fa8c25b5.js rel=preload as=script>
<link href=/js/chunk-vendors.bbeb7c49.js rel=preload as=script>
<link href=/css/app.47c5343e.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<div id=app apiurl=http://localhost:3000></div>
<script src=/js/chunk-vendors.bbeb7c49.js></script><script src=/js/app.fa8c25b5.js></script>
</body>
</html>
<div id="app" apiurl=https://tsa2.buenosaires.gob.ar
lb_00=" El archivo "
lb_01=" fue enviado con éxito para ser sellado"
lb_02="Se ha producido un error al intentar sellar "
lb_03=" se encuentra sellado por: "
lb_04=" en el bloque "
lb_05="No se ha podido verificar el archivo "
lb_06="Volver a Sellar o Verificar"
lb_07="Cargando"
lb_08="Arrastrá archivos aquí<br>ó"
lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>"
lb_10="Nombre del archivo: "
lb_11="Hash del archivo: "
lb_12="Sellar"
lb_13="Verificar"
lb_14=" Agregar archivos"
lb_15=" Copiar"
lb_16="Enlace de verificación"
lb_17="Remover archivo"
lb_18="Seleccionar otros archivos"
lb_19=" Solo se pueden agregar "
lb_20=" archivos por vez">
</div>
```
Para embeberlo en otro contexto hay que copiar los ```<link />``` y el ```<div id=app>``` y ```<script />```
del body.
Para embeberlo en otro contexto hay que copiar el div ```<div id=app>```, los estilos ```link``` y el script ```tsa2.js``` del body.
También se puede cambiar los textos de la app modificando todos los labels (```lb_```) que figuran como atributos de ```<div id=app>``` según corresponda.
Es **importante** notar que la url de la api se configura en el atributo ***apiurl*** del div con id ```app```. Esto tiene que apuntar a la URL donde se eligió ejecutar la API. En este caso apunta a la API de producción hosteada por buenosaires.gob.ar
**Es importante notar que la url de la api se configura en el atributo ***apiurl*** del div con id ```app```. Esto tiene que apuntar a la URL donde se eligió ejecutar la API**
**Ver más detalles en el README dentro del directorio ```ui```**
# ui
# UI
## Project setup
## Producción
Si no se requieren cambios en la funcionalidad de la UI, se puede utilizar solamente la carpeta ```dist``` que ya se encuentra lista para su uso. No hace falta compilar nada, ni correr npm. Ahí mismo se pueden cambiar los estilos e imágenes de ser necesario.
### Cambios de Estilos
Modificar los estilos dentro del directorio ```dist/static/css/style.css``` y ```dist/static/css/tsa2.css```
También se puede cambiar los textos de la app modificando todos los labels (```lb_```) que figuran como atributos de ```<div id=app>``` según corresponda.
Es **importante** notar que la url de la api se configura en el atributo ***apiurl*** del div con id ```app```. Esto tiene que apuntar a la URL donde se eligió ejecutar la API. En este caso apunta a la API de producción hosteada por buenosaires.gob.ar
```html
<div id="app" apiurl=https://tsa2.buenosaires.gob.ar
lb_00=" El archivo "
lb_01=" fue enviado con éxito para ser sellado"
lb_02="Se ha producido un error al intentar sellar "
lb_03=" se encuentra sellado por: "
lb_04=" en el bloque "
lb_05="No se ha podido verificar el archivo "
lb_06="Volver a Sellar o Verificar"
lb_07="Cargando"
lb_08="Arrastrá archivos aquí<br>ó"
lb_09="Seleccioná archivos <span class='sr-only'>para Sellar o Verificar</span>"
lb_10="Nombre del archivo: "
lb_11="Hash del archivo: "
lb_12="Sellar"
lb_13="Verificar"
lb_14=" Agregar archivos"
lb_15=" Copiar"
lb_16="Enlace de verificación"
lb_17="Remover archivo"
lb_18="Seleccionar otros archivos"
lb_19=" Solo se pueden agregar "
lb_20=" archivos por vez">
</div>
```
Para embeberlo en otro contexto hay que copiar el div ```<div id=app>```, los estilos ```link``` y el script ```tsa2.js``` del body.
## Desarrollo
En caso de necesitar realizar cambios en la UI.
### 1. Setup del proyecto
```
npm install
```
### Compiles and hot-reloads for development
### 2. Compila y tiene un live-reload para desarrollar
```
npm run serve
```
### Compiles and minifies for production
**Importante:** Siempre tratar de poner en el wording/texto de la app como atributo en el HTML para poder facilitar los cambios de texto/traducciones sin tener la necesidad de compilar.
### 3. Después de realizar los cambios es necesario hacer un build para compilar y minimizar en la carpeta ```dist```.
```
npm run build
```
### Run your tests
### 4. Corré el test para verificar que no haya errores
```
npm run test
```
### Lints and fixes files
### 5. Arreglo de lints
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
### Si se requiere más configuración
Ver [Configuration Reference](https://cli.vuejs.org/config/).
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment