בואו ניצור מחולל קוד QR עם פונקציה ללא שרת!

קודי QR הם מצחיקים, נכון? אנחנו אוהבים אותם, ואז שונאים אותם, ואז אוהבים אותם שוב. בכל מקרה, לאחרונה הם צצים שוב וזה גרם לי לחשוב איך הם עשויים. יש כמו גזיליון מחוללי קוד QR בחוץ, אבל תגיד שזה משהו שאתה צריך לעשות באתר שלך. חבילה זו יכול לעשות את זה. אבל הוא גם שוקל 180 קילו-בייט כבדים עבור כל מה שהוא צריך כדי ליצור דברים. לא היית רוצה להגיש את כל זה יחד עם שאר התסריטים שלך.

עכשיו, אני יחסית חדש בקונספט של פונקציות ענן, אבל שמעתי שזה הברכיים של הדבורה למשהו בדיוק כזה. כך, הפונקציה חיה איפשהו בשרת שניתן לקרוא לו כשצריך. נראה כמו API קטן להפעלת הפונקציה.

חלק מהמארחים מציעים פונקציית ענן כלשהי. DigitalOcean הוא במקרה אחד מהם! וכמו Droplets, פונקציות די קלות לפריסה.

צור תיקיית פונקציות באופן מקומי

ל-DigitalOcean יש CLI עם פקודה שתטום לנו דברים, אז cd בכל מקום שאתה רוצה להגדיר ולהפעיל:

doctl serverless init --language js qr-generator

שימו לב שהשפה מוצהרת במפורש. פונקציות DigitalOcean תומכות גם ב-PHP וב-Python.

אנחנו מקבלים פרויקט נקי ויפה שנקרא qr-generator עם /packages תיקייה שמכילה את כל הפונקציות של הפרויקט. יש שם פונקציה לדוגמה, אבל אנחנו יכולים להתעלם ממנה לעת עתה וליצור א qr תיקייה ממש ליד:

התיקיה הזו היא שבה הן ה qrcode החבילה ושלנו qr.js הפונקציה עומדת לחיות. אז בואו cd אל תוך packages/sample/qr והתקן את החבילה:

npm install --save qrcode

כעת נוכל לכתוב את הפונקציה בחדש qr.js קובץ:

const qrcode = require('qrcode') exports.main = (args) => { return qrcode.toDataURL(args.text).then(res => ({ headers: { 'content-type': 'text/html; charset=UTF-8' }, body: args.img == undefined ? res : `<img src="${res}">` }))
} if (process.env.TEST) exports.main({text:"hello"}).then(console.log)

כל מה שעושה זה לדרוש את ה- qrcode חבילה וייצוא פונקציה שיוצרת בעצם an <img> תג עם ה-a base64 PNG עבור המקור. אנחנו יכולים אפילו לבדוק את זה בטרמינל:

doctl serverless functions invoke sample/qr -p "text:css-tricks.com"

בדוק את קובץ התצורה

יש שלב נוסף אחד שאנחנו צריכים כאן. כשהפרויקט היה פיגום, קיבלנו את המעט הזה project.yml קובץ והוא מגדיר את הפונקציה עם קצת מידע עליה. זה מה שיש שם כברירת מחדל:

targetNamespace: ''
parameters: {}
packages: - name: sample environment: {} parameters: {} annotations: {} actions: - name: hello binary: false main: '' runtime: 'nodejs:default' web: true parameters: {} environment: {} annotations: {} limits: {}

רואה את השורות המודגשות האלה? ה packages: name נכס הוא איפה ב packages התיקיה הפונקציה חיה, שהיא תיקיה שנקראת sample במקרה הזה. ה actions/ name מאפיין הוא שם הפונקציה עצמה, שהוא שם הקובץ. שֶׁלָה hello כברירת מחדל כשאנחנו פותחים את הפרויקט, אבל קראנו את השם שלנו qr.js, אז אנחנו צריכים לשנות את הקו הזה מ hello ל qr לפני שעוברים הלאה.

פרוס את הפונקציה

אנחנו יכולים לעשות את זה ישר משורת הפקודה! ראשית, אנו מתחברים לסביבת DigitalOcean sandbox כך שיש לנו כתובת אתר חיה לבדיקה:

## You will need an DO API key handy
doctl sandbox connect

כעת נוכל לפרוס את הפונקציה:

doctl sandbox deploy qr-generator

לאחר הפריסה, נוכל לגשת לפונקציה בכתובת URL. מהי כתובת האתר? יש פקודה לזה:

doctl sbx fn get sample/qr --url
https://faas-nyc1-2ef2e6cc.doserverless.co/api/v1/web/fn-10a937cb-1f12-427b-aadd-f43d0b08d64a/sample/qr

לעזאזל כן! אין יותר צורך לשלוח את כל החבילה הזו עם שאר הסקריפטים! אנחנו יכולים להקיש על כתובת האתר הזו וליצור את קוד ה-QR משם.

הַדגָמָה

We fetch ה-API וזה באמת כל מה שיש בו!

---

בואו ניצור מחולל קוד QR עם פונקציה ללא שרת! פורסם במקור ב CSS-טריקים. אתה צריך לקבל את הניוזלטר.

• Coinsmart. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://css-tricks.com/lets-make-a-qr-code-generator-with-a-serverless-function/