Laboratorio: Creación de una Plataforma de Gestión de Cursos con Next.js y TypeScript

En este laboratorio, crearás una aplicación de gestión de cursos utilizando Next.js y TypeScript siguiendo el patrón MVC (Modelo-Vista-Controlador).

Objetivo

Desarrollar una plataforma para gestionar cursos, permitiendo a los usuarios inscribirse y ver los cursos disponibles. Requisitos Previos

• Node.js y npm instalados
• Conocimientos básicos de Next.js y TypeScript

Paso 1: Crear la Aplicación Next.js

• Crear una nueva aplicación Next.js:

npx create-next-app@latest gestion-cursos
cd gestion-cursos

Ejecutar la aplicación:

npm run dev

Abre tu navegador y navega a http://localhost:3000 para ver la aplicación en funcionamiento.

Paso 2: Crear la Estructura del Proyecto

• Crear la estructura de directorios:

    /gestion-cursos
    ├── pages
    │   ├── index.tsx
    │   └── courses.tsx
    ├── models
    │   └── course.ts
    ├── views
    │   └── courseView.tsx
    ├── controllers
    │   └── courseController.ts
    └── ...

Paso 3: Modelo (models/course.ts)

• Definir la clase Course y gestionar los datos de los cursos:

// models/course.ts

class Course {
    constructor(
        public id: number,
        public name: string,
        public description: string,
        public instructor: string
    ) {}
}

class CourseModel {
    private courses: Course[] = [];

    addCourse(course: Course): void {
        this.courses.push(course);
    }

    getCourses(): Course[] {
        return this.courses;
    }
}

export { Course, CourseModel };

Paso 4: Vista (views/courseView.tsx)

• Crear una vista para mostrar los cursos:

// views/courseView.tsx

import React from 'react';
import { Course } from '../models/course';

interface CourseViewProps {
    courses: Course[];
}

const CourseView: React.FC<CourseViewProps> = ({ courses }) => {
    return (
        <div>
            {courses.map((course) => (
                <div key={course.id}>
                    <h2>{course.name}</h2>
                    <p>{course.description}</p>
                    <p>Instructor: {course.instructor}</p>
                </div>
            ))}
        </div>
    );
};

export default CourseView;

Paso 5: Controlador (controllers/courseController.ts)

• Gestionar la lógica entre el modelo y la vista:

// controllers/courseController.ts

import { Course, CourseModel } from "../models/course";

class CourseController {
    private model: CourseModel;

    constructor() {
        this.model = new CourseModel();
    }

    initialize(): Course[] {
        this.model.addCourse(new Course(1, 'Curso de Next.js', 'Aprende a crear aplicaciones con Next.js', 'Juan Pérez'));
        this.model.addCourse(new Course(2, 'Curso de TypeScript', 'Domina TypeScript para aplicaciones robustas', 'María López'));
        return this.model.getCourses();
    }
}

export default CourseController;

Paso 6: Integración en Next.js (pages/courses.tsx)

• Integrar el modelo, vista y controlador en una página de Next.js:

// pages/courses.tsx

import React, { useEffect, useState } from 'react';
import CourseView from '../views/courseView';
import CourseController from '../controllers/courseController';
import { Course } from '../models/course';

const CoursesPage: React.FC = () => {
    const [courses, setCourses] = useState<Course[]>([]);
    const controller = new CourseController();

    useEffect(() => {
        const coursesData = controller.initialize();
        setCourses(coursesData);
    }, []);

    return (
        <div>
            <h1>Lista de Cursos</h1>
            <CourseView courses={courses} />
        </div>
    );
};

export default CoursesPage;

Paso 7: Página de Inicio (pages/index.tsx)

• Crear una página de inicio simple que enlace a la página de cursos:

// pages/index.tsx

import React from 'react';
import Link from 'next/link';

const HomePage: React.FC = () => {
    return (
        <div>
            <h1>Bienvenido a la Plataforma de Cursos</h1>
            <Link href="/courses">
                Ver Cursos
            </Link>
        </div>
    );
};

export default HomePage;

Extra

Paso 8: Estilos CSS

• Agregar estilos CSS a la aplicación:

Recordemos que instalamos TailwindCSS en el proyecto, por lo que podemos utilizar sus clases para estilizar la aplicación.

/* styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #333;
}

a {
    color: #0070f3;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

Incluimos los estilos en el archivo _app.tsx:

import '../../styles/globals.css';

import { ReactElement, ComponentType } from 'react';

function MyApp({ Component, pageProps }: { Component: ComponentType<any>, pageProps: any }): ReactElement {
    return <Component {...pageProps} />;
}

export default MyApp;

Conclusión

En este laboratorio, has aprendido a crear una plataforma de gestión de cursos utilizando Next.js y TypeScript siguiendo el patjson MVC. Has creado un modelo para gestionar los datos de los cursos, una vista para mostrar los cursos y un controlador para gestionar la lógica entre el modelo y la vista. Integraste estos elementos en una aplicación Next.js y creaste una página de inicio y una página de cursos. También has aprendido a agregar estilos CSS a la aplicación utilizando TailwindCSS. ¡Felicitaciones por completar este laboratorio!

Reto

• Agregar funcionalidades para inscribirse en un curso y ver los detalles de un curso.
• Crear una página de administración para agregar, editar y eliminar cursos.