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

10 мин

быстрый старт введение в этом разделе вы узнаете, как начать работу с back4app, используя существующий или новый проект на react вы установите \parse sdk\ , инициализируете parse, используя ваши \ключи приложения\ , и сделаете свой первый api вызов, сохраняя и читая объекты данных из back4app предварительные требования чтобы завершить этот учебник, вам потребуется созданное приложение https //www back4app com/docs/get started/new parse app на back4app; недавняя версия node js https //nodejs org/ , включая \yarn \ и \npx\ 1 создание проекта на react если у вас уже есть работающий проект на react, вы можете перейти к следующему шагу запустите следующую команду в директории, в которой вы хотите сохранить проект, указав его имя, в данном случае, \back4app guide react\ npx create react app back4app guide react если \node js\ правильно настроен, вы должны увидеть, как проект создается в вашем терминале после завершения вы увидите сообщение, информирующее вас о том, что процесс прошел успешно откройте проект в вашем любимом редакторе кода и давайте начнем интеграцию parse 2 установите зависимости теперь давайте установим единственную необходимую зависимость, \parse javascript sdk\ , чтобы интегрировать ваше приложение с серверами back4app выполните следующую команду в корневом каталоге вашего проекта yarn add parse 3 получите ключи вашего приложения после создания вашего приложения на back4app, перейдите на панель управления вашего приложения и получите ключи вашего приложения в разделе \настройки приложения \>безопасность и ключи\ (посмотрите изображение ниже) обратите внимание, что вам всегда понадобятся два ключа для подключения к back4app \id приложения\ и \javascript key\ 4 инициализация parse и подключение к back4app перейдите в ваш \app js\ и инициализируйте \parse sdk \ с использованием как \id приложения\ так и \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\ в вашем \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 \{`name ${person get('name')}`}\ 44 \{`email ${person get('email')}`}\ 45 \</div> 46 )} 47 \</div> 48 ); 49 }; метод \addperson \ создает новый \parse object\ представляющий класс \person \ , устанавливает его свойства, а затем сохраняет его в облачном хранилище данных back4app метод \fetchperson \ извлекает \parse object\ , у которого атрибут \name \ равен \джон\ когда запрос разрешается, вы сможете получить доступ к атрибутам персоны, используя метод \get \ обратите внимание также на элементы интерфейса в этом компоненте, они состоят из двух кнопок, вызывающих методы, а также двух абзацев, получающих загруженные \персона \ через переменную состояния теперь нам нужно импортировать и использовать этот компонент в вашем основном \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\ ваш браузер должен открыться после сборки с запущенным приложением нажмите кнопку, чтобы добавить нового \человека \ сначала, затем нажмите, чтобы получить того же \человека\ вы сохранили и извлекли объект данных из back4app вы также можете проверить данные на вашем панели управления приложением https //parse dashboard back4app com/apps/ и нажав на класс человек что делать дальше как вы видели, самый простой способ интегрировать back4app в ваш проект react это через parse javascript sdk https //www npmjs com/package/parse sdk parse предоставляет отличный опыт разработки через легковесный и простой в использовании слой, который обеспечивает минимальную конфигурацию и повторное использование кода