Taller - paso 1

Al final de este taller se espera que usted haya creado una aplicación que:

• Contenga un componente que muestre una galería de deportes
• Contenga un componente que muestre una lista (tabla) de deportistas

Para ello debe basarse en el paso-1a/paso-1b del ejemplo del Bookstore .

¿Cómo comenzar?

Se recomienda realizar el taller en dos etapas:

• 1a: sin back, es decir enfocarse en el proyecto del front en Angular 6. Los datos a mostrar deben estar en archivos .json como en el paso 1a del ejemplo del BookStore.
• 1b: con back, es decir que una vez finalizado el trabajo en el front, podrá concentrarse en el API REST. Finalice realizando las modificaciones necesarias para conectar el front con el back.

El front en Angular 6

Para iniciar, utilice el CLI de Angular para crear un proyecto. Para esto abra la ventana de comandos y diríjase al directorio donde desea crear el proyecto.

Una vez allí ejecute el comando:

ng new el-título-que-usted-quiera

Cuando el proyecto se haya creado, abra el directorio en Visual Studio Code y utilice la controla integrada (ver "Ejecutar BookStore") para ejecutar los otros comandos que necesite.

El proyecto de base se puede ejecutar con:

ng serve

Y puede acceder a él desde localhost:4200

La estructura básica del proyecto que creó parte del AppComponent y AppModule. Estos son templates así que no dude en modificarlos.

Ahora, usted puede agregar los componentes para desarrollar el taller utilizando el comando

ng generate component nombre-de-su-componente

El back en Node.js

Para construir su API REST, le sugerimos los siguientes pasos:

1. Desde el terminal de comandos, diríjase al directorio donde va a ubicar su proyecto.
2. Ejecute el comando: npm init. Este comando lo guiará en la creación de su proyecto. Una vez finalizado el proceso de creación, tendrá un package.json que será la base de su back.
3. Agregue los paquetes básicos express, body-parser y cors por medio de los comandos: npm install --save express npm install --save body-parser npm install --save cors. La ejecución de estos comandos instalará los paquetes (los agregará a la carpeta node_modules), y los agregará al package.json como dependencies.
4. Cree el archivo .gitignore y asegúrese de especificar que no subirá al repositorio la carpeta node_modules. Para más información sobre este archivo encontrará información aquí, y puede revisar los archivos .gitignore de los proyectos del BookStore.
5. Cree el archivo app.js. Este archivo debería tener una estructura similar al del ejemplo del BookStore.
6. Cree la carpeta assets y ubique allí los archivos .json que creó para el paso-1a del taller.
7. Cree la carpeta app y dentro de ella dos carpetas controllers y services donde ubicará los controladores y servicios que correspondan al desarrollo del taller.