Wix Code Open Platform

Transcript

1. 3rd Party APIs Wix Code Open Platform Shlomi Shemesh Head of Backend Engineering WixCode shlomish@wix.com twitter@shlomishemesh linkedin/shlomish
2. Creation without limits APIs Example 1: Weather Open your website to the world Example 2: Email Example 3: Payments AGENDA
3. Creation without limits 01
7. Open Platform
8. Creation without limits Means Connect your site to the web 02 Connect your site to the web
9. API Who? 02
11. INSERT YOUR TOPIC NAME Application Programming Interface
12. https://www.google.co.il/search?q=wix+code&tbm=vid Google search is an API call - returns HTML https://www.google.co.il/search?q=wix+code&tbm=vid
13. https://www.google.co.il/search?q=wix+code&tbm=vid Weather search is an API call - returns data https://api.openweathermap.org/data/2.5/weather?q=Longyearbyen, SJ&appid=febfe9f6c7229ceebdf695654890dc70&units=metric
14. Try it yourself using the QR code API doc here: https://openweathermap .org/current Weather api call
15. First example: Client connect to Weather API 03
16. Weather api on your site On page ready, call the open weather api, extract the temperature out of the json response and set it in a textbox import { fetch } from 'wix-fetch'; $w.onReady(function () { // shlomi shemesh fetch("https://api.openweathermap.org/data/2.5/weather?q=Longyearbyen,SJ&appid=fe bfe9f6c7229ceebdf695654890dc70&units=metric") .then(response => response.json()) .then(json=> String(json.main.temp)) .then(json => $w("#temperature").text = json) });
17. Demo Weather api call In your website https://wix-code.wixsite.com/northpole
18. But my token is publically available..
19. API security Same Origin restriction by Browser
20. So lets try the web api but using backend code
21. Workshop Now please try it yourself
22. Open your website to the world 04
23. ▪ https://rapidapi.com/ ▪ https://zapier.com/apps/integrations/ ▪ https://ifttt.com/ Useful links
24. Second example: Send an email using SendGrid 05
25. ▪ https://sendgrid.com/docs/API_Reference/Web_API/mail.html SendGrid API doc
26. SendGrid api on your site Backend function that should be called on event trigger, for example form submit. import {fetch} from 'wix-fetch'; export function sendWithService(key, sender, recipient, subject, body) { const url = "https://api.sendgrid.com/api/mail.send.json"; const headers = { "Authorization": "Bearer " + key, "Content-Type": "application/x-www-form-urlencoded" }; let data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}`; console.log("in backend code, data = " + data) let request = { "method": "post", "headers": headers, "body": data }; return fetch(url, request) .then(response => { console.log("back from send grid"); response.json() }); }
27. Demo SendGrid api call In your website https://wix-code.wixsite.com/northpole/ dragon Full documentation can be found here: https://support.wix.com/en/article/how- to-send-an-email-on-form-submission
28. Workshop Now please try it yourself
29. Third example: Backend connect to Stripe 06 (if time allows)
30. Demo Stripe api call In your website https://wix-code.wixsite.com/northpole/ payment Full documentation can be found here: https://www.wix.com/code/home/foru m/wix-tips-and-updates/example-stripe -payment-processing
31. Workshop Now please try it yourself
32. ▪ https://support.wix.com/en/article/accessing-3rd-party-services ▪ https://www.wix.com/code/home/forum/wix-tips-and-updates/example-stripe-payment-processing ▪ https://support.wix.com/en/article/how-to-send-an-email-on-form-submission ▪ https://wix-code.wixsite.com/northpole Reading resources
33. Thank You talkol@wix.com twitter@koltal linkedin/talkol github.com/talkol
34. Q&A talkol@wix.com twitter@koltal linkedin/talkol github.com/talkol