sábado, 10 de abril de 2021

Calculadora sencilla en JavaScript

Esta entrada forma parte de una serie de post publicados.

  1. Calculadora sencilla en JavaScript
  2. Calculadora de opciones en JavaScript

 Vamos a utilizar:

  • Git para el control de versiones
  • GitHub para almacenar los ficheros en la nube y usarlos para el despliegue contínuo
  • Visual Studio Code como editor de nuestros archivos:
    • HTML
    • JS
  • Algunos complementos para VSCode:
    • marcamos el 'Auto Save' para la grabación contínua de archivos
    • HTML Snippets para mejorar las sugerencias de etiquetas en HTML
    • Live Server para hacer un despliegue contínuo en nuestro local host
  • Netlify para desplegar la página web

Paso Cero

  1. Sacamos una cuenta de GitHub si no la tenemos.
  2. Instalamos el software de control de versiones Git en nuestro PC (Windows, Linux, Mac). Mirar a ver si ya lo tenemos instalado, y en caso afirmativo mirar a ver si lo tenemos actualizado.
  3. Instalamos Visual Studio Code
  4. Sacamos una cuenta de Netlify.

Paso Uno

  1. Creamos un nuevo repositorio en nuestra cuenta de GiHub. En nuestro caso le hemos llamado JS_improve
  2. Copiamos la URL del repositorio
     

  3. Abrimos una terminal en la carpeta Documentos (Documents)
    • En Windows se puede ir al Exploarador de archivos, ir a la carpeta Documentos y luego poner arriba cmd. Al pulsar Enter se nos abrirá la terminal en el directorio Documents.
    • En Linux podemos ir a Files, ir a la carpeta elegida y pulsando con el botón derecho del ratón veremos la opción 'Open in Terminal'.
    • En cualquier caso podemos abrir una terminal e ir a la carpeta deseada
  4. Clonamos el repositorio con el comando
     git clone https://github.com/financieras/JS_improve.git
    donde la url debe ser la de vuestro repositorio.
  5. Si queremos, podemos ver que se han creado los mismos archivos que en el repositorio de GitHub más un archivo oculto .git
  6. Abrir VSCode. También se puede abrir estando en la terminal, en la carpeta deseada y tecleando 
     code .
    y al pulsar Enter se abrirá el editor de código.

Paso Dos

  1. Estamos en VSCode y vamos a crear un nuevo archivo denominado index.html
  2. Lo primero que escribimos en nuestro nuevo archivo es html:5 y al pulsar Enter veremos ya un código básico para nuestro fichero html. Es el siguiente.
     <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Document</title>  
 </head>  
 <body>  
 </body>  
 </html>
  3. Ahora podemos crear ya nuestro código del archivo index.html en su primera versión funcional, que es el siguiente.
     <!DOCTYPE html>  
 <html lang="es">  
 <head>  
   <meta charset="UTF-8">  
   <script src="./calcula.js"></script>  
   <title>Calculadora en JavaScript</title>  
 </head>  
 <body>  
   <h1>Calculadora en JavaScript</h1>  
   <h2>Variables de entrada</h2>  
   <p>Primer número: </p>  
   <input type="number" value="2" id="n1">  
   <p>Segundo número: </p>  
   <input type="number" value="5" id="n2">  
   <p>Pulse el botón para sumar.</p>  
   <input type="button" value="Sumar" onclick="sumar()">  
   <h2>Resultado</h2>  
   <p id="total"></p>  
 </body>  
 </html>
  4. Ahora vamos a crear nuestro archivo calcula.js
     function sumar(){  
   let uno=document.getElementById("n1");  
   let dos=document.getElementById("n2");  
   let myTotal=document.getElementById("total");  
   let laSuma=parseInt(uno.value) + parseInt(dos.value);  
   myTotal.innerText="El resultado es: "+ laSuma;  
 }

Paso Tres

  1. Dividimos la pantalla en dos partes, a la izquierda ponemos el VSCode y a la derecha nuestro navegador por defecto.
  2. Estando en VSCode veremos abajo un icono que pone 'Go Live'. Este existe debido a que previamente hemos instalado el complemento 'Live Server'. Pulsamos con el ratón sobre 'Go Live' y veremos que en el navegador se abre nuestra página de Local Host. En mi caso uso el puerto 5500 y cualquiera de estas dos páginas funcionará
    1. http://127.0.0.1:5500/index.html
    2. http://localhost:5500/index.html

  3. Si todo ha ido bien veremos nuestra aplicación funcionando. También podemos ver en el navegador la ayuda para desarrolladores pulsando F12, en Chrome y otros navegadores.

Paso Cuatro

  1. Ahora vamos a subir los cambios a GitHub. Podemos usar la terminal integrada en Visual Studio Code.
  2. Abrimos la terminal desde el propio Visual Studio Code con Terminal / New Terminal
  3. En mi caso operando desde Ubuntu tengo la terminal que se ve en la siguiente imagen.


  4. El propio VSCode nos avisará si hay cambios sin subir a GitHub. En la siguiente imagen vemos que aparece a la izquierda un 2 indicando que existen dos cambios sin subir.


  5. Veamos cómo subir los cambios desde la terminal con comandos de Git.
    • git add --all
    • git commit -m "Primera version funcional"
    • git push

    Nota: con git status podemos comprobar si nuestra copia local está actualizada y sin cambios respecto a la copia en la nube.


  6. Ahora comprobamos en GitHub que se han subido bien los cambios. Recargamos la página de GitHub y vemos que los cambios son recientes.

Paso Cinco

  1. Vamos a utilizar GitHub Pages para conseguir que nuestra página web se vea en internet y no solo en nuestro Local Host.
  2. Vamos a nuestro repositorio y en el menú superior pulsamos sobre 'Settings', el icono es una rueda dentada.
  3. En el menú vertical elegimos 'Pages'.


  4. En la rama elegimos 'main' y en la carpeta elegimos 'root'.


  5. Pulsamos sobre el botón 'Save'.
  6. Ya tenemos página web desplegada en GitHub Pages. Nos informan con un mensaje que primero es azul y luego verde cuando ya es operativa. Puede tardar unos minutos en ponerse verde.


  7. El resultado obtenido ya es funcional y tiene su propia página web.

    https://financieras.github.io/JS_improve

Paso nueve

  1. Vamos a desplegar la página web creada en Netlify.
  2. En mi caso ya tengo otro proyecto corriendo en Netlyfy pero podemos crear uno nuevo pulsando en el botón denominada 'New Site from Git'.

  3. Creamos un nuevo sitio con despliegue contínuo utilizando los archivos que tenemos subidos a un repositorio de GitHub.
  4. Tenemos que indicar a Netlify el nombre del repositorio de GitHub que deseamos desplegar. Para ello tenemos que configurar Netlify con GitHub: 'Configure Netlify on GitHub'.
  5. Nos muestra una lista con la cuenta y las organizaciones asociadas a esa cuenta. Elegiremos aquella en la que está el repositorio que deseamos desplegar.
  6. Damos acceso a todos los repositorios de esa cuenta o bien a uno concreto. En mi caso, he elegido 'All repositories'.

  7. Elegimos el repositorio deseado.

  8. Vemos abajo, en verde, que aparece la palabra 'Published', que nos indica que ya está publicada nuestra página web. El despliegue ya se ha producido. La dirección web (url) que nos han asignado aparece arriba y tiene un nombre que no es amigable, ni sencillo de recordar, pero puede ser cambiado.

  9. Vemos que la página está desplegada en nuestra extraña url.

  10. Vamos a cambiar el nombre de la url por uno más amigable, pulsando 'Change site name'.

  11. Ahora vemos que nuestra web está desplegada en https://calculadoraprima.netlify.app

Paso once

  1. Vamos a añadir un archivo css para los estilos. El archivo se denominará style.css.

     body {  
   background-color: LightCyan;  
   font-size: 24px;  
  }  
 #resultH2{  
   color: blue;  
 }
  2. El archivo index.html también requiere un par de cambios, la fila donde llamamos al archivo css y al final hemos añadido la etiqueta resultH2.

     <!DOCTYPE html>  
 <html lang="es">  
 <head>  
   <meta charset="UTF-8">  
   <link rel="stylesheet" href="./style.css">  
   <script src="./calcula.js"></script>  
   <title>Calculadora en JavaScript</title>  
 </head>  
 <body>  
   <h1>Calculadora en JavaScript</h1>  
   <h2>Variables de entrada</h2>  
   <p>Primer número: </p>  
   <input type="number" value="2" id="n1">  
   <p>Segundo número: </p>  
   <input type="number" value="5" id="n2">  
   <p>Pulse el botón para sumar.</p>  
   <input type="button" value="Sumar" onclick="sumar()">  
   <h2 id="resultH2">Resultado</h2>  
   <p id="total"></p>  
 </body>  
 </html>
  3. Podemos ver el resultado en nuestro Local Host.


  4. Subimos los cambios a GitHub usando comandos de consola.
    • git add --all
    • git commit -m "incluimos estilos css"
    • git push
  5. Miramos los cambios en GitHub Pages https://financieras.github.io/JS_improve


  6. Miramos los cambios en Netlify https://calculadoraprima.netlify.app

 

Gracias la despliegue contínuo hemos conseguido que los cambios realizados de forma local en nuestro ordenador se suban, haciendo el push en git, tanto a GitHub Pages como a Netlify.

¡Una maravilla, esto del despliegue contínuo!

en
Etiquetas: , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)