Как загружать файлы в Back4app

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

Back4app предоставляет простой и эффективный механизм хранения, управления и поиска файлов, основанный на Parse.

В этом руководстве вы узнаете, как хранить файлы с помощью Back4app, интегрируя его возможности хранения файлов с приложением React.

Как работает файловое хранилище на Back4app

Back4app управляет загрузкой и хранением файлов с помощью класса Parse.File.

Класс Parse.File позволяет хранить файлы, которые слишком велики для хранения в Parse.Object, например изображения, видео, документы и любые другие двоичные данные.

Чтобы загрузить файл в облачное хранилище Back4app, необходимо создать экземпляр Parse.File с данными файла и сохранить его. Для создания нового экземпляра Parse.File требуется имя файла, файл и тип содержимого/файла (необязательно).

Важно убедиться, что имя файла содержит расширение файла, чтобы Parse мог обработать его соответствующим образом.

Однако имена не обязательно должны быть уникальными, поскольку каждый загружаемый файл получает уникальный идентификатор, поэтому загрузка нескольких файлов с именем example.jpeg не приведет к коллизии имен.

Когда вы загружаете файл, Parse.File автоматически определяет его тип на основе расширения файла из его имени. Однако вы можете отменить автоматическое определение, указав параметр Content-Type.

Чтобы получить доступ к загруженным файлам в Back4app, вам необходимо связать их с объектом данных после загрузки.

Затем вы можете запросить связанный объект данных, чтобы получить файлы. Файлы, которые загружены, но не связаны с объектом данных, становятся “бесхозными”, и вы не сможете получить к ним доступ.

Теперь, когда вы поняли, как работает хранилище файлов в Back4app, вы создадите приложение галереи с помощью React, чтобы продемонстрировать, как можно хранить и извлекать файлы из Back4app.

Создание приложения React

Чтобы реализовать возможности файлового хранилища Back4app с помощью React, вам сначала нужно создать React-приложение для интеграции с Back4app. Для этого вы используете Vite, фронтенд-инструмент для быстрого создания веб-приложений.

Вы можете создать React-приложение с помощью Vite, выполнив следующую команду в терминале:

npm init vite

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

Как видно на изображении выше, название проекта – gallery-app. Выбрав опцию React, вы выберете язык программирования для разработки приложения React.

Для этого проекта выберите опцию JavaScript. Теперь ваш проект готов.

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

# Switch to the project directory
cd gallery-app

# Install dependencies
npm install

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

Создание приложения React

Откройте проект React в IDE и создайте папку components в каталоге src. В папку components добавьте компонент FileUpload.

В компонент FileUpload добавьте следующие строки кода:

//FileUpload.jsx
import React from "react";

function FileUpload({updateData}) {
  const [file, setFile] = React.useState("");

  const handleFIleUpload = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <form>
      <label htmlFor="file-upload" className="custom-file-upload">
        Choose File
      </label>
      <input
        id="file-upload"
        type="file"
        style={{ display: "none" }}
        onChange={handleFileUpload}
      />
    </form>
  );
}

export default FileUpload;

Блок кода выше представляет компонент FileUpload, который позволяет выбрать локальный файл. Он содержит состояние файла. Он использует элемент ввода типа файла для доступа и выбора локального файла с вашего устройства.

В блоке кода есть функция handleFileSelect. Эта функция использует метод setFile для обновления состояния файла первым файлом, выбранным пользователем.

Теперь измените код в своем компоненте приложения, добавив строки кода в блок кода ниже:

//App.jsx
import FileUpload from "./components/FileUpload";

function App() {
  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>
      <>
        <FileUpload />
      </>
    </main>
  );
}

export default App;

Приведенный выше блок кода импортирует компонент FileUpload и отображает его в элементе main. Компонент также содержит элемент h1, который отображает текст “Моя галерея”.

У вас есть готовые компоненты. Далее вам нужно оформить приложение. Для этого замените код в файле index.css и добавьте этот код:

/*index.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #F2F2F2;
  color: #333333;
  font-family: "Montserrat", sans-serif;
}

.container{
  inline-size: 60%;
  margin: auto;
}

.title{
  text-align: center;
  margin-block-start: 1rem;
  margin-block-end: 6rem;
}

.custom-file-upload {
  display: inline-block;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
}

.custom-file-upload:hover {
  background-color: #333333;
  color: #FFFFFF;
}

Настройка приложения Back4app

Чтобы настроить приложение Back4app, вам необходимо войти в свою учетную запись Back4app. Если у вас нет учетной записи, вы можете создать ее бесплатно.

После входа в систему вы будете использовать агента Back4app AI для создания нового приложения. Агент AI – это служба Back4app, которая позволяет вам взаимодействовать и управлять приложениями Back4app с помощью подсказок.

Вы можете получить доступ к нему, нажав на ссылку AI agent на панели навигации панели управления вашей учетной записи, как показано на рисунке ниже.

Чтобы создать приложение Back4app с помощью агента ИИ, напишите сообщение, в котором попросите ИИ создать приложение, как показано ниже:

Create a new Back4app application named gallery-app

Приведенная выше подсказка заставит ИИ создать новое приложение Back4app. Как только ИИ создаст приложение, он отправит ответ, подтверждающий его создание, вместе с учетными данными приложения.

Например, так:

Теперь ваше приложение Back4app готово. Скопируйте идентификатор App ID и учетные данные JavaScript-ключа, поскольку они понадобятся вам позже.

Чтобы получить доступ к приложению, зайдите на панель приложений, нажав на ссылку “Мои приложения” на панели навигации.

Теперь, когда вы успешно создали бэкэнд Back4app с помощью агента искусственного интеллекта, вам нужно подключить ваше приложение React к бэкэнду.

Подключение вашего приложения React к Back4app

Чтобы подключить ваше приложение React к Back4app, вам нужно установить Parse SDK, выполнив следующую команду:

npm install parse

Затем импортируйте минифицированную версию parse в свой компонент приложения и инициализируйте его учетными данными, которые вы сохранили ранее в статье, добавив в компонент приложения блок кода, приведенный ниже:

//App.jsx

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = "<https://parseapi.back4app.com/>";

Замените 'YOUR_APPLICATION_ID' и 'YOUR_CLIENT_KEY' на учетные данные, полученные от Back4App. Убедитесь, что вы надежно сохранили учетные данные, например, с помощью переменных env.

Загрузка файлов в Back4app

Чтобы сохранить файл в облачном хранилище Back4app, сначала нужно создать экземпляр Parse.File. Затем необходимо сохранить экземпляр Parse.File, вызвав метод save.

Затем вам нужно связать сохраненный файл с объектом данных, чтобы иметь возможность извлечь его.

Чтобы добиться этого, создайте новый подкласс Parse.Object, добавьте файл в свойство нового подкласса и сохраните его в Back4app.

Чтобы реализовать описанную выше логику, измените функцию handleFileUpload в компоненте FileUpload так, чтобы она соответствовала приведенному ниже блоку кода:

//FileUpload.jsx
const handleFileUpload = async (event) => {
    event.preventDefault();
    try {
      let name = "image.jpg";
      const File = new Parse.File(name, event.target.files[0]);
      const photo = await File.save();

      const Gallery = Parse.Object.extend("Gallery");
      const gallery = new Gallery();
      gallery.set("photo", photo);
      await gallery.save();

      console.log("File saved:", File);
      updateData();
    } catch (error) {
      console.error("Error saving file:", error);
    }
  };

Функция handleFileUpload содержит логику, отвечающую за загрузку фотографии с вашего локального устройства на сервер. Она создает новый экземпляр Parse.File.

Метод Parse.File принимает два аргумента: переменную name, представляющую имя фотографии, и первый файл, который выбирает пользователь.

Функция сохраняет файл на сервере, вызывая метод save на экземпляре File. Затем она создает новый объект Parse для класса Gallery.

Используя метод set, она устанавливает файл с фотографией в качестве значения свойства photo объекта галереи. Наконец, функция сохраняет объект галереи на сервере с помощью функции gallery.save().

Получение файлов из Back4app

Чтобы получить файл из облачного хранилища Back4app, вам нужно получить объект Parse, содержащий этот файл. Это можно сделать, создав новый запрос, нацеленный на класс с объект Parse.

Чтобы реализовать описанную выше логику, создайте компонент Feed и добавьте в него приведенный ниже блок кода:

//Feed.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";

function Feed({data}) {
  const [gallery, setGallery] = React.useState([]);

  React.useEffect(() => {
    const fetchFiles = async () => {
      let query = new Parse.Query("Gallery");
      const results = await query.find();
      setGallery(results);
    };
    fetchFiles();
  }, [data]);

  return (
    <div className="photos">
      {gallery.map((item) => (
        <img src={item.get("photo").url()} key={item.id} />
      ))}
    </div>
  );
}

export default Feed;

Приведенный выше блок кода создает состояние галереи и присваивает ему пустой массив. Он использует хук useEffect для запуска функции fetchFiles.

Хук useEffect будет запускать функцию после первого рендеринга компонента и при каждом изменении реквизита данных.

Функция fetchFiles создает новый запрос к классу “Галерея” с помощью метода Parse.Query.

Вызов метода find для запроса возвращает массив, содержащий результаты запроса. Наконец, функция fetchFiles присваивает массив результатов состоянию галереи с помощью функции setGallery.

Наконец, с помощью метода map вы отображаете элемент img для каждого элемента в массиве галереи. Код устанавливает значение атрибута src элемента img в URL-адрес свойства photo каждого элемента.

Стилизуйте элемент div с классом photos, добавив приведенный ниже блок кода в файл index.css:

/*index.css*/
.photos{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-block-start: 4rem;
}

Чтобы отобразить компонент Feed в своем приложении, убедитесь, что вы импортировали и вызвали компонент Feed в своем компоненте App. После внесения всех изменений ваш компонент App должен выглядеть следующим образом:

//App.jsx
import React from "react";
import Parse from "parse/dist/parse.min.js";
import FileUpload from "./components/FileUpload";
import Feed from "./components/Feed";

Parse.initialize(PARSE_APP_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "<https://parseapi.back4app.com/>";

function App() {
  const [data, setData] = React.useState(1);

  const updateData = (prevState) => {
    setData(() => prevState + 1);
  };

  return (
    <main className="container">
      <h1 className="title">My Gallery</h1>

      <>
        <FileUpload updateData={updateData} />
        <Feed data={data} />
      </>
    </main>
  );
}

export default App;

Тестирование вашего приложения

Запустите свое приложение, выполнив приведенный ниже блок кода в каталоге вашего приложения:

npm run dev

Выполнение приведенной выше команды запустит ваше приложение на сайте http://localhost:5173/.

Перейдите по адресу http://localhost:5173/, и вы увидите страницу, похожую на рисунок ниже:

Нажмите на кнопку “Выбрать файл” и выберите изображение с локального устройства.

Вы можете проверить, успешно ли загружено изображение, зайдя на панель управления вашего приложения Back4app.

После успешной загрузки Back4app добавит строку в таблицу класса "Галерея", как показано на изображении ниже.

Кроме того, вы можете проверить, увидев изображение на экране, как показано на рисунке ниже.

Развертывание приложения на контейнерах Back4app

В этом разделе вы развернете свое приложение на контейнерах Back4app. Для этого необходимо сначала выполнить докеризацию приложения и разместить его в репозитории GitHub.

Процесс развертывания можно выполнить вручную с помощью интерфейса Back4app UI или автоматически с помощью агента Back4app AI. В этом руководстве вы выполните процесс развертывания с помощью агента AI.

Создание Dockerfile

Создайте Dockerfile в корневом каталоге вашего приложения и добавьте в него блок кода:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

Затем создайте файл .dockerignore в корневом каталоге вашего приложения и добавьте в него блок кода, приведенный ниже:

node_modules

Добавление модулей node в файл .dockerignore гарантирует, что Docker исключит папку node_modules из контекста при сборке образа.

Обратите внимание, что вы создали React-приложение с помощью Vite, поэтому вам придется настроить Vite для поддержки Docker. Чтобы настроить Vite, замените код в файле vite.config.js на блок кода ниже:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

Этот блок кода гарантирует, что Vite запустит сервер только в том случае, если указанный порт доступен, и указывает номер порта, который сервер разработки будет прослушивать на порту 5173.

Затем соберите докер-образ приложения, чтобы убедиться, что все работает, выполнив приведенную ниже команду в терминале:

docker build -t gallery-app .

Итак, вы успешно докеризировали свое приложение, и теперь вам предстоит его развернуть.

Развертывание приложения

Перед развертыванием приложения интегрируйте свой аккаунт GitHub с приложением Back4app Github и предоставьте ему доступ к репозиторию, который вы хотите развернуть.

Перейдите к агенту AI и введите указанный ниже запрос для развертывания приложения:

Deploy my repository <<repository-url>> on Back4app containers

Замените repository-url на URL репозитория GitHub вашего приложения. Подсказка выше инициирует процесс развертывания.

Как видно на изображении выше, агент ИИ начал процесс развертывания. В то же время статус развертывания – “развертывание”.

Через несколько минут вы можете спросить агента AI о статусе развертывания приложения. Если приложение было развернуто успешно, статус развертывания изменится на готовность.

Например, так:

На изображении выше видно, что статус развертывания изменился с “deploying” на “ready”, что означает, что приложение успешно развернуто и теперь работает.

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

Заключение

В этой статье вы узнали, как загружать и получать файлы с помощью Back4app, создав простое приложение галереи с помощью React.

Кроме того, вы узнали, как развернуть приложение React на Back4app с помощью агента Back4app AI.

С помощью Back4app вы сможете эффективно и безопасно хранить и управлять своими файлами. Код, использованный в этом руководстве, доступен в этом репозитории GitHub.