Posible diagrama de clases básico, de Platzi.
JavaScript Orientado a Objetos
JavaScript: orientado a objetos, basado en prototipos
Qué es programación orientada a objetos
Bonus: fútbol y programación orientada a objetos
Objetos, clases y prototipos
Qué es un objeto en JavaScript
Objetos literales y prototipos en JavaScript
Clases en JavaScript
Ventajas de la programación orientada a objetos
Playgrounds: Manejo de clases
Pilares de la POO: abstracción y encapsulamiento
Qué es abstracción
Abstracción en JavaScript
Qué es encapsulamiento
Getters y setters en JavaScript
Módulos de ECMAScript 6
Playgrounds: Controlar accesos con get y set
Pilares de la POO: herencia y polimorfismo
Qué es herencia
Herencia en JavaScript
Qué es polimorfismo
Polimorfismo en JavaScript
Playgrounds: Sobrescribir métodos heredados
Próximos pasos
Toma el Curso Intermedio de Programación Orientada a Objetos en JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Abstracción en JavaScript
10/20Recursos
Aportes 72
Preguntas 6
Ordenar por:
Creo que se habrán dado cuenta de que tener todo este código en 1 archivo es ineficiente. Así que por ahora, creé diferentes archivos y los estoy mandado a llamar en el main.js 😄
Por cierto, para que esto funcione, tienen que hacer este ajuste en index.html: <script src="main.js" type="module"></script>
main.js:
import Teacher from './teacher.js'
import Course from './course.js'
import Lesson from './lesson.js'
import LearningPath from './learningPath.js'
import Student from './student.js'
//* Teachers ---------------------
const FreddyVega = new Teacher({
id: 1,
name: 'Freddy Vega',
speciality: 'CEO',
});
console.log(FreddyVega);
const ClauAlderete = new Teacher({
id: 2,
name: 'Clau Alderete',
speciality: 'Digital Marketing',
});
console.log(ClauAlderete);
//* Lecciones -----------------------
const lesson1PB = new Lesson({
id: 1,
title: 'Clase 1 Programación Básica',
});
console.log(lesson1PB);
const lesson1DM = new Lesson({
id: 2,
title: 'Clase 1 Marketing Digital',
});
console.log(lesson1DM);
//* Cursos ----------------------------
const cursoProgramacionBasica = new Course({
id: 1,
name: "Curso gratis de programación básica",
classes: [lesson1PB],
teacher: FreddyVega,
});
console.log(cursoProgramacionBasica);
const cursoIntroMarketingDigital = new Course({
id: 2,
name: 'Curso de Introducción al Marketing Digital',
classes: [lesson1DM],
teacher: ClauAlderete
});
console.log(cursoIntroMarketingDigital);
//* Escuelas ---------------------
const escuelaDesarrolloWeb = new LearningPath({
id: 1,
title: 'Escuela de Desarrollo Web',
courses: [cursoProgramacionBasica],
});
console.log(escuelaDesarrolloWeb);
const escuelaMarketingDigital = new LearningPath({
id: 2,
title: 'Marketing Digital',
courses: [cursoIntroMarketingDigital],
});
console.log(escuelaMarketingDigital);
//* Estudiantes ---------------------
const miguel = new Student({
id: 1,
name: 'Miguel',
email: '[email protected]',
username: 'mike',
points: 40000,
approvedCourses: [cursoProgramacionBasica],
learningPaths: [escuelaDesarrolloWeb]
});
console.log(miguel);
Teacher.js:
export default class Teacher {
constructor({
id,
name,
speciality,
}) {
this.id = id;
this.name = name;
this.speciality = speciality;
}
};
Lecciones:
export default class Lesson {
constructor({
id,
title,
}){
this.id = id;
this.title = title;
};
};
Cursos:
export default class Course {
constructor({
id,
name,
classes = [],
teacher,
}){
this.id = id;
this.name = name;
this.classes = classes;
this.teacher = teacher;
};
}
Escuelas:
export default class LearningPath {
constructor({
id,
title,
courses = [],
}) {
this.id = id;
this.title = title;
this.courses = courses;
this.coursesQuantity = courses.length;
}
};
Estudiantes:
export default class Student {
constructor({
id,
name,
email,
username,
points = 0,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.id = id;
this.name = name;
this.email = email;
this.username = username;
this.points = points;
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
this.socialMedia = {
twitter,
instagram,
facebook,
};
}
};
Hasta este momento creía inecesario usar el diagrama UML, pero ahora veo que si es importante al menos para mi poder ver cada clase dentro de un diagrama me permitira crear codigo mas ordenado ufff
ahora entiendo el por que de los diagramas de clases antes de empezar a tocar codigo, es un diagrama de un proyecto que realice hace algun tiempo, no lo entendia del todo, por que la documentacion es importante, pero cuando vi esta clase, es importante que antes de tocar codigo tengamos por decirlo un manual ya que si hacemos esto alreves no sabremos por donde empezar.
Bueno estas son las clases que implementé con respecto a las clases y cursos.
class Comments {
constructor({user, comment}){
this.user = user;
this.comment = comment;
}
}
const primerComentario = new Comments({user: 'Fernando', comment: 'Este es el primer comentario'});
class Classes {
constructor({name, time, comentarios = []}){
this.name = name;
this.time = time;
this.comentarios = comentarios;
}
}
const primeraClaseProgramacionBasica = new Classes({name: 'Que es la programación', comentarios: [primerComentario]});
class Course {
constructor({name, classes = []}){
this.name = name;
this.classes = classes;
}
}
const cursoProgramacionBasica = new Course({name: 'Curso Gratis de programación Básica', classes: primeraClaseProgramacionBasica});
const cursoDefinitivoHTMLyCSS = new Course({name: 'Curso definitivo de HTML y CSS'});
const cursoPracticoHTMLyCSS = new Course({name: 'Curso práctico de HTML y CSS'});
Por ahora sólo agregué las clases “clases” e "instructor; sin embargo, pienso que aún hacen falta varias por definir, entre ellas:
- Comentarios
- Aportes
- Preguntas
- BlogPosts
- RutasAprendidas
- Foro
- Pagos
- Planes
Entre quizás otro largo etc.
Por ahora mi código quedó así, está separado por comentarios para que sea más legible.
Cabe mencionar que intenté llamar a mis objetos “clases” en mis objetos “instructor” pero me marca un error de “undefined”, porque se declararon posteriormente a la inicialización de estos
Supongo que dicho error se resuelve con módulos pero no estoy seguro, si alguien sabe, por favor haganmelo saber.
El código:
////////////////////////DEFINICIÓN DE LA CLASE INSTRUCTOR
class Instructor{
constructor({
name,
username,
courses = [],
email,
yearsOfinstruction,
}){
this.name = name;
this.username = username;
this.courses = courses;
this.email = email;
this.yearsOfinstruction = yearsOfinstruction;
}
}
const freddyVega = new Instructor({
name: "Freddy Vega",
username: "Freddier",
email: "[email protected]",
yearsOfinstruction: 12,
courses: [cursoProgBasica]
});
const diegoDGranda = new Instructor({
name: "Diego De Granda",
username: "DDGranda",
email: "[email protected]",
yearsOfinstruction: 6,
courses: [cursoDefinitivoHTML, cursoPracticoHTML]
});
///////////////////////////////DEFICION DE CLASE "CLASE"
class Clase{
constructor({
name,
instructor,
level,
}){
this.name = name;
this.instructor = instructor;
this.level = level;
}
};
const introProg = new Clase({
name: "¿Qué es la programación?",
instructor: freddyVega,
level: "Basic"
});
const asincroProg = new Clase({
name: "Asínscronismo en la programación",
instructor: freddyVega,
level: "Advanced"
});
const queEsHTML = new Clase({
name: "¿Qué es HTML",
instructor: diegoDGranda,
level: "Basico"
});
const semanticaHTML = new Clase({
name: "Código semántico",
instructor: diegoDGranda,
level: "Advanced"
});
const planteamientoProyecto = new Clase({
name: "¿Qué vamos a hacer en este curso práctico?",
instructor: diegoDGranda,
level: "Basico"
});
const ajusteDeDetalles = new Clase({
name: "Últimos detalles a nuestro proyecto",
instructor: diegoDGranda,
level: "Advanced"
});
////////////////////////DEFINICION DE CLASE COURSE
class Course {
constructor({
name,
classes = [],
}){
this.name = name;
this.classes = classes;
}
};
const cursoProgBasica = new Course({
name: "Curso de Programación Básica",
classes: [introProg, asincroProg]
});
const cursoDefinitivoHTML = new Course({
name: "Curso definitivo de HTML y CSS",
classes: [queEsHTML, semanticaHTML]
});
const cursoPracticoHTML = new Course({
name: "Curso Practico de HTML y CSS",
classes: [planteamientoProyecto, ajusteDeDetalles]
});
/////////////////////DEFINICION DE CLASE LEARNINGPATH
class LearningPath{
constructor({
name,
courses = [],
coursesNumber,
category,
instructors = [],
projects = [],
blogPosts = [],
blogPostsNumber,
}){
this.name = name;
this.courses = courses;
this.coursesNumber = coursesNumber;
this.category = category;
this.instructors = instructors;
this.projects = projects;
this.blogPosts = blogPosts;
this.blogPostsNumber = blogPostsNumber;
}
}
const escuelaDeDesarrolloWeb = new LearningPath({
name: "Escuela de desarrollo web",
courses: [cursoProgBasica, cursoDefinitivoHTML, cursoPracticoHTML],
coursesNumber: 102,
category: "Development and engineering",
blogPostsNumber: 678,
});
const escuelaDeEmprendimiento = new LearningPath({
name: "escuela De Emprendimiento",
coursesNumber: 23,
category: "Entreprenurship",
blogPostsNumber: 2,
});
const escuelaDeMatematicas = new LearningPath({
name: "Escuela de matemáticas",
coursesNumber: 7,
category: "Sciences",
blogPostsNumber: 6,
});
const escuelaDeVideojuegos = new LearningPath({
name: "Escuela de Videojuegos",
courses: [cursoProgBasica, cursoDefinitivoHTML, cursoPracticoHTML],
coursesNumber: 17,
category: "Development and Engineering",
blogPostsNumber: 32,
});
/////////////////////DEFINICION DE CLASE ESTUDIANTE
class Student{
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter: twitter,
instagram: instagram,
facebook: facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
const juan2 = new Student({
name: "JuanDC",
username: "juandc1",
email: "[email protected]",
twitter: "fjuandc",
learningPaths: [escuelaDeDesarrolloWeb, escuelaDeMatematicas],
});
const miguelito2 = new Student({
name: "Miguelito",
username: "Miguelonazo",
email: "[email protected]",
instagram: "[email protected]",
learningPaths: [escuelaDeEmprendimiento, escuelaDeVideojuegos],
});
Asi seria mi diagra de clases UML de platzi. Que opinan? ![]()
- Abstracción: Es tomar las propiedades más importantes de un objeto, para usarlas de forma general y poder generar nuevos objetos a futuro, en base a las propiedades que tomamos
Aquí ta mi código:
main.js:
import Teacher from './teacher.js';
import Student from './student.js';
import LearningPath from './learningPath.js';
import Course from './course.js';
const freddy = new Teacher({
name: "Freddy Vega"
});
const juandc = new Teacher({
name: "Juan David Castro "
});
const deGranda = new Teacher({
name: "Diego De Granda"
})
const orlandoB = new Teacher({
name: "Orlando Naipes"
})
const cursoDefHTML = new Course({
name: "Curso Definitivo de HTML y CSS",
teacher: deGranda,
});
const cursoPracHTML = new Course({
name: "Curso Práctico de HTML y CSS",
teacher: deGranda,
});
const cursoPOOJS = new Course({
name: "Curso de Programación orientada a objetos con JavaScript",
teacher: juandc,
});
const cursoUnreal = new Course({
name: "Curso de Unreal Engine",
teacher: freddy,
});
const cursoUnity = new Course({
name: "Curso de Unity 3D",
teacher: orlandoB,
});
const escuelaWeb = new LearningPath({
name: "Escuela de Desarrollo Web",
courses: [cursoDefHTML, cursoPracHTML ,cursoPOOJS],
description: "En esta escuela aprenderás a ser un Desarrollador Web Full Stack"
});
const escuelaData = new LearningPath({
name: "Escuela de Data Science",
courses: [cursoDefHTML, cursoUnreal],
description: "En esta escuela la neta no sé que hacen"
});
const escuelaJuegos = new LearningPath({
name: "Escuela de Videojuegos",
courses: [cursoUnreal, cursoUnity],
description: "En esta escuela aprenderás a desarrollar Videojuegos"
});
const juan = new Student({
nombre: "juanito",
username: "juandc",
email: "[email protected]",
twitter: "fjuandc_",
learningPaths: [escuelaWeb, escuelaData]
});
const miguel = new Student({
nombre: "miguelito",
username: "migueldc",
email: "[email protected]",
instagram: "fmigueldc_",
learningPaths: [escuelaData, escuelaJuegos]
});
console.log(miguel);
console.log(juan);
teacher.js:
export default class Teacher {
constructor({
name,
}) {
this.name = name;
}
}
courses.js:
export default class Course {
constructor({
name,
teacher,
videos = [],
}) {
this.name = name;
this.teacher = teacher;
this.videos = videos;
}
addVideo(video) {
this.videos.push(video);
}
}
learningPath.js:
export default class LearningPath {
constructor({
name,
courses = [],
description,
}) {
this.name = name;
this.courses = courses;
this.description = description;
}
addCourse(course) {
this.courses.push(course);
}
}
student.js:
export default class Student {
constructor({
nombre,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.nombre = nombre;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
Reto:
// prototypes/constructors/molds
class LearningPath {
constructor({
path_name,
courses = [],
}) {
this.path_name = path_name;
courses;
};
};
class Course {
constructor({
name,
// classes = [],
}) {
this.name = name;
// this.classes = classes;
}
};
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name = name;
this.email = email;
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
this.socialMedia = {
username,
twitter,
instagram,
facebook,
};
};
};
class ClassForCourse {
constructor({
name,
id,
numberOfClass,
comments = [
numComments = 0,
messages = [],
],
questions = [],
classResources = [
links = [],
text = undefined,
],
nextClass,
previousClass,
}) {
this.name = name;
this.id = id;
this.numberOfClass = numberOfClass;
this.comments = comments;
this.questions = questions;
this.classResources = classResources;
this.nextClass = nextClass;
this.previousClass = previousClass;
}
}
// Course-lessons
const FirstLinecodeLesson = new ClassForCourse({
name: 'Mi primera línea de código',
id: 'BPCC1',
numberOfClass: 1,
comments : [
numComments = 16,
messages = [],
],
questions: [],
classResources: [
links = [],
text = 'lorem ipsum in dolor sit amet',
],
nextClass: '¿qué es HTML/CSS/JS?',
previousClass: '',
})
// courses
const BasicProgrammingCourse = new Course({
name: 'Curso de Programación básica',
classes: [
FirstLinecodeLesson,
'¿qué es HTML/CSS/JS?',
]
})
const WebIntroCourse = new Course({
name: 'Introducción a la Web',
classes: [
'MBienvenido al Desarrollo Web',
'¿Cómo empezó todo?',
]
})
const POOCourse = new Course({
name: 'Curso de POO',
classes: [
'¿Por qué aprender Programación Orientada a Objetos?',
'¿Qué resuelve la Programación Orientada a Objetos?',
]
})
// grades
const webDevelopmentGrades = [
BasicProgrammingCourse,
WebIntroCourse,
POOCourse,
];
const ExclusiveCoursesGrades = [
'Cómo Conseguir Trabajo en Programación',
'Curso de Finanzas para Startups',
'Curso de Inglés Técnico para Profesionales'
];
const pythonDevGrades = [
BasicProgrammingCourse,
WebIntroCourse,
POOCourse,
'Curso de Fundamentos de Web Scraping con Python y Xpath',
'Curso de Introducción al Pensamiento Computacional con Python',
];
// Colleges
const pythonDevelopmentCollege = new LearningPath({
path_name: 'Escuela de Desarrollo en Python',
courses: pythonDevGrades,
})
const webDevelopmentCollege = new LearningPath({
path_name: 'Escuela de Desarrollo Web',
courses: webDevelopmentGrades,
});
const ExclusiveCoursesCollege = new LearningPath({
path_name: 'Cursos Exclusivos',
courses: ExclusiveCoursesGrades,
});
// students
const andres = new Student({
name :'Andrés',
username: 'altair__6',
email: '[email protected]',
instagram: 'altair__6',
learningPaths: [ pythonDevelopmentCollege ],
})
const felipe = new Student({
name :'Felipe',
username: 'Jaya__9',
email: '[email protected]',
instagram: 'Jaya__9',
twitter: 'Jaya__9',
learningPaths: [ webDevelopmentCollege, ExclusiveCoursesCollege ],
})
·
PD: Lo que me puedan corregir, excelente!
UML basico, segun lo que entendi acerca de UML
Soy un novato en JS. Me salió esto;
Ez Xd
class Clase {
constructor(nombre, profesor, video) {
this.nombre = nombre;
this.profesor = profesor;
this.video = video;
}
}
class Curso {
constructor({ name, clases }) {
this.name = name;
this.clases = [clases];
}
}
class RutaAprendizaje {
constructor({ nombre, duracion, nivel, curso }) {
this.nombre = nombre;
this.duracion = duracion;
this.nivel = nivel;
this.curso = curso;
}
}
class Estudiante {
constructor({
name,
age,
email,
twitter = undefined,
instagram = undefined,
facebook = undefined,
cursosAprobados = [],
rutasAprendizaje = [],
}) {
this.name = name;
this.age = age;
this.email = email;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.cursosAprobados = [];
this.rutaAprendizaje = [];
}
}
var HtmlDefinitivo = new Clase({nombre: "HTML Definitivo", profesor: "Natalia", video: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"});
var CssDefinitivo = new Clase({nombre: "CSS Definitivo",profesor: "Natalia", video: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"});
var JsDefinitivo = new Clase({nombre: "JS Definitivo", profesor: "Natalia", video: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"});
var PhpDefinitivo = new Clase({nombre: "PHP Definitivo", profesor: "Natalia", video: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"});
var PythonDefinitivo = new Clase({nombre: "Python Definitivo", profesor: "Natalia", video: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"});
var ecuacionesAvanzadas = new Clase("Ecuaciones Avanzadas", "Natalia", "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
var sumasArimeticas = new Clase("Sumas Aritmeticas", "Natalia", "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
var matrices = new Clase("Matrices", "Natalia", "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
var algebraLineal = new Clase("Algebra Lineal", "Natalia", "https://www.youtube.com/watch?v=dQw4w9WgXcQ");
var principiosDeProgramacion = new Curso({name: "Principios de Programacion", clases: [ecuacionesAvanzadas, sumasArimeticas, matrices, algebraLineal]});
var principiosWeb = new Curso({name: "Principios de la Web", clases: [HtmlDefinitivo, CssDefinitivo]});
var fundamentosDeJs = new Curso({name: "Fundamentos de JS", clases: [JsDefinitivo]});
var complementosWeb = new Curso({name: "Complementos de la Web", clases: [PhpDefinitivo, PythonDefinitivo]});
var Matematicas = new Curso({name: "Matematicas", clases: [ecuacionesAvanzadas, sumasArimeticas, matrices, algebraLineal]});
var DesarrolloWeb = new RutaAprendizaje({
nombre: "Desarrollo Web",
duracion: "3 meses",
nivel: "Intermedio",
curso: [principiosWeb, principiosDeProgramacion, fundamentosDeJs, complementosWeb],
});
var MatematicasAvanzadas = new RutaAprendizaje({
nombre: "Matematicas Avanzadas",
duracion: "3 meses",
nivel: "Intermedio",
curso: Matematicas
});
var Carlos = new Estudiante({
name: "Carlos",
age: 17,
email: "[email protected]",
rutasAprendizaje = [DesarrolloWeb, MatematicasAvanzadas]
});
Así quedo mi código para construir las “clases de los cursos”, e introduciéndolos en el curso correspondiente.
Creo que entre mas vayamos hacia cada elementos mas clases pueden hacerse, por el momento para cada clase suss atributos serian el nombre, comentarios, preguntas, rescursos, clases relacionadas, siguiente clase , clase anterior. Por lo que veo en el reproductor de Platzi 😄
class ClassesForCourse{
constructor({
name,
comments = [],
questions = [],
resourses = [],
relatedClasses = [],
nextClass,
pastClass
})
{
this.name = name,
this.comments = comments,
this.questions = questions,
this.resourses = resourses,
this.relatedClasses = relatedClasses
this.nextClass = nextClass
this.pastClass = pastClass
}
}
const claseQueEsHTML = ({
name: "¿Que es HTML/CSS/JS"
})
const clasePrimerLineaCodigo = ({
name: "Mi Primer Linea de Código",
nextClass: claseQueEsHTML
})
class Course{
constructor({
name,
classes = [],
}){
this.name = name;
this.classes = classes;
}
}
const cursoProgBasica = new Course({
name: "Curso Gratis de Programación Básica",
classes: [
clasePrimerLineaCodigo,
claseQueEsHTML
],
})
Don’t repeat yourself
Una abstracción, por lo que ví, es la agrupación de características comunes de elementos frecuentes.
Se crea una clase o “model” que asegure la consistencia y reproducibilidad de dichos elementos.
Este curso va de maravillaaa!!!
Esta fue mi respuesta al reto:
// Creating learning paths as objects with constructor
class LearningPath {
constructor({
id,
name,
courses = [],
}) {
this.id = id;
this.name = name;
this.courses = courses;
}
addCourse(courseToAdd){
this.courses.push(courseToAdd);
}
//TODO: changeCourse & deleteCourse
}
// lectures inside courses
class Lecture {
constructor({
id,
teacher,
description,
comments = [],
}) {
this.id = id;
this.teacher = teacher;
this.description = description;
this.comments = comments;
}
}
// Elements associated with lectures
class Description {
constructor({
text,
related_lectures = [],
}) {
this.text = text;
this.related_lectures = related_lectures;
}
}
class Comments {
constructor({
student,
text,
type_of_comment,
likes,
}) {
this.student = student;
this.text = text;
this.type_of_comment = type_of_comment;
this.likes = likes;
}
}
// Instancing Description
const descripcion1 = new Description({
text: "En esta clase aprenderemos sobre la POO en JavaScript",
related_lectures: [
clase3,
clase8,
]
})
const descripcion3 = new Description({
text: "En esta clase aprenderemos sobre la abstracción como pilar de la POO en JavaScript",
related_lectures: [
clase1,
clase8,
]
})
const descripcion8 = new Description({
text: "En esta clase aprenderemos sobre la herencia como pilar de la POO en JavaScript",
related_lectures: [
clase3,
clase1,
]
})
// Instancing lectures
const clase1 = new Lecture({
id: "clase-intro-poo",
teacher: juanD,
description: descripcion1,
})
const clase3 = new Lecture({
id: "clase-herencia-poo",
teacher: juanD,
description: descripcion3,
})
const clase8 = new Lecture({
id: "clase-practica-herencia-poo",
teacher: juanD,
description: descripcion8,
})
const cursoPOO = new Course({
id: "curso-poo",
name: "Curso de POO en JavaScript",
teacher: JuanD,
lectures: [
clase1,
clase3,
clase8
]
})
class User {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
const JuanD = new User({
name: "Juan David",
email: "[email protected]",
username: "JuanDC",
instagram: "Juan_DC"
})
Cree la clase Teacher dado que cada curso tiene un profe y el profe puede dar varios cursos, lo hice así, usando los id de los profes de Platzi:
class Teacher {
constructor ({
name,
position,
})
{
this.name = name;
this.position = position;
}
}
const freddier = new Teacher({
name: "Freddy Vega",
position: "CEO Platzi",
})
const facmartoni = new Teacher({
name: "Facundo García Martoni",
position: "Backend Engineer,i",
})
const freddier = new Teacher({
name: "Freddy Vega",
position: "CEO Platzi",
})
const degranda = new Teacher({
name: "Diego De Granda",
position: "Software Engineering Manager",
})
RETO
class Student{
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPath = []
}){
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook
};
this.approvedCourses = approvedCourses;
this.learningPath = learningPath;
}
}
class learningPath{
constructor(name, courses = []){
this.name = name;
this.courses = courses;
}
}
class courses {
constructor(name, clases){
this.name = name;
this.clases = clases;
}
}
class clases {
constructor(name, id){
this.name = name;
this.id = id;
}
}
const escuelaDesarrolloWeb = new learningPath('desarrollo web', [new courses('curso de html y css', new('introducciion a la web',1)),new courses('curso de js', new('html', 1))]);
const esccuelaIngles = new learningPath('ingles', ['ingles basico', 'ingles intermedio']);
Platzi tiene:
Profesores : nombre, apellido, email, cursos creados, clases, edad, profesion, inicio de trabajo, estado civil, genero, residencia
Estudiantes : nombre, apellido, email, cursos iniciados, cursos por tomar, cursos aprobados, rutas iniciados, rutas por tomar, rutas aprobados clases, edad, profesion, inicio de subcripcion, estado civil, genero, residencia
Clases : name, id, profesores, tecnologias usadas, tiempo de duracion, comentarios, recursos,
Modulos : name, clases, id,
Cursos : name, modulos, id , valoracion, numero de estudiantes aprobados,calificacion del curso
Rutas de aprendizaje: cursos, areas, name, numero de estudiantes, numero de estudiantes aprobados, calificacion
Comentarios : usuario, estado(pregunta o aporte),
Secciones en Vivo: nombre, viewers, area, participantes, Hora de inicio
escuelas: cursos, area, name , numero de estudiantes, numero de estudiantes aprobados, calificacion
rutas personalizadas: cursos, areas, name,
post: id, Usuario, comentarios, veces visitado
Buenas…
Esto es lo que voy desarrollando en el transcurso del curso
// ---------------------- PROTOTIPOS ----------------------
class Teachers {
constructor({
name
}) {
this.name = name;
}
}
class Comments {
constructor({
name,
comment
}) {
this.name = name;
this.comment = comment;
}
}
class Classes {
constructor ({
name,
teacher,
}) {
this.name = name;
this.teacher = teacher;
}
}
class Course {
constructor({
name,
classes = [],
}) {
this.name = name;
this.classes = classes;
}
}
class LearningPath {
constructor({
name,
courses = [],
teachers,
}) {
this.name = name;
this.courses = courses;
this.teachers = teachers;
}
}
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
comments = []
}) {
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook
},
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
this.comments = comments;
}
newComment(comment) {
this.comments.push(
new Comments({
name: this.username,
comment: comment
})
);
}
}
// ---------------------- INSTANCIAS DE CURSOS ----------------------
// ----------------- ESCUELA WEB -----------------
const cursoCompBasica = new Course({
name: "Curso Gratis de Programación Básica",
});
const cursoPensamientoLogicoI = new Course({
name: "Curso de Pensamiento Lógico: Algoritmos y Diagramas de Flujo",
});
const cursoPensamientoLogicoII = new Course({
name: "Curso de Pensamiento Lógico: Manejo de Datos, Estructuras y Funciones",
});
// ------- INSTANCIAS DE PROFESORES WEB -------
const freddyVega = new Teachers({ name: "Freddy Vega", })
const davidAroesti = new Teachers({ name: "David Aroesti", })
const ricardoCelis = new Teachers({ name: "Ricardo Celis", })
// ----------------- ESCUELA DATA -----------------
const cursoPorqueData = new Course({
name: "Cómo y Por Qué Aprender Data Science e Inteligencia Artificial",
});
const cursoAnalisisDeNegocios = new Course({
name: "Curso de Análisis de Negocios para Ciencia de Datos",
});
const cursoEticayManejoDatos = new Course({
name: "Curso de Ética y Manejo de Datos para Data Science e Inteligencia Artificial",
});
// ------- INSTANCIAS DE PROFESORES DATA -------
const marcelaValenzuela = new Teachers ({ name: "Marcela Valenzuela Gómez", });
const sergioOrduz = new Teachers ({ name: "Sergio Orduz", });
const silviaAriza = new Teachers ({ name: "Sílvia Ariza Sentís", });
// ----------------- ESCUELA DE VIDEOJUEGOS -----------------
const cursoIntroProdJuegos = new Course({
name: "Curso de Introducción a la Producción de Videojuegos",
});
const cursoDireccionDeVideojuegos = new Course({
name: "Curso de Dirección de Videojuegos",
});
const cursoPlaneacionYDireccionDeJuegosIndies = new Course({
name: "Curso de Planeación y Dirección de Videojuegos Indies",
});
const cursoConseguirInversion = new Course({
name: "Curso para Conseguir Inversión para Videojuegos: Preparar un Pitch Existoso",
});
const cursoConseguirInversionII = new Course({
name: "Curso para Conseguir Inversión: Presentación de Pitch",
});
// ------- INSTANCIAS DE PROFESORES VIDEOJUEGOS -------
const ricardoIzquierdo = new Teachers ({ name: "Ricardo Izquierdo", });
const gerardoGarcia = new Teachers ({ name: "Gerardo García", });
const jorgeGarcia = new Teachers ({ name: "Jorge García" });
// ---------------------- INSTANCIAS DE RUTAS DE APRENDIZAJE ----------------------
const escuelaWeb = new LearningPath({
name: "Fundamentos de Programación y Desarrollo Web",
courses: [
cursoCompBasica,
cursoPensamientoLogicoI,
cursoPensamientoLogicoII
],
teachers: [
freddyVega,
davidAroesti,
ricardoCelis,
],
});
const escuelaData = new LearningPath({
name: "Fundamentos de Data",
courses: [
cursoPorqueData,
cursoAnalisisDeNegocios,
cursoEticayManejoDatos,
],
teachers: [
marcelaValenzuela,
sergioOrduz,
silviaAriza,
],
});
const escuelaVideojuegos = new LearningPath({
name: "Producción de videojuegos",
courses: [
cursoIntroProdJuegos,
cursoDireccionDeVideojuegos,
cursoPlaneacionYDireccionDeJuegosIndies,
cursoConseguirInversion,
cursoConseguirInversionII,
],
teachers: [
ricardoIzquierdo,
gerardoGarcia,
jorgeGarcia,
]
});
// ---------------------- INSTANCIAS DE ESTUDIANTES ----------------------
const mario = new Student({
name: "Mario",
username: "marioc",
email: "[email protected]",
twitter: "marioc",
learningPaths: [
escuelaData,
escuelaWeb,
]
});
const damian = new Student({
name: "Damian",
username: "damianvillafanez",
email: "[email protected]",
twitter: "damianvillafanez",
learningPaths: [
escuelaVideojuegos,
],
});
class LearningPath{
constructor({
name,
courses=[],
}){
this.name=name;
this.courses= courses;
}
}
class Courses{
constructor({
name,
classes =[],
}){
this.name = name;
this.classes = classes;
}
}
class Clases{
constructor({
name,
teacher,
comments = [],
}){
this.name = name;
this.teacher = teacher;
this.comments = comments
}
}
class Teachers{
constructor({
name,
especializacion = undefined,
}){
this.name = name;
this.especializacion = especializacion;
}
}
const juandc = new Teachers({
name: "Juan David",
especializacion: "Desarrollo web"
})
const adans = new Teachers({
name: "Adan Saavedra",
especializacion: "Desarrollo web"
})
const maryann = new Teachers({
name: "Maryann Delgado",
especializacion: "Data Science"
})
const soff = new Teachers({
name: "Sofia Antonella",
especializacion: "VideoGames"
})
//Escuela web
const claseIntroCSSGrid = new Clases({
name: "Intro a CSS Grid",
teacher: juandc
})
const claseIntroCSSFlexBox = new Clases({
name: "Intro a CSS FlexBox",
teacher: adans
})
const css = new Courses({
name: "Curso Introducctorio a CSS",
classes :[claseIntroCSSFlexBox,claseIntroCSSGrid]
})
const escuelaWeb = new LearningPath({
name: "Escuela de desarrollo Web",
courses: [css]
})
// Escuela de data
const tableou1 = new Clases({
name: "Clase intro de Tableau",
teacher: maryann
})
const tableou2 = new Clases({
name: "Clase Avanzada de Tableau",
teacher: maryann
})
const data1 = new Clases({
name: "Clase intro de data Science",
teacher: maryann
})
const tableuCourse = new Courses({
name: "Curso de tableu",
classes:[tableou1, tableou2]
})
const dataScience = new Courses({
name: "Curso de Visualizacion de Data",
classes:[data1]
})
const escuelaData = new LearningPath({
name: "Escuela de Data Engineering",
courses: [tableuCourse, dataScience]
})
Estos es el diagrama UML que realize, aunque puede faltarle cosas lo creé de acuerdo a lo que e entendido hasta el moemnto.
Un ejemplo del prototipo para las clases de cada curso sería:
class Classes {
constructor({
name,
teacher,
video,
resources = [],
comments = [],
}) {
this.name = name;
this.teacher = teacher;
this.video = video;
this.resources = resources;
this.comments = comments;
}
}
Y una instancia de esta clase sería por ejemplo para el curso introductorio, pero en verdad no sé cómo se agregaría el video y los archivos, lo haré con un string que indique la ruta y me corrigen si no es así por favor:
const introduccion = new Classes({
name: "Introducción",
video: "./videos/introduccion.mp4",
resources: [
"./main.js",
"./index.html",
],
});
es el reto señores
class Comentario {
constructor({
student,
contenido,
likes,
repuestas = [],
}) {
this.student = student;
this.contenido = contenido;
this.likes = likes;
this.repuestas = repuestas;
}
}
const respuesta__comentarioMiguelito = new Comentario({
student: "Juan David",
contenido: "con mucho gusto te ayudo que es lo que no te quedó claro",
likes: 2,
repuestas: undefined,
})
const comentarioMiguelito = new Comentario({
student : "Miguelito",
contenido : "Oye me quedo una duda de la clase y mi programa no corre, ¿ alguien puede ayudarme?",
likes : 12,
repuestas : [respuesta__comentarioMiguelito],
});
class Classes {
constructor({
title,
archivosDeLaClase = [],
comentarios = [],
marcadores = [],
}) {
this.title = title;
this.archivosDeLaClase = archivosDeLaClase;
this.comentarios = comentarios;
this.marcadores = marcadores;
}
}
const progClasses = new Classes({
title: "introducción",
archivosDeLaClase: [
"codigo de la clase",
"links de referencia",
"enlace al codigo en github",
],
comentarios : [comentarioMiguelito]
});
class Course {
constructor({
name,
longitude,
numberClasses,
classes = [],
}) {
this.name = name;
this.classes = classes;
this.longitude = longitude;
this.numberClasses = numberClasses;
}
}
const cursoProgramacionBasica = new Course({
name: "Curso Gratis de Programación Gratis",
longitude: "10 horas de contenido",
numberClasses: 54,
classes: [progClasses],
});
const cursoDefinitivo = new Course({
name: "Curso Definitivo de Html y Css",
longitude: "2 horas de contenido",
numberClasses: 13,
classes: [progClasses]
});
const cursoPractico = new Course({
name: "Curso practico de HTML y CSS",
longitude: "2 horas de contenido",
numberClasses: 25,
classes: [progClasses]
});
class LearningPaths {
constructor({
name,
courses = [],
}){
this.name = name;
this.courses = courses;
}
}
const escuelaWeb = new LearningPaths({
name: "Escuela de Desarrollo Web",
courses: [
cursoProgramacionBasica,
cursoDefinitivo,
cursoPractico,
]
}
);
const escuelaDiseno = new LearningPaths({
name: "Escuela de Diseño",
courses: [
"Maquetacion con Css",
"Curso de Html semantico"
]
}
);
const escuelaData = new LearningPaths({
name: "Escuela de Data science",
courses: [
"curso de base de datos",
"Curso de Historia de BD"
]
}
);
class Student{
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}){
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
const juandc2 = new Student({
name: "Carlos",
username: "sharlybip",
email: "[email protected]",
twitter: "@sharlybip",
learningPaths: [
escuelaWeb,
escuelaData,
]
}
);
const miguelito = new Student({
name : "Miguelito",
username : "mikehappy",
email : "[email protected]",
twitter : "@happymike01",
learningPaths : [
escuelaWeb,
escuelaDiseno,
]
}
);
Mi reto:
.
class LearningPaths{
constructor({
name,
courses = [],
}){
this.name = name;
this.courses = courses;
}
}
//-------------------------------------------------------
class course {
constructor({
name,
clases = [],
}){
this.name = name;
this.clases = clases;
}
}
//------------------------------------------------
class clase{
constructor({
name,
}){
this.name = name;
}
}
const clase1 = new clase({
name: "clase1",
});
const clase2 = new clase({
name: "clase2",
});
const clase3 = new clase({
name: "clase3",
});
//-----------------------------------------------------------
const cursoProgBasica = new course({
name: "Curso Gratis de Programación Basica",
clases: [ clase1,clase2,clase3, ],
});
const cursoDefinitivoHTML = new course({
name: "Curso Definitivo HTML Y CSS",
clases: [ clase1,clase2,clase3, ],
});
const cursoPracticoHTML = new course({
name: "Curso Practico HTML Y CSS",
clases:[clase2,],
});
const cursoCssGrid = new course({
name: "Curso CSS Grid",
clases:[clase3,],
});
//---------------------------------------------------------
//Rutas de aprendizaje
const escuelaWeb = new LearningPaths({
name: "Escuela de Desarrollo Web",
courses: [
cursoProgBasica,
cursoDefinitivoHTML,
cursoPracticoHTML,
cursoCssGrid,
],
});
const escuelaData = new LearningPaths({
name: "Escuela de Data Science",
courses: [
cursoProgBasica,
],
});
const escuelaVgs = new LearningPaths({
name: "Escuela de VideoJuegos",
courses: [
cursoProgBasica,
],
});
<code>//Clase de studiantes
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name;
this.email;
this.username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
//Clase para las rutas de aprendizaje
class LearningPaths {
constructor(
{
name,
courses = []
}){
this.name = name;
this.courses = courses;
}
}
//Clase para las los cursos de las rutas de aprendizaje
class Course {
constructor({
name,
lessons = [],
}) {
this.name = name;
this.lessons = lessons;
}
}
//clase para las clases de los cursos
class Classes {
constructor({
name,
}) {
this.name = name;
}
}
const clase1 = new Classes({
name: 'Clase 1'
})
const ProgramacionBasica = new Course({
name: 'ProgramacionBasica',
lessons: [
clase1,
],
})
const GitHub = new Course({
name: 'curso basico de GitHub',
lessons: [
clase1,
],
})
const carreraWeb = new LearningPaths({
name: "Escuela de desarrollo web",
courses: [
ProgramacionBasica,
]
})
const carreraData = new LearningPaths({
name: "Escuela de data sience",
courses: [
GitHub,
ProgramacionBasica,
]
})
const juanClase = new Student({
name: "Eber",
username: "eberdv",
email: "[email protected]",
twitter: "eberdv",
approvedCourses: [
GitHub,
],
learningPaths:[
carreraWeb,
],
});
console.log(juanClase);
Lo hice con carpetas para que el ‘main.js’ no este tan cargado use type = “module” en el script del html para usar imports y exports.
import { Course } from "./course.js";
import { Student } from "./student.js";
import { Teacher } from "./teacher.js";
import { LearningsPath } from "./LearningsPath.js";
// teachers.....
const FreddyVega = new Teacher ({
id : 1,
nameProfesor : 'Freddy Vega',
rol : 'CEO',
});
const JuanDC = new Teacher ({
id : 2,
nameProfesor : 'JuanDC',
rol : 'Cordinator of Technology',
});
const DiegoDeG = new Teacher ({
id : 2,
nameProfesor : 'Diego DeGranda',
rol : 'Profesor de Programacion',
});
// Course.....
const CursoGratisProgra = new Course({
name : 'Curso de Programacion Basico de Pragramacion',
Courseclasses : 11,
teacher : FreddyVega,
});
const cursoJs = new Course({
name : 'Curso Profesional de JavaScipt',
Courseclasses : 22,
teacher : JuanDC,
});
const cursoDefinitivo = new Course({
name : 'Curso Definitivo de Html y Css',
Courseclasses : 20,
teacher : DiegoDeG,
});
// LearningPaths....
const escuelaDesarrolloWeb = new LearningsPath({
tittle : 'Escuela Desarrollo Web',
Course : [cursoDefinitivo, cursoJs],
});
// Student.....
const Eduardo = new Student({
name : 'Eduardo Pizarro',
age : 21,
points : 3600,
cursosAprobados : [CursoGratisProgra, cursoDefinitivo, cursoJs],
learningsPaths : [escuelaDesarrolloWeb],
instagram : 'eduardopizarr0',
});
const Carlos = new Student({
name : 'Carlos PO',
age : 21,
points : 210,
cursosAprobados : [cursoDefinitivo],
learningsPaths : [escuelaDesarrolloWeb],
instagram : 'carl05',
});
//Carpetas//
//Carpeta Teacher
export class Teacher {
constructor({nameProfesor, id, rol = undefined}){
this.nameProfesor = nameProfesor;
this.rol = rol;
this.id = id;
}
teachesCourse(newCourses){
this.rol.push(newCourses);
}
}
//Carpeta Course
export class Course{
constructor({name, classes, teacher}){
this.name = name;
this.classes = classes;
this.teacher = teacher;
}
}
//Carpeta LearningPath
export class LearningsPath {
constructor({ tittle, cuorses = [], }) {
this.tittle = tittle;
this.cuorse = cuorses;
}
cuorses(newCurso) {
this.cuorse.push(newCurso);
}
}
//Carpeta Student
export class Student {
constructor({
name,
age,
twitter = undefined,
instagram = undefined,
facebook = undefined,
cursosAprobados = [],
learningsPaths = [],
points,
}){
this.name = name;
this.age = age;
this.socialMedia = {
twitter,
instagram,
facebook,
}
this.cursosAprobados = cursosAprobados;
this.learningsPaths = learningsPaths;
this.points = points;
}
aprobarCursos(nuevoCurso){
this.cursosAprobados.push(nuevoCurso);
}
learningsPaths(ruote){
this.learningsPaths.push(ruote);
}
}
Así quedo mi solución, espero que este bien declarado en la parte de la sintaxis y conceptualmente hablando
class repeatCourse {
constructor({
name,
clases = classes,
}){
this.name= name;
this.clases = classes;
}
}
const asertiva = new repeatCourse ({
name: "Curso comunicación asertiva",
clases: classes,
})
------------------------------------------------------------------------
class classes{
constructor({
typeclass = [],
alumno,
profesor,
}){
this.alumno = alumno;
this.profesor = profesor;
this.typeclass = [];
}
}
---------------------------------------------------------
const firstClass = new classes ({
alumno: "Dario Paladines",
profesor: "Natalia Fainberg",
typeclass: [{ //declaro tipo array porque asi esta en el constructor
titleOfClass: "Que es la comunicación",
timeClass: 5.25,
coments: "Aqui se puede crear otro objeto con atributos que tendrian los comentarios"
}]
})
const secondClass = new classes ({
alumno: "Dario Paladines",
profesor: "Natalia Fainberg",
typeclass: [{
tittleOfClass: "Como comunicar correctamente",
timeClass: 6.45,
commets: "Crear un nuevo objeto comentarios"
}]
})
class Lession {
constructor({
name,
duraction,
}){
this.name = name;
this.duraction = duraction
}
}
const introduccion = new Lession({
name: 'introduccional poo',
duraction: '15:00'
})
const abtraccion = new Lession({
name: 'abtraccion poo',
duraction: '15:00'
})
class Courses {
constructor({
name,
teacher,
lession = [],
time
}){
this.name = name;
this.teacher = teacher;
this.lession = lession;
this.time = time;
}
}
const html = new Courses({
name: 'Curso de HTML y CSS',
teacher: 'Juan Dc',
lession: [
introduccion,
abtraccion
],
time : '4 hora'
})
const javascript = new Courses({
name: 'Curso de JS y POO',
teacher: 'Juan Dc',
lession: [
introduccion,
abtraccion
],
time : '4 hora'
})
class LearningPath {
constructor({
name,
courses = []
}) {
this.name = name,
this.courses = courses
}
addCourses (newCourse) {
this.courses.push(newCourse);
}
}
const desarrolloWeb = new LearningPath({
name: 'Desarrollo web',
courses: [
javascript,
html
]
})
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = []
}) {
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook
}
this.twitter = twitter;
this.instagram = instagram;
this.facebook = facebook;
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
addLearningPath (newPath) {
this.learningPaths.push(newPath);
}
}
const juan2 = new Student({
name: 'Juan dc',
email: 'mareo.sdgamil.com',
twitter: 'mateofd',
learningPaths: desarrolloWeb
})
Una ayuda para que crees tus clases con este codigo mas rapido , no esta bonito ni muy legible pero ayuda.
cosechas el codigo en el console.log
function classFormater(nombreClass ,arr=[]){
let construc ="";
let prmtrsInStrng = "";
let igualamiento = "";
for(let i=0; i<arr.length ; i++){
if(i<arr.length-1 ){
prmtrsInStrng+= `${arr[i]} ,`
}else{
prmtrsInStrng+= `${arr[i]}`;
}
igualamiento += `
this._${arr[i]} = ${arr[i]};
`
}//for
construc =`class ${nombreClass}{
constructor({ ${prmtrsInStrng} }){
${igualamiento}}
`
// console.log(construc);
getAndSet(arr , construc);
}
function getAndSet(arr , cabecera){
let getterSetter ='';
for(let i =0; i<arr.length ; i++){
let parametro = arr[i];
let newParametro = firstToUpper(parametro);
getterSetter += `get ${parametro}(){return this._${parametro};}
set ${parametro}(new${newParametro}){
this._${parametro} = new${newParametro}
}
`
}//fin for
console.log( cabecera + getterSetter + " }" );
}
function firstToUpper(texto){
let segunda = texto.slice(1);
let primera = texto.charAt(0);
let formatoDeseado = primera.toUpperCase() + segunda;
return formatoDeseado;
}
No me funen
<script> alert(typeof 1) </script>
mi reto
class teacher {
constructor ({
name,
position,
})
{
this.name = name;
this.position = position;
}
}
const diegoDD = new teacher({
name: "Diegro de granda",
position: "teacher",
});
const juandc = new teacher({
name: "Juan David Castro",
position: "teacher",
});
class classes {
constructor({
name,
teacher = [],
})
{
this.name = name;
this.teacher = teacher;
}
}
const basicoHTML = new classes ({
name: "anatomia de pagina web",
teacher: diegoDD,
});
//estudiantes
class studient {
constructor({
name,
email,
user_name,
twitter = undefined,
instagram = undefined,
facebook = undefined,
aprovedCourses = [],
learningPaths = []
}){
this.name = name;
this.email = email;
this.user_name = user_name;
this.social_media = {
twitter,
instagram,
facebook
}
this.aprovedCourses = [] = aprovedCourses,
this.learningPaths = [] = learningPaths,
this.points = 0
}
add_course_add_points(course){
this.aprovedCourses.push(course);
this.points += 150;
}
add_learningPaths(learningPath){
this.learningPaths.push(learningPath);
this.points += 50;
}
add_instagram(user){
this.social_media.instagram = user;
this.points += 50;
}
add_facebook(user){
this.social_media.facebook = user;
this.points += 50;
}
add_twitter(user){
this.social_media.twitter = user;
}
}
//escuelas
class learningPaths{
constructor({
name,
courses = []
}){
this.name = name;
this.courses = [] = courses;
}
add_course(course){
this.courses.push(course);
}
}
//cursos
class courses{
constructor({
name,
teacher,
sessions = []
}){
this.name = name;
this.teacher = teacher;
this.sessions = [] = sessions;
}
add_session(session){
this.sessions.push(session);
}
}
//clases
class lessions{
constructor({
name,
video,
resources = []
}){
this.name = name;
this.video = video;
this.resources = [] = resources;
}
}
Realmente, podría quedarme todo el día tratando de duplicar o clonar todos los objetos y clases que podría tener Platzi.
Como ya había visto en varios de los anteriores comentarios, lo ideal es crear 1 clase/prototipo por cada archivo JS y un main donde se crean todas las constantes/variables con la abstracción de cada clase/prototipo.
Sin embargo, les comparto mi aporte con la extensión de las lecciones o clases que puede contener un curso:
// clases
class Lesson {
constructor({ name, teacher, content, comments = [], resources = [] }) {
this.name = name;
this.teacher = teacher;
this.content = content;
this.comments = comments;
this.resources = resources;
}
}
const class1 = new Lesson({
name: "Hola Mundo",
teacher: "Diego De Granda",
content: "https://videos/platzi.com/class1",
});
const class2 = new Lesson({
name: "Introduccion",
teacher: "Juan David Castro",
content: "https://videos/platzi.com/class2",
});
const class3 = new Lesson({
name: "Hola Mundo",
teacher: "Freddy Vega",
content: "https://videos/platzi.com/class3",
});
const class4 = new Lesson({
name: "Hola Mundo",
teacher: "Nicolas Herrera",
content: "https://videos/platzi.com/class4",
});
// cursos
class Course {
constructor({ name, ranking, level, classes = [] }) {
this.name = name;
this.ranking = ranking;
this.level = level;
this.classes = classes;
}
}
const basicoJS = new Course({
name: "Curso Practico de JavaScript",
ranking: 4.6,
level: "medium",
classes: [class1, class2],
});
const practicoJS = new Course({
name: "Curso Basico de JavaScript",
ranking: 4.6,
level: "medium",
classes: [class3, class1],
});
const basicoPython = new Course({
name: "Curso Basico de Python",
ranking: 3.7,
level: "beginer",
classes: [class4],
});
const avanzadoPython = new Course({
name: "Curso Avanzado de Python",
ranking: 4.1,
level: "advanced",
classes: [class2, class4],
});
// learning paths
class LearningPath {
constructor({ name, courses = [] }) {
this.name = name;
this.courses = courses;
}
}
const escuelaJS = new LearningPath({
name: "Escuela de JavaScript",
courses: [basicoJS, practicoJS],
});
const escuelaDataScience = new LearningPath({
name: "Escuela de Data Science",
courses: [basicoPython, avanzadoPython],
});
// students
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
const juan = new Student({
name: "JuanDC",
username: "juandc",
email: "[email protected]",
twitter: "fjuandc",
learningPaths: [escuelaDataScience],
});
const miguel = new Student({
name: "Miguelito",
username: "miguelitoFeliz",
email: "[email protected]",
instagram: "miguelito_Feliz",
approvedCourses: [basicoJS, basicoPython],
learningPaths: [escuelaJS, escuelaDataScience],
});
Aqui mi codigo del reto 😁
class repeatCourse{
constructor({
name,duration
}){
this.name=name;
this.duration=duration;
}
}
const classPooFutbol=new repeatCourse({
name:"Clase de Poo con ejemplos de futbol",
duration:"2:30",
})
class Course{
constructor({
name, classes=[]
}){
this.name=name;
this.classes=classes;
}
}
const cursoProgBasic=new Course({
name: "Curso Gratis de Programacion Basica",
classes:classPooFutbol
});
class Course {
constructor({
name,
classes = [],
test,
}){
this.name = name;
this.classes = classes;
this.test= test;
}
}
//clases
class clases{
constructor({
name,
}){
this.name = name;
}
}
//tests
class tests{
constructor({
name,
score = 0,
passed = false,
}){
this.name = name;
this.score = score;
this.passed = passed;
}
}
//prototips test
const testProgBasica = new tests({
name: "Examen Curso Gratis de Programacion Basica",
});
const testCursoDefinitivoHTML = new tests({
name: "Examen Curso Definitivo HTML y CSS",
});
const testCursoPracticoHTML = new tests({
name: "Examen Curso Practico HTML y CSS",
});
const testDataBusiness = new tests({
name: "Examen Curso Data Business",
});
const testDataViz = new tests({
name: "Examen Curso Data Viz",
});
const testUnity = new tests({
name: "Examen Curso Unity",
});
const testUnreal = new tests({
name: "Examen Unreal",
});
//cursos prototipos
const cursoProgBasica = new Course({
name: "Curso Gratis de Programacion Basica",
test: testProgBasica,
});
const cursoDefinitivoHTML = new Course({
name: "Curso Definitivo HTML Y CSS",
test: testCursoDefinitivoHTML,
});
const cursoPracticoHTML = new Course({
name: "Curso Practico HTML Y CSS",
test: testCursoPracticoHTML,
});
const cursoDataBusiness = new Course({
name: "Curse de Data Business",
test: testDataBusiness,
});
const cursoDataViz = new Course({
name: "Curso de Data Viz",
test: testDataViz,
});
const cursoUnity = new Course({
name: "Curso de Unity",
test: testUnity,
});
const cursoUnreal = new Course({
name: "Curso de Unreal",
test: testUnreal,
});
//Learning path
class LearningPath{
constructor({
name,
courses = [],
cursosAgregados = [],
cursosEnProgreso = [],
cursosAprobados = [],
}){
this.name = name;
this.courses = courses;
this.cursosAgregados = [];
this.cursosAprobados = [];
this.cursosEnProgreso = [];
}
}
//Metodos Learning path
LearningPath.prototype.agregarCurso = function(curso){
this.cursosAgregados.push(curso);
}
LearningPath.prototype.agregarCursoEnProgreso = function(curso){
this.cursosEnProgreso.push(curso);
}
LearningPath.prototype.aprobarCurso = function(curso){
this.cursosEnProgreso.splice(cursosEnProgreso.indexOf(curso), 1);
this.cursosAprobados.push(curso);
}
//prototipos learningpath
const escuelaWeb = new LearningPath({
name: "Escuela de desarrollo web",
courses:[
cursoProgBasica,
cursoDefinitivoHTML,
cursoPracticoHTML,
],
});
const escuelaData = new LearningPath({
name: "Escuela de data science",
courses:[
cursoProgBasica,
cursoDataBusiness,
cursoDataViz,
],
});
const escuelaVideojuegos = new LearningPath({
name: "Escuela de videojuegos",
courses:[
cursoProgBasica,
cursoUnity,
cursoUnreal,
],
});
Acá dejo mi solución
<// Clase estudiante
class Student{
constructor({
name,
email,
usarname,
twitter = undefined,
instagram = undefined,
facebook = undefined,
points = 0,
approvedCourses = [],
learnigPaths = [],
})
{
this.name = name;
this.email = email;
this.usarname = usarname;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.points = points;
this.approvedCourses = approvedCourses;
this.learnigPaths = learnigPaths;
}
}
// Clase Rutas
class learnigPaths {
constructor({
path,
courses = []
})
{
this.path = path;
this.courses = courses;
}
}
// Clase Cursos
class Course {
constructor({
name,
classes = []
})
{
this.name = name;
this.classes = classes;
}
}
// Clase para las clases
class Clases{
constructor({
nameClass = [],
})
{
this.nameClass = nameClass;
}
}
// Instancia de clases
let claseInicial = new Clases({
nameClass: 'Clase de inicio'
})
let claseIntermedio = new Clases({
nameClass: 'Clase de intermedio'
})
let claseFinal = new Clases({
nameClass: 'Clase del fin'
})
// Instancia de cursos
let cursoFront = new Course({
name: 'Curso Practico Frontend',
classes: [claseInicial, claseFinal]
})
let cursoBack = new Course({
name: 'Curso Inicial API REST',
classes: [claseInicial, claseIntermedio, claseFinal],
})
let cursoPython = new Course({
name: 'Curso Basico Python',
classes: [claseFinal]
})
let cursoPowerbi = new Course({
name: 'Curso Basico Power BI',
classes: [claseInicial, claseFinal]
})
// Instancia de Rutas
let desarrolloWeb = new learnigPaths({
path: 'Escuela de Desarrollo Web',
courses: [cursoFront, cursoBack],
})
let dataScience = new learnigPaths({
path: 'Escuela de Data Science',
courses: [cursoFront, cursoPowerbi, cursoPython],
})
// INSTANCIA PERSONAS
let Diego = new Student({
name: 'Diego Diaz',
email: '[email protected]',
usarname: 'ddiazvi',
socialMedia: 'ElDiegotes',
points: 2279,
learnigPaths: desarrolloWeb,
});
let Ronny = new Student({
name: 'Ronny Diaz',
email: '[email protected]',
usarname: 'RonnyDi',
twitter: 'Ronnysito',
points: 3479,
learnigPaths: [dataScience, desarrolloWeb],
approvedCourses: [cursoPython, cursoFront, cursoBack]
});>
// clase curso
class Course{
constructor({
name,
classes = [],
}){
this.name = name;
this.classes = classes;
}
}
//instancia de curso
const cursoProgBasica = new Course(
{
name : "Curso gratis de programacion basica"
});
const cursoVGS = new Course(
{
name : "Curso Introduccion a VGS"
});
const cursoVGS2 = new Course(
{
name : "Curso practico VGS"
});
const cursoDefinitivoHTML = new Course(
{
name : "Curso definitivo de HTML y CSS"
});
const cursoPracticoHTML = new Course({
name : "Curso practico de HTML y CSS",
});
// clase ruta de aprendisaje
class LearningPaths{
constructor({
name,
courses = []
}){
this.name = name;
this.courses = courses;
}
}
// instancias de rutas de aprendisaje
const escuelaWeb = new LearningPaths({
name: "Escuela de desarrollo web",
courses : [
cursoProgBasica,
cursoDefinitivoHTML
]
});
const escuelaData = new LearningPaths({
name: "Escuela de DataScience",
courses: [
cursoPracticoHTML,
cursoDefinitivoHTML,
]
});
const escuelaVgs = new LearningPaths({
name: "Escuela de Vgs",
courses: [
cursoVGS,
cursoVGS2
]
});
// clase estudiante
class Student{
constructor({
name,
username,
email,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = []
}){
this.name = name;
this.username = username;
this.email = email;
this.socailMedia={
twitter,
instagram,
facebook
};
this.approedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
// instancias de la clase estudiante
const victor = new Student({
name : "Victor Hugo Cruz",
username : "hugutiobody",
email : "[email protected]",
learningPaths : [
escuelaWeb,
escuelaData
]
});
const vanesa = new Student({
name : "Vanesa Pozo",
username : "vanesita024",
email : "[email protected]",
learningPaths : [
escuelaVgs,
escuelaData
]
});
const emanuel = new Student({
name : "Emanuel Cruz Pozo",
username : "emita",
email : "[email protected]",
twitter : "emitas_pro"
});
Dejo aqui mi aporte de como veo la construccion de las clases de platzi.
// Abstraccion
// Es armar las clases a partir del comportamiento real de las cosas para su uso en programacion
class Classes{
constructor({
name,
id,
teacher,
videoLink,
comments = [],
contribution = [],
questions = [],
resources= [],
}) {
this.name = name;
this.id = id;
this.teacher = teacher;
this.videoLink = videoLink;
this.comments = comments;
this.contribution = contribution;
this.questions = questions;
this.resources = resources;
}
}
const abstraccionEnJavascript = new Classes({
name:"Abstraccion en Javascript",
teacher:"Juan David Castro",
id:"few646w26g4wr6fwwfer",
comments:["Ya nadie usa Facebook",],
videoLink:"https://platzi.com/videos/chuchuwa_chuchuwa",
})
class Course {
constructor({
name,
classes = [],
comments = []
}) {
this.name = name;
this.clases = classes;
comments = comments
}
}
const cursoProgBasica = new Course({
name:"Curso Gratis de programacion Basica",
})
const cursoDefinitivoHTML = new Course({
name:"Curso definitivo de HTML",
})
const cursoPracticoHTML = new Course({
name:"Curso practico de HTML",
})
const cursoPooJavascript = new Course({
name:"Curso de programacion oientado a objetos con javascript",
classes: ["Que es abstraccion", abstraccionEnJavascript],
})
class LearningPath {
constructor({
name,
courses = [],
}) {
this.name = name;
this.courses = courses;
}
}
const escuelaJavascript = new LearningPath({
name:"Escuela de Javascript",
courses:[
"Javascript Basico",
cursoPooJavascript,
]
})
const escuelaWeb = new LearningPath({
name: "Escuela de Desarrollo Web",
courses: [
cursoProgBasica,
cursoDefinitivoHTML,
cursoPracticoHTML,
],
});
const escuelaData = new LearningPath({
name: "Escuela de Data Science",
courses: [
cursoProgBasica,
"Curso DataBusiness",
"Curso Dataviz",
],
});
const escuelaVgs = new LearningPath({
name: "Escuela de Vidweojuegos",
courses: [
cursoProgBasica,
"Curso de Unity",
"Curso de Unreal",
],
})
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
const juan2 = new Student({
name: "JuanDC",
username: "juandc",
email: "[email protected]",
twitter: "fjuandc",
learningPaths: [
escuelaWeb,
escuelaVgs,
escuelaJavascript,
],
});
const miguelito2 = new Student({
name: "Miguelito",
username: "migelitofeliz",
email: "[email protected]",
instagram: "migelito_feliz",
learningPaths: [
escuelaWeb,
escuelaData,
],
});
console.log(juan2);
console.log(juan2.learningPaths[2].courses[1]); //Llamada a los cursos de la primera carrera de juan2
class ClassClasses {
constructor({
name,
position,
}){
this.name = name;
this.position =position;
};
};
const pooyFotball = new ClassClasses({
name:"Programación orientada a Objetos y Fotaball",
});
const introdVdj = new ClassClasses({
name:"Introducción a los Videojuegos",
});
const queEsDatos = new ClassClasses({
name:"Que es Data Science",
});
const paguinasWeb = new ClassClasses({
name: "Qué son las Páginas Web",
});
class course {
constructor({
name,
classes = [],
}){
this.name = name;
this.classes = classes;
};
};
const cursoProgBasica = new course({
name: "Curso Gratis de Programación Básica",
classes: [
queEsDatos,
pooyFotball,
paguinasWeb,
],
});
const cursoDefinitivoHTML = new course({
name: "Curso Definitivo de HTML y CSS",
classes: [
paguinasWeb,
],
});
const cursoPracticoHTML = new course({
name: "Curso Práctico de HTML y CSS",
classes: [
paguinasWeb,
],
});
const cursoDataBusiness = new course({
name: "Curso de Datos ne negocios",
classes: [
queEsDatos,
],
});
const cursoDataViz = new course({
name: "Curso Data Viz",
classes: [
queEsDatos,
],
});
const cursoUnity = new course({
name: "Curso Básico de Unity",
classes: [
introdVdj,
],
});
const cursoUnreal = new course({
name: "Curso Básico de Unreal",
classes: [
introdVdj,
],
});
class LearningPaths {
constructor({
name,
courses = [],
difficulty,
courseNumbers,
percentage = undefined,
}) {
this.name = name;
this.courses = courses;
this.difficulty = difficulty;
this.courseNumbers = courseNumbers;
this.percentage = percentage;
}
addCourse(newCourse){
this.courses.push(newCourse);
};
};
const escuelaWeb = new LearningPaths({
name:"Escuela desarrollo Web",
courses: [
cursoProgBasica,
cursoDefinitivoHTML,
cursoPracticoHTML,
],
difficulty: "Básico",
courseNumbers: 106,
});
const escuelaData = new LearningPaths({
name:"Escuela desarrollo Web",
courses: [
cursoProgBasica,
cursoDataBusiness,
cursoDataViz,
],
difficulty: "Básico",
courseNumbers: 106,
});
const escuelaVideJuegos = new LearningPaths({
name:"Escuela desarrollo Web",
courses: [
cursoProgBasica,
cursoUnity,
cursoUnreal,
],
difficulty: "Básico",
courseNumbers: 106,
});
Aquí mi aporte 😃
class Teacher {
constructor ({
name,
username,
rankPoints,
Answers,
Projects,
coursesSuggested,
}) {
this.name = name;
this.username = username;
this.rankPoints = rankPoints;
this.Answers = Answers;
this.Projects = Projects;
this.coursesSuggested = coursesSuggested;
}
};
const juanDC = new Teacher ({
name: "Juan DC",
username: "Juanito",
rankPoints: "1001",
Answers: 849,
Projects: escuelaWeb,
coursesSuggested: escuelaData,
});
Si siguen el codigo de las clases, con escuelaWeb y escuelaData retornan los arrays asociadosa cada uno y los respectivos valores (cursos)
Reto
class classes {
constructor ({
nameClass,
keyWordsClass = [],
coments,
}){
this.nameClass = nameClass;
this.keyWordsClass = keyWordsClass;
this.coments = coments;
}
}
Mi Propuesta
Hola, hice el ejercicio de abstracción para los blog post, contenido de estos posts y retos:
class BlogPost {
constructor({ usuario, contenido = [] }) {
this.usuario = usuario;
this.contenido = contenido;
}
agregarContenido(nuevoContenido) {
this.contenido.push(nuevoContenido);
}
}
class ContenidoPost {
constructor({ texto, fechaCreacion }) {
this.texto = texto;
this.fechaCreacion = fechaCreacion;
}
}
const blog = new BlogPost({ usuario: "Tatiana" });
const contenido1 = new ContenidoPost({
texto: "Texto1",
fechaCreacion: "07/10/2021",
});
blog.agregarContenido(contenido1);
class Retos {
constructor({ nombreReto, explicacionReto, fechaCreacion, autor }) {
this.nombreReto = nombreReto;
(this.explicacionReto = explicacionReto),
(this.fechaCreacion = fechaCreacion),
(this.autor = autor);
}
}
Las respuestas a los comentarios son también comentarios
class approvedCourses {
constructor({
name,
courses = [],
calificacion,
}){
this.name = name;
this.courses = courses;
this.calificacion = calificacion;
}
}
class Clases {
constructor({
name,
recursos = [],
comentarios = [],
}){
this.name = name;
this.recursos = recursos;
this.comentarios = comentarios;
}
}
class Comentario {
constructor({
student,
fecha,
texto,
tipo, //pregunta o aporte
comentRespuesta = [], //Comentarios respuestas
}){
this.student = student;
this.fecha = fecha;
this.texto = texto;
this.tipo = tipo;
this.comentRespuesta = comentRespuesta;
}
}
Una abstracción puede definirse como:
las características especificas de un objeto, aquellas que lo distinguen de los demás tipos de objetos y que logran definir límites conceptuales respecto a quien está haciendo dicha abstracción del objeto.
Se que en teacher pude haber creado otra clase o prototipo, pero creo que por lo pronto esta bien asi
class Classes {
constructor({
name,
teacher,
comments=[],
}){
this.name = name;
this.teacher = teacher;
this.comments = comments;
}
}
const classsIntroduccionProgramacion = new Classes({
name: "Introduccion a la programacion",
teacher: "freddy Vega"
});
const classQueEsFlexbox = new Classes({
name: "Que es flexbox?",
teacher: "Estefany Aguilar"
});
const classInteresCompuesto = new Classes({
name: "Que es el interes compuesto",
teacher: "Liliana Zamacona"
});
class Course {
constructor({
name,
classes = [],
}){
this.name = name;
this.classes = classes;
}
}
const cursoProgramacionBasica = new Course({
name: "Curso gratis de programacion basica",
classes:[
classsIntroduccionProgramacion
]
});
const cursoDefinitivoHtmlCss = new Course({
name: "Curso Definitivo De HTML y CSS",
classes:[
classsIntroduccionProgramacion,
classQueEsFlexbox
]
});
const cursoPracticoHtmlCss = new Course({
name: "Curso Practico De HTML y CSS",
classes:[
classsIntroduccionProgramacion,
classQueEsFlexbox
]
});
const cursoFinanzasPersonales = new Course({
name: "Curso Finazas Personales",
classes:[
classInteresCompuesto
]
});
const cursoBlockChain = new Course({
name: "Curso de Block Chain",
classes:[
classInteresCompuesto
]
});
class LearningPath{
constructor({
schoolName,
coursesNames = [],
amountOfCourses,
}){
this.schoolName = schoolName;
this.coursesNames = coursesNames;
this.amountOfCourses = amountOfCourses;
}
}
const escuelaWeb = new LearningPath({
schoolName = "Escuela de Desarrollo Web",
coursesNames:[
cursoProgramacionBasica,
cursoDefinitivoHtmlCss,
cursoPracticoHtmlCss,
],
amountOfCourses = 20,
})
const escuelaFinanzas = new LearningPath({
schoolName = "Escuela de Finanzas",
coursesNames:[
cursoFinanzasPersonales,
cursoBlockChain,
],
amountOfCourses = 15,
})
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths=[],
}){
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = [] = approvedCourses;
this.learningPaths=[] = learningPaths;
}
}
const Juan2 = new Student({
name : "JuanDC",
username: "Juan",
email: "[email protected]",
twitter:"fjuandc",
learningPaths:[
escuelaWeb,
]
});
const miguelito2 = new Student({
name : "Miguel",
username: "miguelitoFeliz",
email: "[email protected]",
instagram:"miguelito_feliz",
learningPaths:[
escuelaFinanzas,
]
});
Lo hice sencillito 😌
<code>
class Clase {
constructor({ name }) {
this.name = name;
}
}
const Uno = new Clase({
name: "Clase número 1",
});
const Dos = new Clase({
name: "Clase número 2",
});
const Tres = new Clase({
name: "Clase número 3",
});
class Course {
constructor({ name, clases = [ ] }) {
this.name = name;
this.clases = clases;
}
}
const cursoProgBasica = new Course({
name: "Curso Gratis de Programación Básica",
clases: [Uno, Dos],
});
const cursoDefinitivoHTML = new Course({
name: "Curso Definitivo de HTML y CSS",
clases: [Uno],
});
const cursoPracticoHTML = new Course({
name: "Curso Practico de HTML y CSS",
clases: [Uno, Dos, Tres],
});
Para saber que clases son muy útiles los diagramas de clases UML, aquí les dejo un enlace con información al respecto.
La abstracción no solamente sirve para abstraer en la inyección de dependencia sino también para definir la herencia entre clases!
De mi parte cree los Prototipos de Commet, Blogspost, Lesson y Teacher. Ademas Cree el metodo para crear comentarios en las Lesson, Courses y en los BlogsPost.
//Prototipe de Comment
class Comment {
constructor({
id,
username,
info,
}) {
this.id = id;
this. username = username;
this.info = info;
}
}
//Prototipe de BlogPost
class BlogPost {
constructor({
id,
title,
info,
comments = [],
}) {
this.id = id;
this.title = title;
this.info = info;
this.comments = comments;
}
addComment(id, username, info) {
new Comment ({
id: id,
username: username,
info: info,
})
this.comments.push(Comment);
}
};
const BlogDesarrollo = new BlogPost({
id: 0,
title: 'Como iniciar en el Desarrollo Web',
info: 'lorem ipsum',
})
//Prototipe de Teacher
class Teacher {
constructor({
name,
area,
twitter = undefined,
instagram = undefined,
}) {
this.name = name;
this.area = area;
this.socialMedia = {
twitter,
instagram,
}
}
};
const FreddyVega = new Teacher({
name: 'Freddy Vega',
area: 'Desarrollo Web/ CEO Platzi',
});
const JuanDC = new Teacher({
name: 'Juan David Castro',
area: 'Data Sciece / Desarrollo Web',
});
const DiegoDegranda = new Teacher({
name: 'Diego De Granda',
area: 'Desarrollo Web',
});
//Prototipe de Lesson
class Lesson {
constructor({
id,
title,
teacher,
comments = [],
}) {
this.id = id;
this.title = title;
this.comments = comments;
this.teacher = teacher;
}
addComment(id, username, info) {
new Comment ({
id: id,
username: username,
info: info,
})
this.comments.push(Comment);
}
}
const lesson1PB = new Lesson({
id: 0,
title: 'Clase 1 del curso de Programacion Basica',
teacher: FreddyVega,
});
const lesson1DH = new Lesson({
id: 0,
title: 'Clase 1 del curso definitivo de HTML',
teacher: DiegoDegranda,
});
//Prototipe de Courses
class Course {
constructor({
name,
logo = undefined,
info,
comments = [],
clases = [],
}) {
this.name = name;
this.logo = logo;
this.info = info;
this.comments = comments;
this.clases = clases;
}
addComment(id, username, info) {
new Comment ({
id: id,
username: username,
info: info,
})
this.comments.push(Comment);
}
};
const CursoProgBasica = new Course({
name: 'Curso de Programacion Basica',
info: 'Curso de introduccion a la programacion.',
clases: [lesson1PB],
});
const CursoDefHTML = new Course({
name: 'Curso definitivo de HTML',
info: 'Curso completo de HTML',
clases: [lesson1DH],
});
const CursoIntroWeb = new Course({
name: 'Curso de introduccion a la web',
info: 'Curso introductivo',
clases: [lesson1DH],
});
const CursoPractHTML = new Course({
name: 'Curso Practico de HTML',
info: 'Curso de Practica de HTML',
clases: [lesson1DH],
});
const CursoDataBS = new Course({
name: 'Curso de Data Bussines',
info: 'Curso completo de Data Busines',
clases: [lesson1DH],
});
const CursoDeTB = new Course({
name: 'Curso de Tableau',
info: 'Curso de Tableau',
clases: [lesson1DH],
});
//Prototipe de Rutas
class LearningSchool {
constructor({
name,
logo = undefined,
info,
courses = [],
}) {
this.name = name;
this.logo = logo;
this.info = info;
this.courses = courses;
}
}
const DesarrolloWeb = new LearningSchool({
name: 'Escuela de Desarrollo Web',
courses: [
CursoIntroWeb,
CursoPractHTML,
CursoDefHTML,
],
info: 'Aprende desarrollo web Full Stack desde cero con HTML, CSS y JavaScript. Domina herramientas como React, Vue, Angular y backend development con Node.js.',
});
const DataScience = new LearningSchool({
name: 'Escuela de Data Science',
courses: [
CursoDataBS,
CursoDeTB,
],
info: 'Domina las herramientas y técnicas para el procesamiento de Big Data y Ciencia de Datos.',
});
//Prototipe de Estudiantes
class Student {
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}){
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
instagram,
facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
};
addLearningPath(nuevaEscuela) {
this.learningPaths.push(nuevaEscuela);
};
addNewCourse(nuevoCurso) {
this.approvedCourses.push(nuevoCurso);
}
};
const Carlos = new Student({
name: 'Carlos',
email: '[email protected]',
username: 'carlos31',
twitter: 'carlos324'
});
const Reynaldo = new Student({
name: 'Reynaldo',
email: '[email protected]',
username: 'Rmoreno31',
twitter: 'Rmoreno3'
});
Hacer una app se va haciendo cada vez, mas y mas grande XD
main.js
//Importando Modulos
import Teacher from "./teachers.js"
import Courses from "./couse.js"
import Lessons from "./lessons.js"
import LearningPaths from "./paths.js"
import Student from "./student.js"
//Profesores
const diegoGranda = new Teacher({
id: 1,
name: "Diego de Granda",
})
const orlandoNaipes = new Teacher({
id: 2,
name: "Orlando Naipes",
})
//Clases
const asincC1 = new Lessons({
id:100,
teacher: orlandoNaipes,
title: "¿Qué es el asincronismo?"
})
const asincC2 = new Lessons({
id:99,
teacher: orlandoNaipes,
title: "¿Qué es async/await?"
})
//Cursos
const htmlDef = new Courses({
id:1,
name: "Curso definitivo HTML y CSS",
teacher: diegoGranda,
})
const htmlPractico = new Courses({
id:2,
name: "Curso practico HTML y CSS",
teacher: diegoGranda
})
const asinc = new Courses({
id:3,
name: "Curso de Asincronismo en JS",
teacher: orlandoNaipes,
lessons: [
asincC1,
asincC2
]
})
const ecma = new Courses({
id:4,
name: "Curso de ECMAScripit6+",
teacher: orlandoNaipes
})
//Rutas
const desarrolloWeb = new LearningPaths({
id: 1,
name: "Desarrollo Web",
courses: [
htmlDef,
htmlPractico,
asinc,
ecma
]
})
const escuelaJS = new LearningPaths({
id: 2,
name: "Escuela de JavaScript",
courses: [
asinc,
ecma
]
})
//Estudiantes
let juan2 = new Student({
name: "JuanDC",
username: "juandc",
email: "[email protected]",
twitter: "juansitowd",
learningPaths: desarrolloWeb
})
let miguelito2 = new Student({
name: "Miguel",
username: "miguelito",
email: "[email protected]",
instagram: "miguelito",
learningPaths: escuelaJS
})
console.log(juan2)
console.log(miguelito2)
couse.js
export default class Courses{
constructor({
id,
name,
teacher,
lessons = [],
comments = []
}) {
this.id= id
this.name = name
this.teacher = teacher
this.lessons = lessons
this.comments = comments
}
}
lessons.js
export default class Lessons{
constructor({
id,
title,
teacher,
}){
this.id = id
this.title = title
this.teacher = teacher
}
}
teachers.js
export default class Teacher{
constructor({
id,
name,
courses = [],
comments = []
}) {
this.id = id
this.name = name
this.courses = courses
this.comments = comments
}
}
paths.js
export default class LearningPaths{
constructor({
id,
name,
courses = []
}) {
this.id = id
this.name = name
this.courses = courses
}
addCourse(course){
this.courses.push(course)
}
removeCourse(courseOld){
const courseIndex = this.courses.findIndex( course => {
course.id === courseOld.id
})
this.courses.splice(courseIndex, 1)
}
}
student.js
export default class Student{
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
}) {
this.name = name
this.email = email
this.socialMedia = {
twitter,
instagram,
facebook
}
this.username = username
this.approvedCourses = approvedCourses
this.learningPaths = learningPaths
}
}
«me costó escribirlo, pero ahora solo voy a tener que escribirlo una vez» creo que es el anthem de la programación.
Desde que empecé a aprender siempre me ha recordado a esa máquina complicadísima que fabrica un inventor para hacerse el desayuno. Habrá tardado meses en diseñarla, pero no volverá a levantarse antes por preparar tostadas.
Por el orden de las rutas deberían utilizar los modulos de ecamscript6, pero de igual manera el curso es muy bueno porque e aprendido mucho de POO
Ya viendo el curso por segunda vez se mejora el entendimiento. Toca practicar y practicar
Siento que el ejemplo es muy complejo, deberia iniciar con algo mas suave un ejercicio que se entienda un poco mas. Con este profesor no he tenido suerte.
Esta es mi propuesta de solución, está larga por lo que no habra gatito anti spoiler:
```js
class AdvancedEmotion {
constructor({
name,
human,
jobLocaton,
energyType,
age = undefined,
responsabilities = {},
friends = {},
learningPaths = {},
}) {
this.name = name;
this.human = human;
this.jobLocaton = jobLocaton;
this.energyType = energyType;
this.age = age;
this.responsabilities = responsabilities;
this.friends = friends;
this.learningPaths = learningPaths;
}
}
// Ejercicio para crear learning paths
class learningPath {
constructor({
name = '',
escuela = '',
subpaths = {},
}) {
this.name = name;
this.name = escuela;
this.subpaths = subpaths;
}
}
class moduleCreator {
constructor({
module = {},
}) {
this.module = module;
}
}
class coursesCreator {
constructor({
courses = {},
}) {
this.courses = courses;
}
}
const FrontDeveloper = new coursesCreator ({
courses : {
'Curso de Frontend Developer' : [
'Inicia tu camino como Frontend Developer',
'¿Qué es HTML y CSS? ¿Para qué sirven?',
'Motores de render: de archivos a píxeles',
],
'Curso Practico de Frontend Developer' : [
'¿Ya tomaste el Curso de Frontend Developer?',
'Buenas prácticas de CSS: reflexión y advertencias',
'Identifica las pantallas de tu proyecto',
],
'Curso Practico de JS' : [
'¿Ya tomaste el Curso Básico de JavaScript?',
'Test de JS',
'Variables',
]
}
})
const FundamentosDesarrollo = new moduleCreator ({
module : {
'Fundamentos de desarrollo web' : [
FrontDeveloper
]
}
})
const FrontendProfundoReact = new learningPath({
name: 'Frontend a profundidad con React.js',
escuela: 'Desarrollo Web',
subpaths: {
FundamentosDesarrollo,
'React.js a profundidad' : [
'Curso de React.js: Patrones de Render y Composicion',
'Curso de React.js: Manejo Profesional del Estado',
'Curso de React.js: Navegacion con React Router',
'Curso de Webpack',
'Curso de React.js con Vite.js y TailwindCSS',
'Curso Profesional de React.js y Redux',
],
'Frameworks y Desarrollo movil con React.js' : [
'Curso de Next.js: Sitios Estaticos y Jamstack',
'Curso de Next.js: Optimizacion y Deploy a Produccion',
'Curso de Next.js: Internacionalizacion de Aplicaciones Web',
]
}
});
const FullStackJS = new learningPath({
name: 'Full Stack Developer con JavaScript',
escuela: 'Desarrollo Web',
subpaths: {
FundamentosDesarrollo,
'Configura tu entorno de trabajo' : [
'Curso de Configuracion de Entorno de Desarrollo',
'Curso de Introduccion a la Terminal y Lindea de Comandos',
'Curso Profesional de Git y Github',
],
'Desarrolla el frontend de tu aplicación' : [
'Curso de Frontend Developer',
'Curso Practico de Frontend Developer',
'Curso de JS desde Cero',
],
'Crea el Backend, intégralo a bases de datos y despliega en producción' : [
'Curso de Introduccion al Desarrollo Backend',
'Curso de Fundamentos de Bases de Datos',
'Curso de Fundamentos de Node.js',
]
}
})
const LibreriasDependenciasNPMJS = new learningPath({
name: 'Librerías y Dependencias de JavaScript con NPM',
escuela: 'Desarrollo Web',
subpaths: {
FundamentosDesarrollo,
'Primeros pasos con Dependencias y Empaquetadores en JavaScript' : [
'Curso de NPM: Gestion de Paquetes y Dependencias en JS',
'Curso de Frameworks y Librerias de JS',
'Curso de Introduccion a Empaquetadores Web',
],
'Proyectos Prácticos Integrando Herramientas Profesionales' : [
'Curso de Manipulacion del DOM',
'Curso Basico de Web Components con JS',
'Curso de Creacion de Paginas Web con Astro',
],
'Flujo de Trabajo Profesional con TypeScript y Pruebas Automatizadas' : [
'Curso de Introduccion al Testing con JS',
'Curso de Fundamentos de TS',
'Curso de TS: Tipos Avanzados y Funciones',
]
}
})
const PythonDesdeCero = new learningPath({
name: 'Python: De Cero a Experto',
escuela: 'Desarrollo Web',
subpaths: {
FundamentosDesarrollo,
'Primeros pasos con Python' : [
'Curso de Fundamentos de Python',
'Curso de Python: Comprehensions, Funciones y Manejo de Errores',
'Curso de Python: PIP y Entornos Virtuales',
],
'Frameworks de python para backend' : [
'Curso de FastAPI',
],
'Cómputo con Python' : [
'Curso de Complejidad Algoritmica con Python',
'Curso de Estructuras de Datos Lineales con Python',
'Curso de Estadistica Computacional con Pyton',
]
}
})
const MentaleroBobby = new AdvancedEmotion({
name: 'Mentalero Bobby',
human: 'Riley',
jobLocaton: 'Memoria a Largo Plazo',
energyType: 'Masculina',
responsabilities: {
cuartel: 'Enviar recuerdos',
human: 'Gestionar la memoria',
otras: undefined,
}, friends: [
'Mentalera Paula',
],
learningPaths: [
FrontendProfundoReact,
FullStackJS,
]
});
const MentaleroPaula = new AdvancedEmotion({
name: 'Mentalero Paula',
human: 'Riley',
jobLocaton: 'Memoria a Largo Plazo',
energyType: 'Femenina',
responsabilities: {
cuartel: 'Enviar recuerdos',
human: 'Gestionar la memoria',
otras: undefined,
}, friends: [
'Mentalero Bobby',
],
learningPaths: [
LibreriasDependenciasNPMJS,
PythonDesdeCero,
]
});
```
Ejercicios resuelto, es un pequeño esfuerzo que hice.
class Course {
constructor({
name,
classes = [],
}) {
this.name = name;
this.classes = classes;
}
};
class Class {
constructor({
name,
time,
comments = []
}) {
this.name = name;
this.time = time;
this.comments = comments;
}
};
class Comments {
constructor({
name,
numero,
time,
likes,
texto,
}) {
this.name = name;
this.numero = numero;
this.time = time;
this.likes = likes;
this.texto = texto;
}
};
const clasesObjetos = new Class ({
name: "Clase Definicion de clases y Objetos",
time: "3:47",
comments: [
primerComent,
segunComent,
]
})
const display = new Class ({
name: "Tipos de display",
time: "6:48",
comments: [
tercerComent,
]
})
const animator = new Class ({
name: "Generando Animaciones",
time: "12:16",
comments: [
primerComent,
segunComent,
tercerComent,
]
})
const primerComent = new Comments ({
name: "Alfonso Morales",
numero: "Comentario numero 1",
time: "Hace 1 año",
likes: "32 likes",
texto: "Muy buena la clase, ya tome mis apuntes",
})
const segunComent = new Comments ({
name: "Melissa Zevallos",
numero: "Comentario numero 2",
time: "Hace 7 meses",
likes: "12 likes",
texto: "Estuvo dificil, pero lo intentare",
})
const tercerComent = new Comments ({
name: "Brock Tachibana",
numero: "Comentario numero 3",
time: "Hace 2 meses",
likes: "7 likes",
texto: "Siempre se aprende algo nuevo cada vez"
})
Mi reto del código: cambie la tematica que no sea cursos y clases.
```js
class Marcas {
constructor ({
id,
modelo,
año,
}) {
this.id = id;
this.modelo = modelo;
this.año = año;
}
}
const AlfaRomeo = new Marcas ({
id: "Alfa Romeo",
modelo: "Stelvio - 4X4, SUV o pickup",
año: 2020,
})
const Toyota = new Marcas ({
id: "Toyota",
modelo: "Corolla Cross - 4X4, SUV o pickup",
año: 2018,
})
const BMW = new Marcas ({
id: "BMW",
modelo: "i4 - Berlina mediana o grande",
año: 2016,
})
class Producto {
constructor ({
nombre,
patente,
precio,
cantidadStock,
}) {
this.nombre = nombre;
this.patente = patente;
this.precio = precio;
this.cantidadStock = cantidadStock;
}
}
const Auto = new Producto ({
nombre: AlfaRomeo,
patente: "32A3FE",
precio: 265000,
cantidadStock: 30,
})
const Camioneta = new Producto ({
nombre: Toyota,
patente: "ARG02W",
precio: 310000,
cantidadStock: 10,
})
const Moto = new Producto ({
nombre: BMW,
patente: "64AS8A",
precio: 350000,
cantidadStock: 50,
})
```*class* Marcas { *constructor* ({ *id*, *modelo*, *año*, }) { *this*.id = id; *this*.modelo = modelo; *this*.año = año; }}
*const* AlfaRomeo = new Marcas ({ id: "Alfa Romeo", modelo: "Stelvio - 4X4, SUV o pickup", año: 2020,})
*const* Toyota = new Marcas ({ id: "Toyota", modelo: "Corolla Cross - 4X4, SUV o pickup", año: 2018,})
*const* BMW = new Marcas ({ id: "BMW", modelo: "i4 - Berlina mediana o grande", año: 2016,})
*class* Producto { *constructor* ({ *nombre*, *patente*, *precio*, *cantidadStock*, }) { *this*.nombre = nombre; *this*.patente = patente; *this*.precio = precio; *this*.cantidadStock = cantidadStock; }}
*const* Auto = new Producto ({ nombre: AlfaRomeo, patente: "32A3FE", precio: 265000, cantidadStock: 30,})
*const* Camioneta = new Producto ({ nombre: Toyota, patente: "ARG02W", precio: 310000, cantidadStock: 10,})
*const* Moto = new Producto ({ nombre: BMW, patente: "64AS8A", precio: 350000, cantidadStock: 50,})
```js
class Classes { // prototipo de clases que contiene cada curso
constructor({
id,
title,
resources = [],
commentBox =[],
}){
this.id = id;
this.title = title;
this.resources = resources;
this.commentBox = commentBox;
}
}
const IntJS = new Classes({ //instancia del prototipo class
title: "Introduccion a Javascript",
id: "ITRJSBASIC",
});
class Courses{ //creo el protipo de los cursos de cada escuela
constructor({
name,
teacher,
rank,
classes = [],
}){
this.name = name;
this.teacher = teacher;
this.rank = rank;
this.classes = classes;
}
}
const jsBasico = new Courses({ //creo instancia del prototipo curso
name: 'Curso Basico de Javascript',
teacher: 'JuanDC',
rank: 75,
classes: [IntJS] // agregro la clase introduccion a js en el curso basico de js
})
const jsIntermedio = new Courses({ //creo instancia del prototipo curso
name: 'Curso Intermedio de Javascript',
teacher: 'JuanDC',
rank: 82,
});
const clousures = new Courses({ //creo instancia del prototipo curso
name: 'Curso Clousures & Scope',
teacher: 'Oscar Barajas',
rank: 70,
});
class LearninPaths { //creo prototipo de cada escuela
constructor({
name,
courses = [],
}){
this.name = name;
this.courses = courses;
}
};
LearninPaths.prototype.nuevoCurso = function (curso){ // creo metodo para añadir cursos a cada escuela de ser necesario en un futuro
this.cursos.push(curso);
};
const webDev = new LearninPaths({ //creo una instancia para el prototipo Learningpaths
name: 'Escuela de Desarrollo Web',
courses: [jsBasico, jsIntermedio,clousures], // aqui agrego cada instancia necesaria del prototipo courses para esta escuela
});
class Student{ //creo el prototipo estudiante
constructor({
name,
email,
username,
twitter= undefined,
instagram = undefined,
facebook = undefined,
approvedCourses =[],
learninPaths = [],
}){
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
facebook,
instagram,
};
this.approvedCourses = approvedCourses;
this.learninPaths = learninPaths;
}
};
Student.prototype.newPath = function (nuevaRuta){ //creo metodo para añadir una nueva ruta de aprendisaje por si en un futuro lo necesito
this.learninPaths.push(nuevaRuta);
};
const juan2 = new Student({ // creo una instancia del prototipo student
name: "Juan",
username:"JuanDC",
email:"[email protected]",
instagram:"fjuandc",
});
const miguel = new Student({
name: "Miguel Cabrera",
username:"miguelito1",
email:"[email protected]",
facebook:"miguel Cabrera Oficial",
});
juan2.newPath(webDev); // utilizo el metodo creado anteriormente newPath para agregar la ruta de aprendizaje a la instancia juan2 del prototipo Student
console.log(juan2);
```class Classes { // *prototipo de clases que contiene cada curso* constructor({ id, title, resources = \[], commentBox =\[], }){ this.id = id; this.title = title; this.resources = resources; this.commentBox = commentBox; }}
const IntJS = new Classes({ //*instancia del prototipo class* title: "Introduccion a Javascript", id: "ITRJSBASIC",});
class Courses{ //*creo el protipo de los cursos de cada escuela* constructor({ name, teacher, rank, classes = \[],
}){ this.name = name; this.teacher = teacher; this.rank = rank; this.classes = classes; }}
const jsBasico = new Courses({ //*creo instancia del prototipo curso* name: 'Curso Basico de Javascript', teacher: 'JuanDC', rank: 75, classes: \[IntJS] // *agregro la clase introduccion a js en el curso basico de js* })const jsIntermedio = new Courses({ //*creo instancia del prototipo curso* name: 'Curso Intermedio de Javascript', teacher: 'JuanDC', rank: 82,});
const clousures = new Courses({ //*creo instancia del prototipo curso* name: 'Curso Clousures & Scope', teacher: 'Oscar Barajas', rank: 70,});
class LearninPaths { //*creo prototipo de cada escuela* constructor({ name, courses = \[], }){ this.name = name; this.courses = courses; }};
LearninPaths.prototype.nuevoCurso = function (curso){ // *creo metodo para añadir cursos a cada escuela de ser necesario en un futuro* this.cursos.push(curso);};
const webDev = new LearninPaths({ //*creo una instancia para el prototipo Learningpaths* name: 'Escuela de Desarrollo Web', courses: \[jsBasico, jsIntermedio,clousures], // *aqui agrego cada instancia necesaria del prototipo courses para esta escuela*});
class Student{ //*creo el prototipo estudiante* constructor({ name, email, username, twitter= undefined, instagram = undefined, facebook = undefined, approvedCourses =\[], learninPaths = \[], }){ this.name = name; this.email = email; this.username = username; this.socialMedia = { twitter, facebook, instagram, }; this.approvedCourses = approvedCourses; this.learninPaths = learninPaths; }};Student.prototype.newPath = function (nuevaRuta){ //*creo metodo para añadir una nueva ruta de aprendisaje por si en un futuro lo necesito* this.learninPaths.push(nuevaRuta);};
const juan2 = new Student({ // *creo una instancia del prototipo student*
name: "Juan", username:"JuanDC", email:"[email protected]", instagram:"fjuandc",});
const miguel = new Student({ name: "Miguel Cabrera", username:"miguelito1", email:"[email protected]", facebook:"miguel Cabrera Oficial",});
juan2.newPath(webDev); // *utilizo el metodo creado anteriormente newPath para agregar la ruta de aprendizaje a la instancia juan2 del prototipo Student*console.log(juan2);
Hasta ahora tengo realizado esto, esta al minimo se pueden agregar mas cosas.class Classes { // *prototipo de clases que contiene cada curso* constructor({ id, title, resources = \[], commentBox =\[], }){ this.id = id; this.title = title; this.resources = resources; this.commentBox = commentBox; }}
const IntJS = new Classes({ //*instancia del prototipo class* title: "Introduccion a Javascript", id: "ITRJSBASIC",});
class Courses{ //*creo el protipo de los cursos de cada escuela* constructor({ name, teacher, rank, classes = \[],
}){ this.name = name; this.teacher = teacher; this.rank = rank; this.classes = classes; }}
const jsBasico = new Courses({ //*creo instancia del prototipo curso* name: 'Curso Basico de Javascript', teacher: 'JuanDC', rank: 75, classes: \[IntJS] // *agregro la clase introduccion a js en el curso basico de js* })const jsIntermedio = new Courses({ //*creo instancia del prototipo curso* name: 'Curso Intermedio de Javascript', teacher: 'JuanDC', rank: 82,});
const clousures = new Courses({ //*creo instancia del prototipo curso* name: 'Curso Clousures & Scope', teacher: 'Oscar Barajas', rank: 70,});
class LearninPaths { //*creo prototipo de cada escuela* constructor({ name, courses = \[], }){ this.name = name; this.courses = courses; }};
LearninPaths.prototype.nuevoCurso = function (curso){ // *creo metodo para añadir cursos a cada escuela de ser necesario en un futuro* this.cursos.push(curso);};
const webDev = new LearninPaths({ //*creo una instancia para el prototipo Learningpaths* name: 'Escuela de Desarrollo Web', courses: \[jsBasico, jsIntermedio,clousures], // *aqui agrego cada instancia necesaria del prototipo courses para esta escuela*});
class Student{ //*creo el prototipo estudiante* constructor({ name, email, username, twitter= undefined, instagram = undefined, facebook = undefined, approvedCourses =\[], learninPaths = \[], }){ this.name = name; this.email = email; this.username = username; this.socialMedia = { twitter, facebook, instagram, }; this.approvedCourses = approvedCourses; this.learninPaths = learninPaths; }};Student.prototype.newPath = function (nuevaRuta){ //*creo metodo para añadir una nueva ruta de aprendisaje por si en un futuro lo necesito* this.learninPaths.push(nuevaRuta);};
const juan2 = new Student({ // *creo una instancia del prototipo student*
name: "Juan", username:"JuanDC", email:"[email protected]", instagram:"fjuandc",});
const miguel = new Student({ name: "Miguel Cabrera", username:"miguelito1", email:"[email protected]", facebook:"miguel Cabrera Oficial",});
juan2.newPath(webDev); // *utilizo el metodo creado anteriormente newPath para agregar la ruta de aprendizaje a la instancia juan2 del prototipo Student*console.log(juan2);
```js
class Classes { // prototipo de clases que contiene cada curso
constructor({
id,
title,
resources = [],
commentBox =[],
}){
this.id = id;
this.title = title;
this.resources = resources;
this.commentBox = commentBox;
}
}
const IntJS = new Classes({ //instancia del prototipo class
title: "Introduccion a Javascript",
id: "ITRJSBASIC",
});
class Courses{ //creo el protipo de los cursos de cada escuela
constructor({
name,
teacher,
rank,
classes = [],
}){
this.name = name;
this.teacher = teacher;
this.rank = rank;
this.classes = classes;
}
}
const jsBasico = new Courses({ //creo instancia del prototipo curso
name: 'Curso Basico de Javascript',
teacher: 'JuanDC',
rank: 75,
classes: [IntJS] // agregro la clase introduccion a js en el curso basico de js
})
const jsIntermedio = new Courses({ //creo instancia del prototipo curso
name: 'Curso Intermedio de Javascript',
teacher: 'JuanDC',
rank: 82,
});
const clousures = new Courses({ //creo instancia del prototipo curso
name: 'Curso Clousures & Scope',
teacher: 'Oscar Barajas',
rank: 70,
});
class LearninPaths { //creo prototipo de cada escuela
constructor({
name,
courses = [],
}){
this.name = name;
this.courses = courses;
}
};
LearninPaths.prototype.nuevoCurso = function (curso){ // creo metodo para añadir cursos a cada escuela de ser necesario en un futuro
this.cursos.push(curso);
};
const webDev = new LearninPaths({ //creo una instancia para el prototipo Learningpaths
name: 'Escuela de Desarrollo Web',
courses: [jsBasico, jsIntermedio,clousures], // aqui agrego cada instancia necesaria del prototipo courses para esta escuela
});
class Student{ //creo el prototipo estudiante
constructor({
name,
email,
username,
twitter= undefined,
instagram = undefined,
facebook = undefined,
approvedCourses =[],
learninPaths = [],
}){
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter,
facebook,
instagram,
};
this.approvedCourses = approvedCourses;
this.learninPaths = learninPaths;
}
};
Student.prototype.newPath = function (nuevaRuta){ //creo metodo para añadir una nueva ruta de aprendisaje por si en un futuro lo necesito
this.learninPaths.push(nuevaRuta);
};
const juan2 = new Student({ // creo una instancia del prototipo student
name: "Juan",
username:"JuanDC",
email:"[email protected]",
instagram:"fjuandc",
});
const miguel = new Student({
name: "Miguel Cabrera",
username:"miguelito1",
email:"[email protected]",
facebook:"miguel Cabrera Oficial",
});
juan2.newPath(webDev); // utilizo el metodo creado anteriormente newPath para agregar la ruta de aprendizaje a la instancia juan2 del prototipo Student
console.log(juan2);
```
En esta ocasión me saltare los deberes, tareas, retos jejeje, sería muy trabajado hacer todo eso 😅.
Les presento esta abstracción pero de algo más sencillo y genérico
class Animal {
constructor(name, species, sound) {
this.name = name;
this.species = species;
this.sound = sound;
}
makeSound() {
console.log(`The ${this.species} named ${this.name} says ${this.sound}!`);
}
}
Sería mucho mejor usar
constructor({name, species, sound}) {
this.name = name;
this.species = species;
this.sound = sound;
}
Porque de esta manera es más legible y tienes ayuda por parte del editor de código para auto completado de las propiedades de la clase.
Aumente la clase Classes asi:
Luego enlacé a todas las clases al crear los objetos:
He comprendido un poco y pienso que si lo lograre pero solo veo algo en en consola y en codigo
Me gustaria que un curso practico donde se pueda utilizar html y javascript Por ejemplo una pagina que agrege frutas con un boton tipo para el registro de una fruteria
estaria bien padre pero aun me falta un poco mas comprenderlo hasta decir que ya lo domine Saludos.
Solución
class Classes{
constructor({topic}){
this.topic = topic;
}
}
class Course{
constructor({
name,
classes = [],
}){
this.name = name;
this.classes = classes;
}
}
class School{
constructor({ path, courses = []}){
this.path = path;
this.courses = courses;
}
launch_of_new_course(new_release){
this.courses.push(new_release);
}
}
class Pupil{
constructor({
name,
email,
username,
twitter,
instagram,
facebook,
approved_courses = [],
learning_paths = [],
}){
this.name = name;
this.email = email;
this.username = username;
this.social_media = {
twitter,
instagram,
facebook,
};
this.approved_courses = approved_courses;
this.learning_paths = learning_paths;
}
approved_course(new_course){
this.approved_courses.push(new_course);
}
}
const class_one = new Classes({topic: 'Class One'});
const class_two = new Classes({topic: 'Class Two'});
const class_three = new Classes({topic: 'Class Three'});
const class_four= new Classes({topic: 'Class Four'});
const class_five = new Classes({topic: 'Class Five'});
const class_six = new Classes({topic: 'Class Six'});
const course_one = new Course({
name: 'Course 01',
classes: [
class_one,
class_two,
class_three,
class_six,
]
});
const course_two = new Course({
name: 'Course 02',
classes: [
class_one,
class_three,
class_four,
]
});
const course_three = new Course({
name: 'Course 03',
classes: [
class_one,
class_two,
class_three,
class_four,
class_five,
]
});
const school_01 = new School({
path: 'Web development',
courses: [
course_one,
course_two,
course_three,
]
});
const school_02 = new School({
path: 'Video games development',
courses: [
course_one,
course_two,
course_three,
]
});
const school_03 = new School({
path: 'Artificial intelligence',
courses: [
course_one,
course_two,
course_three,
]
});
const simone = new Pupil({
name: 'Simone Simons',
email: '[email protected]',
username: 'simone_simons',
twitter: 's_simons',
learning_paths: [
school_01,
school_02,
],
});
const alissa = new Pupil({
name: 'Alissa White_Gluz',
username: 'alissa_wg',
email:'[email protected]',
instagram: 'alisa_wg',
learning_paths: [
school_01,
school_03,
]
});
school_01.launch_of_new_course(new Course({
name: 'Course 04',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_01.launch_of_new_course(new Course({
name: 'Course 05',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_01.launch_of_new_course(new Course({
name: 'Course 06',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_02.launch_of_new_course(new Course({
name: 'Course 04',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_02.launch_of_new_course(new Course({
name: 'Course 05',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_02.launch_of_new_course(new Course({
name: 'Course 06',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_03.launch_of_new_course(new Course({
name: 'Course 04',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_03.launch_of_new_course(new Course({
name: 'Course 05',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
school_03.launch_of_new_course(new Course({
name: 'Course 06',
classes: [
class_one,
class_two,
class_three,
class_six,
]
}));
simone.approved_course(course_one);
simone.approved_course(course_three);
alissa.approved_course(course_one);
alissa.approved_course(course_two);
Yo hice lo siguiente basandome en la ruta de JS a Profundidad que estoy siguiendo.
- main.js
import Clases from "./clases.js";
import Modules from "./modules.js";
import Courses from "./courses.js";
const jsBasicoClass1 = new Clases({
name: "¿Por qué JavaScript?"
})
const jsBasicoClass2 = new Clases({
name: "¿Qué es JavaScript y para qué sirve?"
})
const jsBasicoClass3 = new Clases({
name: "Elementos de un Lenguaje de Programación: Variables, Funciones y Sintaxis"
})
const jsBasicoClass4 = new Clases({
name: "Qué es una variable en JavaScript"
})
const jsBasicoClass5 = new Clases({
name: "Qué son las funciones en JavaScript"
})
const jsBasicoClass6 = new Clases({
name: "¿Qué es una función declarativa y una expresiva?"
})
const jsBasicoClass7 = new Clases({
name: "Playground: retorna el tipo"
})
const jsBasicoClass8 = new Clases({
name: "Quiz de Introducción a JavaScript"
})
const jsBasicoClass9 = new Clases({
name: "Scope"
})
const jsBasicoClass10 = new Clases({
name: "Hoisting"
})
const jsBasicoModule2 = new Modules({
name : "Bases de JavaScript",
clases : [
jsBasicoClass9,
jsBasicoClass10
]
})
const jsBasicoModule1 = new Modules({
name : "Introducción a JavaScript",
clases : [
jsBasicoClass1,
jsBasicoClass2,
jsBasicoClass3,
jsBasicoClass4,
jsBasicoClass5,
jsBasicoClass6,
jsBasicoClass7,
jsBasicoClass8
]
})
const jsBasico = new Courses({
name:"Curso Básico de JavaScript",
teacher: "Diego de Granda",
modules: [
jsBasicoModule1,
jsBasicoModule2
]
})
class LearningPath {
constructor({
name,
courses
}){
this.name = name;
this.courses = courses;
}
}
const JavaScriptAProfundidad = new LearningPath({
name: "JavaScript a Profundidad",
courses:[
jsBasico,
/* cursoPracticoJavaScript,
tallerPracticoJavaScriptMatematicas,
tallerPracticoJavaScriptVideojuegos,
cursoClosuresScope,
cursoEcmaScript,
cursoPOO,
cursoBasicoPOOJavaScript */
]
})
class Student {
constructor({
name,
username,
age,
email,
learningPath = [],
approvedCourses=[],
facebook = undefined,
instagram = undefined
}) {
this.name = name,
this.age = age,
this.email = email,
this.username = username,
this.learningPath = learningPath,
this.approvedCourses=approvedCourses,
this.socialMedia = {
facebook,
instagram
}
}
}
const alfonso = new Student({
name:"Alfonso",
email:"[email protected]",
age:24,
username:"rica999",
facebook: "Ricardo Chavez",
learningPath:[
JavaScriptAProfundidad
]
})
- courses.js
export default class Courses{
constructor({
name,
teacher,
modules
}) {
this.name = name;
this.teacher = teacher;
this.modules = modules;
}
}
- modules.js
export default class Modules {
constructor({
name,
clases
}) {
this.name = name;
this.clases = clases;
}
}
- clases.js
export default class Clases {
constructor({
name
}) {
this.name = name;
}
}
// con prototipos
class Clasess{
constructor({
name,
urlVideo,
}){
this.name = name;
this.urlVideo = urlVideo;
};
}
const clasePOO = new Clasess({
name: "Clase conceptos de POO",
urlVideo: "https://",
})
const clasePilares = new Clasess({
name: "Clase pilares de POO",
urlVideo: "https://",
})
class Course{
constructor({
name,
teacher,
classes = [],
comments = []
}){
this.name = name;
this.teacher = teacher;
this.time = time;
}
}
const cursoHTML = new Course({
name: "Curso basico de desarrollo HTML",
teacher: "Juan Castro",
});
const cursoJS = new Course({
name: "Curso basico de JS",
teacher: "Juan Castro",
});
const cursoCSS = new Course({
name: "Curso basico de CSS",
teacher: "Juan Castro",
});
const cursoPython = new Course({
name: "Curso basico de CSS",
teacher: "Juan Castro",
});
const cursoNumpy = new Course({
name: "Curso basico de CSS",
teacher: "Juan Castro",
});
const cursoUnity = new Course({
name: "Curso basico de CSS",
teacher: "Juan Castro",
});
const cursoCsharp = new Course({
name: "Curso basico de CSS",
teacher: "Juan Castro",
});
//////////////////////////////
class LearningPath{
constructor({
name,
coursesList = [],
})
{
this.name = name;
this.coursesList = coursesList;
}
}
const escuelaWeb = new LearningPath({
name: "Escuela de Desarrollo Web",
coursesList: [cursoCSS,cursoHTML, cursoJS],
})
const escuelaData = new LearningPath({
name: "Escuela de Data Science",
coursesList: [cursoPython,cursoNumpy],
})
const escuelaVdgs = new LearningPath({
name: "Escuela de Video Juegos",
coursesList: [cursoUnity,cursoCsharp],
})
///////////////////////////////////
class Student{
constructor({
name,
email,
username,
twitter = undefined,
instagram = undefined,
facebook = undefined,
approvedCourses = [],
learningPaths = [],
})
{
this.name = name;
this.email = email;
this.username = username;
this.socialMedia = {
twitter: twitter,
instagram: instagram,
facebook: facebook,
};
this.approvedCourses = approvedCourses;
this.learningPaths = learningPaths;
}
}
const jennie = new Student({
name: "Jennie kim",
username: "jennie_kim",
email: "[email protected]",
twitter: "jennie_official",
learningPaths:[
escuelaWeb,
]
});
const rose = new Student({
name: "rose kim",
username: "rose_kim",
email: "[email protected]",
instagram: "rose_official",
learningPaths:[
escuelaData,
escuelaVdgs,
]
});```
Pues un ejemplito ahí nomas.
class Classes {
constructor(name) {
this.name = name;
}
}
const classCicloIf = new Classes("Ciclo If/else");
const classCicloFor = new Classes("Ciclo For");
const classCicloWhile = new Classes("Ciclo While");
class Course {
constructor({name, classes = []}) {
this.name = name;
this.classes = classes;
}
}
const cursoProgBasica = new Course({
name: "Curso gratis de programación básica",
classes: [classCicloIf, classCicloFor, classCicloWhile]});
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?