Article original : How to Build a Web App on Your Phone – Python & Pydroid Android App Tutorial
Par Precious Oladele
Salut, comment ça va ? Je suis un développeur backend de 18 ans et un aspirant ingénieur en Machine Learning. Et dans cet article, je vais écrire sur comment créer une application web sur votre téléphone en utilisant Python 😁. Plongeons-nous dedans.
Conditions requises
La première chose dont nous avons besoin ici est un téléphone Android, au moins la version 6.0 et supérieure. Mais que diriez-vous si je vous disais que c'est tout ce dont nous avons besoin ? Cela semble trop beau pour être vrai.
Maintenant, la prochaine chose à faire est d'installer une application mobile sur notre téléphone appelée pydroid3.
Comme vous pouvez le voir, pydroid3 est une application mobile qui vous permet d'écrire du Python sur votre téléphone portable, alors allez-y et installez-la.
La prochaine chose à faire est d'installer Django. Si vous n'êtes pas familier avec Django, veuillez consulter la documentation de Django ici.
Pour installer Django, nous devons ouvrir la navigation latérale dans notre pydroid3 et sélectionner Terminal :
Ensuite, cliquez dessus et nous devrions voir ceci :
Une fois cela fait, tout ce que vous avez à faire est de taper la commande suivante :
pip install django
Et vous devriez obtenir ce qui suit. Je reçois un message "requirements satisfied" parce que je l'ai déjà installé.
Il est installé avec succès, mais confirmons cela. Dans le terminal, tapez django-admin et appuyez sur Entrée.
Vous devriez obtenir ceci :
Cela signifie qu'il est réellement installé.
Comment construire notre projet
Alors commençons à construire notre projet. Ouvrez votre terminal et tapez la commande suivante :
django-admin startproject myapp
Cela crée une application Django appelée myapp dans votre dossier racine.
Changez de répertoire en tapant cd myapp et tapez python manage.py runserver. Ensuite, vous devriez obtenir ceci :
Maintenant, le serveur a démarré. Ensuite, pour le tester dans le navigateur, visitez 127.0.0.1:8000.
Et voilà ! Vous devriez voir que Django a été configuré avec succès.
La prochaine chose à faire est de créer notre application Django. Dans Django, le dossier de projet sert de racine tandis que l'application sert d'application elle-même.
Pour créer une application Django, assurez-vous d'être toujours dans le répertoire, puis tapez python manage.py startapp todo. Cela crée une application To-do dans notre projet myapp comme ceci :
Ensuite, dans le dossier todo, nous devrions voir quelque chose comme ceci :
Nous examinerons plus en détail les fichiers lorsque nous commencerons à travailler avec eux.
Comment configurer notre application
Maintenant, rendons possible que l'application soit servie par le projet Django. Tout d'abord, ouvrez votre fichier settings.py dans le dossier myapp et ajoutez 'todo' aux applications installées comme ceci :
Ensuite, nous devons ouvrir notre urls.py et ajouter ce qui suit à votre code :
from django.urls import path, include
path('', include('todo.urls'))
Ce qui s'est réellement passé, c'est que j'ai ajouté include à l'importation de django.urls path. Et en dessous du path (admin), nous avons créé un path vide qui pointe vers ou inclut le fichier urls.py dans le répertoire de l'application todo. J'espère que c'est clair.
Ensuite, nous devons créer un nouveau fichier dans le répertoire de fichiers todo nommé urls.py et y ajouter le code suivant :
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='home')
]
Nous avons importé path de Django.urls et également importé views du répertoire racine. Ensuite, nous avons créé nos urlpatterns avec la première partie comme lien racine. Comme vous pouvez le voir, views.index signifie simplement que nous pointons cette vue vers la fonction index dans le fichier views.py. Vous verrez comment cela fonctionne en un clin d'œil.
Passons à notre fichier views.py et ajoutons du code.
En haut, importez HttpResponse comme ceci :
from django.http import HttpResponse
Et ajoutez ceci en dessous :
def index(request):
return HttpResponse('Hello')
Comme vous pouvez le voir, nous avons créé la fonction index que nous avons appelée dans notre urls.py et nous avons passé un paramètre de requête dedans. Ensuite, nous avons retourné un HttpResponse.
Mais avant que le HttpResponse puisse fonctionner, nous devons l'importer de django.http import HttpResponse – aussi simple que ABC. Essayons ceci : ouvrez votre terminal, cd dans myapp et tapez python manage.py runserver pour le tester.
Comme vous pouvez le voir, il a retourné la réponse. Donc ensuite, nous allons charger nos fichiers de modèle HTML.
Pour charger nos fichiers HTML, nous devons créer un dossier comme ceci dans le répertoire todo dans cet ordre :
todo/templates/todo
Dans le répertoire todo, créez un dossier appelé templates. À l'intérieur de ce dossier, créez un dossier appelé todo, aussi simple que cela.
Ensuite, allez-y et créez un simple fichier HTML appelé index.html et écrivez ceci dedans :
<h1>Hello world</h1>
Pour le charger, faites en sorte que votre code views.py ressemble à ceci :
def index(request):
return render(request, 'todo/index.html')
Maintenant, au lieu de retourner une réponse, nous avons retourné une vue de rendu qui nous permet de rendre notre modèle HTML, sauvegardez ceci, ouvrez votre terminal, cd dans myapp et exécutez-le. Nous devrions avoir ceci
Comme vous pouvez le voir, cela fonctionne bien - passons à l'étape suivante.
Comment configurer les fichiers statiques
Maintenant, pour configurer les fichiers statiques, créez un nouveau dossier dans votre répertoire todo et nommez-le static. À l'intérieur de ce dossier, créez un dossier et nommez-le todo.
Donc, cela devrait être comme ceci : /static/todo/.
Dans le répertoire todo, créez un fichier et nommez-le main.css. Ensuite, écrivons un peu de style dedans :
body {
background-color: red;
}
Et sauvegardez-le.
Maintenant, rééditons notre fichier index.html en écrivant ce code :
{% load static %}
<!Doctype html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="{% static 'todo/main.css' %}" >
</head>
<body>
Hello
</body>
</html>
Et maintenant, exécutons-le :
Si vous avez suivi avec moi, alors vous devriez avoir ce qui précède.
Comment charger le panneau d'administration et les modèles
Maintenant, pour charger notre panneau d'administration, nous devons créer un superutilisateur. C'est simple à faire – il suffit d'ouvrir votre terminal et de vous rendre dans le dossier myapp, puis de taper python manage.py createsuperuser et d'appuyer sur Entrée. Vous devriez voir ceci :
Nous obtenons une erreur parce que nous n'avons pas encore exécuté python manage.py migrate. Alors tapez cela et appuyez sur Entrée, et vous devriez avoir quelque chose comme ceci :
Maintenant, tapez python manage.py createsuperuser et appuyez sur Entrée :
Il suffit de remplir les informations d'identification. La prochaine chose à faire est d'exécuter notre serveur et de pointer vers 127.0.0.1:8000/admin.
Connectez-vous et vous serez dirigé vers le tableau de bord :
Maintenant que nous avons fait le panneau d'administration, travaillons avec le modèle (base de données). Nous allons créer un modèle qui collecte des contenus. Alors ouvrez votre fichier models.py et tapez ce code :
class Post(models.Model):
content = models.CharField(max_length=255, null=False)
def __str__(self):
return self.content
Nous créons une classe qui a le paramètre models.Model et donne une variable content qui contient un CharField(), un peu comme un champ de texte. Enfin, nous créons une méthode magique str qui retourne le nom du modèle au lieu d'un objet.
Alors ensuite, nous devons exécuter la migration. Ouvrez votre terminal, cd dans myapp, et tapez python manage.py makemigrations. Vous devriez voir ceci :
Cela signifie qu'il a créé la table Post dans notre base de données. Ensuite, exécutez également python manage.py migrate ce qui donnera le résultat suivant :
Cela signifie que tout est clair. Maintenant, pour l'ajouter à la page d'administration, ouvrez admin.py et tapez ce code :
from .models import *
admin.site.register(Post)
Nous avons importé toutes les classes de modèle du modèle et enregistré le modèle de post dans le panneau d'administration. Maintenant, si nous ouvrons le panneau d'administration, nous devrions voir le post et sauvegarder certaines données.
Remarquez qu'il est maintenant dans la liste des applications todo :
Après avoir cliqué dessus, vous devriez voir ceci :
Ensuite, vous pouvez créer un post si vous le souhaitez.
Comment afficher les données de la base de données dans la vue
Enfin, nous allons récupérer nos données de la base de données. Pour ce faire, nous devons mettre à jour notre views.py comme suit :
from .models import *
def index(request):
content = Post.objects.all()
context = {'content': content}
return render(request, 'todo/index.html', context)
C'est aussi simple que cela : nous avons importé tout depuis models.py, créé une variable appelée content, et récupéré toutes les données de la table Post. Ensuite, nous les avons passées sous forme de dictionnaire à notre vue. Donc dans notre index.html pour que cela fonctionne, ajoutez simplement ceci :
{% for contents in content %}
{{content.content}}
{% endfor %}
Ici, nous avons écrit une boucle en utilisant la balise de modèle et récupéré toutes les données de contenu. Maintenant, ouvrez votre terminal, cd dans myapp, et exécutez le serveur pour voir la magie opérer :
Cela fonctionne, mais confirmons cela :
Et le résultat devrait être le suivant :
Violà – cela fonctionne bien. Enfin, vous pouvez simplement ajouter un saut de ligne pour que vous puissiez le lire plus clairement. Et nous avons terminé !
Merci d'avoir lu. Si vous souhaitez suivre un tutoriel approfondi sur Django, veuillez visiter ma chaîne YouTube Devstack et vous abonner.