Lier l'AppVenture à votre Instance Appwrite 🌐

Félicitations, vous avez préparé votre AppVenture et maintenant, il est temps de la lier à votre instance Appwrite Cloud ! Sans ça, l'AppVenture ne pourra pas interagir avec votre instance Appwrite et vous ne pourrez pas continuer votre voyage 🚢

Apprêtez votre AppVenture : Le raccordement à Appwrite 🧵 ​

Pour le moment, lorsque vous accédez à votre AppVenture, vous verrez une page vous indiquant que votre application n'est pas encore liée à votre instance Appwrite. C'est normal, nous allons régler cela maintenant ! Pour cela, l'application a besoin de quelques variables d'environnement :

1. Créez un fichier .env.local à la racine du projet et configurez les variables d'environnement nécessaires en utilisant les informations que vous avez obtenues lors de la création de votre instance Appwrite Cloud. Copiez le contenu de .env.example dans .env.local.

2. Voici les premières variables d'environnement que vous devez configurer :

• NEXT_PUBLIC_APPWRITE_ENDPOINT : Remplacez la valeur par l'URL de votre instance Appwrite. Vous pouvez la trouver dans la console Appwrite, en accédant à la page Settings dans la barre de navigation de gauche ou sur la route /settings.

• NEXT_PUBLIC_APPWRITE_PROJECT_ID : Cet ID est unique pour chaque projet Appwrite que vous pouvez aussi trouver dans la page Settings:

3. Sauvegardez le fichier .env.local après avoir effectué ces modifications.

4. Modifiez le fichier client.config.ts dans le dossier src/workshop/api/config/ et ajoutez-y le code permettant d'initialiser le SDK Appwrite côté client. C'est l'initialisation du SDK avec les variables d'environnement qui permettra à l'application de communiquer avec votre instance Appwrite à travers les différents services Appwrite que nous initialiserons par la suite.

import {Client} from 'appwrite';
import {EnvConfig} from './env.config';

export const AppwriteClient = new Client()
  .setEndpoint(EnvConfig.endpoint ?? '')
  .setProject(EnvConfig.projectId ?? '');

import {Client} from 'appwrite';
import {EnvConfig} from './env.config';

export const AppwriteClient = new Client()
  .setEndpoint(EnvConfig.endpoint ?? '')
  .setProject(EnvConfig.projectId ?? '');

Ce code permettra d'initialiser le SDK Appwrite que nous utiliserons dans notre application. Il nous permettra par la suite d'initialiser les différents services Appwrite dans notre application.

5. C'est tout ! Votre AppVenture est maintenant prête à interagir avec votre instance Appwrite ! 🎊

💟 Info Bonus : Alerte on a des IDs en clair dans le code côté client !! 😱

Notez que certaines de nos variables sont préfixées par NEXT_PUBLIC_ pour les rendre accessibles côté client 😱

Dans le cas des applications construites avec des outils tels que Firebase et Appwrite, il est courant de stocker des IDs en clair dans le code côté client. Cela peut sembler contre-intuitif en matière de sécurité, mais il y a une raison à cela. Ces clés sont utilisées par des SDK côté client pour interagir auprès des services (Appwrite, Firebase...) et autoriser certaines opérations.

Cependant, les services tels que Firebase et Appwrite offrent des mécanismes de sécurité robustes pour garantir que seules les applications authentifiées et autorisées peuvent effectuer certaines actions. Cela signifie que même si les clés sont exposées, elles ne sont pas suffisantes pour accéder aux données ou effectuer des opérations sans les bonnes autorisations. Pour cela, des mécanismes d'authentification, d'autorisation et de droits peuvent être configurés 📝

Comme notamment lorsque l'on déclare les plateformes autorisées à accéder à notre instance en indiquant les domaines autorisés :

(Oui, on a mis localhost à ce moment-là, on a vu mieux comme sécurité... Vous penserez à changer ça plus tard 😅)

À la recherche des traces des anciens explorateurs 🕵️‍♂️ ​

Avant de nous lancer dans ce périple passionnant, il est temps de jeter un coup d'œil sur ce que les anciens explorateurs ont laissé derrière eux. En effet, ils ont laissé des indices et des éléments qui faciliteront notre progression. Nous allons récupérer ces informations et les intégrer à notre propre voyage.

Exécuter le Script des Anciens Explorateurs 📜 ​

Pour commencer, nous allons exécuter un script spécial qui accomplira deux choses :

1. Il permettra de re-vérifier que votre AppVenture est correctement liée à votre instance Appwrite 💪🏼

2. Il initialisera votre projet avec les éléments initiaux laissés par les anciens explorateurs. Ces éléments nous donneront un bon point de départ pour explorer le monde d'Appwrite. (Et ils sont surtout nécessaires pour que le workshop fonctionne correctement 😅)

3. Pour que le script puisse avoir accès à l’instance Appwrite, il aura besoin d’une clé API, qui est un secret utilisé par les SDK Appwrite coté serveur, et dont le script a besoin.

Pour ce faire, rendez-vous dans la partie Overview de la console Appwrite, puis dans Intégration et enfin cliquer sur l’onglet API Keys. Il ne vous reste plus qu’à créer une clé en cliquant sur le bouton Create Key, de lui donner un nom (Admin), et ensuite, sélectionnez tous les services. Une fois la clé créée, vous pouvez la renseigner dans votre fichier .env.local dans la variable APPWRITE_API_KEY_SCRIPT.

🧑🏼‍💻 Pour utiliser ce script, vous pouvez depuis un terminal, exécuter la commande :

Charger les données dans votre instance :

node ./script/init-travel.js

node ./script/init-travel.js

Réinitialiser les données de votre instance :

node ./script/reset-travel.js

node ./script/reset-travel.js

Maintenant, c'est comme si nous consultions la vieille carte au trésor des explorateurs pour trouver les endroits cachés ! Une fois le script terminé, nous serons prêts à partir à la découverte des destinations suivantes de notre aventure !

Au loin, derrière notre bateau, nous pouvons distinguer une île mystérieuse... il semblerait que ce soit la seconde destination de notre voyage ! 🏝️