Final report version update

project/text/vor/Bundler.tex

@@ -16,6 +16,6 @@ \subsubsection{Babel}
 
 Виходячи з цього можна зробити висновок, що потрібно писати код, дотримуючись старих стандартів. На щастя, є інший шлях: ми можемо писати код з використанням всіх найновіших можливостей, але перед публікацією автоматично транслювати його (тобто переводити з одного виду в інший) в стару версію. 
 
-Сама природа JS і його способи використання готують нас до того, що ніколи не настане моменту, коли у всіх користувачів буде остання версія інтерпретатору. Люди використовували і продовжать використовувати різні браузери і різні версії браузерів, різні версії Node.js і так далі. Використання нових синтаксичних конструкцій в такій ситуації практично неможливо. Запуск коду на платформі що не підтримує новий синтаксис призведе до синтаксичну помилку. 
+Сама природа JS і його способи використання готують нас до того, що ніколи не настане моменту, коли у всіх користувачів буде остання версія інтерпретатору. Люди використовували і продовжать використовувати різні браузери і різні версії браузерів, різні версії Node.js і так далі. Використання нових синтаксичних конструкцій в такій ситуації практично неможливо. Запуск коду на платформі що не підтримує новий синтаксис призведе до синтаксичної помилки. 
 
-Закономірним вирішенням цієї проблеми стала поява Babel - програми, яка бере вказаний код і повертає той же код, але транслювали в стару версію JS. Фактично, в сучасному світі Babel став невід'ємною частиною JS. Всі нові проекти так чи інакше розробляють з його використанням~\cite{davidgeary2019}.
+Закономірним вирішенням цієї проблеми стала поява Babel~--- програми, яка бере вказаний код і повертає той же код, але трансльований в стару версію JS. Фактично, в сучасному світі Babel став невід'ємною частиною JS. Всі нові проекти так чи інакше розробляють з його використанням~\cite{davidgeary2019}.

project/text/vor/CONCLUSION.tex

@@ -14,5 +14,4 @@
 
 Розроблені додатки використовують публічний API для реалізації бізнес-логіки та взамодії з серверною частиною.
 
-
 При розробці проекту використовується система контролю версій git з публічним репозиторієм на сервісі GitHub (github.com/ Rembut/gCalShedule), що дозволяє використовувати сучасні методи сумісної роботи та, одночасно з тим, дозволяє використовувати результати проведеного дослідження всім охочим під ліцензією MIT.

project/text/vor/ComponentDevelopment.tex

@@ -24,4 +24,20 @@ \subsubsection{Розробка компонентів}
 
 \addimg{AdminPanelTimeManagement.png}{0.85}{Адміністративна панель (керування часом)}{fig:AdminPanelTimeManagement}
 
-В подальшому, потенційні користувачі можуть підписуватися на оновлення відповідних календарів (зокрема, груп та викладачів) для отримання актуальної інформації в довільний момент часу.
+В подальшому, потенційні користувачі можуть підписуватися на оновлення відповідних календарів (зокрема, груп та викладачів) для отримання актуальної інформації в довільний момент часу, котру підтримуватимуть користувачі системи з привілегією редагування даних про розклад (рис.~\ref{fig:AdminPanelScheduleEdit}).
+
+\addimg{ScheduleEdit.png}{0.95}{Адміністративна панель (редагування розкладу)}{fig:AdminPanelScheduleEdit}
+
+В процесі розробки було підготовлено серію компонентів, кожен з яких відповідає за певну конкретну задачу та може використовуватися в багатьох місцях додатку (так зване <<повторне використання>>). На рис.~\ref{fig:ReactComponent} представлено один із компонентів, що відображає списки у системі.
+
+Представлений компонент відноситься до компонентів-відображень. При цьму, компоненти діляться на декілька груп. 
+
+Компоненти-контейнери відповідають за дані і операції з ними. Їх стан передається у вигляді властивостей в компоненти-відображення.
+
+Компоненти-відображення є <<дурними>> в тому сенсі, що вони не представляють, звідки беруться дані, тобто вони нічого не знають про стан.
+
+Компоненти-відображення не повинні змінювати дані. Фактично, будь-який компонент, який одержує властивості від батьківського компоненту, повинен залишати їх незмінними. У той же час, вони можуть будь-яким чином форматувати дані (наприклад, конвертуючи Unix timestamp в дату-час для відображення).
+
+Компоненти-контейнери найчастіше є батьківськими для компонентів-відображень і забезпечують зв'язок між відображенням і іншими частинами програми. Їх також називають «розумними» компонентами, оскільки вони <<знають>> про програму в цілому.
+
+\addCodeAsImg{\lstinputlisting[numbers=left]{code/ReactComponent.tex}}{React компонент відображення списку}{fig:ReactComponent}

project/text/vor/JsLibraries.tex

@@ -56,7 +56,7 @@ \subsubsection{Бібліотеки JS}
 
 Характерною особливістю LESS став синтаксис заснований на CSS. Це відразу ж знизило поріг входження і вивчення нової технології, до того ж не виникає ніяких проблем з редакторами коду, вони прекрасно підтримують підсвічування синтаксису. Надалі LESS зробив свій вплив на препроцесор SASS, в якому з'явився новий схожий синтаксис. Але в цілому, питання, хто на кого вплинув відкритий, тому що багато корисних речей були запозичені друг у друга. Так що зараз і LESS і SASS дуже схожі, відрізняючись лише в деталях.
 
-LESS дозволяє використовувати змінні. Ім'я змінної починаються з символу @. В якості знака присвоювання використовується двокрапка (:).
+LESS дозволяє використовувати змінні. Ім'я змінної починаються з символу @. В якості знака присвоювання використовується двокрапка~(:).
 
 \addCodeAsImg{\lstinputlisting[numbers=left]{code/Code21.tex}}{Приклад використання змінних у LESS}{fig:Code21}
 

project/text/vor/LibAnalyse.tex

@@ -13,18 +13,18 @@ \subsubsection{Вимоги до додатку}
 
 Одним із завдань, поставлених для реалізації мети є розроблення вимог щодо можливостей веб-додатку та його інтерфейсу.
 
-Після проведення аналізу предметної області, додатків аналогів та технологій було сформульовано наступні вимоги:
+Після проведення аналізу предметної області, додатків-аналогів та технологій, було сформульовано наступні вимоги:
 
 \begin{enumerate}
-    \item Веб-додаток повинен коректно відражатися у останніх версіях популярних веб-браузерів(Google Chrome, Mozilla Firefox, Opera, Safari).
+    \item Веб-додаток повинен коректно відрображатися у останніх версіях популярних веб-браузерів(Google Chrome, Mozilla Firefox, Opera, Safari).
     \item Адаптивність інтерфейсу до розмірів вікна браузера або пристрою.
     \item Можливість зміни типу відображення поточного розкладу.
     \item Зміна інтерфейсу відповідно до прав доступу поточного користувача.
     \item Створення нових користувачів у системі адміністратором.
     \item Авторизація користувачів у системі.
     \item Редагування даних користувачами системи у відповідності до їх прав доступу.
     \item Редагування даних адміністраторами системи у відповідності до їх прав доступу.
-    \item Інтеграція з Google сервісами, зокрема Google calendar та Google Sheets.
+    \item Інтеграція з Google сервісами, зокрема Google Сalendar та Google Sheets.
     \item Інтерфейс для імпорту та експорту даних між системою та сервісами Google або специфікованими форматами даних.
     \item Забезпечення цілісності даних.
 \end{enumerate}
@@ -63,4 +63,4 @@ \subsubsection{Вимоги до додатку}
   \item JavaScript не обробляється більшістю пошукових систем.
   \item SPA-сайти не працюють без включеного JS в браузері.
   \item Їх не можна аналізувати на предмет помилок популярними програмами та інструментами (наприклад, Netpeak Spider).
-\end{enumerate}
+\end{enumerate}

project/text/vor/MobileAppDev.tex

@@ -22,11 +22,17 @@ \subsubsection{React Native}
 
 Популярність React має ряд причин. Вона компактна і має високу продуктивність, особливо при роботі з швидкоплинними даними. Завдяки компонентної структурі, React заохочує до написання модульного коду и пропагує повторне його використання.
 
+Спроектовано та розроблено серію компонентів для різних частин додатку. На рис.~\ref{fig:interphace} зображено сукупність компонентів, яка формує стартовове вікна додатку, у якому користувач може брати номер своєї групи для отримання розкладу (зліва) та сукупність компонентів, яка формує вікно відображення поточного розкладу з можливістю обрання конкретної дати для відображення (справа). Перший компонент зберігає номер групи локально на мобільному пристрої завдяки використанню функції $AsynkStorage()$, котра надається платформою React Native (код компоненту на рис.~\ref{fig:ReactNativeCode}).
+
+\addtwoimghere{Mobile1.png}{Mobile1.png}{0.45}{Інтерфейс мобільного додатку}{fig:interphace}
+
 React Native~--- це той же React, але для мобільних платформ. У нього є ряд відмінностей: замість тега $div$ використовується компонент $View$, а замість тега $img$~--- $Image$. Вам може стати в нагоді знання Objective-C, Swift або Java~\cite{9781787282537}. 
 
 Нативну (native) розробку можна назвати <<рідною>> для операційних систем~--- Android, IOS, Win Phone і т.д. Такі мобільні додатки пишуться на мовах програмування, затверджених розробниками програмного забезпечення під кожну конкретну платформу, а тому органічно вбудовуються в самі операційні системи.
 
-У React компонент описує власне відображення, а потім бібліотека обробляє для вас рендеринг (деталі у пункті \ref{fig:ReactNative}). Ці дві функції розділені ясним рівнем абстракції. Якщо потрібно відобразити компоненти для вебу, то React використовує стандартні HTML-теги. Завдяки тому ж рівню абстракції~--- <<мосту>>~--- для рендеринга в iOS і Android React Native викликаються відповідні API. В iOS компоненти отрісовиваємих в справжні UI-види, а в Android~--- в нативні види.
+У React компонент описує власне відображення, а потім бібліотека обробляє для вас рендеринг (деталі у пункті \ref{fig:ReactNative}). Ці дві функції розділені ясним рівнем абстракції. Якщо потрібно відобразити компоненти для вебу, то React використовує стандартні HTML-теги. Завдяки тому ж рівню абстракції~--- <<мосту>>~--- для рендеринга в iOS і Android React Native викликаються відповідні API.
+
+\addCodeAsImg{\lstinputlisting[numbers=left]{code/ReactNativeCode.tex}}{React Native компонент стартового вікна}{fig:ReactNativeCode}
 
 Замість компіляції в нативний код, React Native запускає його за допомогою JS-движка хост-платформи, без блокування основного UI-потоку. Ви отримуєте переваги нативних продуктивності, анімації і поведінки без необхідності писати на Objective-C або Java. Інші методи розробки кроссплатформенних додатків, на кшталт Cordova або Titanium, ніколи не досягнуть такого рівня нативної продуктивності або відображення.
 

project/text/vor/StateManager.tex

@@ -99,10 +99,14 @@ \subsubsection{Обробка побічних ефектів}
 
 \paragraph{Redux Thunk}
 
+\addCodeAsImg{\lstinputlisting[numbers=left]{code/ReduxThunkAction.tex}}{Частина Redux-дії авторизації з використанням Redux Thunk}{fig:ReduxThunkAction}
+
 За замовчуванням дії в Redux відправляються синхронно, що є проблемою для будь-якої нетривіальної програми, яка потребує в зв'язку з зовнішнім API або виконує побічні ефекти. На щастя, Redux дозволяє використання проміжних обробників , які знаходиться між відправленними діями та діями, що досягають редукторів. Є дві дуже популярні бібліотеки проміжного програмного забезпечення, які допускають побічні ефекти та асинхронні дії: Redux Thunk та Redux Saga.
 
 Redux Thunk~--- це проміжне програмне забезпечення, яке дозволяє викликати творців дій, які повертають функцію замість об'єкта дії. Ця функція отримує метод розсилки сховища, який потім використовується для відправлення регулярних синхронних дій всередині тіла функції після завершення асинхронних операцій.
 
 Найбільш поширеним випадком використання для Redux Thunk є асинхронне спілкування з зовнішнім API для отримання або збереження даних. Redux Thunk дозволяє легко розсилати дії, які слідують за життєвим циклом запиту до зовнішнього API.
 
 Наприклад, з урахуванням загального прикладу програми todo, створення нового елемента задачі зазвичай передбачає першу відправлення дії, щоб вказати, що створення елемента todo почалося, тоді, якщо елемент todo успішно створено і повернуто зовнішнім сервером, відбувається відправлення іншої дії з новим елементом завдання. У випадку, якщо є помилка, і завдання не може бути збережено на сервері, замість цього може бути надіслано дію з помилкою.
+
+На рис.~\ref{fig:ReduxThunkAction} наведено приклад частини розробленої Redux-дії авторизації користувача з використанням Redux Thunk.