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.
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.
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":
Aparecerá una nueva ventana como esta:
En esta nueva ventana, solo tienes que escribir el siguiente comando:
pip install django
Al terminar la instalación la pantalla se verá así.
La instalación terminó correctamente, podemos confirmarlo escribiendo en la terminal lo siguiente:
django-admin
debería aparecer algo como esto:
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:
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.
¡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.
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.
Y dentro de la carpeta "todo" deberías ver algo como esto:
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)
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)
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')
]
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 HttpResponse
de 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')
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
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')
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
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>
Abre tu terminal y entra a myapp.
cd myapp
y escribe lo siguiente:
python manage.py runserver
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.
Obtendremos un error, porque necesitamos ejecutar antes, lo siguiente.python manage.py migrate
Ahora sí, ejecuta.
python manage.py createsuperuser
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
.
Ingresa tus datos y se mostrará un panel de administración:
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
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:
Esto quiere decir que creamos una tabla Post en nuestra base de datos.
ahora ejecuta python manage.py migrate
y nos mostrara lo siguiente:
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)
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
Da clic en Post.
Da clic en Add Post+
y podrás crear un post.
En este ejemplo se creó el post "Primer Post"
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)
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 %}
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
Funciona, agreguemos otro post para confirmar.
Y el resultado debería ser el siguiente.
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.