Tutoriel Bubble.io - Sauvegarder des fichiers en externe sur Google Drive avec Zapier

Dans ce tutoriel, nous allons stocker des fichiers comme des images ou des documents en externe sur Google Drive. Pour cela, nous utilisons Zapier pour utiliser une solution sans code pour l'intégration. L'approche est applicable par analogie à Amazon Web Services S3 ou à des solutions de stockage comme Dropbox.

Transcription de la vidéo

Bonjour, je m'appelle Chris Strobl et je vous montre aujourd'hui comment nous pouvons enregistrer les images que nous avons dans notre application Bubble dans Google Drive et nous le faisons via Zapier. Nous commençons directement et prenons l'élément Picture Upload. Et en dessous, un champ d'entrée dans lequel nous saisissons le nom. Et un bouton. Télécharger l'image Nous allons dans Data, créons un nouveau Data type. Image et celui-ci a trois champs : une fois Image Name. C'est un texte, une fois l'image elle-même, c'est une image de type et l'URL de l'image.

Il s'agit également d'un texte. Si nous allons maintenant dans le workflow, Start/edit workflow. Create a new thing une image. Et le nom de l'image est dans la valeur du nom. La deuxième étape est maintenant Make changes to a thing et nous prenons le résultat de l'étape 1 et l'URL de l'image. Nous faisons https :. Et Insert Dynamic data, result of Step 1. image. Et l'URL. L'URL dans Bubble s'affiche avec un S3.Amazon.com.

Cela signifie que si nous avons https avant, nous arrivons ensuite directement à la bonne URL. Ensuite, nous allons aux plugins. Nous installons le plugin officiel Zapier de Bubble, qui n'est pas un plugin hérité, mais le nouveau plugin. Vous installez celui-ci. Et nous voyons maintenant Add another Zap Trigger. Vous cliquez dessus et nous l'appelons Google Drive upload. Et le type de déclencheur est une image. Celui-ci n'est actuellement pas actif. Nous retournons dans Workflow Plugins Trigger a Zapier Zap. Et nous prenons ici. Résultat de l'étape 1.

Et enfin, réinitialiser pertinent inputs. Si vous allez maintenant dans Zapier, créez-y un nouveau zap. Tout d'abord, nous cherchons Bubble. Donc le trigger. Et nous pouvons maintenant y définir un nouvel événement déclencheur de workflow. Vous devez maintenant vous connecter à Bubble, si ce n'est pas déjà fait. Un champ s'ouvre alors ici. Je suis déjà connecté à Bubble. Ensuite, vous choisissez l'ID de l'app. Et la version de l'app, c'est-à-dire si c'est la version live et la version de développement et le Zap. ID. Vous avez maintenant ici ce nouvel ID et vous cliquez sur Continue. Si vous allez maintenant sur Test trigger, vous obtenez un message d'erreur parce que l'API de données n'est pas exposée. Pour cela, vous devez aller dans Settings, API et Enable Data API. Et vous devez maintenant les publier pour l'image. Vous pouvez également retourner dans Privacy et vérifier si l'image elle-même est visible et non restricted.

Nous retournons à Zapier et testons à nouveau le déclencheur. Et nous obtenons maintenant ici des données standard de Bubble. Ici, on clique sur Continue. Et nous sélectionnons Google Drive comme deuxième application. Et nous avons fait ici Upload file. Ensuite, nous nous connectons à Google Drive. Et sélectionnez ici le dossier Zapier Image Uploader que vous avez déjà créé. Maintenant, vous pouvez cliquer ici sur File sous all options, nous avons ici l'URL de l'image. Si vous prenez directement l'image, il y a parfois des problèmes et il télécharge un texte à la place. Mais si vous avez l'URL de l'image, cela fonctionne en tout cas. Et Convert to document false et le File Name, nous prenons le nom de l'image, qui est un champ texte. Ensuite, nous appuyons sur continue. Et vu les données de la démo, nous ne verrons pas d'image. Mais il faut tout de même faire le test une fois pour activer toute l'intégration Zapier.

Vous pouvez aussi sauter le test. Personnellement, je me sens mieux quand je le fais. Nous voyons que le test a été un succès et que nous avons maintenant aussi dans Google Drive ce champ de texte Lorem Ipsum, qui sont quasiment les données de démonstration. Vous faites turn on Zap. Et nous testons maintenant ce qui se passe lorsque nous essayons l'application. Nous cliquons maintenant sur Upload une image. Vous prenez ici cette couverture. Vous nommez l'image Porsche 911 et vous cliquez une fois sur Télécharger l'image.

Si nous allons une fois dans la base de données, c'est-à-dire Data App data, nous voyons ici l'URL. Mais aussi le nom de l'image et l'image elle-même. Si nous allons ensuite dans Zapier Google, nous voyons que nous avons téléchargé l'image et que nous avons également le nom de l'image.

Cela signifie que notre téléchargement dans l'application nous a permis d'une part d'avoir les données dans Bubble, et d'autre part de télécharger le fichier dans Google Drive. Ce qui est bien avec Zapier, c'est que vous avez bien sûr aussi des intégrations très différentes. Qu'il s'agisse d'Amazon S3, de Dropbox ou de tout autre service. Cela signifie que vous pouvez parfaitement intégrer Bubble et Zapier et que presque toutes les possibilités s'offrent à vous. Et tout cela sans programmation.

Si vous avez aimé cette vidéo, cliquez sur le bouton "J'aime" et inscrivez-vous sur la chaîne. Cela nous aide à obtenir une plus grande portée. Cela vaut donc la peine de continuer à proposer encore plus de contenu gratuit. Si vous avez des questions, n'hésitez pas à les poser dans les commentaires. En attendant, je vous souhaite beaucoup de succès et vous dis à bientôt.