Compodoc: Crea documentación en proyectos Angular/Ionic/TS

Crear documentación de calidad y MUY fácil de mantener con Compodoc para proyectos de Angular 2+ / Ionic 2+ / Typescript

Created byAnartz Mugika Ledo

Last updated 3/2020

Spanish

What you'll learn

Crear documentación limpia y fácil de mantener en proyectos de Angular / Ionic
Crear la documentación con diferentes plantillas proporcionadas
Crear documentación aplicando estilos propios
Crear documentación añadiendo el contenido deseado únicamente
Mejorar como desarrollador y como compañero de equipo de desarrollo

Course content

11 sections • 73 lectures • 3h 7m total length

Introducción al curso1:15
Preguntas - Después del 17/03/20200:08
Información relativa a las preguntas
Funcionamiento de las reseñas0:11
Acerca de como hacer reseñas en el curso
Desarrollo del curso - Consejos para un correcto uso del curso0:21
Instrucciones para como desarrollar el curso
Enlaces de interés0:04
Lista de enlaces interesantes relacionados al curso
Instalaciones necesarias para trabajar con compodoc3:07
Como instalar los elementos principales para seguir el curso correctamente
Descarga del proyecto e instalación de la librería Compodoc0:38
Pasos a seguir para descargar el proyecto en la versión deseada de Angular y el proceso a seguir para instalar Compodoc
Explicación breve del proyecto de como está desarrollado2:08
Extensiones recomendadas para trabajar con el material del curso0:06
En este apartado tenemos el documento de las extensiones recomendadas para trabajar con los proyectos del curso.

¿Qué conseguiremos en esta sección? ¡¡Ver el video y lo descubriréis!!0:48
En esta clase se muestra lo que conseguiremos al final de esta sección
Introducción a Compodoc2:47
En este apartado se hará una breve introducción de lo que contiene la página oficial de compodoc, antes de entrar en materia.
Configuración inicial y generación del resultado3:44
En este apartado aprenderemos a instalar compodoc, configurarlo con las opciones por defecto y finalmente crearemos la primera versión de la documentación haciendo uso de algunos tags
Personalizar ubicación de donde se generará la documentación3:25
Especificaremos en que directorio vamos a generar nuestra documentación, ignorando la opción por defecto que es guardarlo en el directorio "documentation"
Generar la documentación y ejecutarla en el servidor local automáticamente2:03
Código fuente de la sección0:03

¿Qué conseguiremos en esta sección? ¡¡Ver el video y lo descubriréis!!1:19
En esta clase se muestra lo que conseguiremos al final de esta sección
Referencia de la documentación oficial sobre crear con diferentes templates0:13
Información sobre la documentación oficial respecto a los themes.
Generar la documentación haciendo uso de la plantilla Material3:47
Comenzamos con los templates de Compodoc y aplicamos el Material
Generar documentación con las otras plantillas disponibles excepto material5:08
Hacemos uso de otras plantillas
Código fuente de la sección0:02

¿Qué conseguiremos en esta sección? ¡¡Ver el video y lo descubriréis!!1:02
En esta clase se muestra lo que conseguiremos al final de esta sección
Crear el directorio, primeras configuraciones e índice básico con menú principal4:47
Comenzamos configurando para crear el primer ejemplo con un índice básico
Detectar los cambios en el código fuente y regenerarlo sin ejecutar script2:32
Una nueva opción para evitar tener que andar ejecutando una y otra vez el script por cada cambio que hagamos
Añadiendo sub-apartados a los apartados principales en diferentes niveles4:23
Creamos los menús secundarios
Código fuente de la sección0:02

¿Qué conseguiremos en esta sección? ¡¡Ver el video y lo descubriréis!!1:30
En esta clase se muestra lo que conseguiremos al final de esta sección
Añadir favicon y título personalizado en nuestra documentación3:19
Añadir una hoja de estilos personalizada para tener estilos propios4:12
Quitando el logotipo de compodoc del theme1:39
Logotipo personalizado con CSS6:35
Darle nuestro toque personal al estilo de la documentación7:10
Código fuente de la sección0:06

Personalizar el título del apartado de la documentación adicional3:05
Conceptos básicos de como hay que añadir los comentarios correctamente2:02
Práctica con lo aprendido en el formato de los comentarios0:22
Resultado de la práctica con los comentarios4:48
JSDoc Tags - Returns2:42
JSDoc Tags - Ignore4:47
JSDoc Tags - Param4:49
JSDoc Tags - Link - Internal5:44
JSDoc Tags - Link - External3:43
JSDoc Tags - Link - Example3:51
No generar documentación con las clases privadas ni protected4:47
Deshabilitar el DOM Tree y el código fuente (Source Code) de la documentación2:28
No añadir las funciones que componen el ciclo de vida de un componente5:37
Excluir los ficheros seleccionados3:39
Código fuente de la sección0:03
Código de la sección 6 finalizado

Acerca de la versión utilizada0:05
Información necesaria
Instalación de Ionic y creación del proyecto con el que vamos a trabajar3:50
Instalación de compodoc en el proyecto y generación de la documentación2:16
PRÁCTICA: Poner en práctica lo aprendido en el curso con varios retos0:45
Enunciado de la práctica de compodoc como repaso opcional.
Resultado de la práctica - Ejercicio 12:57
Se añade el resultado del ejercicio. Descomprimir, acceder al index.html y podemos ver el resultado.
Resultado de la practica - Ejercicio 22:03
Se añade el resultado del ejercicio. Descomprimir, acceder al index.html y podemos ver el resultado.
Resultado de la practica - Ejercicio 36:20
Se añade el resultado del ejercicio. Descomprimir, acceder al index.html y podemos ver el resultado.
Resultado de la practica - Ejercicio 45:44
Se añade el resultado del ejercicio. Descomprimir, acceder al index.html y podemos ver el resultado.
Resultado de la practica - Ejercicio 55:59
Se añade el resultado del ejercicio. Descomprimir, acceder al index.html y podemos ver el resultado.
Resultado de la práctica - Ejercicio 61:56
Código fuente de la práctica con Ionic Framework V40:06
Código fuente del apartado EXTRA al 100%.

Introducción a la sección - ¿Cuál es el objetivo?1:08
En esta clase se muestra lo que conseguiremos al final de esta sección
Preparativos para empezar a mejorar el coverage2:54
Pasos para empezar a trabajar con la mejora del coverage de la documentación
Documentando Componentes6:47
Documentaremos los componentes para mejorar el coverage de la documentación
Documentando Servicios (Inyectables)2:39
Documentaremos el serviciuo para mejorar el coverage de la documentación
Documentando Interfaces2:07
Documentaremos la interface para mejorar el coverage de la documentación
Documentando Variables2:56
Documentaremos varias variables de muestra para mejorar el coverage de la documentación
Documentando Pipes1:58
Documentaremos los pipes para mejorar el coverage de la documentación
Código fuente de la sección0:03

¿Qué necesitaremos para publicar nuestra documentación en Github Pages?1:33
Introducción a lo que corresponde Github Pages que utilizaremos para publicar nuestras páginas web estáticas en un repositorio de Github y poder mostrarlo
Crear una cuenta en Github2:44
Pasos a seguir para registrar una cuenta en Github
Publicar index.html en la página inicial de nuestro usuario / organización2:52
Publicar lindex.html como proyecto de nuestro usuario / organización2:46
Publicar la documentacióm final haciendo uso de Github pages2:59

Requirements

HTML y CSS básico
Ser capaz de crear proyectos en Angular básicos
Un PC con Windows, Linux o MAC OSX.
Un IDE (Entorno de Desarrollo Integrado). Nosotros utilizamos Visual Studio Code porque tiene varios plugins que nos facilitan el desarrollo, pero se puede usar Atom, Sublime Text o cualquier otro a tu gusto.
Un navegador compatible con HTML5 y CSS3 que puede ser Firebox o Chrome. Yo trabajaré con Firebox
Tener activado JavaScript en el navegador.
Conocimientos básicos de Git.

Description

IMPORTANTE: Este curso está pensado para proyectos desarrollados en Angular, Ionic y Typescript. NO SIRVE para documentar proyectos de otros frameowrks como pueden ser Django, Laravel, Symfony,...

La importancia de documentar nuestros proyectos es grande y más si estamos en un equipo de desarrolladores en el que cada miembr@ del equipo desarrolla diferentes funcionalidades por lo que se antoja importante tener todo bien documentado y ordenado.

Con esto conseguimos que el desarrollo sea lo más eficiente posible y en el caso de que entren más desarrolladores puedan coger el hilo del proyecto de la manera más rápida y eficiente sin mucho esfuerzo.

En este curso aprenderemos el uso de la herramienta Compodoc que nos permite crear una documentación elegante y de calidad básica en pocos pasos con facilidad y que será muy fácil de mantener siguiendo unas breves pautas.

Aparte de aprender a crear la documentación básica, aprenderemos a configurar para que mediante la configuración de las diferentes opciones podamos mostrar la documentación con un template u otro, mostrando documentación de apoyo y etc.

Lo que aprenderemos teniendo como base un proyecto de Angular que contiene pipes, componentes, directivas, servicios, constantes, interfaces,... será lo siguiente:

Crear nuestra primera versión de la documentación con las opciones por defecto.
Cambiar de template y crear diferentes variantes.
Como crear documentación adicional con las instrucciones / información del proyecto
Personalizar nuestro template modificando secciones como los títulos, añadiendo logotipos propios,...
Aplicar tips y trucos interesantes para crear una documentación más personalizada.
Sección extra con un proyecto de Ionic desde 0 con una práctica tipo reto en el que vamos a repasar todo lo aprendido en el curso.
Capaces de publicar nuestra documentación en Github mediante Github Pages.

Lo explicado en este curso se realizará principalmente con el proyecto de Angular únicamente ya que el proceso de configuración, generación de documentación y demás aspectos son iguales tanto en Angular e Ionic, por lo que no creo que tenga mucho sentido hacerlo de nuevo paso por paso en Ionic pero si alguien tiene alguna duda concreta que pregunte sin miedo!!

Para ello, he añadido la sección extra, para trabajar con este framework y practicar todo lo aprendido anteriormente.

Espero que el curso les sea ameno, útil y cuando lo terminéis, publiquéis una documentación elegante, limpia y de calidad en la red con la información de vuestros proyectos como aplicaciones Android / iOS en Ionic, proyectos de Angular, librerías,...

Who this course is for:

Desarrolladores que trabajan de manera individual en Angular 2+ / Ionic 2+
Desarrolladores que trabajan en equipo en Angular 2+ / Ionic 2+
Estudiantes de Angular 2+ / Ionic 2+ que quieran profundizar en la mejora de sus proyectos

Compodoc: Crea documentación en proyectos Angular/Ionic/TS

What you'll learn

Explore related topics

Course content

Introducción al curso / Instalaciones necesarias9 lectures • 8min

Primeros pasos con Compodoc. Crear documentación con los ajustes básicos6 lectures • 13min

Cambiar de template y crear diferentes variantes de manera sencilla5 lectures • 10min

Crear documentación adicional con las instrucciones / información del proyecto5 lectures • 13min

Personalizar nuestro theme de la documentación7 lectures • 25min

Tips para mejorar la documentación y mostrar el contenido que queremos15 lectures • 52min

Compodoc en proyectos Ionic + PRÁCTICA OPCIONAL (aunque MUY recomendable)11 lectures • 32min

Mejorando el coverage de nuestra documentación8 lectures • 21min

Publicar la documentación para tenerla accesible via URL en Github Pages5 lectures • 13min

Despedida del curso - Cierre1 lecture • 1min

Requirements

Description

Who this course is for: