Как разработать базовое CRUD мобильное приложение с NativeScript?

обзор в этом руководстве вы создадите полнофункциональное мобильное приложение crud (создание, чтение, обновление, удаление) с использованием nativescript этот учебник проведет вас через настройку вашего проекта, конфигурацию надежного бэкенда на back4app и интеграцию фронтенда nativescript для управления и обновления данных без проблем мы начинаем с создания нового проекта back4app под названием basic crud app ns , который служит основой для ваших операций с данными затем вы определите гибкую схему базы данных, настроив коллекции и поля, либо вручную, либо с помощью ai агента back4app после этого вы воспользуетесь приложением администратора back4app — интерфейсом без кода, предназначенным для простого управления данными — чтобы эффективно выполнять задачи crud наконец, вы интегрируете ваше мобильное приложение nativescript с back4app, используя rest api, обеспечивая безопасность вашего бэкенда с помощью продвинутых средств управления доступом к концу этого учебника у вас будет готовое к производству мобильное приложение, которое не только выполняет основные операции crud, но и включает аутентификацию пользователей и безопасное управление данными основные идеи освойте искусство создания мобильных приложений crud, которые эффективно управляют данными с использованием надежного бэкенда узнайте, как разработать масштабируемую базу данных и бесшовно интегрировать ее с фронтендом nativescript узнайте, как использовать интерфейс администратора с функцией перетаскивания (приложение администратора back4app) для упрощения управления данными поймите лучшие практики по обеспечению безопасности вашего бэкенда с помощью acl и разрешений на уровне классов предварительные требования учетная запись back4app с новым проектом если вам нужна помощь, ознакомьтесь с начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки nativescript установите cli nativescript и настройте свою среду, следуя документации nativescript https //docs nativescript org/start/quick setup базовые знания javascript/typescript, nativescript и restful api при необходимости ознакомьтесь с руководствами nativescript https //docs nativescript org/ перед началом убедитесь, что у вас есть шаг 1 – инициализация проекта создание нового проекта back4app войдите в свою панель управления back4app выберите опцию “новое приложение” назовите свой проект basic crud app ns и следуйте инструкциям для его создания создать новый проект после настройки вашего проекта он будет отображаться в вашей панели управления, готовый к конфигурации и управлению бэкендом шаг 2 – проектирование схемы базы данных создание вашей модели данных для этого crud мобильного приложения вы создадите ключевые коллекции ниже приведены образцы коллекций вместе с основными полями и типами данных для настройки вашей схемы, что позволит выполнять основные операции по созданию, чтению, обновлению и удалению данных 1\ коллекция предметов эта коллекция содержит детали для каждого элемента поле тип данных описание ид идентификатор объекта автоматически сгенерированный основной идентификатор название строка название или заголовок элемента описание строка краткое резюме предмета создано в дата время создания элемента обновлено дата время, когда элемент был в последний раз изменен 2\ коллекция пользователей эта коллекция хранит учетные данные и детали пользователя поле тип данных описание ид идентификатор объекта автоматически сгенерированный основной идентификатор имя пользователя строка уникальное имя пользователя электронная почта строка уникальный адрес электронной почты хэш пароля строка безопасно захешированный пароль создано в дата время создания аккаунта обновлено дата последнее время обновления для профиля пользователя вы можете создать эти коллекции вручную в панели управления back4app, добавив новый класс для каждой коллекции и определив соответствующие столбцы создать новый класс определите каждое поле, выбрав тип данных, назвав его и указав значения по умолчанию или требования создать колонку использование ai агента back4app для настройки схемы ai агент back4app — это эффективный инструмент в вашей панели управления, который может автоматически генерировать схему вашей базы данных на основе запроса, описывающего ваши желаемые коллекции и поля эта функция упрощает процесс и обеспечивает согласованность как использовать ai агента запустите ai агента получите доступ к нему из панели управления back4app или настроек проекта опишите вашу модель данных введите запрос, описывающий коллекции и поля, которые вам нужны просмотрите и подтвердите изучите сгенерированные предложения схемы и примените их к вашему проекту пример запроса create these collections for my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) этот процесс экономит время и обеспечивает согласованность и оптимизацию вашей схемы шаг 3 – активация приложения администратора и выполнение операций crud представление приложения администратора приложение администратора back4app предлагает интерфейс без кода для легкого управления вашими данными на сервере его дизайн с перетаскиванием позволяет быстро и эффективно выполнять операции crud как включить приложение администратора перейдите в меню “дополнительно” на вашей панели управления back4app выберите “приложение администратора” и затем нажмите “включить приложение администратора ” настройте свои учетные данные администратора создав первого администратора, что также устанавливает роли (например, b4aadminuser ) и системные коллекции включить приложение администратора после активации войдите в приложение администратора, чтобы начать управлять вашими коллекциями панель управления приложения администратора выполнение операций crud с помощью приложения администратора в приложении администратора вы можете создавать записи используйте опцию “добавить запись” в любой коллекции (например, товары), чтобы вставить новые записи читать/изменять записи нажмите на любую запись, чтобы просмотреть ее детали или отредактировать информацию удалять записи выберите опцию удаления, чтобы устранить записи, которые больше не нужны этот интуитивно понятный инструмент улучшает пользовательский опыт, упрощая задачи управления данными шаг 4 – подключение nativescript к back4app после настройки вашего бэкенда и управления данными через admin app, следующим шагом является связывание вашего мобильного приложения nativescript с back4app использование rest api для интеграции поскольку интеграция sdk может быть не оптимальной для nativescript в этом сценарии, вы можете использовать rest api для выполнения операций crud пример получение данных с помощью rest ниже приведен пример того, как извлечь элементы из вашей базы данных back4app, используя rest запрос в файле сервиса nativescript // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function fetchitems() { try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = response content tojson(); return data results; } catch (error) { console error('error fetching items ', error); throw error; } } интегрируйте аналогичные вызовы rest api в ваши компоненты nativescript для обработки операций создания, обновления и удаления шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) защитите свои данные, установив acl для каждого объекта например, чтобы создать приватный элемент, используйте следующий подход // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function createprivateitem(itemdata { title string; description string }, ownerid string) { const payload = { title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }; try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('error creating item ', error); throw error; } } настройка разрешений на уровне класса (clp) в панели управления back4app настройте clp для каждой коллекции, чтобы определить права доступа по умолчанию это помогает гарантировать, что только авторизованные пользователи могут получить доступ или изменить конфиденциальные данные шаг 6 – аутентификация пользователя настройка управления учетными записями back4app использует класс пользователя parse для управления аутентификацией в вашем приложении nativescript реализуйте процессы регистрации и входа, как показано ниже пример регистрация пользователя // app/services/auth service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function signup(username string, password string, email string) { const payload = { username, password, email }; try { const response = await http request({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('sign up error ', error); throw error; } } аналогичный метод можно использовать для входа в систему и управления сессиями пользователей дополнительные функции, такие как социальный вход, подтверждение электронной почты и сброс пароля, можно настроить через панель управления back4app шаг 7 – заключение и будущие направления отлично! вы создали полное базовое мобильное приложение crud с использованием nativescript и back4app ваш проект, basic crud app ns , включает в себя хорошо определенный бэкенд с коллекциями для элементов и пользователей, которые управляются без проблем через приложение администратора вы также интегрировали свой фронтенд на nativescript с back4app через rest api и защитили свои данные с помощью надежных acl и clp следующие шаги улучшите свое мобильное приложение добавьте функции, такие как детальные представления, функциональность поиска и push уведомления расширьте функциональность интегрируйте расширенные функции бэкенда, такие как облачные функции или сторонние api сервисы дальнейшее обучение изучите документацию back4app https //www back4app com/docs и дополнительные ресурсы nativescript, чтобы улучшить свои навыки счастливого кодирования и удачи в ваших будущих проектах мобильных приложений!