{"id":48822224,"url":"https://github.com/intersystems-ib/iris-sample-rest-angular","last_synced_at":"2026-04-14T15:34:43.729Z","repository":{"id":38624617,"uuid":"234578630","full_name":"intersystems-ib/iris-sample-rest-angular","owner":"intersystems-ib","description":"Sample Angular app using InterSytems IRIS as backend ","archived":false,"fork":false,"pushed_at":"2024-06-17T06:40:09.000Z","size":11382,"stargazers_count":4,"open_issues_count":17,"forks_count":7,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-07-30T19:17:30.438Z","etag":null,"topics":["angular-material","angular8","docker","intersystems","intersystems-iris","iris","rest-api"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/intersystems-ib.png","metadata":{"files":{"readme":"README.es.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-17T15:37:20.000Z","updated_at":"2024-06-17T06:40:13.000Z","dependencies_parsed_at":"2023-02-07T08:31:05.191Z","dependency_job_id":null,"html_url":"https://github.com/intersystems-ib/iris-sample-rest-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/intersystems-ib/iris-sample-rest-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersystems-ib%2Firis-sample-rest-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersystems-ib%2Firis-sample-rest-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersystems-ib%2Firis-sample-rest-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersystems-ib%2Firis-sample-rest-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/intersystems-ib","download_url":"https://codeload.github.com/intersystems-ib/iris-sample-rest-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/intersystems-ib%2Firis-sample-rest-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31803620,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-material","angular8","docker","intersystems","intersystems-iris","iris","rest-api"],"created_at":"2026-04-14T15:34:43.669Z","updated_at":"2026-04-14T15:34:43.719Z","avatar_url":"https://github.com/intersystems-ib.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Desarrollo aplicación Angular + InterSystems IRIS\n\nUtilizaremos este repositorio para la sesión *Desarrollo de REST APIs y Web Apps sobre IRIS* del [Iberia Summit 2020](https://www.intersystems.com/es/noticias-eventos/eventos/iberia-summit-barcelona-2020-18-y-19-de-febrero/)\n\n\u003ca href=\"https://www.intersystems.com/es/noticias-eventos/eventos/iberia-summit-barcelona-2020-18-y-19-de-febrero/\"\u003e\u003cimg src=\"./img/summit2020.jpg\" width=500\u003e\u003c/a\u003e\n\nIdiomas: [🇺🇸](README.md)[🇪🇸](README.es.md)\n\n# ¿Qué aprenderás?\nDesarrollaremos una aplicación web sobre el framework *Angular* utilizando como *backend* una instancia *InterSystems IRIS*. Veremos cómo podemos exponer los datos en formato JSON a través de APIs REST que podemos implementar o generar automáticamente.\n \nLa sesión está orientada hacia todos aquellos interesados en *cómo desarrollar aplicaciones web modernas* siguiendo la arquitectura de Single Page Application aprovechando al mismo tiempo las posibilidades de *InterSystems IRIS* como plataforma de datos.\n\n\u003cimg src=\"./img/iris-sample-rest-angular.gif\" width=500\u003e\n\n# ¿Qué necesitas instalar?\nPara poder seguir la sesión con tu propio portátil necesitas instalar: \n* [Git](https://git-scm.com/downloads) \n* [Docker](https://www.docker.com/products/docker-desktop)\n* [Docker Compose](https://docs.docker.com/compose/install/)\n* [Visual Studio Code](https://code.visualstudio.com/download) + [InterSystems ObjectScript VSCode Extension](https://marketplace.visualstudio.com/items?itemName=daimor.vscode-objectscript)\n* [Postman](https://www.getpostman.com/downloads/)\n\nY además, tendrás que descargar las imágenes Docker que utilizaremos:\n```console\n$ git clone https://github.com/intersystems-ib/iris-sample-rest-angular\n$ cd iris-sample-rest-angular\n$ docker-compose pull\n```\n\n# Puesta en marcha\nPara poner en marcha la academia, ejecuta lo siguiente:\n```\n$ docker-compose up\n```\n\nTendrás disponible lo siguiente: \n* *Backend* - InterSystems IRIS: http://localhost:52773/csp/sys/UtilHome.csp\n* *Frontend* - Aplicación Web Angular: http://localhost:4200\n\n# ¿Qué vamos a desarrollar?\n* Partiremos de un sistema que es capaz de procesar un *dataset* con información sobre NetFlix.\n* La información procesada se almacenará en clases persistentes en IRIS.\n* Expondremos la información almacenada en *JSON* a través de interfaces *REST* para poder consumirla desde una aplicación *Angular*.\n* Desarrollaremos nuevas funcionalidades sobre la aplicación web.\n\u003cimg src=\"./frontend/src/assets/img/iris-webapp-diagram.png\" width=700\u003e\n\n# Backend\nNOTA: utiliza el usuario y password por defecto *superuser* / *SYS*\n\n## Examinar *dataset* NetFlix\n* En IRIS tenemos creada una producción que se encarga de procesar un CSV con un *dataset* de Netflix.\n* Echa un vistazo a la producción y a los mensajes procesados en [Interoperability](http://localhost:52773/csp/myapp/EnsPortal.ProductionConfig.zen?PRODUCTION=App.Prod).\n\n## Explora los datos utilizando SQL / Objetos / JSON\n* Abre las clases `App.Data.Show` y `App.Data.Cast` utilizando VS Code. Estas clases utilizan `%JSON.Adaptor` para permitir exportar e importar información en formato JSON. En el artículo [Mejoras en Procesamiento JSON](https://es.community.intersystems.com/post/mejoras-en-procesamiento-json) tienes más información `%JSON.Adaptor` y como funciona.\n* Prueba a hacer un SELECT sobre la tabla `App_Data.Show` en el [SQL Explorer](http://localhost:52773/csp/sys/exp/%25CSP.UI.Portal.SQL.Home.zen?$NAMESPACE=MYAPP)\n* Examina también a través de objetos la información cargada utilizando una sesión de [WebTerminal](http://localhost:52773/terminal/).\n```objectscript\n// abrir objeto Show\nset show = ##class(App.Data.Show).%OpenId(449931)\n// exportar a JSON\ndo show.%JSONExport()\n```\n\n## Interfaces REST\nTenemos la información del *dataset* de Netflix almacenada y somos capaces de exportar / importar información desde nuestras clases persistentes utilizando `%JSON.Adaptor`.\n\n¿Cómo podemos consumir esa información en formato JSON desde una aplicación Angular? utilizaremos interfaces REST. Para nuestro caso tenemos dos opciones que podemos combinar.\n\n### Implementar una API REST\nPodemos implementar una API REST con las operaciones que necesitemos partiendo de una especificación *OpenAPI*. \nEn el webinar [Desarrollar y gestionar APIs con InterSystems IRIS](https://comunidadintersystems.com/desarrollar-y-gestionar-apis-con-intersystems-iris) tienes un [ejemplo completo](https://github.com/es-comunidad-intersystems/webinar-gestion-apis) sobre cómo hacerlo.\n\n### API REST automática\n[RESTForms2](https://openexchange.intersystems.com/package/RESTForms2) es una aplicación que nos permite generar APIs REST de forma automática para nuestras clases persistentes, de forma que soporten operaciones CRUD (Create, Read, Update, Delete). Incluso soporta consultas SQL que hayamos definido.\n\nRESTForms2 ya está instalado en el contenedor *backend* de IRIS que estamos utilizando. Así que podemos probarlo directamente sobre nuestras clases `App.Data.Show` y `App.Data.Cast`:\n* Abre *Postman* e importa la colección `backend/postman/MyApp.postman_collection.json`.\n* Prueba los diferentes ejemplos incluídos en la colección.\n\u003cimg src=\"./img/postman-restforms2.png\" width=700\u003e\n\nUtilizaremos esta API REST generada automáticamente como base para la comunicación entre el *frontend* y el *backend*.\n\n# Frontend\nEl *frontend* es una aplicación *Angular 8* muy sencilla que consume las interfaces REST del *backend* de manera que permiter realizar operaciones sobre las estructuras de datos que hemos visto antes en IRIS.\n\n| Módulo | Descripción |\n| --- | --- |\n| App | Módulo general de la aplicación |\n| AppRouting | Módulo encargado de gestionar las rutas (URLs) utilizadas en la aplicación |\n| About | Contiene el componente *about* que se usa como página inicial (*home*) de la aplicación |\n| Shared | Módulo compartido que incluye referencias a [Angular Material](https://material.angular.io)  |\n| Auth | Implementa autenticación básica contra el *backend* |\n| Shows | Servicios y componentes que utilizan las estructuras de datos `Show` y `Cast` del *backend*  |\n\nNos centraremos en el módulo *Shows*, que incluye:\n\n| Elemento | Descripción |\n| --- | --- |\n| `shows.model` | Estructuras de datos `Show` y `Cast` que utilizaremos en la aplicación |\n| `shows.service` | Servicio que consume las interfaces REST *backend*. Los componentes utilizan este servicio   |\n| `show-latest` | Componente que muestra los `Shows` más reciente en formato tarjeta o *card*  |\n| `show-edit-dialog` | Componente que permite editar un `Show` utilizando un ventana de diálogo  |\n| `cast-list` | Componente que muestra en una tabla el casting `Cast` de un `Show` |\n| `cast-edit-dialog` | Componente que permite editar un `Cast` utilizando una ventana de diálogo |\n| `show-list` | Componente que muestra todos los `Show` en una tabla. Incluye paginación y búsqueda |\n\nExamina y prueba la aplicación. La tienes disponible en http://localhost:4200\n\nNOTA: es recomendable que tengas activadas las *Developer Tools* de Chrome o Safari.\n\n## ¿Hacemos algunos cambios?\nTe propongo implementar algunos cambios como ejercicio.\n\n### Botón para mostrar el casting de un Show en *show-list*\nAñadir un botón que nos permita acceder al casting de cualquier show de los que aparecen en la tabla de `show-list`.\nEl componente `show-latest` ya tiene ese comportamiento. Se trata de replicarlo en la tabla de `show-list`. \n\n___\nAñadiremos una nueva definición de columna en `show-list`. La llamaremos `actions` y la utilizaremos para colocar las acciones que queramos hacer sobre una fila de la tabla. Incluiremos un botón para navegar hacia el componente `cast-list` utilizando el identificador del `Show`.\n\n\u003e frontend/src/app/shows/show-list/show-list.component.html\n```javascript\n    \u003cng-container matColumnDef=\"actions\"\u003e\n      \u003cmat-header-cell *matHeaderCellDef\u003e\u003c/mat-header-cell\u003e\n      \u003cmat-cell *matCellDef=\"let show\"\u003e\n        \u003cbutton mat-icon-button [routerLink]=\"['/shows/' + show.id + '/cast']\" matTooltip=\"Casting\"\u003e\n          \u003cmat-icon\u003epeople_alt\u003c/mat-icon\u003e\n        \u003c/button\u003e\n      \u003c/mat-cell\u003e\n    \u003c/ng-container\u003e\n```\n\n___\nLa propiedad `displayedColumns` de `show-list` se utiliza para indicar al componente [mat-table](https://material.angular.io/components/table/overview) las columnas que debe mostrar. Tenemos que incluir aquí nuestra nueva columna `actions`.\n\n\u003e frontend/src/app/shows/show-list/show-list.component.ts\n```javascript\ndisplayedColumns = ['actions', 'title', 'description'];\n```\n\n\n### Incluir \"year\" como información que aparece en cada Show en la aplicación\nEl *backend* (IRIS) ya tiene incluido `year` como una propiedad de `App.Data.Show` pero no lo estamos mostrando en la aplicación. A continuación vamos a incluirlo en diferentes puntos de nuestra aplicación:\n\n___\nComenzamos por añadir añadir la propiedad `year` al modelo de datos que utilizamos en Angular\n\n\u003e frontend/src/app/shows/shows.model.ts\n```javacript\nexport interface Show {\n    id: number;\n    name: string;\n    description: string;\n    year: string;\n}\n```\n\n___\nModificaremos también la query `App.Data.Show:queryFIND` que estamos utilizando en el IRIS (a través de la API automática de RESTForms2) para incluir la propiedad `year`\n\n\u003e backend/src/App/Data/Show.cls\n```objectscript\nClassMethod queryFIND() As %String\n{\n  quit \"showid id, title, year, description \"\n}\n```\n\n___\nAhora ya podemos mostrar `year` en el componente `show-latest`\n\n\u003e frontend/src/app/shows/show-latest/show-latest.component.html\n```javascript\n   \u003cmat-card-header\u003e\n      \u003cmat-card-title\u003e{{show.title}} \u003csmall\u003e{{ show.year }}\u003c/small\u003e\u003c/mat-card-title\u003e\n   \u003c/mat-card-header\u003e\n```\n\n___\nVamos a permitir que se pueda modificar el campo `year` igualmente en `show-edit-dialog`\n\n\u003e frontend/src/app/shows/show-edit-dialog/show-edit-dialog.component.ts\n```javascript\n    const formControls = {\n      title: ['', Validators.required],\n      description: ['', Validators.required],\n      year: ['', Validators.required]\n    };\n```\n\n\u003e frontend/src/app/shows/show-edit-dialog/show-edit-dialog.component.html\n```javascript\n   \u003cmat-form-field\u003e\n     \u003ctextarea matInput placeholder=\"Year\" formControlName=\"year\"\u003e\n     \u003c/textarea\u003e\n   \u003c/mat-form-field\u003e\n```\n\n___\nTambién mostraremos `year` como una columna en `show-list` y ocultaremos la columna `id` ya que es un identificador interno. Para ello igual que antes vamos a crear una nueva definición de columna llamada `year`.\n\n\u003e frontend/src/app/shows/show-list/show-list.component.html\n```javascript\n    \u003cng-container matColumnDef=\"year\"\u003e\n      \u003cmat-header-cell *matHeaderCellDef\u003eYear\u003c/mat-header-cell\u003e\n      \u003cmat-cell *matCellDef=\"let show\"\u003e{{ show.year }}\u003c/mat-cell\u003e\n    \u003c/ng-container\u003e\n```\n\n___\nCambiaremos la definición de las columnas que se muestran en el componente:\n\n\u003e frontend/src/app/shows/show-list/show-list.component.ts\n```javascript\ndisplayedColumns = ['actions', 'title', 'year', 'description'];\n```\n\n¡Y esto es todo!\n\nNo olvides echarle un ojo a [angular-material-iris-starter](https://github.com/intersystems-community/angular-material-iris-starter) para aprender sobre funcionalidades un poco más complejas en Angular.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintersystems-ib%2Firis-sample-rest-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintersystems-ib%2Firis-sample-rest-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintersystems-ib%2Firis-sample-rest-angular/lists"}