Вы думаете, что ваша жизнь отстой? Бывает ли так, что вы проводите довольно хороший день, но даже не замечаете этого? Да, мы замечаем только плохие дни и думаем, что наша жизнь отстой.

Я создал приложение для Android, чтобы помочь людям с этим. Если вы сохраните это в своем телефоне, он будет присылать вам уведомление каждый день в конце дня и позволит вам пометить свой день как «счастливый», «продуктивный», «напряженный», «грустный» и т. д. Вы также можете написать вниз примечание, если вы хотите. Позже вы сможете увидеть, сколько и какой процент ваших дней были «счастливыми», «продуктивными», «напряженными», «грустными» и так далее. Кроме того, вы должны думать о своем дне и размышлять о своей жизни, чтобы каждый день отвечать на вопрос «Как прошел день?». Вы можете начать спрашивать себя: «Как я хочу прожить свою жизнь? И как я на самом деле живу этим?»

Возможно, вы захотите добавить свои собственные метки с пользовательскими модификаторами и цветом. Вы можете сделать это.

Наконец, вы можете сделать резервную копию своих данных на свой диск Google.

Я надеюсь, что это поможет людям жить лучше и позитивнее.

Мой опыт

Теперь я попытаюсь написать о нескольких проблемах, с которыми я столкнулся при разработке приложения. Но перед этим представляю несколько скриншотов:

Решения

Я только что выучил React. Я тоже был новичком во фронтенд-разработке. React Native был первым выбором. Но мне показалось, что react-native приложения не выглядят красиво из коробки. Стилизация реактивных компонентов казалась громоздкой, и я всегда плохо разрабатывал пользовательские интерфейсы. Я считаю флаттер. Flutter казался более встроенной структурой, и они обещают более привлекательные приложения!

Наконец-то отказался от флаттера, учитывая кривую обучения дротику, небольшую поддержку и JSX! JSX — это круто, не так ли? Потом я увидел Ignite. Что-то вроде версии react-native с включенной батареей! Но встреча с игнитом не удалась. Пробовал запускать пробу зажигания в течение нескольких часов. Не удалось. Затем ignite включает в себя react-router, redux, redux-persist, redux-saga (что это вообще такое?) и множество других пакетов. Мне не нужен ни один из них. Даже не редукс. (Позже понял, что использование редукса может быть хорошей идеей)

Теперь он был реактивным с библиотекой пользовательского интерфейса. Затем разочаровался в выборе библиотеки пользовательского интерфейса. Итак, наконец, решил собрать его на чистом React-native.

Не так чисто

Когда я начал проект с create-react-native-app, я не осознавал, что это не чистый react-native, скорее установка построена поверх Expo SDK. Было приятно иметь возможность запускать приложение без установки Android SDK.

Кривые обучения

Я подумал, что раз уж я знаю React, то получу React Native практически бесплатно. Но это неправда, дело не только в использовании View вместо div и Text вместо p. Привыкание к реактивному нативу занимает некоторое время.

Говядина с JSX

Раньше я не знал, что JSX не удаляет лишние пробелы, как это делают парсеры HTML.

Рассмотрим этот код:

<View> <Text>Some text</Text> </View>

Обратите внимание на пробелы вокруг тега Text. Я бы поставил их, чтобы код выглядел немного лучше. Но JSX считает, что мне буквально нужен пробел внутри View вокруг Text. Но в реагирующей строке разрешено только внутри тега Text. Итак, я получил сообщение об ошибке с длинной трассировкой стека Java. Погуглив сообщение об ошибке, я узнал только, что речь идет о недопустимом JSX. В GitHub и StackOverflow были сотни примеров некорректного JSX, вызванного разными причинами. Но я не занимался ни одним из них. Все, что я заметил, это то, что это происходило, когда я заключал список компонентов в View. Потратил час и ничего не нашел. Потом пробовал не оборачивать их в View, не получилось, потому что не мог их стилизовать.

Наконец-то красивее меня спасло! Когда я упорядочил код, я увидел, что лишнее пространство оборачивается как {' '}, я видел это раньше. Но никогда не обращал внимания ¯\_(ツ)_/¯

Асикстораже

Иногда AsyncStorage никогда ничего не разрешал и не выдавал никаких ошибок. В сети решения не нашел. Получил предложение использовать redux-persist. Как это возможно, что в таком зрелом проекте, как react-native, импорт вроде AsyncStorage вообще не работает?

Консоль

Настройка выставки по умолчанию регистрируется в консоли. Но не все журналы не регистрировались должным образом. И если я включил Debug Js remotely, приложение expo сразу вылетало. Для этого я тоже не нашел решений. Итак, отладка проблемы AsyncStorage стала еще сложнее.

После нескольких дней борьбы с ними мне пришлось отказаться от установки выставки.

Чистый снова

После всего этого я начал новый проект с react-native init, скопировал и отрефакторил код из старого проекта. Я думал, что мне придется настроить Babel, Webpack и все остальное вручную. Но, к счастью, мне не пришлось. Это было действительно легко. Настройка Android SDK тоже не была такой уж сложной. Я получал иконки с expo sdk, теперь мне нужно было установить пакет react-native-vector-icons.

И знаете что, проблема с AsyncStorage только что исчезла.

V8 и JavaScriptCore

Я заметил, что иногда даты не отображались должным образом. Потом я обнаружил, что он работает только в режиме remote debugging. Это связано с тем, что JS-коды react-native обычно выполняются в движке JavaScriptCore. Но в режиме удаленной отладки он выполняется в движке V8 хрома. А движок JavaScriptCore плохо работает с датами. Таким образом, функция toLocaleDateString не работала должным образом. Пришлось написать свою версию этой функции.

JS способ разобраться во всем

Затем я заметил, что сортировка не работает и в режиме удаленной отладки. Но в этот раз в сети ничего не нашел. Значит, раньше никто не сталкивался с проблемами сортировки JavascriptCore? ТФ происходит?

Ну, проблема была в функции сравнения. Вот так я сортировал…

tags.sort((t1, t2) => t1.count < t2.count)

Это не способ сортировки вещей в JavaScript. Я знал это. Но написал это по привычке. Это путь JS…

tags.sort((t1, t2) => t1.count - t2.count)

Итак, V8 не против первого пути. Но JavaScriptCore злится.

API Google Диска и составные запросы

Установив react-native-google-signin и приложив некоторые усилия, я подумал, что все готово. Теперь используйте API остального диска с токеном доступа и создайте резервную копию/восстановление всех пар ключ-значение.

Проблема была с multipart/related запросами. Чтобы загрузить файл с метаданными на гугл диск, мы должны использовать составной почтовый запрос. В составном запросе запрос делится на несколько частей. В этом случае первая часть используется для отправки метаданных файла. Составные запросы выглядят так…

POST https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart HTTP/1.1
Authorization: Bearer [YOUR_AUTH_TOKEN]
Content-Type: multipart/related; boundary=foo_bar_baz
Content-Length: [NUMBER_OF_BYTES_IN_ENTIRE_REQUEST_BODY]

--foo_bar_baz
Content-Type: application/json; charset=UTF-8

{
  "name": "myObject"
}

--foo_bar_baz
Content-Type: image/jpeg

[JPEG_DATA]
--foo_bar_baz--

У Google есть API-клиенты, которые упрощают такие запросы. Но поскольку JS-клиент основан на NodeJS, его нельзя использовать с react-native.

Итак, сначала я попробовал простой запрос без составных частей. Это сработало. Затем я попытался сконструировать тело вручную. Это не работало. Я продолжал проверять и перепроверять синтаксис. Где поставить одинарную новую строку и где поставить двойную новую строку и т. д. Это расстраивало.

Синтаксис был правильным все время. Только я отправлял основной текст данных вместо построенного тела с текстом данных при отправке запроса!

Это все

Как вы заметили, эта статья в основном о моем идиотизме при разработке приложения 😁 Надеюсь, вам понравилось читать статью и вы что-то узнали.

Теперь установите приложение и попробуйте. Если вам это нравится, пожалуйста, помогите его распространению. Делитесь и рекомендуйте своим друзьям и ставьте ★★★★★ в Google Play.

Получить приложение здесь.

✉️ Подпишитесь наCodeBurstраз в неделю Email Blast,🐦 Подпишитесь наCodeBurstна Twitter, просмотрите🗺️ Дорожную карту веб-разработчиков на 2018 год и🕸️ Изучите комплексную веб-разработку .