Аз съм разработчик на софтуер, който наскоро завърши програмата Grace Hopper, 17-седмично потапяне, фокусирано върху Javascript с пълен стек. За моя последен проект моите съотборници и аз решихме да изследваме света на React Native. Като Javascript разработчици, които имаха опит с React, React Native беше логичният избор. Нямахме време да научим друг език (имахме по-малко от 3 седмици… ей!), но все пак искахме да предизвикаме себе си с нова технология. Първото ни препятствие беше настройката на удостоверяване и запазването на удостоверения потребител през цялото състояние на приложението. В крайна сметка използвахме удостоверяване на Firebase, което беше наистина лесно за добавяне, след като го овладяхме. Създадох този урок за начинаещи в React Native, които биха искали лесна отправна точка, когато разработват приложение, изискващо удостоверяване.
Какво ще обхване този урок?
Ще преминем през настройката на основна структура и поток за удостоверяване на потребителите за приложение React Native. Ще настроим три основни екрана в React Native, ще добавим Firebase към приложението и ще използваме React Context API, за да поддържаме удостоверения потребител. Тази настройка може да ви помогне да започнете, преди да внедрите свои собствени функции!
Първи стъпки с React Native
Най-добрият начин да започнете с React Native е като разгледате документите. Те предоставят две опции, когато настройвате вашата среда за разработка. Можете да използвате Expo, който е инструментална верига, изградена около React Native, която ви позволява да настроите приложение и да го тествате на телефона си в рамките на минути. Основното предимство на Expo е, че прави настройката, тестването и споделянето на вашето приложение достатъчно лесно за начинаещ програмист. Другата опция е да използвате React Native CLI, за да настроите приложението си, което ще изисква инсталирането на XCode и Android Studio, ако искате да разработвате както за iOS, така и за Android, а е по-сложно да настроите проект. Въпреки това ви позволява да добавяте собствени модули и заема по-малко място от Expo. За този урок ще използваме Expo, за да можем да започнем веднага.
Просто следвайте инструкциите в документите под „Expo CLI Quickstart“, докато не успеете да отворите приложението си в текстовия си редактор (използвам VSCode) и видите работещото си приложение на телефона си. Може да забележите, че има опции за „Изпълнение на iOS Simulator“ или „Изпълнение на Android устройство/емулатор“. Ще трябва да изтеглите допълнителни инструменти, за да използвате тези функции (ето информация за Android и iOS), които няма да разглеждаме в тази статия. Определено препоръчвам да ги използвате, защото тогава можете да тествате на телефони, различни от този, който притежавате!
React Native Screens
В React Native различните екрани на нашето приложение ще бъдат компоненти, точно като обикновения React. Нека започнем, като създадем нова папка с компоненти в нашия проект и добавим три нови файла, Home.js, LogIn.js и SignUp.js.
mkdir components cd components && touch Home.js, LogIn.js, SignUp.js
Нека добавим някакъв код за контейнер към тези компоненти, така че да не получаваме никакви грешки, когато тестваме по-късно. React Native ни предоставя някои „основни компоненти“ за изграждане на потребителски интерфейс, като <View> (подобно на <div> на HTML) и <Text> (като <p> на HTML). Трябва да импортираме тези компоненти във всеки файл, който използваме. Току-що добавих основен текст към всяка страница и бутон на началната страница, който в крайна сметка ще ни позволи да излезем.
React Навигация
За моето приложение бих искал потребителите да могат да виждат началната ми страница само ако са влезли и да могат да се придвижват от екран на екран. Можем да използваме React Navigation, за да постигнем тази цел. Инсталирайте тези пакети във вашия проект.
npm install @react-navigation/native @react-navigation/stack expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
В момента все още виждаме страницата по подразбиране в App.js. Нека изтрием всичко от тази страница. Импортирайте вашите три компонента, както и някои инструменти, които ще ви трябват от React Navigation. NavigationContainer ще управлява нашата навигация и обикновено се поставя в корена на нашите приложения (което е App.js в нашия случай). Можем да извикаме createStackNavigator, функция, която връща обект, съдържащ свойствата Screen и Navigator. След това можем да настроим Screen елементи вътре в Navigator и да поставим Navigator вътре в NavigationContainer. Настроих основен стек за навигация, който в момента показва само екрана за влизане, защото това е първият екран в стека. Следващата ни стъпка е да настроим удостоверяване на потребителя с Firebase, за да можем да изобразим екрана Home, ако потребителят е влязъл!
Трябва да можете да видите екрана LogIn само в момента. Ако имате проблеми, проверете работата си с клона step_1_nav в изходния код.
Настройте Firebase
Нека да преминем към Firebase, за да можем да го интегрираме с нашия проект. Регистрирайте се, ако нямате акаунт в Google, и отворете „Добавяне на проект“ от „Отидете на конзолата“. Следвайте стъпките за създаване на проект (ваш избор дали да активирате Google Analytics, аз не съм направил за този проект).
За да удостоверите потребителите с имейл и парола (методът, обхванат в този урок), отворете „Удостоверяване“ в страничната лента и активирайте „Имейл/Парола“ под „Метод за влизане“. Firebase прави наистина лесно използването и на други методи, като Google, Facebook или Apple OAuth!
Кликнете върху „Уеб“, за да регистрирате приложението си.
Ще получите обект firebaseConfig, който ще ни позволи да свържем нашето приложение с Firebase. Не го добавяйте по начина, по който Firebase ви казва… в края на краищата не трябва да имаме етикети ‹script›, защото нямаме HTML в React Native!
Обратно във вашия редактор на код, създайте нов firebase.js файл в основната директория на проекта и npm install firebase. Ще добавим обекта firebaseConfig към firebase.js и ще инициализираме приложението Firebase.
Реагирайте контекст
След това ще използваме React Context API за достъп до удостоверения потребител във всички области на нашето приложение. За да направим това, можем да създадем нов контекст и да създадем някои методи, които ще използваме в нашите компоненти, за да слушаме за промени в състоянието на удостоверяване и да осъществяваме достъп до влезлия потребител.
Сега, когато имаме метод за следене на състоянието на удостоверяване на потребителя, можем да използваме този метод в App.js. Ще използваме троично условие, за да изобразим началния екран, ако потребителят е влязъл, и екрана за влизане, ако не е. Всъщност все още не сме внедрили никакви възможности за влизане или регистрация, така че точно сега трябва да виждате само екрана за влизане.
Преди да можем да влезем, трябва да се регистрираме за акаунт! Нека добавим някои полета за въвеждане към LogIn.js и бутон за регистрация, така че потребителите, които нямат акаунт, да могат да създадат такъв. Също така трябва да добавим метод към нашия компонент, който ще ни пренасочва към екрана за регистрация, когато натиснем бутона.
Също така ще добавим подобен код към SignUp.js, с бутон за навигация обратно към страницата за влизане.
Сега трябва да следим стойностите в полетата за въвеждане, за да можем действително да предадем тази информация към Firebase. Зададох състоянието React на email и password към текста, въведен във входовете, използвайки куката Reach useState. Сега най-накрая можем да добавим Firebase! Уверете се, че import {firebase} from "../firebase". Firebase идва с вграден метод за регистриране на нови потребители. Обадете се на firebase.auth().createUserWithEmailAndPassword(email, password), за да регистрирате потребителя. Когато регистрирате отговора, ще видите полезна информация за потребителя, до който ще имате достъп. Ако отидете във вашия акаунт във Firebase, трябва да видите новосъздан потребител! Още по-вълнуващо е, че приложението трябва автоматично да навигира до началния екран, тъй като текущият потребител вече не е null.
След това ще добавим почти същия код към LogIn.js, но вместо това използваме метода signInWithEmailAndPassword.
За да тестваме нашата страница за вход, трябва да излезем... нека добавим тази функционалност след това! Извикайте метода firebase signOut. Ще излезете и ще бъдете пренасочени към страницата за влизане!
Това е всичко за днес! Това е само първата стъпка в настройването на работещо мобилно приложение в React Native. Сега зависи от вас да решите къде да отидете с него!
Изходен код на урок: https://github.com/valerieingmann/react-native-firebase-auth
С тази отправна точка моите невероятни съотборници и аз създадохме AccountaBee, мобилно приложение, което позволява на вас и вашите приятели да задавате седмични цели, да ги отмятате с напредването на седмицата и да се държите социално отговорни взаимно. Разработихме наш собствен бекенд, използвайки Node.js, Express, PostgreSQL и Sequelize (внедрени в Heroku), но можете също да съхранявате данни в базата данни в реално време на Firebase или Cloud Firestore. В нашия бекенд интегрирахме Firebase Admin SDK за валидиране на потребителски токени в нашите API маршрути. Очаквайте скоро урок за това!
AccountaBee Github → https://github.com/AccountaBee
