Velo: acessar serviços de terceiros com a API Fetch
Usando o Velo, você pode escrever código para acessar serviços web de terceiros. A API Fetch contém duas funções para enviar solicitações HTTP: getJSON() e fetch(). Para solicitações GET simples para recuperar um objeto JSON, recomendamos usar getJSON(). Para solicitações mais complexas, fetch() fornece maior funcionalidade.
Fazer uma solicitação GET usando getJSON( )
Primeiro, precisamos escrever uma função getGreetings() em um módulo web de back-end para fazer nossa chamada de serviço. (Para referência, chamamos o módulo web de dataFetcher.jsw. Mais tarde, precisaremos importar getGreetings() dele em nosso código frontend.)
1import { getJSON } from 'wix-fetch'; // GET call using getJSON export async function getGreetings() { const response = await getJSON('https://velo-examples.wixsite.com/training-tester/_functions/greetings'); return response; }Começamos importando a função getJSON() da API Fetch e, em seguida, em nossa função getGreetings(), simplesmente chamamos getJSON() e retornamos a resposta.
Agora podemos escrever código de front-end para responder ao nosso clique no botão "Fetch Greetings" chamando nossa função de back-end getGreetings() e exibindo os resultados.
1import { getGreetings } from 'backend/dataFetcher'; // See the dataFetcher.jsw web module in the backend for the service call // $w.onReady(function () { $w('#fetchAllButton').onClick(async () => { $w('#fetchAllButton').disable(); const fetchedData = await getGreetings(); const repeaterData = fetchedData.map(item => { item._id = item.id.toString(); return item; }); $w('#helloRepeater').data = repeaterData; $w('#helloRepeater').show(); $w('#fetchAllButton').enable(); }); $w('#helloRepeater').onItemReady( ($item, itemData) => { $item('#repeatedLanguageText').text = itemData.language; $item('#repeatedHelloText').text = itemData.greeting; }); });Começamos importando nossa função getGreetings() do nosso módulo web de back-end dataFetcher.jsw.
Quando o botão "Fetch Greetings" é clicado, chamamos getGreetings() e aguardamos a resposta. Quando ela chega, convertemos os IDs recebidos em strings e as usamos para preencher um repetidor.
Para obter mais informações sobre o exemplo acima e para testar você mesmo, consulte nossa página de exemplo Hello Fetch.
Fazer uma solicitação GET usando fetch()
Agora vamos considerar um exemplo semelhante usando fetch().
Suponha que queremos chamar um serviço de terceiros (GET) para obter uma saudação em um idioma aleatório com o clique de um botão, conforme demonstrado no exemplo abaixo:
Primeiro, precisamos escrever uma função getRandomGreeting() em um módulo web de back-end para fazer nossa chamada de serviço. (Para referência, chamamos o módulo web de dataFetcher.jsw. Mais tarde, precisaremos importar getRandomGreeting() dele em nosso código front-end.)
1import { fetch } from 'wix-fetch'; // GET call using fetch export async function getRandomGreeting() { const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/randomgreeting'); if(response.ok) { const json = await response.json(); return json.greeting; } else { return Promise.reject("Fetch did not succeed"); } }Começamos importando a função fetch() da API Fetch que chamamos em nosso código getRandomGreeting(). Se a chamada for bem-sucedida, convertemos a resposta em um arquivo JSON e, em seguida, retornamos seu objeto greeting. Se falhar, retornamos uma mensagem Promise.reject.
Agora podemos escrever o código de front-end para responder ao nosso clique no botão "Fetch Random Greeting" chamando nossa função de back-end getRandomGreeting() e exibindo os resultados.
1import { getRandomGreeting } from 'backend/dataFetcher'; // See the dataFetcher.jsw web module in the backend for the service call // $w.onReady(function () { $w('#fetchRandomButton').onClick(async () => { $w('#fetchRandomButton').disable(); const fetchedData = await getRandomGreeting(); $w('#languageText').text = fetchedData.language; $w('#helloText').text = fetchedData.message; $w('#languageText').show(); $w('#helloText').show(); $w('#fetchRandomButton').enable(); }); });Começamos importando nossa função getRandomGreeting() do nosso módulo web de back-end dataFetcher.jsw.
Quando o botão "Fetch Random Greeting" é clicado, chamamos getRandomGreeting() e aguardamos a resposta. Quando ela chega, usamos nossos campos de texto para exibir os dados.
Para obter mais informações sobre o exemplo acima e para testar você mesmo, consulte nossa página de exemplo Hello Fetch.
Fazer uma solicitação POST usando fetch()
fetch() também pode ser usado para fazer outros tipos de solicitações para serviços de terceiros, como POST.
Suponha que queremos chamar um serviço de terceiros (POST) para enviar uma saudação em um idioma especificado com o clique de um botão, conforme demonstrado no exemplo abaixo:
Primeiro, precisamos escrever uma função postGreeting() em um módulo web de back-end para fazer nossa chamada de serviço. (Para referência, chamamos o módulo web de dataFetcher.jsw. Mais tarde, precisaremos importar postGreeting() dele em nosso código frontend.)
1import { fetch } from 'wix-fetch'; // POST call using fetch export async function postGreeting(language, greeting) { const jsonBody = { language, greeting }; const fetchOptions = { method: 'post', headers: 'application/json', body: JSON.stringify(jsonBody) }; const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/greeting', fetchOptions); return response.json(); }Começamos importando o fetch() da API Fetch que chamamos em nossa função postGreeting().
Nossa função aceita parâmetros de language e greeting, que serão passados do front-end, e os envia por POST para o serviço de terceiros.
Desta vez, precisamos passar parâmetros de opções adicionais para fetch() que chamamos de fetchOptions. Essas opções contêm o método solicitado (post), um cabeçalho descrevendo o formato dos dados que estão sendo enviados (application/json) e um objeto jsonBody contendo os valores de language e greeting.
Agora podemos escrever código de front-end para responder ao nosso clique no botão "Post Greeting" chamando nossa função de back-end postGreeting().
1import { postGreeting} from 'backend/dataFetcher'; // See the dataFetcher.jsw web module in the backend for the service call // $w.onReady(function () { $w('#postButton').onClick(async () => { $w('#postButton').disable(); const putResponse = await postGreeting($w('#languageInput').value, $w('#greetingInput').value); console.log(putResponse); if(putResponse.success) { $w('#successIcon').show(); $w('#errorIcon').hide(); $w('#responseMessage').text = putResponse.success; } else { $w('#successIcon').hide(); $w('#errorIcon').show(); $w('#responseMessage').text = putResponse.error; } $w('#responseMessage').show(); $w('#postButton').enable(); }); });Começamos importando nossa função postGreeting() do nosso módulo web de back-end dataFetcher.jsw.
Quando o botão "Post Greeting" é clicado, chamamos postGreeting() com os valores de idioma e saudação de nossos elementos de entrada correspondentes e aguardamos a resposta. Quando ela chega, usamos um campo de texto para mostrar se a chamada foi bem-sucedida ou não.
Para obter mais informações sobre o exemplo acima e para testar você mesmo, consulte nossa página de exemplo Hello Fetch.
Trabalhar com chaves de API
- Armazenar a chave API no Gerenciador de segredos.
- Escrever código que extrairá a chave da API usando a API Secrets e fazer a chamada de serviço em um módulo web de back-end. Isso evita as preocupações de segurança, como expor chaves de API, que surgiriam se você tentasse chamar o serviço a partir do código do lado do cliente.
Primeiro, você cria uma função em um módulo web de back-end para chamar o serviço e recuperar os dados:
1//serviceModule.jsw import {fetch} from 'wix-fetch'; import {getSecret} from 'wix-secrets-backend'; export async function getCurrentTemp(city) { const url = 'https://api.openweathermap.org/data/2.5/weather?q='; const key = await getSecret(WeatherApiKey); let fullUrl = url + city + '&APPID=' + key + '&units=imperial'; return fetch(fullUrl, {method: 'get'}) .then(response => response.json()) .then(json => json.main.temp); }Neste exemplo, você começa importando as funções necessárias para fazer solicitações https e obter segredos do Gerenciador de Segredos. Em seguida, você cria uma nova função que inclui uma city (cidade) cujo clima você deseja consultar. A função começa construindo o URL completo para a solicitação de busca. O URL é composto pelo endereço do serviço e uma chave de API. Para que esse exemplo funcione, você teria que armazenar sua API no Gerenciador de Segredos com o nome "WeatherApiKey". Em seguida, a função faz a solicitação real. Quando recebe uma resposta, ela extrai os dados de temperatura. Esses dados de temperatura serão recebidos pela chamada do lado do cliente.