Table des matières
Créer un dossier de fonction localement
Vérifiez le fichier de configuration
Déploier des fonctions
Démo
Maison interface Web tutoriel CSS Laisse faire un générateur de code QR avec une fonction sans serveur!

Laisse faire un générateur de code QR avec une fonction sans serveur!

Mar 13, 2025 pm 12:23 PM

Faisons un générateur de code QR avec une fonction sans serveur!

Le code QR est amusant, non? Nous les aimons, puis les détestons, puis les aimons. Quoi qu'il en soit, ils redeviennent populaires ces derniers temps, ce qui me fait réfléchir à la façon dont ils sont fabriqués. Il existe d'innombrables générateurs de code QR sur le marché, mais supposons que vous devez générer des codes QR sur votre propre site Web. Bien que certains packages puissent le faire, ils sont généralement énormes (par exemple, 180 Ko) et contiennent tout ce dont vous avez besoin pour générer un code QR. Il n'est pas idéal de fournir des services avec d'autres scripts sur le site Web.

Le concept de fonctions cloud fournit une solution élégante à ce problème. Les fonctions cloud résident sur le serveur et sont appelées uniquement en cas de besoin, similaires à une petite API.

Certains hôtes fournissent des fonctions de fonction cloud, DigitalOcean en fait partie! Comme les gouttelettes, le déploiement des fonctions est également assez facile.

Créer un dossier de fonction localement

DigitalOcean fournit une commande CLI qui peut créer un cadre de projet pour nous. Accédez au répertoire où vous souhaitez définir le projet et exécuter:

 <code>doctl serverless init --language js qr-generator</code>
Copier après la connexion

Veuillez noter que la langue est explicitement déclarée. La fonction DigitalOcean prend également en charge PHP et Python.

Nous obtenons un projet propre appelé QR-Generator avec un dossier A / Packages qui contient toutes les fonctions du projet. Il y a un exemple de fonction, mais nous pouvons maintenant l'ignorer et créer un dossier QR à côté:

Ce dossier stockera le package QRCODE et notre fonction QR.JS. Alors, allons au répertoire des packages / échantillons / QR et installons le package:

 <code>npm install --save qrcode</code>
Copier après la connexion

Maintenant, nous pouvons écrire la fonction dans un nouveau fichier QR.js:

 const qrcode = requis ('qrcode')

export.main = (args) => {
  return qrcode.todataurl (args.text) .then (res => ({
    En-têtes: {'Content-Type': 'Text / HTML;
    Corps: Args.img == Undefined? <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Faisons un générateur de code QR avec une fonction sans serveur!"> '
  }))
}

if (process.env.test) export.main ({text: "Bonjour"}). puis (console.log)
Copier après la connexion

Le but de ce code est d'introduire le package QRCODE et d'exporter une fonction qui génère essentiellement un PNG Base64<img alt="Laisse faire un générateur de code QR avec une fonction sans serveur!" > Tags comme source. Nous pouvons même le tester dans le terminal:

 <code>doctl serverless functions invoke sample/qr -p "text:css-tricks.com"</code>
Copier après la connexion

Vérifiez le fichier de configuration

Il y a une étape supplémentaire ici. Une fois le projet construit, nous obtiendrons un fichier project.yml qui utilise certaines informations pour configurer les fonctions. Par défaut, le contenu du fichier est le suivant:

 TargetNamespace: ''
Paramètres: {}
Packages:
  - Nom: Exemple
    environnement: {}
    Paramètres: {}
    Annotations: {}
    actes:
      - Nom: Bonjour
        binaire: faux
        principal: ''
        Exécution: «Nodejs: par défaut»
        Web: vrai
        Paramètres: {}
        environnement: {}
        Annotations: {}
        Limites: {}
Copier après la connexion

Avez-vous vu ceux qui sont mis en évidence? packages: name spécifie l'emplacement de la fonction dans le dossier Packages, dans ce cas un dossier nommé échantillon. actions/ name est le nom de la fonction elle-même, c'est-à-dire le nom de fichier. Lorsque nous commençons le projet, le nom par défaut est Hello, mais nous le nommons QR.JS, nous devons donc changer la ligne de Hello à QR avant de continuer.

Déploier des fonctions

Nous pouvons déployer directement à partir de la ligne de commande! Tout d'abord, nous nous connectons à l'environnement Sandbox DigitalOcean pour obtenir l'URL en temps réel pour les tests:

 ## Vous avez besoin d'une API DOCK Doctl Sandbox Connect
Copier après la connexion

Nous pouvons maintenant déployer la fonction:

 Doctl Sandbox Deployer QR-Generator
Copier après la connexion

Une fois le déploiement terminé, nous pouvons accéder à la fonction via l'URL. Qu'est-ce que l'URL? Il y a une commande pour l'obtenir:

 doctl sbx fn obtient un échantillon / qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr
Copier après la connexion

merveilleux! Nous n'avons plus besoin de publier l'intégralité du package avec d'autres scripts! Nous pouvons accéder à cette URL et générer le code QR à partir de là.

Démo

Nous obtenons l'API, c'est tout!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.

Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur? Apr 02, 2025 pm 06:17 PM

J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.

Un peu sur CI / CD Un peu sur CI / CD Apr 02, 2025 pm 06:21 PM

Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:

Cartes empilées avec un positionnement collant et une pincée de sass Cartes empilées avec un positionnement collant et une pincée de sass Apr 03, 2025 am 10:30 AM

L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.

Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress Apr 02, 2025 am 04:27 AM

Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?

Comparaison des navigateurs pour une conception réactive Comparaison des navigateurs pour une conception réactive Apr 02, 2025 pm 06:25 PM

Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire

Comment utiliser la grille CSS pour les en-têtes et pieds de page collants Comment utiliser la grille CSS pour les en-têtes et pieds de page collants Apr 02, 2025 pm 06:29 PM

CSS Grid est une collection de propriétés conçues pour faciliter la mise en page qu'elle ne l'a jamais été. Comme tout, il y a un peu une courbe d'apprentissage, mais Grid est

Fontes variables de polices Google Fontes variables de polices Google Apr 09, 2025 am 10:42 AM

Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence

See all articles