Mostrando entradas con la etiqueta GitHub. Mostrar todas las entradas
Mostrando entradas con la etiqueta GitHub. Mostrar todas las entradas

jueves, 10 de junio de 2021

Flask en PythonAnywhere con despliegue continuo usando GitHub

Este es el tercer, y ultimo, artículo en una serie de tres que muestran cómo disponer de una aplicación sencilla de Flask en PyuthonAnywhere.

  1. Hola Mundo en PythonAnywhere con Flask
  2. PythonAnywhere subiendo una aplicación Flask desde GitHub
  3. Flask en PythonAnywhere con despliegue continuo usando GitHub ← (es el post en el que estamos)


Cambiando nombres seguiremos los pasos de la entrada:

PythonAnywhere subiendo una aplicación Flask desde GitHub

Lo que haremos en este caso es comenzar con una cuenta nueva en PyhthonAnywhere denominada universo que nos permitirá desplegar la página web:

https://universo.pythonanywhere.com

El objetivo es emplear una cuenta gratuita de PythonAnywhere y desplegar una aplicación web en Flask manteniendo nuestro repositorio en GitHub, usando despliegue continuo.

El flujo de trabajo será el siguiente.

Visual Studio Code (local ) → GitHub  → PythonAnywhere

Referencias

Paso 1

Vamos a crear un nuevo repositorio en GitHub con un 'Hola mundo' en Flask.

Se llamará flaskanywhere.

https://github.com/financieras/flaskanywhere

Si al crear el repositorio no se indica que se añadirán los ficheros readme, licencia y gitignore, GitHub nos ofrece una pantalla con ayuda para comenzar a trabajar con git. En esa página vemos una serie de instrucciones de git para subir los archivos.


Reproducimos el código sugerido en la imagen anterior.

  • Crear un nuevo repositorio en la línea de comandos.
echo "# flaskanywhere" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/financieras/flaskanywhere.git
git push -u origin main
  • Enviar un repositorio existente desde la línea de comandos.
git remote add origin https://github.com/financieras/flaskanywhere.git
git branch -M main
git push -u origin main

Paso 2

Podemos "enviar" (push) nuestro código a GitHub, y luego "tirarlo" (pull) a PythonAnywhere, o enviarlo desde PythonAnywhere hacia GitHub.

En PythonAnywhere, usaremos una Consola Bash y así podremos acceder a git y clonar nuestro repositorio, pudiendo luego hacer push (enviar, empujar) y pull (tirar, traer).

Veamos el código que queremos subir a GitHub.

El archivo se llamará app.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from flask import Flask, request
from flask.wrappers import Response
import git

app = Flask(__name__)

@app.route('/git_update', methods=['POST'])
def git_update():
  repo = git.Repo('./flaskanywhere')
  origin = repo.remotes.origin
  repo.create_head('main', 
  origin.refs.main).set_tracking_branch(origin.refs.main).checkout()
  origin.pull()
  return '', 200

@app.route('/')
def hello():
  return '<h1>Hello from Flask</h1><p>Continuous Deployment.</p>'

En la línea

  repo = git.Repo('./flaskanywhere')

no olvide sustituir flaskanywhere por el nombre de su repositorio.

Crearemos un entorno virtual.

El archivo anterior app.py ha sido creado en VSCode y subido a GitHub. Para ello, cambiando los nombres necesarios, seguiremos los pasos de la entrada:


En PythonAnywhere nuestro nombre de dominio que estaba disponible es universo.

Paso 3

Creamos la cuenta universo en PythonAnywhere.














Activamos el protocolo SSH para tener página https.




Veamos a seleccionar la:
 WSGI configuration file: /var/www/universo_pythonanywhere_com_wsgi.py


Vemos que la ruta (path) está correcta y que el nombre de la aplicación es app.



Clonamos nuestro repositorio desde una terminal Bash, desde PythonAnywhere

git clone https://github.com/financieras/flaskanywhere.git
Cambiamos la ruta Source code añadiendo al final flaskanywhere.


Editamos el archivo:

WSGI configuration file:/var/www/universo_pythonanywhere_com_wsgi.py

para que en la línea 11 contenga la ruta actualizada.

project_home = '/home/universo/flaskanywhere'


Recargamos, pulsando el botón verde, y mostramos la página.



Hagamos un ligero cambio en nuestro código de la aplicación Flask. Pondremos el texto en español.




Pulsando el botón verde de recarga y actualizando la página ya vemos los cambios.



En este momento ya hemos conseguido automatizar el proceso más allá de lo que quedó descrito en el post anterior, ya que gracias al Webhook y al nuevo código del archivo app.py ya hemos conseguido despliegue contínuo.

Ahora nos gustaría que no fuera necesario recargar la página pulsando el botón verde, y que la página se recargara sola al subir los cambios desde nuestro Visual Studio Code.

Recarga automática

En la consola Bash de PythonAnywhere introducimos los siguientes comandos estando en el directorio correspondiente.

En nuestro caso, estamos en flaskanywhere/.git/hooks


cat>post-merge
touch /var/www/universo_pythonanywhere_com_wsgi.py

Después de introducir este código en la consola pulsamos Control+C

Podemos consultar si se ha creado correctamente el archivo post-merge.

cat post-merge

Otra forma de consultarlo consiste en ir a la página de PythonAnywhere y mirar el archivo con post-merge que estará en la ruta que se muestra en la siguiente imagen.



La siguiente imagen muestra los comando introducidos en la consola Bash de PythonAnywhere.


El último comando da permisos de ejecución al archivo creado.
chmod +x post-merge

Finalmente hacemos algún cambio más en en código Flask, en nuestro Visual Studio Code. Se suben los cambios a GitHub y sin necesidad de hacer nada más ya tendremos nuestras modificaciones en la web. Simplemente actualizando la página ya veremos los cambios.



En el artículo de Medium que hemos utilizado también se habla de la seguridad, por si quieres implementarla, si bien, al tratarse de una cuenta gratuita en PythonAnywhere ya existen sistemas que interrumpirán el servicio de la página en caso de sobrepasarse el uso de la CPU.

¿Cuál es el siguiente paso?

Lo siguiente es poder desarrollar páginas web en Flask más complejas usando Templates y usando Jinja2.

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!