Tutoriel Partie 2: Comment créer une application Web progressive Selfies avec JavaScript


Si vous cherchez à construire un PWA puissant qui tire parti du matériel d’un appareil, les choses ne feront que s’améliorer. Dans mon post précédent, j’ai expliqué les concepts fondamentaux de la PWA. Dans cet article, je vais discuter de certaines fonctionnalités PWA qui donnent accès à vos API matérielles:

Exigences

Pour commencer ce didacticiel, vous devez installer les éléments suivants:

Configuration du projet

Comme point de départ pour le didacticiel, clonez ce référentiel Github:

Ensuite, dans votre terminal, accédez au répertoire suivant:

et installez les dépendances via:

Ouvrez votre application sur: http: // localhost: 8080

API Media Capture

le API Media Capture permet aux applications Web autorisées d’accéder aux flux à partir des interfaces de capture audio et vidéo de l’appareil, c’est-à-dire d’utiliser les données disponibles depuis la caméra et le microphone. Les flux exposés par l’API peuvent être liés directement au HTML ou éléments ou lus et manipulés dans le code, y compris un traitement plus spécifique via API de capture d’image, API Media Recorder ou Communication en temps réel.


Figure 1

Explication de l’API Media Capture

navigator.mediaDevices.getUserMedia(constraints)

Cela invite l’utilisateur à accéder à l’interface multimédia (vidéo ou audio).

stream.getAudioTracks()

Renvoie une collection de pistes audio fournies par le microphone de votre appareil.

stream.getVideoTracks()

Renvoie une collection de pistes vidéo fournies par la caméra de votre appareil.

mediaElement.srcObject = stream

Définit un flux à rendre dans l’élément fourni ou HTML.

Ajustez l’application Progressive Selfies pour prendre des selfies

Ajoutez ce code à votre index.html (Listing 1), directement sous la balise:

. Dans ce code, le “bouton Capture” est défini pour prendre un instantané (= selfie) de vos pistes vidéo.

liste 1

le

Ajoutez le code suivant dans l’existant feed.js pour définir vos variables requises (Listing 2). Par exemple, la variable videoPlayer contient l’élément HTML

listing 2

Ajoutez la fonction initializeMedia () dans feed.js pour initialiser votre appareil photo.

listing 3

Ce code initialise la caméra. Tout d’abord, il est vérifié si l’API des “mediaDevices” et “getUserMedia” est disponible dans le propriété du navigateur du objet fenêtre. L’objet window représente la fenêtre du navigateur (Javascript et la propriété navigateur font également partie de l’objet window). Si les “mediaDevices” et “getUserMedia” sont disponibles dans le navigateur, le code ci-dessus invitera l’utilisateur à accéder à la caméra en appelant:

navigator.mediaDevices.getUserMedia(constraints)

L’appel: videoPlayer.srcObject = stream, définit un flux (ou des pistes vidéo), qui est rendu dans le fourni élément.

Ajouter l’annonce 4 dans feed.js pour définir votre “modal” prendre un selfie. Il appelle également la fonction initializeMedia () ci-dessus.

listing 4

Ajoutez un gestionnaire d’événements Click au “shareImageButton” dans feed.js (voir liste 5). Ce bouton (voir figure 2) ouvre le “openCreatePostModal”.Image 2

Figure 2

liste 5

Enfin, ajoutez un gestionnaire d’événements de clic pour “Capture Button” dans feed.js (liste 6).

liste 6

Avec ce “bouton de capture”, vous pouvez prendre un instantané / selfie de vos pistes vidéo (voir figure 3). Cet instantané est rendu dans le canvasElement et converti en un Blob (voir listing 7) via la fonction: dataURItoBlob () pour un éventuel stockage dans une base de données.

figure 3

Ajoutez ceci dans utility.js:

listing 7

Si nécessaire, redémarrez le serveur avec npm et prenez un selfie en utilisant le Bouton de capture (figure 4).

figure 4

Ajuster l’application Progressive Selfies pour déterminer votre emplacement

API de géolocalisation

Avec l’API de géolocalisation, les applications Web peuvent accéder aux données de localisation fournies par l’appareil – obtenues via GPS ou via l’environnement réseau. Mis à part la requête d’emplacement unique, il fournit également un moyen de notifier l’application des changements d’emplacement.

Explication de l’API de géolocalisation

navigator.geolocation.getCurrentPosition(callback)

Effectue une recherche unique de l’emplacement avec les coordonnées, la précision, l’élévation et la vitesse, si disponibles.

navigator.geolocation.watchPosition(callback)

Des changements d’emplacement sont observés.

Utilisons l’API de géolocalisation pour déterminer la position de votre selfie. Ajoutez le code ci-dessous dans votre index.html, directement sous la balise: div # manual-location. Dans ce code, le “bouton Get Location” est défini pour déterminer l’emplacement où vous avez pris le selfie (Listing 8).

liste 8

Ajouter l’annonce 9 dans
feed.js, pour définir les variables requises pour déterminer l’emplacement.

listing 9

Ajoute ça initializeLocation () fonction dans feed.js (liste 10):

liste 10

Et ajoutez le initializeLocation () fonction dans openCreatePostModal, immédiatement après la initializeMedia () appel de fonction feed.js (voir extrait 11).

listing 11

Ajoutez un gestionnaire d’événements Click pour le “locationButton” dans feed.js. Ce “bouton Emplacement” détermine la emplacement où tu as pris le selfie (Listing 12).

listing 12

Ce code vérifie si l’API de la “géolocalisation” est disponible dans le propriété du navigateur du objet fenêtre. Si c’est le cas, ce code effectue une recherche unique pour déterminer l’emplacement (avec les coordonnées), via la fonction: navigator.geolocation.getCurrentPosition (). L’adresse est ensuite recherchée à l’aide de ces coordonnées via le ‘carte ouverte‘.

figure 5

Si nécessaire, redémarrer le serveur avec npm et récupérer l’emplacement à l’aide du bouton “GET LOCATION” (figure 5).

Envoyez des selfies en ligne avec l’API BackgroundSync

le BackgroundSync L’API permet aux utilisateurs de mettre en file d’attente les données qui doivent être envoyées au serveur pendant qu’un utilisateur travaille hors ligne, puis dès qu’il est à nouveau en ligne, il envoie les données en file d’attente au serveur.

Exemple:

Supposons que quelqu’un utilisant notre application Progressive Selfies veuille prendre et envoyer un selfie, mais l’application est hors ligne. L’API Background-Sync permet à l’utilisateur de mettre en file d’attente un selfie lorsqu’il est hors ligne. Dès sa remise en ligne, le Travailleur de service envoie les données au serveur. Dans notre cas, nous utilisons un IndexedDB entre-temps pour stocker des données (figure 6). La bibliothèque de cette base de données se trouve dans le lib / idb.js dossier. Vous pouvez lire sur quoi et comment un Travailleur de service travaille dans mon post précédent sur PWA.

figure 6

Clonez le serveur

Clonez d’abord le Serveur PWA via:

Nous enverrons les selfies à ce serveur.

Installez les dépendances et démarrez serveur en utilisant:

Le serveur fonctionne sur localhost: 3000

Synchroniser les selfies

Pour appliquer BackgroundSync à notre application, nous devons créer un “magasin” dans notre base de données Indexed-DB pour garder notre
“selfies synchronisés” (Listing 13). Nous le faisons en
utility.js. Ce fichier utility.js contient le code nécessaire à la fois pour
Travailleur de service et l’application elle-même.

listing 13

Nous devons utiliser l’API BackgroundSync lorsque nous envoyons des données au serveur, via le
soumettre un événement. Ajoutez un gestionnaire d’événement submit dans feed.js (Listing 14).

listing 14

Dans la première partie du code, le id est généré pour que le selfie soit envoyé. Nous faisons d’abord une simple vérification pour voir si le navigateur prend en charge serviceWorker et SyncManager. Si tel est le cas et Travailleur de service est prêt, enregistrez une synchronisation avec le tag “sync-new-selfies ‘. Il s’agit d’une simple chaîne utilisée pour reconnaître ce événement de synchronisation. Vous pouvez considérer ces balises de synchronisation comme de simples étiquettes pour différentes actions.

Ensuite, nous enregistrons le selfie dans l’IndexedDB à l’aide de la fonction writeData.

Enfin, tous les selfies stockés sont lus en utilisant readAllData (“synchroniser les selfies“) et sont affichés dans votre PWA via la fonction: updateUI (syncSelfies). Un message est également envoyé: “Votre selfie a été enregistré pour la synchronisation!”

Travailleur de service

Pour que le technicien de service fonctionne correctement, un écouteur d’événement de synchronisation doit être défini dans sw.js (Listing 15).

listing 15

Ce qui précède
événement de synchronisation n’est activé que lorsque le navigateur / appareil est
reconnecté. L’agent de service peut gérer ces types d’événements (voir mon
article précédent sur PWA). Il vérifie également si la
événement de synchronisation a un
marque qui correspond à la chaîne
“sync-new-selfies”. Si nous n’avions pas cela
marque, les
événement de synchronisation se déclenche chaque fois que l’utilisateur est connecté.

Dès que nous sommes de nouveau en ligne, nous récupérons les selfies stockés dans IndexedDB. Après cela, le
récupérer l’API est utilisé pour envoyer les selfies au serveur, en utilisant l’API_URL:
http: // localhost: 3000 / selfies. Enfin, les selfies déjà envoyés sont
supprimé de l’IndexedDB.

Essai

Croyez-le ou non, tester tout cela est plus facile que vous ne le pensez: une fois que vous avez visité la page et que le technicien de service est opérationnel, il vous suffit de vous déconnecter du réseau. Chaque selfie que vous essayez d’envoyer hors ligne sera désormais stocké dans l’IndexDDB (voir figure 7). Tous les selfies enregistrés seront également affichés sur votre écran principal (voir figure 8).

figure 7

figure 8

Une fois que vous êtes de nouveau en ligne, le technicien de service enverra les selfies au serveur (voir l’onglet Réseau dans vos outils de développement Chrome à la figure 9). Là, vous verrez qu’un selfie a été ”
publié“trois fois sur le serveur. Ce serveur contient un dossier appelé”
images“, qui contient le
publié selfies.

figure 9

finalement

Après cette introduction, vous pouvez continuer avec un didacticiel complet que vous pouvez trouver dans: https://github.com/petereijgermans11/progressive-web-app/tree/master/pwa-workshop. Dans un article ultérieur, je discuterai d’autres API telles que l’API Web Streams, l’API Push (pour recevoir des notifications push) et l’API Bluetooth Web.

Close Menu