Proyecto simple que permite a cada usuario crear sus propios enlaces, los cuales pueden ser visualizados por cualquier persona que tenga el link de acceso.
- Crear un proyecto simple que permita a los usuarios crear sus propios enlaces.
- Permitir a los usuarios compartir sus enlaces con otras personas.
Tenemos que tener instaladas las siguientes herramientas:
| Herramienta | Enlace de descarga |
|---|---|
| Git | Descargar |
| Visual Studio Code | Descargar |
Para instalar Git, debemos seguir los siguientes pasos:
Ingresamos a la página oficial de Git: Git
Luego hacemos clic en el botón "Download" para descargar el instalador de Git.
Una vez descargado el instalador, lo ejecutamos y hacemos clic en el botón "Ejecutar".
Aceptar los términos de la licencia y hacer clic en el botón "Siguiente".
Seleccionar la ubicación de instalación y hacer clic en el botón "Siguiente".
Seleccionamos siguiente y esperamos a que termine la instalación.
Una vez finalizada la instalación, hacemos clic en el botón "Finalizar".
Nota: Debemos tener una cuenta en GitHub para poder clonar el repositorio para eso nos dirigimos a GitHub y creamos una cuenta.
Ingresamos a la página oficial de GitHub: GitHub
Ingresamos nuestro nombre de usuario, correo electrónico y contraseña. Luego hacemos clic en el botón "Sign up for GitHub".
Después de instalar Git, debemos configurar nuestro nombre de usuario y correo electrónico. Para ello, abrimos la consola de Git y ejecutamos los siguientes comandos:
git config --global user.name "tu nombre"
git config --global user.email "tu correo"Primero hacemos click derecho en el escritorio y seleccionamos la opción "Git Bash Here".
Luego ejecutamos los comandos en la consola de Git.
git config --global user.name "Omar Vite"
git config --global user.email "omar******@uni.pe"
Para verificar que la configuración se haya realizado correctamente, ejecutamos el siguiente comando:
git config --list
Para instalar Visual Studio Code, debemos seguir los siguientes pasos:
Ingresamos a la página oficial de Visual Studio Code: Visual Studio Code y hacemos clic en el botón del sitema operativo que estemos utilizando en este caso Windows.
Descargamos el instalador de Visual Studio Code.
Una vez descargado el instalador, lo ejecutamos haciendo doble clic y hacemos clic en el botón "Ejecutar".
Aceptamos los términos de la licencia y hacemos clic en el botón "Siguiente".
Seleccionamos la ubicación de instalación y hacemos clic en el botón "Siguiente".
Seleccionamos el path de inicio y hacemos clic en el botón "Siguiente".
Finalizamos la instalación haciendo clic en el botón "Finalizar".
Después de instalar Visual Studio Code, debemos instalar las siguientes extensiones:
| Extensión | Descripción |
|---|---|
| Live Server | Permite visualizar los cambios en tiempo real en el navegador. |
| Prettier | Formatea el código automáticamente. |
Para instalar las extensiones, debemos abrir Visual Studio Code y buscar la extensión en la barra lateral izquierda.
Luego escribimos liver server en la barra de búsqueda y hacemos clic en el botón "Install".
De igual forma, podemos instalar la extensión de Prettier.
Para poder trabajar en el proyecto, debemos crear un fork del repositorio. Para ello, debemos seguir los siguientes pasos:
Ingresamos al repositorio del proyecto: My Links - IEEE CS UNI y hacemos clic en el botón "Fork" que se encuentra en la parte superior derecha de la pantalla.
Luego el nombre de nuestro repositorio y le damos en el botón "Create fork".
Verificamos que se haya creado nuestro repositorio.
Copiamos la URL de nuestro repositorio.
Abriremos la consola de Git y nos ubicaremos en la carpeta donde queremos clonar el repositorio.
Clonamos el repositorio en nuestra máquina local. Para ello, abrimos la consola de Git y ejecutamos el siguiente comando:
git clone <url de nuestro repo>
Nos ubicamos en la carpeta del proyecto:
cd my-links-ieee-cs-uni
Para crear una rama, debemos ejecutar el siguiente comando:
git branch feature/<nombre-apellido>
Para cambiar de rama, debemos ejecutar el siguiente comando:
git checkout feature/<nombre-apellido>
Primero debemos ingresar al proyecto para ello debemos ejecutar el siguiente comando:
code .
Si es la primera vez que utilizamos el directorio nos aparecera una ventana para aceptar que es un directorio de trabajo seguro.
Luego debemos enceder el servidor de Live Server para ello debemos hacer clic en el botón "Go Live" que se encuentra en la parte inferior derecha de la pantalla.
La primera vez nos pedira que permitamos el acceso a la red privada.
Ahora podremos visualizar nuestro proyecto en el navegador.
Para crear un archivo podemos usar la siguiente forma nombre_apellido.html en la carpeta principal del proyecto.
Nota: Puedes utilizar el archivo
jane_doe.htmlcomo referencia.
Si necesitas agregar archivos puedes hacerlo en la carpeta files con el formato <nombre>.<tipo>.<extension> y referenciarlas en tu archivo HTML.
<a href="files/jane_doe.cv.pdf" download>Descargar CV</a>Si necesitas agregar imagenes puedes hacerlo en la carpeta img con el formato <nombre>.<tipo>.<extension> y referenciarlas en tu archivo HTML.
<img src="img/jane_doe.profile.jpg" alt="Imagen de perfil de Jane Doe">Si necesitas agregar estilos puedes hacerlo en la carpeta css con el formato <nombre>.<tipo>.<extension> y referenciarlas en tu archivo HTML.
<!-- Los estilos deben estar en el head del archivo HTML -->
<link rel="stylesheet" href="css/jane_doe.styles.css">
Para subir los cambios a nuestro repositorio remoto, primero revisaremos el estado de nuestro repositorio con el siguiente comando:
git status
Luego agregamos los cambios con el siguiente comando:
git add .
luego verificamos que los cambios se hayan agregado correctamente.
git status
Ahora haremos un commit con el siguiente comando:
git commit -m "feat: Agregado archivo <nombre-apellido>.html"
Por último subimos los cambios a nuestro repositorio remoto con el siguiente comando:
git push origin feature/<nombre-apellido>
Si es la primera vez que subimos los cambios nos pedira que iniciemos sesión en GitHub.
Luego de iniciar sesión podremos ver que los cambios se subieron correctamente.
Nos dirigimos a nuestro repositorio en GitHub y hacemos clic en el botón "Compare & pull request".
Escribimos un mensaje y hacemos clic en el botón "Create pull request".
Una vez creada nuestra pull request, esperaremos a que sea revisada y aprobada por el administrador del proyecto.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent