Как сделать приложение ToDo List с помощью React Native, Expo и Back4App
React Native – один из самых популярных фреймворков, используемых в мобильной разработке. Он был создан компанией Facebook на основе Javascript. С его помощью можно создавать приложения для iOS или Android с возможностями нативной платформы.
Expo – это инструмент, который помогает ускорить время разработки и тестирования.
В этой статье рассказывается о том, как интегрировать приложение React Native с Back4App. После завершения этого пошагового руководства вы создадите проект для работы со списком дел.
Вы впервые используете Back4App? Если да, то вам необходимо пройти процедуру регистрации.
Contents
Разминка
Настройте Expo
Согласно инструкциям по React Native, вам необходимо установить Node 10+ и Expo CLI с помощью следующей команды:
npm install -g expo-cli
Подробнее: https://facebook.github.io/react-native/docs/getting-started.html
Загрузите стартовый проект
Чтобы загрузить проект шаблона ToDoListApp, выполните в терминале следующие команды:
wget "https://github.com/templates-back4app/react-native-todoapp/archive/template.zip" -O template.zip; unzip template.zip; rm template.zip && cd react-native-todoapp && npm install
Примечание: Помните, что вам нужно заменить ключи вашего приложения Back4App. Откройте файл constans/Keys.js и вставьте в него следующие ключи.
Схема вашего приложения
Если вы следовали инструкциям, приведенным выше, вы должны увидеть такую схему:
Запуск приложения ToDo List
Шаг 1 – Создание страницы входа
Для входа пользователей в наше приложение используйте наш метод, чтобы предоставить им доступ к их аккаунту:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
onLogin = async() =>{ пусть имя пользователя =(this.state.username).trim(), password =(this.state.password).trim(); if (username === "" || password === "" ) { this.setState(() => ({ nameError: `Заполнитеполя правильно` })); } else { try { await Parse.User.logIn(username.toString(), password.toString()); // this.submitAndClear(); this.props.navigation.navigate('HomeStack'); } catch (error) { this.setState(() => ({ nameError: error.message })); return (error) } } } |
Посмотрите полный код здесь: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js
Шаг 2 – Страница регистрации
После завершения предыдущего шага вы должны предложить пользователям зарегистрироваться в нашем приложении. Следующий код иллюстрирует типичную страницу регистрации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
onSignUp = async() => { пусть username = this.state.username, email = this.state.email, пароль = this.state.password; if (username.trim() === "" || username === undefined || email.trim() === "" || email === undefined || password.trim() === "" || password === undefined ) { this.setState(() => ({ nameError: `Заполнитеполя правильно.`})); } else { try { Parse.User.logOut(); let user = new Parse.User(); user.set("имя пользователя", username); user.set("email", email); user.set("password", password); const result = await user.signUp(); AsyncStorage.setItem('sessionToken', result.getSessionToken()); AsyncStorage.setItem('username', result.getUsername()); this.submitAndClear(); this.navigateToPage('HomeStack'); } catch (error) { console.log(error) this.setState(() => ({ nameError: error.message })) } } } |
Полный код можно посмотреть здесь: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js
Шаг 3 – Настройка страницы сброса пароля
Представьте, что пока у нас есть поток аутентификации, пользователи могут забыть свой пароль. Parse Server позволяет безопасно сбрасывать пароли пользователей. Настройте функцию, которая будет запрашивать у пользователя адрес электронной почты:
1 2 3 4 5 6 7 8 9 |
resetPassword = () => { Parse.User.requestPasswordReset(this.state.email) .then(() => { this._alert('Success', 'На ваш адрес было отправлено письмо.', 'Log In', 'LogInStack'); this.submitAndClear(); }).catch((error) => { this._alert('Error', error.message, 'Log In', 'LogInStack'); }); } |
Посмотрите полный код здесь: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js
Шаг 4 – Страница списка дел
Настройте макет и функции для создания, чтения, обновления и удаления элементов из списка.
Шаг 4.1 – Создание элемента
Используйте функцию save для сохранения элемента в Parse Cloud. Это позволит создать новый объект в вашем приложении. Посмотрите на Браузер данных в вашем приложении на Parse:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
createItem = () => { let item = this.state.item; if (item === "" || item === undefined){ this.setState(() => ({ nameError: `Заполнитеполя правильно` })); } else { const Todo = Parse.Object.extend("Todo"); const todo = new Todo(); todo.set("task", this.state.item); todo.set("userId", ); todo.save().then(object => { this.readAllItems(); this.setState({item:''}) }).catch(error=> {alert(error)}) } } |
Шаг 4.2 – Чтение всех объектов
Эта функция вызывается много раз, поскольку используется для запуска экрана, обновления или удаления объекта. Данные можно получить с помощью следующего кода:
1 2 3 4 5 6 7 8 |
readAllItems = async() => { const idUser = await Parse.User.currentAsync(); const query = new Parse.Query("Todo"); query.exists("task"); query.equalTo('userId', idUser); const resultQuery = await query.find(); this.setState({results:resultQuery}); } |
Шаг 4.3 – Обновление элемента
После создания объекта необходимо предусмотреть способ его обновления в будущем. Это просто, вам нужно только получить этот элемент и вызвать метод сохранения, используя этот код:
1 2 3 4 5 6 7 8 9 10 |
updateItem = () => { const query = new Parse.Query("Todo"); query.get(this.state.idObject).then(object => { object.set("task", this.state.updateValueDialog); object.save().then(objUpdate => { this.setState({updateValueDialog:'', dialogVisible: false}) this.readAllItems(); }); }); } |
Шаг 4.4 – Удаление элемента
Работа со списком элементов требует предоставления пользователям возможности самостоятельно удалять свои объекты.
1 2 3 4 5 6 7 8 9 10 |
deleteIten = async() => { const query = new Parse.Query("Todo"); const object = await query.get(this.state.idObject); try{ object.destroy(); this.getAllData(); } catch (e){ alert(e) } } |
Посмотрите полный код здесь: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js
Заключительные слова
Вот и все для приложения “Список дел”! Обратите внимание, что вы можете захотеть стилизовать свои экраны. По этой причине рекомендуем ознакомиться с полным репо по ссылке ниже:
https://github.com/templates-back4app/react-native-todoapp
Если вам нужна помощь или какая-то функция не работает, пожалуйста, свяжитесь с нашей командой в чате!
Что такое React Native?
Когда дело доходит до фреймворков мобильной разработки, React Native является одним из лучших фреймворков мобильной разработки. Он был разработан Facebook. Он помогает создавать приложения для iOS или Android с теми же возможностями, что и нативная платформа.
Что такое Expo?
Мобильная разработка может быть иногда сложной. Как разработчик, вы можете застрять из-за простой ошибки в коде, которая может стать пустой тратой вашего времени. Вам также нужно протестировать свое приложение после его сборки перед запуском. Expo предоставит вам как возможности для увеличения скорости разработки, так и тестирования.
Какой первый шаг для интеграции приложения React Native с Back4App?
Первый шаг — настройка Expo. Согласно инструкциям React Native, вам следует установить следующие две вещи.
-Node 10+
-EXPO CLI
Команда для использования EXPO CLI — «npm install -g expo-cli».