Установка и интеграция Parse SDK с React проектом

быстрый старт введение в этом разделе вы узнаете, как начать работу с back4app, используя существующий или новый проект на react вы установите parse sdk parse sdk , инициализируете parse, используя ваши ключи приложения ключи приложения , и сделаете свой первый api вызов, сохраняя и читая объекты данных из back4app предварительные требования чтобы завершить этот учебник, вам потребуется созданное приложение на back4app; недавняя версия node js , включая yarn yarn и npx npx 1 создание проекта на react если у вас уже есть работающий проект на react, вы можете перейти к следующему шагу запустите следующую команду в директории, в которой вы хотите сохранить проект, указав его имя, в данном случае, back4app guide react back4app guide react если node js node js правильно настроен, вы должны увидеть, как проект создается в вашем терминале после завершения вы увидите сообщение, информирующее вас о том, что процесс прошел успешно откройте проект в вашем любимом редакторе кода и давайте начнем интеграцию parse 2 установите зависимости теперь давайте установим единственную необходимую зависимость, parse javascript sdk parse javascript sdk , чтобы интегрировать ваше приложение с серверами back4app выполните следующую команду в корневом каталоге вашего проекта 3 получите ключи вашего приложения после создания вашего приложения на back4app, перейдите на панель управления вашего приложения и получите ключи вашего приложения в разделе настройки приложения >безопасность и ключи настройки приложения >безопасность и ключи (посмотрите изображение ниже) обратите внимание, что вам всегда понадобятся два ключа для подключения к back4app id приложения id приложения и javascript key javascript key 4 инициализация parse и подключение к back4app перейдите в ваш app js app js и инициализируйте parse sdk parse sdk с использованием как id приложения id приложения так и javascript key javascript key (проверьте предыдущий шаг) 1 // import parse minified version 2 import parse from 'parse/dist/parse min js'; 3 4 // your parse initialization configuration goes here 5 const parse application id = 'your application id here'; 6 const parse host url = 'https //parseapi back4app com/'; 7 const parse javascript key = 'your javascript key here'; 8 parse initialize(parse application id, parse javascript key); 9 parse serverurl = parse host url; 5 сохраните и прочитайте простой объект данных ваше приложение инициализировано и может безопасно подключаться к облачным сервисам back4app теперь давайте создадим компонент, содержащий две простые функции для сохранения и извлечения данных из вашей базы данных back4app создайте новый файл с именем personcomponent js personcomponent js в вашем src src каталоге и добавьте следующий код 1 import react, { usestate } from 'react'; 2 import parse from 'parse/dist/parse min js'; 3 4 export const personcomponent = () => { 5 // state variables 6 const \[person, setperson] = usestate(null); 7 8 async function addperson() { 9 try { 10 // create a new parse object instance 11 const person = new parse object('person'); 12 // define the attributes you want for your object 13 person set('name', 'john'); 14 person set('email', 'john\@back4app com'); 15 // save it on back4app data store 16 await person save(); 17 alert('person saved!'); 18 } catch (error) { 19 console log('error saving new person ', error); 20 } 21 } 22 23 async function fetchperson() { 24 // create your parse query using the person class you've created 25 const query = new parse query('person'); 26 // use the equalto filter to look for user which the name is john this filter can be used in any data type 27 query equalto('name', 'john'); 28 // run the query 29 const person = await query first(); 30 // access the parse object attributes 31 console log('person name ', person get('name')); 32 console log('person email ', person get('email')); 33 console log('person id ', person id); 34 setperson(person); 35 } 36 37 return ( 38 \<div> 39 \<button onclick={addperson}>add person\</button> 40 \<button onclick={fetchperson}>fetch person\</button> 41 {person !== null && ( 42 \<div> 43 \<p>{`name ${person get('name')}`}\</p> 44 \<p>{`email ${person get('email')}`}\</p> 45 \</div> 46 )} 47 \</div> 48 ); 49 }; метод addperson addperson создает новый parse object parse object представляющий класс person person , устанавливает его свойства, а затем сохраняет его в облачном хранилище данных back4app метод fetchperson fetchperson извлекает parse object parse object , у которого атрибут name name равен джон джон когда запрос разрешается, вы сможете получить доступ к атрибутам персоны, используя метод get get обратите внимание также на элементы интерфейса в этом компоненте, они состоят из двух кнопок, вызывающих методы, а также двух абзацев, получающих загруженные персона персона через переменную состояния теперь нам нужно импортировать и использовать этот компонент в вашем основном app js app js файле ваш app js app js файл должен выглядеть примерно так, после удаления большей части кода заполнителя в нем 1 import ' /app css'; 2 import parse from 'parse/dist/parse min js'; 3 import { personcomponent } from ' /personcomponent'; 4 5 // your parse initialization configuration goes here 6 const parse application id = 'your parse application id'; 7 const parse host url = 'https //parseapi back4app com/'; 8 const parse javascript key = 'your parse javascript key'; 9 parse initialize(parse application id, parse javascript key); 10 parse serverurl = parse host url; 11 12 function app() { 13 return ( 14 \<div classname="app"> 15 \<header classname="app header"> 16 \<personcomponent /> 17 \</header> 18 \</div> 19 ); 20 } 21 22 export default app; 6 протестируйте ваше приложение откройте терминал вашего проекта запустите yarn start yarn start ваш браузер должен открыться после сборки с запущенным приложением нажмите кнопку, чтобы добавить нового человека человека сначала, затем нажмите, чтобы получить того же человека человека вы сохранили и извлекли объект данных из back4app вы также можете проверить данные на вашем панели управления приложением и нажав на класс человек что делать дальше как вы видели, самый простой способ интегрировать back4app в ваш проект react это через parse javascript sdk https //www npmjs com/package/parse sdk parse предоставляет отличный опыт разработки через легковесный и простой в использовании слой, который обеспечивает минимальную конфигурацию и повторное использование кода