Artículo original escrito por Precious Oladele
Artículo original How to Build a Web App on Your Phone – Python & Pydroid Android App Tutorial
Traducido y adaptado por Franciscomelov

Hola, ¿cómo estás? Tengo 18 años, soy desarrollador Backend y aspirante a ingeniero en aprendizaje automático, y en este artículo escribiré, como crear una aplicación web en tu celular con Python 😁. Manos a la obra.

TW_PdXBpgeWY4mLcHjFisp8e7Lk7Zsn1aFarXBkmvhEMP0XR5xzTDxhKcCizsrJ25rkPeMeWp7ctlG0Wy7_WFUS0bzT-JVJfpe6X_3OqnuE_df2q5B3KIrhl3EG47w3Dik3nIZE

Requisitos

Lo primero que necesitamos es un celular con Android versión 6.0 en adelante.
¿Me creerías si te digo que eso es todo lo que necesitaremos? Parece ser demasiado bueno para ser verdad.

Lo primero que haremos es instalar una aplicación en tu celular llamada pydroid3.

fwM9r46B-sTofVF6IybUOhCTYoM8vSAPfumfBIiiL_wWLQpgdQgeR2B_2-N28NtNLaA7HvTtsZxlXdX03anCGvbt4QAlhQ_wyb9_AIfqG9L4ZMCjQOrKLg5OFPeZgKrJdqKEeb8

Como puedes ver, pydroid3 es una aplicación móvil que te permite programar con Python desde tu celular.

Lo siguiente que necesitamos, es instalar Django. Si no estás familiarizado con Django, puedes leer la Documentación de Django aquí.

Para instalar Django, abre la barra lateral de navegación en pydroid3 y selecciona "Terminal":

qO3djIyoXMZB8MzcIaFDmNddhB2t9XgLLgCzonR2CDkWJc0pXtap9gyGhqZfpv0uFCCvtYnynL6pAOfgactlDfpwoy03TfgqEoN2W_gAO7nOeoaLbySZEQkOSBuprhs67jc-Ens

Aparecerá una nueva ventana como esta:

1

En esta nueva ventana, solo tienes que escribir el siguiente comando:

pip install django

Al terminar la instalación la pantalla se verá así.

Screenshot_20210907-110047-1

La instalación terminó correctamente, podemos confirmarlo escribiendo en la terminal lo siguiente:
django-admin  

debería aparecer algo como esto:

2

Esto significa que Django está instalado en tu dispositivo.

Como construir nuestra aplicación.

Es hora de construir nuestro proyecto.
Abre la terminal y escribe el siguiente comando:

django-admin startproject myapp

Esto crea un proyecto en Django llamado myapp en tu carpeta raíz.

Cambia de directorio escribiendocd myapp. Con esto entrarás a la carpeta myapp. Ahora escribe python manage.py runserver

Y debería aparecer lo siguiente:

3

Con esto el servidor se inicializó.


Ahora, para probarlo en tu navegador ingresa a esta dirección 127.0.0.1:8000 desde tu teléfono.

oqMFGPasUPLxuZoRqWHQ9mEhpitsg2XK8XPzLz_U-TvnFGzjkIaHVKUHXxwYkMDskLp_36F75BIAb-qv37bHccUESSZ9Jqa6XV7FGoWYk_IS8SfPYZfMTSNmo2ei-SMVa9cp_C8

¡Y listo! Si ves esta pantalla Django se configuró correctamente.

Lo siguiente que debemos hacer es crear una aplicación Django. Aun estando en myapp.

Recuerda así entramos a myapp.

Screenshot_20210907-111931-1

Escribe lo siguiente python manage.py startapp todo. Esto crea una aplicación "todo" en el proyecto myapp.

Esto es lo que ves dentro de la carpeta myapp.

4

Y dentro de la carpeta "todo" deberías ver algo como esto:

5

Más adelante veremos los archivos y carpetas creadas, pero siéntete libre de revisar por tu cuenta, mientras no edites nada, todo seguirá funcionando perfectamente.

En Django el proyecto (django-admin startproject myapp) funciona como directoria raíz, mientras que la aplicación (python manage.py startapp todo)  es la aplicación en sí.

Configurando nuestra aplicación

Ahora haremos que Django funcione como servidor para nuestra aplicación.
Primero:
Abre el archivo settings.py(dentro de la carpeta myapp/myapp)  y añade 'todo' a INSTALLED_APP (Aplicaciones instaladas) y guardamos.

(la imagen y tu archivo deberían ser iguales, se añadió línea 42)

mxTcaRk-ON73sPH6XL31kvZmUJjfwn1knbhMgTJALeyx6l8A1umvtXjLazS34oTjbPZeivGGTe6w6zsEQ1QzhTjaYDJ5tHsbhpeyxAfrvABzGHrNsElcv7RR9kQZi_Tttt4PjIc

Después, abrimos urls.py dentro de myapp/myapp y añadimos el siguiente código:

from django.urls import path, include

path('', include('todo.urls'))

Se modificó la línea 17 y se agregó la línea 21.
(la imagen y tu archivo deberán ser iguales)

6

Lo que hicimos fue añadir ,include a  from django.urls import path. Y debajo de path(admin), creamos una ruta vacía que incluye el archivo urls.py de la carpeta "todo". Espero y haya sido claro.

Ahora crearemos un nuevo archivo en la carpeta "todo" y lo llamaremos urls.py y añadimos el siguiente código:

from django.urls import path
from . import views

urlpatterns = [
	path('', views.index, name='home')
 ]
7

Aquí importamos path de Django.urls e importamos views de nuestra carpeta raíz. Después creamos urlpatterns.  La primera parte es la dirección raíz (las comillas vacías) y como puedes ver views.index solo significa que estamos llamando la función  index del archivo views.py

Ahora vallamos al archivo views.py (myapp/todo)

Importamos HttpResponsede esta forma:


from django.http import HttpResponse (línea 2)

y después añadimos lo siguiente: (línea 6 y 7)

def index(request):
	return HttpResponse('Hello')
    
8

Como puedes ver, creamos la función index  que llamamos en urls.py , pasamos el parámetro request y retornamos HttpResponse.

Para que  HttpResponse pueda funcionar, tenemos que importarlo con django.http import HttpResponse (línea 2).

Hagamos una prueba de lo que llevamos hasta ahora:

Abre tu terminal y entra a myapp.
cd myapp

y escribe lo siguiente:
python manage.py runserver

9

Como puedes ver tenemos lo que retorna la función index.
(HttpResponse("Hello")). Ahora cargaremos nuestra plantilla HTML y sus archivos.

Para cargar los archivos HTML, crearemos dos carpetas de la siguiente forma:

todo/templates/todo

Dentro de la carpeta todo creamos la carpeta templates y dentro de esta, creamos otra carpeta todo

Ahora creamos un archivo HTML dentro de la última carpeta todo llamado index.html y escribiremos el siguiente código:

<h1>Hello world</h1>

Para cargar index.html modifica la función index en el archivo views.py de la siguiente forma:

def index(request):
	return render(request, 'todo/index.html')
10

Ahora en lugar de retornar  HttpREsponse("Hello") retorna render() que nos permite visualizar la plantilla HTML (index.html).

Para probar nuestras modificaciones, abre tu terminal y entra a my app.

cd myapp

y escribe lo siguiente:

python manage.py runserver

1-1

Si ves la pantalla anterior vamos por buen camino.

Configurando los archivos estáticos.

Ahora crea una carpeta en todo llamada static y dentro de esta otra carpeta todo.

Se verá de esta forma: todo/static/todo/.

En la carpeta todo crea un archivo main.css con el siguiente código:

body {
background-color: red;
}

Ahora editaremos el archivo index.html añadiendo el siguiente código:

{% load static %}
<!Doctype html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="{% static 'todo/main.css' %}" >
</head>
<body>
Hello
</body>
</html>
2-1

Abre tu terminal y entra a myapp.

cd myapp  

y escribe lo siguiente:

python manage.py runserver

3-1

Si todo está bien deberías ver la pantalla anterior.

Como cargar los modelos de  Django y panel de administración

Para cargar el panel de administración, necesitamos crear un superuser (superusuario) de la siguiente forma.

Abre la terminal e ingresa lo siguiente

cd myapp

Después python manage.py createsuperuser y enter.

PBTNq4SLyU4xMFsxh8wXuP0fUCnNKqL0zPiAqclNSPc4J7j4izPVgikXXQpaPqcPeSfFhrlQgf2xwyuhWz-s4RJWn1ftc5icsi9bt2QwmjKxjp3reecfmCxQ3GdVvE04HUAc8po

Obtendremos un error, porque necesitamos ejecutar antes, lo siguiente.
python manage.py migrate

4-1

Ahora sí, ejecuta.

python manage.py createsuperuser

5-1

Solo ingresa los datos que pide para crear un usuario y listo. Aun dentro de cd myapp ingresa la instrucción.

python manage.py runserver

Ahora ve a la siguiente página 127.0.0.1:8000/admin.

6-1

Ingresa tus datos y se mostrará un panel de administración:

7-1

Ahora que tenemos un panel de administración, trabajaremos con un modelo de Django (una base de datos de Django). Crearemos un modelo de Django donde podremos guardar datos.

Crearemos un modelo de Django que guardara la información que ingresemos.

Abre el archivo models.py  e ingresa este código.

class Post(models.Model):
	content = models.CharField(max_length=255, null=False)
    
    def __str__(self):
    	return self.content
8-1

Creamos una clase con un parámetro models.Model, una variable content y un CharField() (espacio para texto). Finalmente creamos un método __str__ que retorna el nombre del modelo de Django en lugar de un objeto en sí.

Ahora ejecutamos el comando de migración.
En la terminal cd myapp y después python manage.py makemigrations. Y deberás ver algo como esto:

9-1

Esto quiere decir que creamos una tabla Post en nuestra base de datos.
ahora ejecuta python manage.py migrate y nos mostrara lo siguiente:

1-2

Si tu resultado fue el de arriba todo está bien. Ahora añadiremos la tabla Post al administrador.

Abre  admin.py y escribe este código:

from .models import *

admin.site.register(Post)
2-2

Aquí importamos todas las clases de .models y registramos la tabla "Post" en el panel de administración. Ahora, si abrimos el panel en el navegador veremos Post y podrás guardar información.

cd myapp
python manage.py runserver

3-3

Da clic en Post.

4-2

Da clic en Add Post+ y podrás crear un post.


En este ejemplo se creó el post "Primer Post"

1

Como mostrar datos de la base de datos.

Por último extraeremos nuestros datos de la base de datos. Para esto, modificaremos nuestro archivo views.py añadiendo el siguiente código:

from .models import *

def index(request):
	content = Post.objects.all()
    context = {'content': content}
    return render(request, 'todo/index.html', context)
5-2

Importamos todo el contenido de models.py, creamos una variable llamada content, y extraemos todos los datos de la tabla  Post, después pasamos content dentro de un diccionario a render().

Ahora añadiremos el siguiente código a  index.html para que podamos mostrar esta información.
(línea 9, 10, 11, 12)

{% for contents in content %}
{{contents.content}}
{% endfor %}
7-2

Aquí creamos un bucle for usando "template tags" y extraemos todos los datos de content.

Ahora abre tu terminal  ejecuta y entra nuevamente a tu página:

cd myapp
python manage.py runserver

2

Funciona, agreguemos otro post para confirmar.

1
2-1

Y el resultado debería ser el siguiente.

3

Violà – Funciona perfectamente. Ahora puedes añadir un salto de línea <br> para poder visualizar con mayor claridad los post. ¡Y listo!

Gracias por leer. Si quieres ver un tutorial donde explicaré Django más a fondo puedes entrar a mi canal de YouTube Devstack y subscribirte.