# MANUAL PARA CREAR MANUALES

# PROCESO 1: CONFIGURACIÓN EN GITLAB

Paso 1: Iniciar sesión:
- Ingresar a gitlab.com e iniciar sesión con Google:
- Ingresar su correo y contraseña corporativo
Paso 2: Solicitar al área de desarrollo el acceso al proyecto de su área.
Paso 3: Crear una rama (espacio de trabajo independiente y paralelo al código principal del proyecto) en gitlab:
- Dirigirse al page Projects:
Paso 4: Clic en el ícono + y clic en New branch:
Paso 5: Ingresar su nombre y clic en Create Branch:
Paso 6: Ubicarse en su rama, para este ejemplo se ingresará a la rama yerson, usted debe ingresar a la rama que ha creado:
Paso 7: Desde su rama ingresar a su área. Para este ejemplo ingresaré al área que me corresponde que es Soporte:

Paso 1: Abrir la aplicación de gitbash y situarse en la carpeta donde se va a clonar el proyecto de gitlab.
- Por ejemplo, en este caso, dentro de la carpeta prueba_git se clonará el proyecto de gitlab:
Paso 2: Clic derecho y clic en open git bash:
Paso 3: Ejecutar el comando -> git clone -b yerson https://gitlab.com/anka3_0/anka_manuales.git, yerson cambiarlo por el nombre de tu rama.
Paso 4: Ver el contenido de la carpeta, para ello ejecutar el comando ls y listará el contenido de la carpeta actual:

Como podemos ver, la carpeta contiene la carpeta del proyecto clonado.
Paso 5: Ingresar a la carpeta, para ello ejecutar el comando -> cd nombre de la carpeta (anka_manuales):

Podemos ver que al situarse a la carpeta también estamos dentro de nuestra rama creada.
Paso 6: Abrir vscode, ejecutando el comando code .:

Paso 1: Crear la carpeta del módulo flota: Por ejemplo, crearemos el primer manual del módulo flota, para ello crear la carpeta del módulo dentro de la carpeta src:
Paso 2: Toda carpeta que va a contener el archivo .md debe contener el archivo readme.md en la raíz, ya que es importante para que pueda renderizar en el navegador:
- El archivo readme.md debe redirigir al primer manual, esto con la finalidad que al renderizar en pantalla, lo primero que muestra el navegador al ingresar a un manual es el archivo readme.md, si este archivo está vacío mostrará una página en blanco, por lo tanto se debe ingresar el siguiente código:
Como se puede ver en la imagen, se ingresa una ruta, esa ruta debe ser la ruta del manual, es decir: Si el manual está dentro de la carpeta flota, entonces la ruta sería la siguiente:

/flota/manual_prueba.html -> /carpet/nombre_archivo.html -> En este caso se cambia el formato del archivo de .md a .html, porque el navegador interpreta el formato html.
Paso 3: Crear el archivo del manual. Por ejemplo manual_prueba.md:

Los títulos y subtítulos se diferencian por el tamaño.

Para crear un título en un archivo .md, se debe realizar de la siguiente manera, anteceder al texto con el signo numeral con un espacio. #:
- Podemos visualizar a través de la vista previa como va quedando lo que codificamos. Para ello clic en el ícono que indica la imagen: - Vista previa:
Para crear un subtítulo de posición 1 en un archivo .md, se debe realizar de la siguiente manera, anteceder al texto 2 veces el signo numeral con un espacio:
Para crear un subtítulo de posición 2 en un archivo .md, se debe realizar de la siguiente manera, anteceder al texto 3 veces el signo numeral con un espacio:

Para agregar un párrafo con viñetas, se debe realizar de la siguiente manera, esto generalmente se usa para describir pasos de un manual:

Para agregar una imagen al manual debe abrir una etiqueta img con el parámetro src (source) e ingresar la ruta donde se encuentra la imagen e ingresar el atributo data-zoomable, que sirve para dar zoom a una imagen:
- Paso 1, con la ayuda del software lightshot realizar las capturas de pantalla. Por ejemplo en este caso realizaré una captura de pantalla de la página de inicio del sistema Anka ERP indicando el módulo flota.
Podemos ver que para insertar la imagen se hace uso de la etiqueta img con su atributo src donde se ingresa la ruta de la imagen. Se recomienda que para las imágenes estén separadas por cada carpeta de su módulo correspondiente y crear estas carpetas dentro de la carpeta src/public/imagen/carpeta_modulo/archivo.

Paso 1: Ingresar al archivo config.js:
Paso 2: Dentro del archivo config, crear la lista de manuales del módulo dentro del diccionario sidebar, como muestra la imagen:
Paso 3: Ingresar la ruta y el nombre del manual que se mostrará en la página de manuales, como muestra la imagen:

Recordar que en la ruta ya no va el formato .md

Paso 1: Todo lo que ha sido agregado se tiene que subir, para ello clic derecho sobre cada carpeta que ha sido agregada y clic en upload folder.
- Por ejemplo, en este caso realizar en la carpeta flota, archivo config.js y carpeta flota de imágenes:
- Carpeta que contiene el manual -> flota:
- Carpeta que contiene las imágenes del módulo -> flota:
- Archivo config.js, al ser un archivo se debe cargar el archivo:
Paso 2: Abrir el sftp:
Paso 3: Clic derecho sobre anka manuales y clic en Open SSh in terminal:
Paso 4: Ingresar la contraseña de su dev.
Paso 5: Ingresar a la ruta siguiente, dev7 cambiar por su dev:
Paso 6: Ingresar a la carpeta anka_pasantia:
Paso 7: Ingresar a la carpeta anka_manuales:
Paso 8: Ingresar a la carpeta docs:
Paso 9: Ejecutar el comando npx vuepress build src para subir el contenido en la web:
Paso 10: Verificar que el manual está correcto:

Paso 1: Agregar todo lo que se ha realizado, para ello ingresar el comando git add .
Paso 2: Una vez agregado todo lo que se ha realizado, realizar el git commit: git commit -m "mensaje":
Paso 3: Por último subir todo al repositorio con el git push: git push origin nombre_tu_rama:

PROCESO TERMINADO

← Instalación del software Lightshot