Сегодня мы собираемся спроектировать, создать и запустить веб-сайт в производство. Более того, мы собираемся сделать это с помощью GraphQL, Angular JS 2.0, Apollo Client и Scaphold.io. Забудьте про туториал Hello, world, мы собираемся создать туториал Save the world. Проверьте конечный продукт здесь!

Мы собираемся изучить некоторые удивительные новые технологии, пока мы пытаемся что-то вернуть. Мы будем создавать своего рода приложение для социальных пожертвований. Мы собираемся использовать интеграцию Scaphold Stripe для безопасной обработки платежей, Mailgun для отправки квитанций по электронной почте, а в конце каждого месяца я лично буду жертвовать каждый цент, который вы пожертвуете, на благотворительность по вашему выбору.

Давайте начнем с общего обзора нашего стека:

  1. Scaphold.io: платформа серверных сервисов на базе GraphQL. Scaphold упрощает создание веб-приложений и мобильных приложений, предоставляя вам настраиваемый бэкэнд GraphQL, который можно развернуть за несколько минут. Их распределенное хранилище данных позволяет вам, мы будем использовать их интеграцию Stripe и Mailgun, чтобы мгновенно привязывать платежи и электронную почту к нашему приложению.
  2. Angular2: производительный модульный интерфейсный фреймворк запущен в Google.
  3. Apollo Client: мощный клиент GraphQL, универсальный и простой в использовании. Клиент Apollo находится на пересечении улиц Angular и Scaphold.
  4. Webpack: популярный сборщик модулей, который значительно упрощает процесс управления, создания и развертывания крупных веб-проектов.

Нам предстоит многое рассказать, поэтому мы разделим это на две части. Это часть 1, в которой мы рассмотрим, как создать GraphQL API с поддержкой платежей и электронной почты с использованием платформы GraphQL Scaphold. Давайте начнем!

Основной API

Прежде чем мы начнем создавать наше приложение Angular, давайте настроим наш API. Scaphold предоставляет множество инструментов и сервисов, упрощающих создание GraphQL API. Для начала перейдите на scaphold.io и создайте приложение.

Когда у вас будет приложение, вы попадете в конструктор схем, где сможете определить свою модель данных, создав типы и добавив поля к этим типам. Большим преимуществом GraphQL является его богатая система типов, которая помогает нам создавать более чистые и безопасные API. Наше приложение будет использовать простую модель данных. У нас будет 4 типа: User, Charity, Donation и CharitySuggestion. Когда вы закончите, дизайнер схемы должен выглядеть так.

Начните с создания четырех типов: User, Charity, Donation и CharitySuggestion.

Конструктор схем предоставляет самый простой способ начать работу с GraphQL. Пока вы щелкали мышью, Scaphold запустил GraphQL API для вашей новой схемы. Перейдите на вкладку GraphiQL и нажмите кнопку Документы справа, чтобы открыть персонализированную документацию по API. Как видите, теперь у нас есть некоторые мутации, которые позволяют нам создавать, обновлять и удалять данные пользовательских типов, которые мы только что определили.

Разрешения

Ни одно приложение не будет полным без правил контроля доступа. Давайте завершим нашу схему, добавив несколько разрешений. В основном мы хотим защитить модель Благотворительность, чтобы гарантировать, что в наш список благотворительных организаций попадают только высококачественные организации. В конструкторе схем щелкните ссылку «разрешения» для типа «Благотворительность», чтобы установить его разрешения. Ваши разрешения на благотворительность должны выглядеть так.

Для полноты мы добавим еще несколько разрешений. Когда вы закончите, ваши разрешения должны выглядеть так.

Поздравляю! Теперь у вас есть GraphQL API, поддерживаемый распределенным хранилищем данных Scaphold. Ваш Scaphold API также поставляется со службами определения местоположения, хранилищем файлов и аутентификацией из коробки. Если вы перейдете на вкладку GraphiQL, вы сможете начать копаться в своем API и выдавать запросы GraphQL.

Мы можем многое сделать с помощью только что созданного API, но этого недостаточно для нужд нашего приложения. Чтобы закончить наше приложение, нам понадобятся платежи.

Платежи: интеграция Stripe

Одним из самых мощных аспектов Scaphold является возможность простой интеграции других сервисов в ваш GraphQL API. Интеграция Stripe позволяет нам быстро добавить в ваш API функцию безопасных платежей. После его активации вы сможете создавать платежи и выполнять другие действия со своей учетной записью Stripe, не беспокоясь о SDK.

Создайте учетную запись Stripe

Перейдите на Stripe.com, чтобы создать учетную запись. После того, как у вас есть учетная запись, вам нужно будет предоставить Scaphold свой секретный ключ и ключи для публикации. Нажмите Настройки учетной записи в раскрывающемся списке в правом верхнем углу, а затем перейдите на вкладку Ключи API.

Получив ключи API Stripe, перейдите на портал интеграции Scaphold и добавьте интеграцию Stripe с тестовыми ключами из Stripe.

Бум! Теперь для GraphQL API доступны платежи. Пойдем посмотрим, что только что произошло. Перейдите на вкладку GraphiQL и откройте проводник документации, нажав кнопку «Документы». Вы заметите, что в дополнение к запросам для типов, которые вы определили в конструкторе схем, ваш API теперь имеет запросы и мутации для Stripe.

Вы можете использовать эти запросы так же, как и любые другие в своем API, и Scaphold позаботится о том, чтобы все гладко интегрировалось с Stripe. Используйте обозреватель GraphiQL в своих интересах. Документация Stripe теперь встроена непосредственно в ваш API, а система типов GraphQL улучшит ваш опыт работы с API Stripe.

Создать платеж

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

Чтобы создать токен, выполните следующий запрос

mutation CreateCardToken($input: _CreateStripeCardTokenInput!) {
  createStripeCardToken(input: $input) {
    token {
      id
      created
      livemode
      type
      used
      card {
        id
        brand
        exp_year
      } 
    }
  }
}
// Variables
{
  "input": {
    "card": {
      "exp_month": 10,
      "exp_year": 18,
      "number": "4242424242424242",
      "cvc": 123,
      "name": "John Doe"
    }
  }
}

Это вернет следующую полезную нагрузку токена.

{
  "data": {
    "createStripeCardToken": {
      "token": {
        "id": "tok_18YMGIGZUqmRht8KgWOmhc4H",
        "created": 1468788798,
        "livemode": false,
        "type": "card",
        "used": false,
        "card": {
          "id": "card_18YMGIGZUqmRht8Kaw5efQSV",
          "brand": "Visa",
          "exp_year": 2018
        }
      }
    }
  }
}

Номер карты «4242 4242 4242 4242» — это номер карты Visa, который Stripe использует для тестирования. Давайте спишем с карты 5 долларов, используя идентификатор возвращенного токена.

mutation CreateStripeCharge($input: _CreateStripeChargeInput!) {
  createStripeCharge(input: $input) {
    charge {
      id
      amount
      captured
      created
      currency
      description
      status
    }
  }
}
// Variables
{
 "input": {
   "amount": 500, // Measured in cents
    "currency": "USD",
    "source": "tok_18YMGIGZUqmRht8KgWOmhc4H",
    "receipt_email": "[email protected]",
    "capture": true // if true captures the charge immediately
  }
}

Это вернет новый объект заряда.

{
  "data": {
    "createStripeCharge": {
      "charge": {
        "id": "ch_18YMOQGZUqmRht8KMdJw2H54",
        "amount": 500,
        "captured": true,
        "created": 1468789302,
        "currency": "usd",
        "description": null,
        "status": "succeeded"
      }
    }
  }
}

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

Хотя мы можем отправлять квитанции Stripe с помощью интеграции Stripe, мы хотели бы иметь возможность отправлять более персонализированные электронные письма из домена нашего приложения. Мы также можем добавить эту функциональность в наш API, используя интеграцию Mailgun от Scaphold.

Электронная почта: интеграция с Mailgun

В завершение мы добавим поддержку по электронной почте через интеграцию Mailgun. Перейдите в Mailgun, создайте учетную запись и настройте домен. Mailgun попросит вас подтвердить свой домен, создав DNS-записи TXT, CNAME и MX для отправки, отслеживания и получения электронной почты через вашего DNS-провайдера. После того, как вы настроили свою учетную запись и домен Mailgun, вы должны увидеть экран, который выглядит следующим образом:

Чтобы завершить добавление интеграции с Mailgun, предоставьте Scaphold свой ключ API и доменное имя.

Отправить электронное письмо

Потрясающий! Теперь вы можете отправлять электронную почту и управлять списками рассылки прямо из API GraphQL. Ознакомьтесь с новой функциональностью в обозревателе документации GraphiQL!

Вы можете отправить электронное письмо со следующим запросом

mutation SendMailgunEmail($email: _SendMailgunEmailInput!){
  sendMailgunEmail(input: $email) {
    id
    message
  }
}
// Variables
{
 "email": {
   "to": ["[email protected]"],
    "from": "[email protected]",
    "subject": "Welcome to Scaphold!",
    "text": "Build awesome apps with our GraphQL powered backend services!",
    "isHtml": false
  }
}

Вы также можете управлять списками рассылки. Давайте создадим список рассылки.

mutation createMailgunMailingListQuery($list: _CreateMailgunMailingListInput!){
  createMailgunMailingList(input: $list){ 
    message
    list { 
      created_at
      address
      members_count
      description
      name 
    }
  }
}
// Variables
{
  "address": "[email protected]",
  "name": "Contact",
  "description": "Let us know what you think!",
  "access_level": "members"
}

Добавить пользователя в список рассылки

mutation addMailgunMailingListMemberQuery($input: _AddMailgunMailingListMemberInput!){
  addMailgunMailingListMember(input: $input){ 
    message
    list { 
      created_at
      address
      members_count
      description
      name 
    }
  }
}
// Variables
{
  "input": {
   "list": {
     "address": "contact@scaphold.io"
    },
    "member": {
      "address": "[email protected]",
      "name": "Michael",
      "vars": {
       "city": "Seattle",
        "gender": "male"
      },
      "subscribed": true,
      "upsert": true  
      // if true, updates the user if it exists
    }
  }
}

Список рассылки дает вам простой способ отправлять электронные письма большим группам людей. Каждое электронное письмо, отправленное на адрес [email protected], теперь будет отправлено каждому участнику в списке. Интеграция с почтовым пистолетом предлагает больше функций, чем здесь. Используйте GraphiQL для проверки других доступных мутаций и запросов.

Поздравляем!

Теперь ваш API дополнен функциями платежей и электронной почты!

Пришло время приступить к созданию нашего приложения Angular2! Ознакомьтесь с нашим полным руководством для помощи в начале работы! В этом руководстве вы узнаете, как мы создали give.scaphold.io. Мы будем использовать GraphQL API, который мы только что создали на Scaphold, для обеспечения работы нашего сайта, обработки платежей и отправки электронных писем.

Спасибо за ваше время и, пожалуйста, дайте мне знать, как я могу улучшить эти уроки! Удачи!