lunes, 21 de diciembre de 2020

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

 Tu Primer Página Web con Python3 con Flask


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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer sitio Web con Python</title>
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</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

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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer sitio Web con Python</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"                     rel="stylesheet"  integrity="sha384-                                                                giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"             crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer sitio Web con Python</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"                     rel="stylesheet"  integrity="sha384-                                                                giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"             crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer sitio Web con Python</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"                     rel="stylesheet"  integrity="sha384-                                                                giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"             crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer sitio Web con Python</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"                     rel="stylesheet"  integrity="sha384-                                                                giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"             crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</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:

<div class="jumbotron">
  <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>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <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 %}

<div class="jumbotron">
  <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>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer sitio Web con Python</title>
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"                     rel="stylesheet"  integrity="sha384-                                                                giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"             crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
</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>
<div class="container">
    {% 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:
...
<div class="container p-4">
    {% 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

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

- 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.
//////////////////////////////////////////////////////////////////////////////////////////




1 comentario: