Quickstart

16 мин

введение этот гид поможет вам настроить и использовать back4app с новым или существующим проектом, используя react native cli вы установите parse sdk , инициализируете его с вашими ключами приложения и создадите ваш первый api вызов для сохранения и извлечения данных из back4app предварительные условия для завершения этого учебника вам потребуется созданное приложение https //www back4app com/docs/get started/new parse app на back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm или yarn установлен npx https //www npmjs com/package/npx пакетный запускатель установлен 1 создайте ваш проект react native существует два основных способа создания проекта react native react native cli и expo выберите в зависимости от вашей среды разработки и целевой платформы (ios или android) react native cli инструкции зависят от вашей операционной системы для разработки и от того, хотите ли вы начать разработку для ios или android для получения дополнительной информации ознакомьтесь с официальной документацией здесь https //reactnative dev/docs/environment setup expo установите expo cli глобально npm install g expo cli создайте новый проект react native expo init b4aproject cd b4aproject expo start 2 установите зависимости в вашем проекте react native установите parse javascript sdk и asyncstorage , выполнив npm install parse @react native async storage/async storage save parse javascript sdk для интеграции вашего приложения с серверами back4app react native async storage для использования parse sdk требуется обработчик asyncstorage для ios также добавьте поддержку нативного asyncstorage cd ios & pod install 3 получите свои ключи приложения после создания вашего приложения на back4app найдите свои ключи приложения в настройки приложения > безопасность и ключи вам понадобятся как id приложения так и javascript key для подключения 4 инициализируйте parse и подключитесь к back4app откройте index tsx и инициализируйте parse с вашим id приложения и javascript key index tsx import parse from 'parse/react native'; import asyncstorage from '@react native async storage/async storage'; // initialize parse only once parse setasyncstorage(asyncstorage); parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com/'; 5 сохраните и извлеките данные с инициализированным parse создайте две функции в index tsx для сохранения и извлечения данных из back4app // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } 6 протестируйте ваше приложение откройте терминал вашего проекта запустите проект react native cli запустите \npx react native run android\ или \npx react native run ios\ чтобы открыть приложение на вашей целевой платформе expo запустите \expo start\ , и следуйте инструкциям, чтобы просмотреть приложение в вашем браузере или на устройстве устранение неполадок некоторые распространенные проблемы и решения metro обнаружил ошибку при попытке разрешить модуль “idb keyval’ из файла решение перейдите в файл \metro conf js\ и измените его на этот 1 const { getdefaultconfig } = require("@expo/metro config"); 2 const defaultconfig = getdefaultconfig( dirname); 3 defaultconfig resolver assetexts push("cjs"); 4 module exports = defaultconfig; не удается разрешить модуль ‘eventemitter’ решение перейдите в файл \node modules\parse\lib\react native\eventemitter js\ и измените эту строку var eventemitter = require(' / / /react native/libraries/vendor/emitter/eventemitter'); на эту импортировать eventemitter из 'react native/libraries/vendor/emitter/eventemitter'; в том же файле \eventemitter js\ , измените следующую строку module exports = eventemitter; на это export default eventemitter; проблемы с babel если у вас возникли проблемы с babel, рассмотрите возможность обновления вашего babel config js до следующего module exports = function (api) { api cache(true); return { presets \['babel preset expo'], plugins \[ '@babel/plugin proposal export namespace from', 'react native reanimated/plugin', ], }; }; следующие шаги этот гид охватывает базовую настройку и хранение данных с back4app изучите возможности parse, включая хранение данных, возможности в реальном времени, локальное хранение данных, облачные функции, аутентификацию и хранение файлов