Создание онлайн приложения To-Do List на Rapid API

Back-End разработка, всегда была довольно сложной и трудоемкой. В этом уроке вы узнаете как реализовать её за считанные минуты с помощью платформы Rapid API. Rapid API позволяет реализовать всю Back-End разработку вашего приложения, без написания кода.

Сложность

Введение

В этом уроке, вы пройдете весь путь создания онлайн приложения To-Do List с Rapid API. По ходу этого урока вы узнаете, как разработать Back-End приложения на платформе Rapid API. В этом приложении вы сможете создать список дел, каждое из которых, будет иметь свой собственный URL адрес. Вы сможете создавать новые задачи, помечать их как выполненные и поделиться списком с вашими друзьями.

Что такое RapidAPI

RapidAPI это онлайн платформа, которая позволяет реализовать Back-End вашего веб-приложения или мобильного приложения, без написания кода. Все приложения имеют две составляющие:

  • Front-End Работает на устройстве пользователя. Ответственен за отображение пользовательского интерфейса (UI) и реагирует на действия пользователя. Например, отображает кнопку и обрабатывает событие нажатия.
  • Back-End Работает на стороне сервера. Ответственен за хранение данных (информация о пользователе, список дел и т.д.) и выполняет действия (аутентификация пользователей, отправка уведомлений и т.д.).

При использовании RapidAPI, вы создаете логику Back-End используя блоки. Каждый блок представляет основное действие, реализованное в Back-End. Примером таких действий будет - сохранение в базу данных, отправка уведомления или доступа к API. Back-End будет находиться на сервере RapidAPI и вы сможете легко использовать его для вашего приложения.

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

По ходу этого урока, мы также затронем Front-End, мы будем работать с статическими файлами HTML, CSS и JS, на сервере RapidAPI, для того чтобы получить доступ к ним по интернету. Любое веб-приложение которое находится на серверах RapidAPI, получает доменное имя, которое можно будет отправить друзьям.

Создание первого проекта RapidAPI

Если у вас еще нет аккаунта в RapidAPI, вы можете зарегистрироваться здесь.

После того как вы вошли в RapidAPI, создайте новый пустой проект. Задайте имя проекта по своему усмотрению.

rapid api rapidapi

Следующим шагом будет загрузка Front-End файлов в RapidAPI. Мы заранее создали все необходимые файлы HTML, CSS и JS, для этого урока. Вы можете найти их в репозитории GitHub. Просто скачайте zip архив.

github repo

Теперь необходимо загрузить эти файлы в RapidAPI, для того чтобы у нас был к ним онлайн доступ. Перейдите во вкладку Endpoints и нажмите на кнопку File. Для загрузки файлов, просто перетащите скаченный zip архив.

rapid api drag and drop

Теперь, когда файлы Front-End находятся на нашем сервере, вы можете получить к ним доступ из браузера. Выберите файл /intex.html и нажмите на кнопку preview на верхней панели. Откроется главная страница вашего приложения. Вы сможете увидеть пустой список задач, но не сможете создавать новые задания. Это работа Back-End, которую мы еще не реализовали.

Создание первого Back-End действия

Самой интересной частью Back-End являются действия. Такие как: регистрация пользователей, добавление новых задач в список, выделение задач как выполненные. Для начала создадим действие которое будет сохранять новые задачи в списке.

Во-первых, нам нужна база данных чтобы хранить элементы списка. Просто перейдите во вкладку Database для просмотра базы данных. Каждая база данных подразумевается как коллекция. Коллекция, это хранилище документов. Например, система регистрации пользователей может иметь коллекцию под названием users. Каждый пользователь, может иметь свой документ в коллекции, в котором будет храниться основная информация.

Давайте создадим коллекцию задач. Каждая задача (в любом списке) будет сохранена в этой коллекции. Просто нажмите на кнопку Create New Collection (Создать новую коллекцию) и назовите её items.

rapidapi создание новой коллекции

Теперь давайте создадим действие для добавления новых задач. Вернитесь во вкладку Endpoints и создайте новое Backend действие и назовите его item.

rapidapi создание нового действия

Откройте ваше действие. Вы увидите редактор блоков. С левой стороны у вас будут отображаться все пакеты блоков, которые вы можете использовать. Наше действие должно сохранять новые задачи в коллекции items. Для этого мы должны открыть пакет Database и перетащить блок database.save.

rapidapi редактор блоков

Следующим шагом будет определение документа который мы будем использовать для сохранения. Нам понадобится 3 поля (все они строки):

  • Item: название задачи которую мы будем сохранять. Она будет отправлена в теле запроса, которое мы будем передавать при помощи Back-End действия. Каждый запрос имеет тело, в котором содержаться определенные данные. Для получения значений, мы просто перенесем их в #body.item, т.е. просто перенесем данные из тела запроса.
  • List: название списка задач. Оно также будет находится в теле запроса, поэтому мы просто используем #body.list.
  • Status: статус задачи. Используем статус todo по умолчанию, для новой задачи.

Блок выглядит следующим образом:

rapidapi создание блока

Обратите внимание, что блок database.save имеет 2 возможных исхода: success и error. Нам нужно выставить блок для каждого из них, чтобы сказать системе что нужно делать. Для error мы используем блок response.sendMessage (вы можете найти его в пакете response). Оно будет посылать сообщение с ошибкой.

Поле status содержит код HTTP статуса. Это специальное число, которое сообщает приложению о различных событиях. Вам должен быть известен код 404, который означает "Элемент не найден". Мы установим код 500, который означает общую ошибку сервера.

Для success мы добавим блок, который будет отправлять сообщение об успешном выполнении действия. Сообщение будет "success" и статус 200 (статус успеха).

rapidapi события блока

Теперь давайте проверим наше действие на практике. Используйте кнопку Run в верхнем меню. Появится новая панель, откройте вкладку body, для запроса добавьте два аргумента: item и list и нажмите на кнопку Send. Вы должны увидеть сообщение об успехе.

rapidapi отправка запроса

Вы можете вернуться к экрану Database и увидите там новый элемент.

rapidapi новый элемент

Давайте посмотрим на него в действии! Запустите файл index.html как делали ранее (https://YOUR-PROJECT-NAME.imrapid.io/index.html). Введите список и создайте новую задачу. Затем перейдите к базе данных и проверьте, сохранилась ли там ваша задача. Вы по-прежнему не видите созданную задачу в списке, так как мы не создали для этого специальное действие, этим мы сейчас займемся.

Следующим действием будет - получение элементов списка с сервера, назовем его /list.

Нам нужно найти все задачи в базе данных по определенному атрибуту. Мы будем использовать блок database.find с запросом коллекции items. В запросе, мы будем проверять документы с атрибутом list, т.е. атрибут списка == #body.list. Блок find можно также использовать для сортировки, пропусков и ограничения результатов поиска, но мы оставим эти опции пустыми, так как они нам сейчас не нужны.

rapidapi блок поиска

При любой ошибке, мы возвращаем серверу сообщения со статусом 500, как мы делали в прошлый раз. Если ничего не было найдено, мы просто возвращаем пустой [] массив со статусом 200 (список может быть пустым, это не ошибка). Если что-то было найдено, мы возвращаем эти элементы используя #items и статус 200.

rapidapi успешный поиск

Последнее что нам осталось сделать, это создать действие, которое будет помечать наши задачи как выполненные. Всякий раз, когда пользователь помечает задачу, мы можем сохранить её как выполненную. Таким образом, она не будет появляться при следующей загрузке списка. По умолчанию поле status имеет значение todo. Мы должны сменить это значение на done. Для этого создадим новое действие /item-done.

Для того чтобы обновить задачу в базе данных, используем блок database.update. Блок состоит из двух частей:

Query:

Это запрос, который будет использоваться для поиска всех документов которые необходимо обновить. Он работает таким же образом как блок database.find. Каждый документ в базе данных имеет уникальное поле под названием __id_.

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

Update:

Данная операция может выполняться на документах, и выполнять следующие функции:

  • Увеличение или уменьшение значения
  • Добавление строк
  • Добавление в массивы
  • И другие...

Мы будем просто использовать =, которое меняет значение поля. Установим его в поле status и поменяем его на done.

Результат выглядит следующим образом:

rapidapi замена значений

Для блоков success и error, используем один и тот же блок response.sendMessage. Он будет содержать определенное сообщение и код статуса по умолчанию.

Вот и все! Теперь у вас есть полностью рабочий вариант Back-End для приложения To-Do List https://YOUR-PROJECT-NAME.imrapid.io/index.html. Вы можете создавать задачи и помечать их как выполненные. Вы также можете отправить ссылку своего приложения друзьям, для того чтобы они получили к нему доступ.

Как подключить Front-End к Back-End?

Файлы Front-End вы загрузили на первом шаге, они автоматически присоединяются к Back-End действиям. Каждое Back-End действие имеет REST HTTP Endpoint. Это означает что у него есть URL и свой метод, при помощи которого вы сможете создавать запросы с любого устройства. Например, действие item, которое мы использовали для создания новых задач, получает URL https://YOUR-PROJECT-NAME.imrapid.io/item.

Если вы откроете файл script.js, который мы загрузили на первом шаге, вы увидите запрос в котором присутствует URL для создания новой задачи:

$scope.addItem = function() {

    var listName   = urlParam('list');
    var item       = $scope.newItem;
    $scope.loading = true;

    //This is where the request is made
    $http.post(/item', { 
        list : listName,
        item : item
    })
        .success(function(data, status, headers, config) {
            $scope.loading = false;

            $scope.getListItems(urlParam('list'));  // Reload data with new item
            $scope.newItem = "";                    // Clear text field
        })
        .error(function(data, status, headers, config) {
            $scope.loading = false;

            alert("There was an error adding the item. We truly apologize");
        });

};
ДЕМО

 

Перевод статьи Build Your Next Web App 10x Faster with RapidAPI

Тэги: APIRapidAPI

Вход

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