This project was generated with Angular CLI version 16.1.4.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The application will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.
- Angular
- Bootstrap para el estilo CSS
- Utilización de IA para la creación de datos de la tabla
La API de Notion exige el uso de snake case para nombrar sus propiedades. Por ejemplo, autor
debe ser Autor
en minúsculas.
Las carpetas pages
y components
se crean como carpetas, no como módulos.
Comandos Angular utilizados:
- Crear nuevo proyecto:
ng new AngularAPINotion
- Crear módulo:
ng g m nombre
- Crear módulo en carpeta principal:
ng g m nombre --flat
- Crear módulo con rutas:
ng g m nombre --routing
- Crear componente en carpeta:
ng g c carpeta/nombre
- Crear servicio:
ng g s notion-api
- Obtener datos: Enviar un POST a la base de datos en
databases/{databaseId}/query
- Crear nuevos datos: Enviar un POST a
https://api.notion.com/v1/pages/
con contenido serializado usando DTO para definir tipos. - Encabezados necesarios: Incluir la ID de la base de datos como encabezado, ya que cada fila cuenta como una hoja en la estructura de Notion.
- ID de página deseada:
object.results[0].id
- Estructura de Objeto Importante:
- Page ID:
id
- Título:
title
- Autor:
plain_text
- Descripción:
plain_text
- Fecha de Realización:
date.start
- Subida o Modificada:
properties.subida o modificada: created_time
- Realizada:
properties.hecha: checkbox
- Page ID:
- HECHO: Formulario para crear tareas
- HECHO: Formulario para modificar tareas
- Hecho: Ver tareas
- Hecho: Ver tareas por ID/nombre (barra de búsqueda)
La tabla/de la base de datos deberá contener:
- Título
- Descripción
- Autor
- Hora de subida
- Hora/día/semana/mes de realización
- Estado de realización (hecha o pendiente)
El formulario de creación deberá incluir:
- Título
- Descripción
- Nombre de la persona
- Hora/día/semana/mes de realización
El formulario de modificación deberá incluir:
- ID (Page ID)
- Título
- Descripción
- Nombre de la persona
- Hora/día/semana/mes de realización
- Estado de realización
- Debido a restricciones de CORS, usamos una API de servidor para comunicarnos con la API de Notion.
- Creamos controladores en una API en C# AspNet.
- Se incluyen los encabezados en las peticiones a la API.
- Realizamos una petición POST a
https://api.notion.com/v1/databases/{databaseId}
.
- Creamos un nuevo proyecto Angular.
- Establecemos la estructura de carpetas y módulos, con atención a
shared
(footer/navigation) al final. - Generamos datos en la tabla.
- Instalamos la dependencia de Notion:
npm i @notionhq/client
desde npmjs.com/package/@notionhq/client. - Creamos el formulario.
- Para el despliegue use Netlify todo se debe dejar por defecto a exception de dis/.
- ya en dist primero deberemos ejecutuar npm run build o ng build para lanzar a produccion ahi obtendremos un Nombre este nombre lo colocaremos despues de la barra / y ya podremos desplegar nuestro proyecto.
- Cualquier duda puede ser consultada