Как развернуть функции динамических облаков в реакции и реагировать на родном с EasyBase

Автор оригинала: FreeCodeCamp Community Member.

Облачные функции представляют собой нестандартные, одноразовые фрагменты кода, которые могут быть вызваны программно или через другие процессы, управляемые событиями.

Эти фрагменты кода не встроены в ваше приложение, так как традиционная функция будет. Скорее они хранится в облачном контейнере который поддерживается поставщиком. Их можно редактировать Live и скрыть бизнес-логику из локально доступного переднего кода.

React и React Naious могут значительно извлечь выгоду из этого метода развития применения из-за их декларативного стиля программирования. События в интерфейсе интерфейса могут предсказать, позвоните в вашу функцию в ractive? манера. Давай попробуем!

Настраивать

Мы начнем с создания совершенно нового реагирования или реагирования собственного применения. Самый простой способ создать один из этих проектов для использования NPX который поставляется со стандартным узлом Node.js. Если у вас нет этих модулей, вы можете Установите их здесь Отказ

Оттуда мы можем создать новый проект, как так:

Реагировать: NPX Create-React-App My-Cloud-App приложение

Реагировать на родных: NPX Create-React-Nate-App приложение

После этого завершится установка, перейдите в свой новый каталог проекта и запустите NPM запустить начало Отказ Вот как выглядит мой стартовый реагированный проект:

Пример реагирования проекта

Пример проекта React I создам это Простая криптовалюта цена Fetcher Отказ

Уэй будет иметь текстовое поле и кнопку, где пользователи могут подать символ криптовалюта, такой как «BTC» или «ETH». Оттуда передний конец будет вызывать функцию без сердца, размещенной easyBase. Облачная функция позвонит API и вернет указанную цену в USD.

Во-первых, давайте добавим эти элементы интерфейса в наших элементов реагирования. Откройте SRC/App.js и очистить компонент под корнем Заголовок тег. Для начала нам понадобится четыре элемента:

1. Текстовое поле
2. Текстовый элемент, чтобы сообщить пользователю вводить символ криптовалюта
3. Кнопка, чтобы вызвать функцию облака на основе ввода текстового поля
4. Наконец, нам нужен другой текстовый элемент для отображения выведенного результата

Ваш Приложение Функция может теперь выглядеть следующим образом:

function App() {
  return (
    

      

        
Enter Cryptocurrency symbol:
        
        Go
        
Result:
      
    
  );
}

Сохраните этот файл, и ваше новое приложение будет выглядеть что-то подобное:

Большой! Теперь нам нужно сделать нашу приложение состоянию, так что мы сохраняем пользовательский ввод и обратный вызов для нашей кнопки.

Мы будем использовать React’s Уместите Крюк для хранения и отображения пользовательского ввода. Кроме того, создайте асинхронную функцию под названием ButtonCallback который срабатывает, когда пользователь нажимает кнопку «GO». На данный момент эта функция просто распечатает ввод текстового поля.

Вот моя реализация SRC/App.js Для справки:

import { useState } from 'react';
import './App.css';

function App() {
  const [inputVal, setInputVal] = useState("");

  async function buttonCallback() {
    console.log(inputVal);
  }

  return (
    

      

        
Enter Cryptocurrency symbol:
         setInputVal(e.target.value)} />
        Go
        
Result:
      
    
  );
}

export default App;

Как развернуть функцию вашего облака

До сих пор Все работает как ожидалось Отказ Время развертывать фрагмент кода в облаке. Сделайте бесплатный аккаунт на EasyBase.io и нажмите на ‘+’ Кнопка на левой нижней части вида.

Выберите Здравствуйте, мир шаблон и протекать через шаговый. Это приведет к функции, которая просто возвращает все, что передается на значение сообщение в тело запроса.

Редактор кода Монако Построен прямо на веб-сайт, поэтому мы можем вживить код в нашем веб-браузере!

Мы собираемся захотеть пакет из NPM, что помогает нам сделать запросы на внешние API. Откройте Package.json и добавить модуль Cross-Fetch С соответствующей версией (когда мы сохраняем нашу функцию, этот модуль будет автоматически установлен):

Теперь открыть Handler.js и принести вновь установленный модуль в верхней части файла с помощью VAR («Cross-Fetch»); Отказ

Когда мы производим наш запрос с переднего конца, мы пройдем объект с помощью ключа Криптосимбол Представление входного значения текстового поля. Итак, давайте создадим переменную, чтобы сохранить это. Помните, Event.body будет ссылаться на то, что передается в функцию через тело запроса.

const cryptoSymbol = event.body.cryptoSymbol;

Мы собираемся использовать Криптонатор API Чтобы получить текущие цены. Маршрут для получения цен https://api.cryptonator.com/api/ticker/ PARE_NAME где PARE_NAME это данный символ (три буквы), а затем «-USD».

Причина, по которой мы следуем по имени пара с «-USD», потому что мы хотим получить цену данной криптовалюты в долларах, но вы можете использовать другой символ для различных конвертаций цен на актива. Давайте сделаем переменную для этого URL:

const nexchangeUrl = `https://api.cryptonator.com/api/ticker/${cryptoSymbol}-usd`;

Вот …| полный шаблон Для нашей новой функции:

var fetch = require('cross-fetch');

module.exports = async (event, context) => {
  const cryptoSymbol = event.body.cryptoSymbol;
  const nexchangeUrl = `https://api.cryptonator.com/api/ticker/${cryptoSymbol}-usd`;

  const res = await fetch(nexchangeUrl);
  const resJson = await res.json();
  if (resJson.success) {
    return context.succeed(resJson.ticker.price);
  } else {
    return context.fail("Symbol does not exist");
  }
}

Примечание: контекст и Context.fail Оба отправляют все, что передается запрошению клиента.

Сохранить функцию:

Мы можем расширить Развертывание ряд и проверьте функцию. Добавить Криптосимбол к входным корпусе со значением некоторого криптового символа (BTC, ETC и т. Д.).

Поздравляю, ваша облачная функция работает! Первый раз вы вызываете свою функцию, это может занять несколько секунд, так как он выполняет холодный старт Отказ Холодные запуска происходят, когда ваша функция не была вызвана недавно, поэтому она выгружается с задней части провайдера. Это будет отзывчиво, когда активно вызывается.

Теперь давайте отправимся на наше нативное приложение React/React. Перейдите к вашему каталогу проекта и установите EasyBase-React библиотека.

cd my-cloud-app
npm install easybase-react

Сейчас в нашем SRC/App.js Файл, мы можем импортировать функцию под названием Callfunction Из этого недавно установленного пакета с Импорт {Callfunction} из «EasyBase-React Отказ

Эта функция принимает два параметра:

1. Функциональный маршрут (доступен под Развертывание -> Развертывание)
2. Запросить объект Body, доступный в нашей облачной функции Event.body (По желанию)

Вот где вы можете найти свой путь к функции:

В нашем ButtonCallback Функция, используйте импортные Callfunction Чтобы вызвать нашу облачную функцию как подробно. Обратите внимание, что Callfunction асинхронный – Оба метода программирования будут работать:

const result = await callFunction('YOUR-CUSTOM-ROUTE', { cryptoSymbol: "BTC" });
console.log(result);

// OR

callFunction('YOUR-CUSTOM-ROUTE', { cryptoSymbol: "BTC" }).then(result => console.log(result));

В нашем приложении мы хотим отобразить результат в последнее

  async function buttonCallback() {
    const result = await callFunction('YOUR-CUSTOM-ROUTE', { cryptoSymbol: inputVal });
    setResultVal(`${inputVal} currently costs $${result}`);
  }

Введите символ Crypto в текстовом поле и нажмите «Перейти» – оно работает! Для справки, вот всю мою реализацию (не стесняйтесь принять код и дать ему немного стиля для уникального взгляда):

import { useState } from 'react';
import './App.css';
import { callFunction } from 'easybase-react';

function App() {
  const [inputVal, setInputVal] = useState("");
  const [resultVal, setResultVal] = useState("");

  async function buttonCallback() {
    const result = await callFunction('YOUR-CUSTOM-ROUTE', { cryptoSymbol: inputVal });
    setResultVal(`${inputVal} currently costs $${result}`);
  }

  return (
    

      

        
Enter Cryptocurrency symbol:
         setInputVal(e.target.value)} />
        Go
        
Result: {resultVal}
      
    
  );
}

export default App;

Заключение

Я надеюсь, что этот краткий прохожий был полезен для тех, кто интересуется облачными вычислениями и разработкой приложений без сервеса! Есть много различных рамх/библиотек доступных для разработки УИН и приложений , но реагировать и реагировать на родных, оказались великими, надежные варианты с процветающими общинами.

Для тех, кто заинтересован, вот некоторые Комплексная информация об использовании EasyBase с реагированием/реактивным родным Отказ EasyBase-React Пакет Может обрабатывать другие модули приложений, такие как аутентификация пользователя.

Ваша функция без сервера останется холостым в облаке, когда нет трафика, избегая каких-либо расходов. Если ваше приложение испытывает нагрузку на использование, облачный провайдер будет там, чтобы упруго доставить необходимую производительность.

Эта инфраструктура, известная как вычисления без сердца, ставит бремя управления, масштабирования и готовности к хосту Отказ Лучшая часть заключается в том, что на вашем конце не требуется обслуживание. Также проверьте мой другой пошаговый на FreeCodecamp О Базах данных без сервеса для реагирования и реагирования на родной Отказ

Спасибо за чтение и счастливое кодирование!