Quickstarters
Как построить бэкенд для jQuery?

39min
Введение
В этом учебном пособии вы узнаете как создать бэкенд для jQuery с использованием Back4app. 
Мы интегрируем основные функции Back4app — управление базами данных, Cloud Code, REST и GraphQL API, аутентификацию пользователей и запросы в реальном времени — чтобы создать безопасный и масштабируемый бэкенд. 
Этот бэкенд будет взаимодействовать с вашим фронтендом на основе jQuery через AJAX-вызовы и другие общие методы jQuery.
Интуитивно понятная среда Back4app сокращает время, необходимое для настройки серверов или баз данных. 
Следуя нескольким простым шагам, вы получите практический опыт работы с ACL, разрешениями на уровне классов, моделированием данных, загрузкой файлов и многим другим. 
К концу этого учебного пособия у вас будет прочная основа для полностью функционального приложения на основе jQuery, подключенного к бэкенду Back4app. 
Вы будете готовы добавить пользовательскую логику, интегрировать внешние API и защитить свои данные с помощью детального контроля.
Предварительные требования
Чтобы завершить этот учебник, вам потребуется:
Аккаунт Back4app и новый проект Back4app
 Начало работы с Back4app.
Если у вас нет аккаунта, вы можете создать его бесплатно. Следуйте приведенному выше руководству, чтобы подготовить ваш проект.
Базовая среда jQuery
 Вы можете скачать jQuery с официального сайта .
Установленный Node.js (версия 14 или выше) (необязательно)
Хотя Node.js не является строго необходимым для jQuery в браузере, вам может понадобиться его для запуска локальных тестовых серверов или установки npm-пакетов, если вы хотите проводить локальное тестирование. Установка Node.js﻿
Знание основ JavaScript и jQuery
 Официальная документация jQuery.﻿
Убедитесь, что у вас есть все эти предварительные условия перед началом, чтобы вы могли легко следовать за процессом создания вашего фронтенда на основе jQuery и подключения его к Back4app.
Шаг 1 – Настройка проекта Back4app
Создание нового проекта
Чтобы начать ваш проект на jQuery, создайте новый проект Back4app:
Войдите в свою учетную запись Back4app.
Нажмите кнопку “Новое приложение” в вашей панели управления Back4app.
Дайте вашему приложению имя (например, “jQuery-Backend-Tutorial”).
﻿
Когда проект будет создан, вы увидите его в вашей панели управления Back4app. Это будет основа ваших конфигураций бэкенда для jQuery.
Подключите Parse SDK
Back4app использует платформу Parse для работы с данными и функциями в реальном времени. Если вы хотите использовать SDK Parse напрямую с jQuery, вы можете загрузить его как скрипт в вашем HTML.
Получите ваши ключи Parse:
В панели управления Back4app откройте «Настройки приложения» или «Безопасность и ключи», чтобы найти:
Идентификатор приложения
Ключ JavaScript
URL сервера Parse (обычно https://parseapi.back4app.com)
﻿
Включите SDK Parse в ваш HTML файл:
HTML
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
﻿
В среде jQuery, вы можете сначала загрузить jQuery, затем Parse и взаимодействовать с объектами Parse в ваших скриптах. Это соединение гарантирует, что все вызовы данных к вашему бэкенду Back4app проходят через платформу Parse.
Шаг 2 – Настройка базы данных
Сохранение и запрос данных
После интеграции Parse SDK вы можете сохранять и извлекать данные из базы данных Back4app. Вот простой пример создания и получения объектов "Todo" с использованием jQuery и Parse:
HTML
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
﻿
Вы также можете вызывать REST API с помощью cURL:
Bash
curl -X POST \  
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \  
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \  
  -H "Content-Type: application/json" \  
  -d '{"title": "Buy groceries", "isCompleted": false}' \  
  https://parseapi.back4app.com/classes/Todo  
curl -X POST \  
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \  
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \  
  -H "Content-Type: application/json" \  
  -d '{"title": "Buy groceries", "isCompleted": false}' \  
  https://parseapi.back4app.com/classes/Todo  
﻿
Или используйте GraphQL:
GraphQL
mutation {  
  createTodo(input: {  
    fields: {  
      title: "Clean the house"  
      isCompleted: false  
    }  
  }) {  
    todo {  
      objectId  
      title  
      isCompleted  
    }  
  }  
}  
mutation {  
  createTodo(input: {  
    fields: {  
      title: "Clean the house"  
      isCompleted: false  
    }  
  }) {  
    todo {  
      objectId  
      title  
      isCompleted  
    }  
  }  
}  
﻿
Проектирование схемы и типы данных
В панели управления Back4app:
Перейдите в “База данных.”
Создайте новый класс (например, “Список дел”) и добавьте столбцы, такие как заголовок (String) и завершено (Boolean).
Создать новый класс
﻿
Вы также можете позволить Parse автоматически создавать столбцы в первый раз, когда вы сохраняете объект.
Создать столбец
﻿
Использование AI-агента
Back4app имеет AI-агента для моделирования данных:
Откройте AI-агента в панели управления или меню вашего приложения.
Опишите вашу модель данных (например, “Создать приложение Список дел с схемой класса.”).
Позвольте AI-агенту сгенерировать схему. 
﻿
Реляционные данные
Если у вас есть Категория класс, связанный с множеством Задач элементов, вы можете использовать Указатели или Связи:
HTML
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
﻿
Живые запросы
Для обновлений в реальном времени в вашем приложении jQuery:
Включите живые запросы в вашей панели управления Back4app в разделе Настройки сервера.
Инициализируйте подписку на живой запрос:
HTML
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
﻿
Эта подписка уведомляет вас в реальном времени, когда создается, обновляется или удаляется объект “Todo”.
Шаг 3 – Применение безопасности с помощью ACL и CLP
Механизм безопасности Back4app
ACL (Списки управления доступом) и CLP (Разрешения на уровне класса) позволяют вам контролировать, кто может читать и записывать данные на уровне объектов или классов.
﻿
Списки управления доступом (ACL)
ACL устанавливается на отдельные объекты для ограничения доступа:
HTML
<script>  
  async function createPrivateTodo(title, ownerUser) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
  
    const acl = new Parse.ACL(ownerUser);  
    acl.setPublicReadAccess(false);  
    acl.setPublicWriteAccess(false);  
    todo.setACL(acl);  
  
    try {  
      return await todo.save();  
    } catch (err) {  
      console.error('Error saving private todo:', err);  
    }  
  }  
</script>  
<script>  
  async function createPrivateTodo(title, ownerUser) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
  
    const acl = new Parse.ACL(ownerUser);  
    acl.setPublicReadAccess(false);  
    acl.setPublicWriteAccess(false);  
    todo.setACL(acl);  
  
    try {  
      return await todo.save();  
    } catch (err) {  
      console.error('Error saving private todo:', err);  
    }  
  }  
</script>  
﻿
Редактировать ACL
﻿
Разрешения на уровне класса (CLP)
CLP контролируют разрешения по умолчанию для всего класса:
В вашей панели управления Back4app, откройте раздел База данных.
Выберите ваш класс (например, “Todo”).
Перейдите на вкладку Разрешения на уровне класса для настройки публичного, аутентифицированного или ролевого доступа.
﻿
Сочетайте ACL для безопасности на уровне объектов с CLP для более широких ограничений. Для получения дополнительной информации смотрите Руководство по безопасности приложений.
Шаг 4 – Написание и развертывание облачных функций
Облачный код выполняет пользовательский JavaScript на стороне сервера, позволяя вам добавлять бизнес-логику, проверки данных или вызовы внешних API.
Как это работает
Вы помещаете свой код в main.js (или в аналогичный файл), развертываете его на Back4app и позволяете серверу Parse обрабатывать выполнение. Вы также можете использовать модули NPM для более сложной логики.
JS
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
﻿
Развертывание вашей функции
Через Back4app CLI:
Bash
b4a deploy  
b4a deploy  
﻿
Через панель управления:
В панели управления вашего приложения перейдите в Cloud Code > Functions.
Скопируйте/вставьте функцию в main.js.
Нажмите Deploy.
﻿
Вызов вашей функции
Из jQuery вы можете вызвать облачную функцию так:
HTML
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
﻿
Шаг 5 – Настройка аутентификации пользователей
Аутентификация пользователей в Back4app
Back4app использует класс Parse.User для аутентификации. Хеширование паролей, токены сессий и безопасное хранение обрабатываются автоматически.
Настройка аутентификации пользователей
HTML
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
﻿
Управление сессиями
Вы можете получить текущего пользователя:
Text
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
﻿
Выход:
Text
Parse.User.logOut();  
Parse.User.logOut();  
﻿
Интеграция социального входа
Back4app поддерживает Google, Facebook, Apple и других поставщиков OAuth. Для получения дополнительной информации смотрите Документацию по социальному входу.
Шаг 6 – Обработка хранения файлов
Загрузка и получение файлов
Используйте Parse.File для обработки загрузок:
HTML
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
﻿
Вы можете сохранить файл в классе, присвоив его полю:
Text
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
﻿
Получение URL файла:
Text
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
﻿
Безопасность файлов
Вы можете управлять тем, кто может загружать файлы, изменяя настройки загрузки файлов в Parse Server:
JSON
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
﻿
Шаг 7 – Планирование задач с помощью облачных заданий
Облачные задания
Вы можете выполнять рутинные задачи, такие как удаление старых данных:
JS
// main.js  
Parse.Cloud.job('cleanupOldTodos', async (request) => {  
  const Todo = Parse.Object.extend('Todo');  
  const query = new Parse.Query(Todo);  
  
  const now = new Date();  
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;  
  const cutoff = new Date(now - THIRTY_DAYS);  
  
  query.lessThan('createdAt', cutoff);  
  
  try {  
    const oldTodos = await query.find({ useMasterKey: true });  
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });  
    return `Deleted ${oldTodos.length} old Todos.`;  
  } catch (err) {  
    throw new Error('Error during cleanup: ' + err.message);  
  }  
});  
// main.js  
Parse.Cloud.job('cleanupOldTodos', async (request) => {  
  const Todo = Parse.Object.extend('Todo');  
  const query = new Parse.Query(Todo);  
  
  const now = new Date();  
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;  
  const cutoff = new Date(now - THIRTY_DAYS);  
  
  query.lessThan('createdAt', cutoff);  
  
  try {  
    const oldTodos = await query.find({ useMasterKey: true });  
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });  
    return `Deleted ${oldTodos.length} old Todos.`;  
  } catch (err) {  
    throw new Error('Error during cleanup: ' + err.message);  
  }  
});  
﻿
В панели управления перейдите в Настройки приложения > Настройки сервера > Фоновая работа для планирования.
Планирование облачного задания
﻿
Шаг 8 – Интеграция вебхуков
Webhooks позволяют вашему приложению отправлять HTTP-запросы на внешний сервис, когда происходят определенные события:
Перейдите в Дополнительно > WebHooks в вашей панели управления Back4app.
Добавьте новый Webhook с вашим внешним конечным пунктом.
Настройте триггеры для событий, таких как “новая запись в классе Todo.”
Добавление Webhook
﻿
Вы можете интегрировать Slack или платежный шлюз, такой как Stripe, отправляя данные событий через вебхуки.
WebHook перед сохранением
﻿
Шаг 9 – Изучение панели администратора Back4app
Приложение Back4app Admin App предлагает нетехнический, веб-интерфейс для операций CRUD.
Включение приложения администратора
Перейдите в Панель управления приложением > Дополнительно > Админ-приложение и нажмите «Включить админ-приложение»:
Включить админ-приложение
﻿
Создайте первого администратора, который автоматически создаст новую роль (B4aAdminUser) и классы в вашей схеме:
﻿
Выберите поддомен для доступа к админ-приложению:
﻿
Войдите с использованием ваших новых учетных данных администратора:
﻿
После активации это приложение для администраторов позволяет вам управлять данными или предоставлять доступ членам команды без программирования.
Заключение
В этом руководстве вы узнали, как создать бэкенд для jQuery с помощью Back4app. Вы:
Создали новый проект Back4app в качестве основы для вашего бэкенда.
Настроили базу данных, включая проектирование схемы и связи данных.
Использовали ACL и CLP для тонкой настройки безопасности.
Развернули Cloud Code для пользовательской серверной логики.
Настроили аутентификацию пользователей, хранение файлов и обновления в реальном времени.
Запланировали фоновые задачи и интегрировали вебхуки для внешних сервисов.
Изучили панель администратора Back4app для более простого управления данными.
Теперь вы готовы расширить эту базовую настройку jQuery + Back4app в полноценное производственное решение. Продолжайте интегрировать расширенные функции, такие как социальный вход или более детализированные правила безопасности. Наслаждайтесь созданием своих масштабируемых, ориентированных на данные приложений!
Следующие шаги
Подготовьтесь к производству: Добавьте расширенные разрешения на основе ролей, стратегии кэширования и оптимизацию производительности.
Интегрируйте сторонние API: Для платежей, обмена сообщениями или аналитики.
Изучите документацию Back4app: Углубитесь в расширенную безопасность, журналы или аналитику.
Создавайте реальные приложения: Используйте простоту jQuery в сочетании с мощными бэкенд-сервисами Back4app.
﻿