Diseño Electrónico: Tu Primer Página Web con Python3, Flask, Bootstrap

Tu Primer Página Web con Python3 con Flask

https://www.youtube.com/watch?v=fxavwHPJ36o

Estoy estudiando y escribiendo algo del video:

- Flask es más liviano que Django

- Para este ejemplo sencillo se hace con Flask

-Abro cmd

-----------------------------------------

python --version

pip --version

cls o clear

pip install flask

-----------------------------------------

En un editor hago el siguiente archivo:

Creao una careta para la aplicación: python-website

index.py

-----------------------------------------

from flask import Flask

app=Flask(__name__)

@app.route('/') #Ruta para la pagina principal

def home():

return 'Hello World'

#Para que la aplicación se mantenga escuchando siempre (esto lo haria el servidor)

#En este caso ponemos la aplicacion a escuchar

if __name__ == '__main__':

app.run()

-----------------------------------------

//////////////////////////////////////////////////////////////////////////////////////////

-Abro cmd y me ubico en la carpeta que tengo la aplicación

python-website

desde esa carpeta ejecuto index.py

python index.py

En un navegador escribo:

127.0.0.1:5000

En el navegador Sale: Hello World

También se podia escribir

localhost:5000

//////////////////////////////////////////////////////////////////////////////////////////

Creamos otra ruta, por ejemplo about

-----------------------------------------

from flask import Flask

app=Flask(__name__)

@app.route('/') #Ruta para la pagina principal

def home():

return 'Home Page' #aqui cambiamos el Hello world por Home Page

#Otra Ruta

@app.route('/about')

def about():

return 'About Page'

#Para que la aplicación se mantenga escuchando siempre (esto lo haria el servidor)

#En este caso ponemos la aplicacion a escuchar

if __name__ == '__main__':

app.run()

-----------------------------------------

//////////////////////////////////////////////////////////////////////////////////////////

Para ejecutar de nuevo, debemos cancelar el servidor que estaba corriendo

ctrl+c

y volverlo a ejecutar, para ver el cambio de "Hello World" a "Home Page"

python index.py

Otra vez vamos al navegador

localhost:5000

Aparece Home Page

Ahora escribimos en el navegador:

localhost:5000/about

Aparece: About Page

//////////////////////////////////////////////////////////////////////////////////////////

La idea es retornar html y no solo texto

Ahora creamos html personalizados en una carpeta, por lo general

en Flask esa carpeta se le llama templates

Creamos una carpeta templates

Creamos dentro de la carpeta templates un archivo:

home.html

para hacer eso debemos importar otro método desde flask llamado render_template

-----------------------------------------

from flask import Flask, render_template

app=Flask(__name__)

@app.route('/') #Ruta para la pagina principal

def home():

return render_template('home.html')

#Otra Ruta

@app.route('/about')

def about():

return 'About Page'

#Para que la aplicación se mantenga escuchando siempre (esto lo haria el servidor)

#En este caso ponemos la aplicacion a escuchar

if __name__ == '__main__':

app.run()

-----------------------------------------

Debemos crear algo simple para empezar en:

home.html

-----------------------------------------

<h1> Hello World </h1>

-----------------------------------------

//////////////////////////////////////////////////////////////////////////////////////////

Debemos tumbar el servidor que esta corriendo en CMD, ya que hemos hecho cambios:

ctrl+c

Volverlo a ejecutar:

python index.py

Vamos a la página en el navegador:

localhost:5000

Vemos: Hello World

Si damos Click derecho ver código vemos: <h1> Hello World </h1>

//////////////////////////////////////////////////////////////////////////////////////////

Crear una plantilla de html

En visual studio code escribir: html:5

y da una plantilla y además autocompleta lenguaje html

En otros editores como sublime text, se debe instalar un complemento llado EMMET

dentro de Title: Mi primer sitio Web

dentro de Body: Hello World

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web</title>

</head>

<body>

Hello World

</body>

</html>

//////////////////////////////////////////////////////////////////////////////////////////

Debemos tumbar el servidor que esta corriendo en CMD, ya que hemos hecho cambios:

ctrl+c

Volverlo a ejecutar:

python index.py

Vamos a la página en el navegador:

localhost:5000

Vemos: Hello World, y en el título Mi primer sitio Web

Si damos Click derecho ver código vemos:

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web</title>

</head>

<body>

Hello World

</body>

</html>

//////////////////////////////////////////////////////////////////////////////////////////

Para no estar reiniciando el servidor,

se debe agregar la opción DEBUG

La idea es que la aplicación este en modo de prueba mientras estamos desarrollando

-----------------------------------------

from flask import Flask, render_template

app=Flask(__name__)

@app.route('/') #Ruta para la pagina principal

def home():

return render_template('home.html')

#Otra Ruta

@app.route('/about')

def about():

return 'About Page'

#Para que la aplicación se mantenga escuchando siempre (esto lo haria el servidor)

#En este caso ponemos la aplicacion a escuchar

if __name__ == '__main__':

app.run(debug=True) #aplicación en modo de prueba

-----------------------------------------

Debemos tumbar el servidor, esta será la última vez que hagamos esto

que esta corriendo en CMD, ya que hemos hecho cambios:

ctrl+c

Lo volvemos a ejecutar

python index.py

Ahora dice:

Debug mode on

//////////////////////////////////////////////////////////////////////////////////////////

Ahora creamos un

about.hmtl

-----------------------------------------

<h1> About </h1>

-----------------------------------------

Edito el index.py:

-----------------------------------------

from flask import Flask, render_template

app=Flask(__name__)

@app.route('/') #Ruta para la pagina principal

def home():

return render_template('home.html')

#Otra Ruta

@app.route('/about')

def about():

return render_template('about.html')

#Para que la aplicación se mantenga escuchando siempre (esto lo haria el servidor)

#En este caso ponemos la aplicacion a escuchar

if __name__ == '__main__':

app.run(debug=True) #aplicación en modo de prueba

-----------------------------------------

Voy al navegador y escribo (recordar si algo refrescar):

localhost:5000/about

Obtengo: About

//////////////////////////////////////////////////////////////////////////////////////////

Voy en el minuto 18:30 del video https://www.youtube.com/watch?v=fxavwHPJ36o

despues continuo, tengo algunas cosas por hacer

----------------------------------------

Vuelvo 25 de diciembre de 2020

//////////////////////////////////////////////////////////////////////////////////////////

Ahora Estilizamos los Estilos

Aplicando CSS

Creamos una Carpeta:

static

En esta carpeta van los archivos css y js

Dentro de static creamos otra carpeta css:

static/css

Creamos un archivo para pruebas:

main.css

Para probar creamos un bacground negro en main.css:

body{

background: #0000;

}

Ahora para llamar el archivo dentro del html, con llaves {{}} ya que python sabe donde esta esa carpeta /static/css, python usa la función url_for, ojo con las comillas deben ser simples para que no interfieran con las comillas dobles " para html:

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web con Python</title>

</head>

<body>

Hello World

</body>

</html>

Vamos a un navegador:

localhost:5000

Todo se ve en negro, sin embargo si seleccionamos vemos que el texto seleccionado sale blanco

Cambiamos el tipo de letra a blanco en main.css:

body{

background: #0000;

color: #ffff;

}

Vamos a un navegador:

localhost:5000

Refrescamos y vemos el texo Hello World

//////////////////////////////////////////////////////////////////////////////////////////

Trabajando con un Framework de CSS

Bootstrap

Existen otros Frameworks para estilizar las páginas como: Materilize, Bulma

Vamos a la página

https://getbootstrap.com/

Este Framework da estilos para no crearlos desde cero, y hacer el trabajo más rapidamente

Para utilizar Bootstrap, vas a la página y le das click al botón: Get Started

Allí nos lleva a una CDN, la cual es una dirección de internet para que nuestra aplicación vaya por los estilos

Copiamos y pegamos en nuestro html lo pegamos debajo del título (title) tal cual, pero antes agregamos un Comentario Bootstrap 5, y despues Custom CSS:

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web con Python</title>

</head>

<body>

Hello World

</body>

</html>

Vamos a un navegador:

localhost:5000

El tipo de letra cambio ya que reconocio a Bootstrap

//////////////////////////////////////////////////////////////////////////////////////////

Adicionar componentes de Bootstrap

Adicionamos componentes para la navegación.

En la página de Bootstrap vamos a Components, vamos a utilizar unas navagaciones. Vamos a NavBar

Copiamos una sencilla:

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Esto lo pegamos justo arriba de nuestro Hello World

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web con Python</title>

</head>

<body>

<!-- As a link -->

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Hello World

</body>

</html>

Vamos a un navegador:

localhost:5000

Borramos el contenido de main.css:

Vamos a un navegador:

localhost:5000

//////////////////////////////////////////////////////////////////////////////////////////

Adicionar Elementos a la barra de Navegación de Bootstrap

Reemplazamos la navegación anterior por una más elaborada

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Al código anterior editarlo:

Título Python Web App, solo dejamo dos li

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web con Python</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">
    <a class="navbar-brand" href="#">Python Web App</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{url_for('about')}}">About</a>
        </li>

      </ul>
    </div>
  </div>
</nav>

Hello World

</body>

</html>

Vamos a un navegador:

localhost:5000

En click en About, no saca la barra de navegación

//////////////////////////////////////////////////////////////////////////////////////////

Como construir un Layout para nuestras aplicaciones

Reutilizar Navegación en varios html, por ejhemplo about

Motores de plantilla

En template creo: layout.html, para copiar todo el código que se va a reutilizar

- Cabecera

- Navegación

Lo unico que cambia entre páginas es el contenido

Para ello debemo adicionar en el contenido de layout.html:

{% block content %}

{% end block %}

layout.html

-----------------------------------------

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web con Python</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">
    <a class="navbar-brand" href="#">Python Web App</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{url_for('about')}}">About</a>
        </li>

      </ul>
    </div>
  </div>
</nav>

{% block content %}

{% endblock %}

</body>

</html>

//////////////////////////////////////////////////////////////////////////////////////////

Como utilizar un Layout en nuestras aplicaciones

Editamos: home.html y about.html

home.html

-----------------------------------------

{% extends "layout.html" %}

{% block content %}

<h1> Hello World </h1>

{% endblock %}

-----------------------------------------

about.html

-----------------------------------------

{% extends "layout.html" %}

{% block content %}

<h1> About </h1>

{% endblock %}

-----------------------------------------

Vamos a un navegador:

localhost:5000

Se puede ensayar: localhost:5000/about.html

Se ven los mismos estilos para los bloques de contenido

//////////////////////////////////////////////////////////////////////////////////////////

Hacer un jumbotron para la página de Bienvenida

Vamos a la página de Boostrap y de los componentes traer:

<h1 class="display-4">Hello, world!</h1>

<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>

<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

</p>

</div>

Editamos: home.html

home.html

-----------------------------------------

{% extends "layout.html" %}

{% block content %}

<h1 class="display-4">Hello, world!</h1>

<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>

<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>

</p>

</div>

{% endblock %}

-----------------------------------------

Vamos a un navegador:

localhost:5000

Como el contenido de home se ve del tamaño de toda la página debemos crear un contenedor

//////////////////////////////////////////////////////////////////////////////////////////

Crear un container centrado para todos los contenidos

Vamos a la página de Boostrap y de los componentes traer:

Editamos: layout.html

layout.html

-----------------------------------------

<!DOCTYPE html>

<head>

<title>Mi primer sitio Web con Python</title>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <div class="container-fluid">
    <a class="navbar-brand" href="#">Python Web App</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{url_for('about')}}">About</a>
        </li>

      </ul>
    </div>
  </div>
</nav>

{% block content %}

{% endblock %}

</div>

</body>

</html>

-----------------------------------------

Vamos a un navegador:

localhost:5000

Vemos que cuando vamos a home el contenido esta centrado

Editamos layout.html:

...

{% block content %}

{% endblock %}

</div>

...

Vamos a un navegador:

localhost:5000

//////////////////////////////////////////////////////////////////////////////////////////

Crear un color de fondo para la aplicación

Editamos main.css

Buscamos un color degradado en uigradiens.com

https://uigradients.com/#BacktotheFuture

Escogemos uno y le damos "Get Css", lo copiamos

background: #373B44; /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #4286f4, #373B44); /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Lo pegamos dentro de un body en main.css

main.css

-----------------------------------------

body{

background: #373B44; /* fallback for old browsers */

background: -webkit-linear-gradient(to right, #4286f4, #373B44); /* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to right, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

-----------------------------------------

Vamos a un navegador:

localhost:5000

Ya se puede ver que tenemos un color para el fondo

//////////////////////////////////////////////////////////////////////////////////////////

Crear una carpeta de Fuentes para luego montar la aplicación desarrollada en un servidor

- Creamos una carpeta src y copiamos allí todos los archivos y carpetas del proyecto

- Utilizar un entorno virtual

- Abrir la consola

- Tumbo el servidor de flask

- Llamo el entorno virtual de Python

- Instalo el paquete:

pip install virtualenv

- Creamos el entorno virtual y le damos un nombre virtualenvironmnet

en la consola: python -m venv virtualenvitonment

- Crea una carpeta virtualenvironment

- Debemos ir a /Scripts alli debemos utiilizar el propio pi de ese entorno virtual

pip install flask

- Desde el entorno virtual ejecuto el proyecto: python ../../src/index.py

- Vamos a un navegador:

localhost:5000

- Vemos que esta funcinando la aplicación en el entorno virtual

//////////////////////////////////////////////////////////////////////////////////////////

Montar la aplicación desarrollada en HEROKU

Heroku es profesional y costoso pero permite montar aplicaciones de prueba

- Logearnos con una cuenta

- Crear desde New o desde consola, instalamos la app para conectar desde consola

- Debemos instalar la aplicación Heroku Cli

- Abrir una consola de nuestro equipo CMD y verificar: heroku --version

- En la consola: heroku login

- Creamos la aplicación desde la consola

- Ir a la carpeta del proyecto: python-website

- Preparar para subir a heroku, para ello creo un archivo requirements.txt

- runtime.txt informa que version de python utilizo

- cd ..../virtualenvitonment/Sripts

- Instalo complemento gunicorn

- Creo Procfile:

web: gunicorn index:app

desde aca se inicia la aplicacion en heroku

- runtime.txt

python-3.7.1

Debo buscar la version python --version

- requierements.txt

pip freeze > ../../requirements.txt

- Crear un repositorio de git

https://git-scm.com/

- Instalar git

- En consola digitar:

git -version

- Mirar la configuración de usuario y correo:

git config --list

- Navegar dentro de la carpeta src

- Crea un repositorio de git:

git init

- Alistar los archivos para subir (git add punto)

git add .

- git status

verde es que ya estan preparados

- git commit -m "First commit"

- Crear una aplicación de Heroku llamada python-test

en consola

heroku create python-test3

sino le doy nombre heroku genera un nombre aleatorio

heroku a analiza si los nombres estan tomados

en el video la app se llama:

enigmatic-citadel-45790

Los enlaces fueron:

https://enigmatic-citadel-45790.herokuapp.com

https://git.heroku.com/enigmatic-citadel-45790.git

- Enlazar la aplicación de heroku con el git

vamos a la pagina de heroku y muestra como enlazar

- Consola

heroku git:remote enigmatic-citadel-45790

- Consola

git push heroku master

Esto empieza a subir toda la aplcacion e instalar las dependencias

- Como abrir nuestra aplicación, hay dos formas:

desde conola: heroku open

o el enlace

https://enigmatic-citadel-45790.herokuapp.com

Acá ya se despliega en el navegador la aplicación Web desarrollada

Se puede comprar un dominio y enlazarlo a la aplicación de python creada.

//////////////////////////////////////////////////////////////////////////////////////////

Diseño Electrónico

lunes, 21 de diciembre de 2020

Tu Primer Página Web con Python3, Flask, Bootstrap

1 comentario: