Вероятно си обърнал(а) внимание на всички нови игри и приложения, които заливат стената ти в социалните мрежи, но задавал(а) ли си въпроса - "Какво стои зад тях"? Искал(а) ли си да имаш собствено приложение, което да носи името ти? Ако отговорът ти е "Да" имам прекрасни новини за теб! Живеем във време, в което да създадеш собствено приложение е лесно като броенето до десет.

Партньор

Благодарение на React Native вече е възможно да създадеш приложение за почти всяка една от модерните платформи, които се предлагат на пазара и са базирани на iOS или Android. За да бъде още по-лесно и приятно, избирайки да използваш React Native имаш възможност да създадеш едно единствено приложение, което след това да предлагаш за всяка една от тях.

Както са казали тримата мускетари: "Един за всички, всички за един!"

Що е то React Native?

"React Native е интригуващ framework който позволява на УЕБ разработчиците лесно и бързо да създават интересни приложения, използвайки изцяло своя JavaScript опит. Той позволява по-бързо дистрибутиране на кода между различните платформи iOS, Android, и УЕБ-а, без излишни жертви в потребителското изживяване и качеството на крайния продукт." - Това казват хората за React Native. Но остани до края и нека видим, какво ще бъде твоето мнение!

Как да започнеш?

За начало ще е необходимо да подсигуриш своята програмна среда, но преди това ако нямаш много предишен опит с JavaScript разгледай неговите основи, създай няколко простички УЕБ приложения и след това продължи с React Native. В противен случай може би няма да бъдеш впечатлен(а) от лекотата му.

Сега когато си запознат(а) с подводните камъни е време да подготвим твоята програмна среда!

Тази статия е главно насочена към iOS базирани приложения, за това и ще разгледаме по-подробно, какви биха били проблемите по време на инсталацията на React Native в XCode и Cocoapods. За начало бих ти предложил да разгледаш официалната документация, която в себе си съдържа всички необходими команди, които е необходимо да изпълниш с цел създаването на първото си iOS приложение. Когато отвориш документацията ще видиш, че има две опции за стартиране на проект:

1. Expo CLI
2. React Native CLI

Въпреки че Expo Cli е много по-опростено, бих ти предложил да използваш оригиналният React Native CLI, защото има много по-широка поддръжка и общността от програмисти, които го използват е много по-голяма. Освен големия брой колеги, които използват React Native, ще бъдеш изненадан(а) и от това, че повечето "пакети" са с Отворен Код и се поддържат от общността. Това автоматично означава, че какъвто и проблем да срещнеш по пътя, някой, някъде, най-вероятно вече се е сблъсквал с него и решението е на едно "google търсене" от теб!

Примерно приложение - Geros

За целите на тези статия, екипът зад Geros създаде специална версия на приложението, която е с "Отворен Код". За да бъде по-лесно за теб, горещо ти препоръчвам да свалиш iOS приложението Geros на своя iPhone преди да продължиш с разглеждането на кода му.

Каква е идеята зад приложението?

Geros е портфолиото на Геро Николов, който е старши FullStack Програмист и Архитект, чиято основна цел е да напътства своите потребители и клиенти в трудни за тях ситуации свързани с разработката на софтуер и/или вземането на сложни бизнес решения. В приложението ще намериш множество интересни Статии и Проекти, които са били написани и разработени от самия Геро. Geros е напълно безплатно, както и неговото съдържание, защото ние вярваме, че знанието е всичко.

Как би ти било от ползва то?

Geros е много, много просто приложение с много проста архитеуктура. Имаш възможността да я използваш като стартов пример за твоята идея, която ще промени света, напълно безплатно. В случай, че забележиш нещо, което не е коректно ще ти бъдем много благодарни ако ни сигнализираш!

Нека разгледаме кода

Хранилището с Отворен Код на приложението Geros можеш да намериш тук. В него ще откриеш опростена документация, която обяснява, какво се съдържа в пакета и кои са интересните части от проекта. В тази статия няма да задълбаваме в документация, вместо това ще разгледаме всеки един от компонентите използвани в приложението.

App.js

App.js е главният файл на всяко едно React Native базирано приложение. Можеш да гледаш на него, като на index.html, index.php, index.js, или всеки друг познат зат теб index. в зависимост от досегашния ти опит.

В него ще забележиш двата основни компонента използвани в Geros:

1. <PushNotificationManager>
2. <ScreensStack />

И двата компомента са специално създадени и изпипани за нуждите на приложението, но те използват основни функционалности от ядрото на React Native.

<PushNotificationManager>

Компонентът PushNotificationManager отговаря за получаването и коректната визуализация на известията в приложението Geros. Кода му можеш да намериш тук. Интересното в него, е че използва пакетът на WIX React Native Notifications, който е един от многото такива с Отворен Код. Докато разработвахме Geros открихме, че той е един от най-лесните и леки пакети от това естество, които би могъл(а) да използваш в твоето приложение. Документацяита му също е доста добре структурирана, така че да можеш да започнеш използването му веднага. Нея можеш да откриеш тук.

Компонентъ PushNotificationManager работи в тясна връзка с абстрактния клас NotificationListener.js, който улеснява работата с известия. Той се състои от следните методи:

1. notificationListener отговаря за поставянето на listener в специфициран компонент. Той е структуриран, така че да работи с всеки един компонент, който ще обработва известия.
   1. handleNotification - Както най-вероятно си забелязъл(а), notificationListener създава интервал в специфицирания _component, който следи за нови известия и в случай на такова извиква методът _component.handleNotification(). Това е абстрактен метод, чиято имплементация е уникална за всеки компонент и зависи строго от това, каква е идеята на самия компонент.
2. purgeNotificationListener обикновенно се използва, при извикването на componentWillUnmount с идеята да изчисти listener-а от компонента и да освободи заетата оперативна памет. Важно е да запомниш това, че ако не бъдат изчистени външните методи използвани в компонентите, приложението ще има множество неочваквани "бъгове" и проблеми с администрирането на паметта. Това от своя страна би довело до много лошо потребителско изживяване, като дори в някои редки случаи би могло да счупи и физическото устройство поради прекомерната употреба на оперативна памет и процесорно време.

<ScreensStack>

Компонентът ScreensStack държи в себе си всички екрани от приложението Geros. Кода му можеш да откриеш тук.

След като стигна до директорията components/ е време да ти разкажа малко повече за правилния начин на файлово стуктуриране в React Native, който бе споделен с нас от нашия приятел и професионалист Камена Дачева.

Най-вероятно си забелязъл(а), че компоментите в React Native биват именувани с CamelCase, което прави кода много по-четим и модерно изглеждащ. Друга добра практика е да разделяш компонентите в техни персонални папки. Спазвайки тази конвенция имаш възможност за създаването на уникални стилове и методи за всеки един от компонентите използвани в приложението ти. Също така, този начин на файлово структуриране те предпазва и от объркан и непоследователен код.

Сега след като вече знаеш, коректния начин за файлово структуриране е време да се върнем отново на компонента <ScreensStack> и неговите качества, и отговорности.

Ще забележиш, че в него има два възможни сценария. Един от които се грижи за потребителското изживяване при липса на интернет свързаност и един, когато всичко е наред. За по-сложни приложения бих препоръчал изпозването на пакетът React Native Netinfo. В този случай проверката за интернет свързаност се осъществява посредством специално разработен REST API който се помещава в GeroNikolov.com. Нека предположим, че потребителят е свързан с интернет и всичко работи коректно. В този случай, на потребителското устройство ще се визуализира компонента <NavigationContainer>.

<NavigationContainer>

Интересното в компонента NavigationContainer, е това че в него се помещава страницирането на приложението. Това позволява на потребителя да навигира между отделните страници по натурален за неговата операционна система начин. Той използва пакетът React Navigation.

В компонента NavigationContainer всяка страница е представена от нейн отделен компонент. В Geros страниците са, както следва:

1. <HomeScreen> - Представя Началната страница на приложението.
2. <SingleArticleScreen> - Представя страницата на всяка една от наличните Статии.
3. <SingleProjectScreen> - Представя страницата на всеки един от наличните Проекти.
4. <Blog> - Представя Блог страницата на приложението. Тя се състои от infinite scroll функционалност, която зарежда нови статии от GeroNikolov.com динамично при достигане до края на страницата.
5. <Projects> - Представя страницата с всички Проекти на приложението. Тя се състои от infinite scroll функционалност, която зарежда нови проекти от GeroNikolov.com динамично при достигане до края на страницата.
6. <PP> - Представя страницата за Общи Условия и Поверителност. Всяко приложение, което ще бъде дистрибутирано чрез App Store / Play Store се нуждае от такава страница, която да отговаря на съответните изисквания.

От тук можеш да се потопиш по-надълбоко във връзката между отделните компоненти и да привикнеш към файловата структура използвана в React Native. Веднъж след като разбереш основите и създадеш своето първо iOS базирано приложение е време да процедираш към следващата част от статията - "Как да дистрибутираме нашето React Native iOS приложение в App Store?".

Как да дистрибутираме нашето React Native iOS приложение в App Store?

Първото задължително условие е да имаш активен Apple Developer профил. Отварянето на такъв се състои от малък процес, който да ти осигури лиценз. Но не се притеснявай, Apple са се погрижили, процесът да бъде максимално опростен! След като се сдобиеш с твоя лиценз горещо ти препоръчвам да следваш стъпките от тази статия по време на подготовката за качване на твоето първо iOS базирано приложение.

Полезна бележка: Вместо да създаваш custom deployment certificates остави тази работа на XCode . Разбира се тази опция би свършила работа, само в случай, че не се нуждаеш от специални такива. Също така не забравяй да обновиш своя Info файл с всички background процеси използвани в приложението ти. Тези процеси се регистрират в секция Permitted background task scheduler identifiers и представляват ID-та, които автоматично биват предавани на тези процеси.

Партньор

Последни думи

След като успешно публикуваш своето приложение в App Store не забравяй да се свържеш с мен и да ми изпратиш линк към него. Ще се радвам да го разгледам и да ти дам идеи за възможни оптимизации и подобрения в потребителското изживяване.