Как создать CRUD-приложение с TypeScript?

обзор в этом руководстве вы узнаете, как создать приложение crud (создание, чтение, обновление, удаление) с использованием typescript мы будем использовать back4app в качестве платформы для бэкенда, что упростит управление данными это руководство охватывает настройку проекта back4app, моделирование ваших данных и интеграцию функциональности crud в приложение на typescript сначала вы создадите проект на back4app под названием basic crud app typescript который предлагает гибкое решение для хранения nosql вы спроектируете свою структуру данных, определив классы и поля вручную или с помощью ai агента back4app затем вы будете использовать приложение back4app admin для управления бэкендом через удобный интерфейс, который упрощает операции с данными наконец, вы подключите ваше приложение на typescript к back4app, используя parse javascript sdk, обеспечивая безопасный доступ и аутентификацию к концу этого учебника у вас будет полностью функционирующее приложение на typescript, способное выполнять основные задачи crud, включая аутентификацию пользователей и управление данными что вы узнаете как создать приложение crud на основе typescript с nosql бэкендом методы проектирования масштабируемого бэкенда, интегрированного с фронтендом на typescript как использовать admin app от back4app для легкого управления вашими данными стратегии развертывания, включая контейнеризацию docker, для плавного запуска вашего приложения на typescript предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с настроенным проектом нужна помощь? посетите начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки typescript используйте редактор, такой как visual studio code, и убедитесь, что у вас установлен node js базовые знания typescript, объектно ориентированного программирования и restful api если необходимо, обратитесь к документации typescript https //www typescriptlang org/docs/ шаг 1 – инициализация проекта настройка нового проекта back4app войдите в свою учетную запись back4app нажмите на кнопку “новое приложение” на вашей панели управления введите имя проекта basic crud app typescript и следуйте инструкциям для завершения создания проекта создать новый проект после создания проекта он появится на вашей панели управления, служа основой для вашего бэкенда шаг 2 – создание схемы данных определение ваших структур данных для этого приложения вы создадите несколько коллекций (классов) на back4app ниже приведены примеры основных классов с полями, которые облегчают операции crud 1\ коллекция предметов поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое описание предмета создано дата время создания элемента обновлено дата метка времени для последнего обновления 2\ коллекция пользователей поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя для пользователя электронная почта строка уникальный адрес электронной почты хешпароля строка безопасно захешированный пароль для входа создано дата время создания аккаунта обновлено дата метка времени для последнего обновления аккаунта вы можете создать эти коллекции и поля вручную в панели управления back4app создать новый класс при добавлении полей выберите тип данных, назовите поле, установите значение по умолчанию, если это необходимо, и укажите, является ли оно обязательным создать колонку использование ai агента back4app для настройки схемы интегрированный ai агент в back4app может автоматически генерировать вашу схему данных из описания это упрощает настройку и гарантирует, что ваша модель готова для операций crud как использовать ai агента откройте ai агента войдите в свою панель управления back4app и найдите ai агента в настройках проекта опишите вашу схему предоставьте подробное описание коллекций и полей, которые вам нужны просмотрите и подтвердите ai агент предложит схему просмотрите ее и подтвердите, чтобы применить изменения пример запроса create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот метод с помощью ai экономит время и гарантирует хорошо структурированную схему шаг 3 – использование приложения администратора для операций crud обзор приложения администратора приложение администратора back4app предоставляет интерфейс без кода, который упрощает управление вашими данными на сервере его функции перетаскивания позволяют вам выполнять операции crud — такие как добавление, чтение, обновление и удаление записей — без лишних хлопот включение приложения администратора перейдите в меню “дополнительно” на вашей панели управления back4app выберите “приложение администратора” и нажмите на “включить приложение администратора ” настройте свои учетные данные администратора создав начальную учетную запись администратора, которая также определит роли, такие как b4aadminuser и системные классы включить приложение администратора после активации войдите в приложение администратора, чтобы управлять своими данными панель управления приложения администратора управление операциями crud с помощью приложения администратора в приложении администратора вы можете вставить записи используйте функцию “добавить запись” в любой коллекции (например, товары), чтобы ввести новые данные просмотреть и отредактировать нажмите на запись, чтобы просмотреть детали или изменить поля удалить записи удалите записи, которые больше не нужны этот интуитивно понятный интерфейс улучшает управление данными, упрощая рутинные задачи шаг 4 – подключение вашего приложения typescript к back4app с вашим бэкендом готовым, следующий шаг – связать ваше приложение typescript с back4app вариант a использование parse javascript sdk установите parse javascript sdk используя npm, выполните npm install parse инициализируйте parse в вашем приложении typescript создайте файл конфигурации (например, parseconfig ts ) // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } вариант b использование rest или graphql если вы предпочитаете не использовать parse sdk, вы можете выполнять операции crud через rest например, чтобы получить элементы с помощью rest import fetch from 'node fetch'; export async function getitemsviarest() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } интегрируйте эти api вызовы по мере необходимости в ваши модули typescript шаг 5 – обеспечение безопасности бэкенда настройка списков контроля доступа (acl) защитите свои данные, применяя acl к вашим объектам например, чтобы создать элемент, к которому может получить доступ только его владелец import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } управление разрешениями на уровне классов (clp) настройте clp через панель управления back4app, чтобы установить ограничения доступа, чтобы только аутентифицированные пользователи могли взаимодействовать с определенными коллекциями шаг 6 – реализация аутентификации пользователей управление учетными записями пользователей back4app использует встроенный класс пользователей parse для обработки аутентификации в вашем приложении на typescript реализуйте регистрацию и вход пользователей следующим образом import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } этот подход можно расширить для управления сессиями, сброса паролей и других функций аутентификации шаг 7 – развертывание вашего приложения на typescript back4app упрощает процесс развертывания вы можете развернуть ваше приложение на typescript, используя такие методы, как контейнеризация docker 7 1 создание вашего приложения на typescript компиляция и упаковка используйте ваш инструмент сборки (например, webpack или tsc) для компиляции и упаковки вашего приложения например, чтобы скомпилировать с помощью tsc tsc подтвердите вывод убедитесь, что сгенерированные файлы включают все необходимые ресурсы и модули 7 2 организация структуры вашего проекта типичный проект на typescript может выглядеть так basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md пример parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 докеризация вашего приложения на typescript если вы выберете контейнеризацию, добавьте dockerfile в корень вашего проекта \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 развертывание через back4app web deployment свяжите ваш репозиторий github убедитесь, что ваш проект на typescript размещен на github настройте параметры развертывания в панели управления back4app используйте опцию web deployment для подключения вашего репозитория (например, basic crud app typescript ) и выберите соответствующую ветку определите команды сборки и вывода укажите команду сборки (например, npm run build ) и укажите директорию вывода разверните ваше приложение нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – заключительные мысли и будущие улучшения поздравляем! вы успешно создали crud приложение на основе typescript, интегрированное с back4app вы настроили проект под названием basic crud app typescript , разработали коллекции для элементов и пользователей и управляли своими данными с помощью приложения администратора back4app кроме того, вы подключили свое приложение на typescript через parse javascript sdk (или rest/graphql) и реализовали надежные меры безопасности что дальше? расширьте свое приложение интегрируйте дополнительные функции, такие как расширенная фильтрация, детальные представления элементов или обновления данных в реальном времени улучшите возможности бэкенда изучите облачные функции, интегрируйте сторонние api или реализуйте разрешения на основе ролей дальнейшее обучение посетите документацию back4app https //www back4app com/docs и ознакомьтесь с дополнительными руководствами для оптимизации вашего приложения счастливого кодирования и наслаждайтесь созданием вашего crud приложения на typescript!