Рубрики
Без рубрики

Супер простая без сервера электронной коммерции

Прохождение создания без серверных функций, позволяющих клиентам заказать и покупать товар, используя Square. Tagged с помощью сервера, JavaScript, WebDev.

Многие компании совершали погружение в использование Серверный Чтобы улучшить их технологические стеки (например, Нордстрем , Netflix и Coca-Cola ) Это может показаться, что без сервера – это просто растущая причуда, но это была та же самая линия, которую многие люди были о Узел пока Walmart запустил новый сайт до Черной пятницы Анкет Мы могли бы приблизиться к аналогичной точке перегиба, чтобы без серверов быстро улучшил скорость разработки и масштаба, которую узел смог достичь.

Если вы еще не запрыгнули на бессерверную подножку, сейчас самое время. Мы собираемся ходить, хотя и простой способ создания без серверных функций, чтобы клиенты могли мгновенно заказать и купить товар в магазине Square. Мы пройдемся через создание статического сайта на S3, создавая функции AWS Lambda и создав конечные точки API API API, чтобы позволить клиентам мгновенно оформить API Square Checkout.

Стоит уточнить, что есть разница между Без сервера Framework и Без серверные вычисления Анкет Без сервера Framework – это всего лишь инструмент, который можно использовать для облегчения создания, развертывания и управления вашими без серверными функциями, которые вы создаете с желаемым облачным провайдером. Без серверные вычисления – это ссылка на облачный провайдер, динамически управляющий распределением ресурсов машин.

Мы будем использовать Framework без сервера в этом посте, чтобы легче создавать и развертывать наши функции, но мы не хотим, чтобы она путала с неверными вычислениями в целом. Мы рассмотрим различные платформы и различные инструменты в будущих постах, поскольку мы опираемся на концепции, охватываемые здесь.

Вещи, которые вам нужно, чтобы построить это:

Статический сайт с использованием S3

Основной структурой нашего маленького магазина станет статическая HTML -страница, размещенная на S3 и освоена CSS и JavaScript. Затем мы обработаем нашу кассу через функции Lambda, которые позволят вам просто купить один элемент, на который вы нажали. Это предназначено для того, чтобы быть супер базовым, чтобы проиллюстрировать, как все наладить и заработать на AWS – мы можем исследовать более продвинутые способы сделать все это в будущих постах. Мы начнем с HTML и приведем его в S3, чтобы создать наш статический сайт.


Взгляните на мясо нашего index.html просто посмотрев на продукты Div Elements. Мы жестко кодируем наш элемент вариант идентификатор каждому дивию и заполнять это и в скрытое поле ввода. Это позволит нам легко передать это нашей функции Lambda с помощью запроса POST. Моя главная причина такого подхода – это полностью его простота. Нам не нужно писать какой -либо JavaScript для обработки передачи информации – мы можем просто использовать собственное поведение элемента формы, чтобы опубликовать информацию нашего элемента в нашу функцию.

Если мы введем наши 12 продуктов, мы получим что -то похожее на то, что у нас есть ниже:






    Square Swag Shop
    
    
    
    
    
    
    



    

Мы пропустим стили и jQuery, используемый для создания модалов, так как это не совсем фокус. Все, что нам нужно сделать, это загрузить все наши файлы в S3 и включить «статический хостинг веб -сайтов» в свойствах, чтобы иметь общедоступный сайт.

Теперь у нас должна быть хорошая страница для всех, чтобы увидеть наши продукты, но у нас должен быть способ позволить каждому купить эти продукты. Теперь мы наконец начинаем копаться в создании наших функций AWS Lambda (функции без серверов). Это то, что мы создадим, чтобы поместить в атрибут «Action» в форме, чтобы наши формы были публикованы в нашей функции.

Я должен надеяться, что у вас есть собственное имя ведра для URL.

Вы должны быть в состоянии получить доступ к своему статическому сайту, посетив URL -адрес, предоставленный AWS, и вы можете увидеть все свои замечательные элементы на выставке.

Функции без серверов с использованием AWS Lambda

Для нашей без серверной функции мы обработаем квадрат Каталог вариант идентификатор Это отправляется из нашей формы на нашем статическом сайте, а затем создайте URL -адрес проверки, чтобы перенаправить нашего пользователя. Для этого мы будем использовать Square’s JavaScript SDK Внутри нашу функцию легче генерировать URL, который нам нужен. Вы более чем рады попытаться использовать Просто Инструменты AWS для создания и развертывания функции, но мы просто будем использовать Серверный Для управления развертыванием функции и связывания ее с API API Gateway.

Если вы тоже хотите использовать Serverless для создания собственных функций, у них есть отличные учебные пособия сюда . Вам нужно иметь узел на своей машине и установить без сервера с NPM Install -g Serversless (Или, если вы не хотите, чтобы он был установлен во всем мире, просто используйте [npx ] ( https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) )

Вы можете запустить Serverless Create-Template AWS-nodejs Чтобы начать шаблон, но он создает намного больше, чем нужно. Не стесняйтесь просто скопировать Handler.js и Serverless.yml изменить свои собственные шаблоны. Мы начнем с базовой функции, чтобы проверить, что наше развертывание работает как предполагаемое, а затем добавим функциональность для нашей проверки.

'use strict';
const SquareConnect = require('square-connect');

module.exports.checkout = (event, context, callback) => {
  let response = "Success! Our function is running!";
  callback(null, response);
};

Это только наш пример для тестирования. Далее мы хотим создать наш Serverless.yml Файл для развертывания нашей функции и создания конечной точки API API API.

service: serverless-checkout # NOTE: update this with your service name

provider:
  name: aws
  runtime: nodejs8.10
  stage: prod
  memorySize: 256

package:
  include:
    - node_modules/square-connect/**
    - node_modules/superagent/**
  excludeDevDependencies: true

functions:
  checkout:
    environment:
      ACCESS_TOKEN: YOUR_ACCESS_TOKEN
      LOCATION_ID: YOUR_LOCATION_ID
    handler: handler.checkout
    events:
      - http:
          path: /checkout
          method: any

Теперь это так же просто, как бег Без сервера развертывание Чтобы запустить наши функции в облако. Вы должны увидеть что -то похожее на приведенное ниже при развертывании:

Serverless: Packaging service...
Serverless: Excluding development dependencies...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service .zip file to S3 (742.81 KB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..............
Serverless: Stack update finished...
Service Information
service: serverless-checkout
stage: prod
region: us-east-1
stack: serverless-checkout-prod
api keys:
  None
endpoints:
  ANY - https://UNIQUE_ID.execute-api.us-east-1.amazonaws.com/prod/checkout
functions:
  checkout: serverless-checkout-prod-checkout
Serverless: Removing old service versions...

Вы должны быть в состоянии посетить URL -адрес, который без сервера вышел из консоли в вашем браузере, и найти наше сообщение, "Успех! Наша функция работает! " Появление в браузере. Нам просто нужно реорганизовать нашу функцию Lambda, чтобы обработать идентификатор варианта каталога, чтобы запросить наш URL -адрес по вырезом и перенаправить пользователя.

const SquareConnect = require('square-connect');
const crypto = require('crypto');
const querystring = require('querystring');

module.exports.checkout = (event, context, callback) => {
  (SquareConnect.ApiClient.instance).authentications["oauth2"].accessToken = process.env.ACCESS_TOKEN;
  const formData = querystring.parse(event.body);
  const locationId = process.env.LOCATION_ID;
  const checkoutRequest = {
    idempotency_key: crypto.randomBytes(48).toString('base64'),
    order: {
      idempotency_key: crypto.randomBytes(48).toString('base64'),
      reference_id: Date.now().toString(),
      line_items: [
          {
            catalog_object_id: formData.itemVarID,
            quantity: "1"
          }
      ]
    },
    merchant_support_email: "support@squareup.com"
  };
  const checkoutApi = new SquareConnect.CheckoutApi();

  checkoutApi.createCheckout(locationId, checkoutRequest).then((checkoutResponse)=>{
    const response = {
      statusCode: 302,
      headers: { Location: `${checkoutResponse.checkout.checkout_page_url}` }
    };
    callback(null, response);
  }).catch(error => {
      console.log(JSON.stringify(error, null, 2));
      callback(error)
  });
};

Здесь у нас есть полностью функционирование (каламбур) Функция Lambda, которая может создавать URL -адреса проверки, чтобы позволить пользователям покупать наши продукты.

Опять же, стоит напомнить, что это намеренно минимальная реализация, которая будет работать только для чего -то вроде цифрового блага (которое не требует налога), но демонстрирует, насколько легко создать вашу проверку и перенаправить клиента без необходимости вращать нашу собственную серверы. На самом деле, если бы вы добавили свой идентификатор варианта каталога в качестве параметров строки запроса к URL -адресу функции, вы могли бы просто проанализировать их в своей функции, чтобы по существу иметь свою собственную ссылку без сервера «Купить сейчас». Кроме того, вы можете добавить линейную позицию для затрат на доставку, чтобы легко обрабатывать перевозку фиксированной ставки и даже запечатлеть сведения о доставке клиента в оформлении кассе (см. Здесь Для получения более подробной информации об этом).

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

Без сервера недоразумения

Похоже, что существует широко распространенное недоразумение в неверных вычислениях и из чего оно состоит из. Это плата за вызов? Оплата за МБ/с памяти? Как и Node, Serverless немного страдает от того же желания «делать все вещи. ” Правда, это новая технология, которую необходимо изучить, но появляется много странных применений, которые выглядят как анти-паттерны (на мой взгляд). Узел был и известен тем, что был очень плохим в обработке задач с интенсивным процессором из-за его однопоточного характера, и то же самое касается использования без сервера для взаимодействия с пользователем или API. Пользователи ожидают, что все будет отзывчивым, а холодные начинания убивают ожидаемую отзывчивость. Вы, безусловно, можете попытаться обойти это, сохраняя свои функции теплыми в качестве решения для этого, но пахнет как анти-паттерн. Все преимущество без сервера не должно быть так же озабочено вашей инфраструктурой, но люди пишут больше кода, чтобы изменить поведение своей инфраструктуры, которое они на самом деле не контролируют.

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

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

Чтобы следить за этим постом, вам нужно Подпишитесь на квадратную учетную запись разработчика . Даже если вы не хотите следовать, зарегистрируйтесь в любом случае, это бесплатно!

Хочу больше? Зарегистрируйтесь Для нашего ежемесячного информационного бюллетеня.

Оригинал: “https://dev.to/squaredev/super-simple-serverless-ecommerce-41p4”