Faites-vous un peu d’API avec les fonctions Netlify

Online Coding Courses for Kids

Voici un exemple d’un joli petit cas d’utilisation pour les fonctions cloud. Glitch a ce super paquet de mots amicaux. Supposons que vous vouliez générer de manière aléatoire “happy-elephant” ou “walking-tree”, et vous devez le faire sur votre site Web en JavaScript. Eh bien, ce paquet est assez gros (~ 200 Ko), nécessairement, car il a gros dictionnaires de mots en elle. Vous ne voudriez pas envoyer cela à votre JavaScript côté client lorsque vous n’êtes pas obligé de le faire.

Les fonctions cloud sont cool, et nous pouvons les utiliser pour nous donner un peu d’API pour ce package à la place. De cette façon, la taille importe peu, c’est sur un serveur. Netlify rend cela aussi simple que possible.

Voici un repo cela rend tout cela possible. C’est à peine n’importe quel code!

UNE functions dossier contenant un fichier Node.

A l’origine de notre projet: /functions/random.js

Ce fichier nécessitera le friendly-words empaqueter et exporter une seule fonction. Essentiellement, il saisit deux mots aléatoires, les rapproche et les renvoie.

const friendlyWords = require("friendly-words");

exports.handler = function(event, context, callback) {
  const { predicates, objects } = friendlyWords;
  const numberOfPredicates = predicates.length;
  const numbersOfObjects = objects.length;

  const randomPredicate =
    predicates[Math.floor(Math.random() * numberOfPredicates)];
  const randomObject = objects[Math.floor(Math.random() * numbersOfObjects)];

  const output = `${randomPredicate}-${randomObject}`;

  callback(null, {
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    statusCode: 200,
    body: output
  });
};

Déployez-le sur Netlify

Nous pouvons configurer Netlify pour lui dire que nous avons cette fonction dans un netlify.toml fichier (juste pour que nous n’ayons même pas à nous soucier de l’interface utilisateur).

[build]
  command = "#"
  functions = "functions/"

Mais si je voulais simplement le dire à Netlify dans les paramètres, je peux:

Une fois qu’il est déployé, je lui ai donné un joli nom de site, puis cette fonction cloud sera disponible sur une URL. Vous pouvez même le voir dans le navigateur:

https://friendly-words.netlify.com/.netlify/functions/random

Maintenant, je n’ai plus à expédier ce package dans mon JavaScript côté client – je peux simplement cliquer sur cette URL pour obtenir ce que je veux.

CORS

Si je frappais cette URL à partir de mon propre site Web également à friendly-words.netlify.com Je n’aurais pas à me soucier de CORS, mais si je dois l’utiliser à partir d’un autre site Web, je le fais. Remarquez le Access-Control-Allow-Origin des trucs dans le Node JavaScript ci-dessus. Cela prend soin de cela.

Démo

Pour utiliser notre petite API, nous pouvons fetch à partir de cela. C’est ça!


Est-ce que cela pique votre intérêt? Netlify a une tonne d’exemples d’utiliser des fonctions.


Pendant que je faisais ça, je suis tombé sur L’article de Paul Kinlan cela fait à peu près exactement la même chose, mais le sien a des fonctionnalités supplémentaires dans le cadre de l’API que vous voudrez peut-être vérifier.

Close Menu