.. note:: Bonjour et bienvenue dans la communauté Facebook des passionnés de SunFounder Raspberry Pi, Arduino et ESP32 ! Plongez au cœur de Raspberry Pi, Arduino et ESP32 avec d'autres passionnés. **Pourquoi nous rejoindre ?** - **Support d'experts** : Résolvez les problèmes après-vente et techniques avec l'aide de notre communauté et de notre équipe. - **Apprenez et partagez** : Échangez des conseils et des tutoriels pour améliorer vos compétences. - **Aperçus exclusifs** : Accédez en avant-première aux annonces de nouveaux produits. - **Remises spéciales** : Profitez de réductions exclusives sur nos nouveaux produits. - **Promotions festives et cadeaux** : Participez à des tirages au sort et des promotions de vacances. 👉 Prêt à explorer et créer avec nous ? Cliquez sur [|link_sf_facebook|] et rejoignez-nous dès aujourd'hui ! 8. Créer une Application Web avec @Anvil ============================================ Nous allons développer un projet permettant une communication bidirectionnelle entre le Raspberry Pi Pico W et les serveurs d'Anvil. La température et l'humidité transmises par le Pico W seront affichées en temps réel sur Anvil. En outre, vous pourrez saisir des messages sur Anvil qui s'afficheront sur l'écran LCD I2C 1602 du Pico W. |anvil| **1. Composants nécessaires** Pour ce projet, nous aurons besoin des composants suivants. Il est certainement plus pratique d'acheter un kit complet, voici le lien : .. list-table:: :widths: 20 20 20 :header-rows: 1 * - Nom - ARTICLES DANS CE KIT - LIEN * - Kepler Kit - 450+ - |link_kepler_kit| Vous pouvez également les acheter séparément via les liens ci-dessous. .. list-table:: :widths: 5 20 5 20 :header-rows: 1 * - SN - COMPOSANT - QUANTITÉ - LIEN * - 1 - :ref:`cpn_pico_w` - 1 - |link_picow_buy| * - 2 - Câble Micro USB - 1 - * - 3 - :ref:`cpn_breadboard` - 1 - |link_breadboard_buy| * - 4 - :ref:`cpn_wire` - Plusieurs - |link_wires_buy| * - 5 - :ref:`cpn_i2c_lcd` - 1 - |link_i2clcd1602_buy| * - 6 - :ref:`cpn_dht11` - 1 - |link_dht22_buy| * - 7 - :ref:`cpn_lipo_charger` - 1 - * - 8 - Batterie 18650 - 1 - * - 9 - Support de batterie - 1 - **2. Monter le circuit** .. warning:: Assurez-vous que votre module de charge Li-po est connecté comme indiqué sur le schéma. Sinon, un court-circuit pourrait endommager votre batterie et le circuit. .. image:: img/wiring/8.anvil_bb.png :width: 800 **3. Créer une Application Anvil** 1. Rendez-vous sur |link_anvil| et cliquez sur **Commencer à créer**. .. image:: img/anvil-1.png 2. Connectez-vous ou inscrivez-vous. .. image:: img/anvil-2.png 3. Créez une **Nouvelle Application Vierge**. .. image:: img/anvil-3.png 4. Sélectionnez le **Thème Material Design**. .. image:: img/anvil-4.png 5. Vous êtes maintenant sur la page d'édition de l'application. .. image:: img/anvil-5.png 6. Depuis la boîte à outils, faites glisser un outil **Label** et placez-le sur **Déposez le titre ici**. .. image:: img/anvil-6.png 7. Vous pouvez remplir le texte de l'étiquette dans le champ **texte** du menu **Propriétés**. .. image:: img/anvil-7.png 8. De la même manière, glissez une **TextBox** sur la droite. .. image:: img/anvil-17.png 9. Glissez un **bouton** sur l'extrême droite et modifiez le champ **texte**. Ce bouton servira à "envoyer" un message au Raspberry Pi Pico W. .. image:: img/anvil-14.png 10. Après avoir double-cliqué sur le bouton **MONTRER**, la page passera du mode Design au mode Code et mettra en surbrillance le code pour le **bouton**. Vous devez saisir le code suivant, qui sert à appeler une fonction sur le serveur (ici, le Pico W). .. code-block:: python anvil.server.call_s("show_message",self.text_box_1.text) * ``show_message`` est la fonction qui sera définie lors de la programmation du Pico W. * ``self.text_box_1.text`` est le message que vous saisissez dans la boîte de texte, qui sera envoyé comme paramètre à ``show_message()``. .. image:: img/anvil-15.png 11. Revenez à la page Design, glissez une autre étiquette et placez-la sous les éléments précédents. Cette étiquette affichera les données du capteur DHT11 provenant du Pico W. .. image:: img/anvil-9.png 12. Dans la **boîte à outils**, cliquez sur **Plus de composants** et glissez le **Timer** dans le formulaire. .. image:: img/anvil-12.png 13. Avec les **Propriétés**, définissez le timer sur un intervalle de 3 secondes. Ce délai sera utilisé pour mettre à jour l'écran avec les données de notre capteur. .. image:: img/anvil-18.png 14. Double-cliquez sur l'outil **Timer** pour le programmer. Utilisez la fonction ``anvil.server.call_s()`` pour appeler la fonction ``publish_data()`` du serveur, obtenir le message à afficher sur l'application Anvil, et l'assigner à ``self.label_2.text`` pour finir. .. code-block:: python data=anvil.server.call_s("publish_data") self.label_2.text=data .. image:: img/anvil-16.png 15. À ce stade, la partie à programmer sur Anvil est terminée. Vous pouvez trouver plus de détails sur l'utilisation d'Anvil à partir de |link_anvil_docs|. **4. Configuration du Pico W** Pour simplifier la connexion du Raspberry Pi Pico W aux services Anvil, Anvil utilise une image de firmware personnalisée. Le firmware du Pico W est écrit en MicroPython et apparaît comme un lecteur USB contenant deux fichiers (boot.py et main.py). Le Pico W doit être flashé avec ce firmware personnalisé et connecté à notre Wi-Fi avant de pouvoir commencer à coder. 1. Téléchargez le firmware personnalisé du Raspberry Pi Pico W via |link_anvil_firmware|. Il est recommandé de télécharger la version complète. .. image:: img/anvil-p-1.png 2. Appuyez et maintenez le bouton **BOOTSEL** sur le Pico W, puis connectez-le à votre ordinateur à l'aide d'un câble micro USB. Relâchez BOOTSEL une fois que le lecteur RPI-RP2 apparaît sur votre ordinateur. .. image:: img/anvil-p-2.png :width: 300 3. Glissez et déposez le fichier ``.uf2`` que vous venez de télécharger, et le Pico W installera le firmware à ce moment-là. Une fois terminé, le Pico W rechargera le lecteur et vous verrez les fichiers ``main.py`` et ``boot.py``. .. note:: Avant de réinstaller le firmware, sauvegardez tous vos fichiers importants stockés dans le Pico W. .. image:: img/anvil-p-3.png 4. Sélectionnez "MicroPython(Raspberry Pi Pico).COMXX" comme interpréteur dans Thonny IDE. Après avoir cliqué sur **Affichage** -> **Fichiers**, vous verrez le lecteur local et le disque dur du Raspberry Pi Pico. .. image:: img/anvil-20.png 5. Double-cliquez sur le script ``boot.py`` et renseignez le ``SSID`` et ``PASSWORD`` de votre WiFi. .. image:: img/anvil-21.png **5. Compléter le Code** #. Téléchargez ``dht.py`` et ``lcd1602.py`` depuis le chemin ``kepler-kit-main/libs`` vers le Raspberry Pi Pico W. .. image:: img/anvil-22.png #. Ouvrez ``main.py`` et remplacez le code d'origine par le code suivant. .. code-block:: python import anvil.pico import uasyncio as a from machine import Pin,I2C from lcd1602 import LCD lcd = LCD() from dht import DHT11 sensor = DHT11(Pin(16, Pin.OUT, Pin.PULL_DOWN)) UPLINK_KEY = "" @anvil.pico.callable(is_async=True) async def show_message(text): print(f"show anvil's input message: {text}") lcd.clear() lcd.message(text) return @anvil.pico.callable(is_async=True) async def publish_data(): sensor.measure() return "Temperature: {}, Humidity: {}".format(sensor.temperature, sensor.humidity) # Connecter l'Anvil Uplink. En MicroPython, cet appel bloquera indéfiniment. anvil.pico.connect(UPLINK_KEY) # Vous pouvez faire bien plus avec Anvil sur votre Pico W. # # Voir https://anvil.works/pico pour plus d'informations #. Retournez à l'interface Anvil et appuyez sur l'option Uplink dans les paramètres de l'App Browser. .. image:: img/anvil-p-6.png #. Cliquez sur **Activer l'Uplink du serveur Anvil pour cette application** pour obtenir la clé uplink. .. image:: img/anvil-p-7.png #. Copiez-la et remplacez ```` dans ``main.py``, ce qui permettra à votre Pico W de se connecter à l'APP Anvil que vous avez créée. .. image:: img/anvil-p-8.png **6. Exécuter le Projet** 1. Cliquez sur le bouton **Exécuter le script actuel** ou appuyez sur F5 pour l'exécuter. Après une connexion réussie, vous verrez un message de connexion réussie dans le Shell. .. image:: img/anvil-19.png 2. Lancez Anvil, et vous pourrez voir la température et l'humidité s'afficher depuis l'application Anvil. Si vous cliquez sur le bouton **MONTRER** après avoir saisi un message dans la boîte de texte, l'I2C LCD1602 affichera le message que vous avez saisi. .. note:: Si le caractère que vous avez saisi ne s'affiche pas sur l'I2C LCD1602, vous pouvez tourner le potentiomètre à l'arrière du module pour augmenter le contraste. .. image:: img/anvil-r-2.png **6. Publier l'Application** Si vous souhaitez partager votre application, vous pouvez générer un lien de partage en suivant la méthode ci-dessous. 1. Retournez à la page **Anvil** et cliquez sur l'option **Publier l'application** dans les paramètres de l'**App Browser**. .. image:: img/anvil-s-1.png 2. Dans l'onglet **Partager via un lien privé**, vous verrez une liste de liens. Toute personne pourra accéder à votre application via ce lien. .. image:: img/anvil-s-2.png 3. Accédez au lien et votre application est prête à être utilisée directement. .. image:: img/anvil-s-3.png 4. Vous pouvez également partager votre application via un lien public, renseignez votre nom de domaine personnalisé et cliquez sur **Appliquer** pour l'activer. .. image:: img/anvil-s-4.png **Comment ça fonctionne ?** Voici la structure de base de ``main.py``, qui forme la base de la communication entre le Pico W et l'application Anvil. .. code-block:: python import anvil.pico import uasyncio as a UPLINK_KEY = "" # Connecter l'Anvil Uplink. En MicroPython, cet appel bloquera indéfiniment. anvil.pico.connect(UPLINK_KEY) # Vous pouvez faire bien plus avec Anvil sur votre Pico W. # # Voir https://anvil.works/pico pour plus d'informations Configurer le dht11 et lcd1602. Les détails d'utilisation de ces deux composants sont disponibles dans :ref:`py_dht11` et :ref:`py_lcd`. .. code-block:: python :emphasize-lines: 5,6 from machine import Pin,I2C from lcd1602 import LCD lcd = LCD() from dht import DHT11 sensor = DHT11(Pin(16, Pin.OUT, Pin.PULL_DOWN)) Dans le code Anvil, nous avons appelé deux fonctions internes du serveur (Pico W). La première est ``show_message()``, dont la fonction est de faire afficher à l'écran LCD le message saisi par Anvil. Le décorateur ``@anvil.pico.callable(is_async=True)`` rend cette fonction appelable par Anvil. .. code-block:: python @anvil.pico.callable(is_async=True) async def show_message(text): print(f"show anvil's input message: {text}") lcd.clear() lcd.message(text) return Ensuite, il y a ``publish_data()``, qui récupère la valeur du dht11 et retourne la température et l'humidité à Anvil. Encore une fois, il utilise le décorateur ``@anvil.pico.callable(is_async=True)`` pour le rendre appelable par Anvil. .. code-block:: python @anvil.pico.callable(is_async=True) async def publish_data(): sensor.measure() return "Temperature: {}, Humidity: {}".format(sensor.temperature, sensor.humidity)