HackerNoon Mobile: взгляд разработчика и выпуск The World Wide Writer [версия 1.9]

Мобильное приложение HackerNoon (доступен на и слишком долго ждет одобрения ), выпущенный в четвертом квартале 2023 года с целью расширения доступа ко всей библиотеке HackerNoon. Мобильное приложение облегчает читательскую аудиторию, поскольку это было одним из основных мотивов его создания. Почти все, что мы делаем в Интернете, на мобильных устройствах проще, поскольку оно обеспечивает персонализированный опыт, и вы можете пользоваться основными функциями приложения из любого места и в любое время. Выпуск 1.9, выпущенный сегодня, является нашим крупнейшим улучшением, особенно благодаря поддержке 12 языков и нашему опыту написания контента внутри приложения. Привет всемирному писателю!

Основные характеристики:

1. Прочтите — доступна вся библиотека HackerNoon из более чем 100 тысяч историй.
2. Плейлист аудиоплеера — слушайте статьи и создавайте плейлисты с любимыми историями.
3. Написание (НОВИНКА!) — возможность писать и отправлять истории редакторам-людям.
4. Опросы и комментарии — голосуйте и обсуждайте последние тенденции в области технологий.

В мобильном приложении вы также можете увидеть такие страницы, как страница TechBeat с актуальными историями дня, страница курирования со статьями, подобранными по темам, которые вам нравятся, страницы категорий / тегов , которые также курируют статьи по темам, и многое другое. В этой версии 1.9 мы скоро добавили в приложение переводы и тексты , так что оно становится все лучше.

С точки зрения разработчика мобильное приложение было очень необходимо. Он упоминался почти на каждой встрече по продукту HackerNoon перед его выпуском. Почему-то многие разговоры привели к следующему:

Было бы хорошо, если бы у нас было мобильное приложение для выполнения xy или z.

Как разработчик и человек, который любит сложные задачи, я всегда задавал себе вопрос, почему так сложно просто создать мобильное приложение. После этого ответ оказался проще, чем я думал.

Как это произошло?

Оказывается, я наткнулся на Ionic Framework несколько лет назад и подумал, что это интересно, но так и не написал кода для его тестирования. В то время фреймворк работал только с Angular, что, вероятно, повлияло на мое решение опробовать его, учитывая, что я больше являюсь разработчиком React. В то время Ionic не был так популярен, и сама идея создания гибридного приложения не укладывалась в головы многих людей. В любом случае, однажды на совещании по продукту они говорили о мобильном приложении, и я решил оглянуться на Ionic и угадайте, что они расширили свою структуру до Vue и React, что либо меня, либо меня действительно устраивает.

Первое, что я сделал, — это установил фреймворк и создал быстрое приложение для Android. Я был впечатлен тем, насколько простым и понятным был процесс. Было безумно думать о возможности просто отказаться от нескольких компонентов и создать мобильное приложение, но Ionic позволил просто запустить некоторые команды и создать приложение на нескольких платформах, включая iOS и Android. Мне было очень комфортно с этой структурой, и в тот момент я был как бы новичком в том, что готов принять вызов. Совпадение произошло после того, как я увидел новый проект по созданию первого мобильного приложения HackerNoon. Я быстро взял трубку и начал над этим работать.

Процесс

Сначала я начал с установки Ionic на свою машину с Linux, создал совершенно новое приложение и изучил некоторую их документацию. Выполните эти волшебные команды, чтобы начать разработку: npm install -g @ionic/cli ionic start // создаем ионную подачу // запускаем локально. Поигравшись с этим, я начал перемещать компоненты из веб-версии HackerNoon в этот новый проект. За несколько часов я создал несколько страниц. Дизайнеры HackerNoon ( @Devans и @Kien ) действительно проделали огромную работу, согласовав все и придав приложению привлекательный вид и суть. Большая часть его была разработана так же, как и в React, за исключением того, что Ionic использует Typescript, что для них хорошо. Моя машина с Linux стала хорошей отправной точкой: я разработал почти 50% приложения на базе Android, но у меня были трудности с тестированием версии для iOS. Был обходной путь с Linux: установить Mac OS на виртуальную машину, затем установить XCode, а затем протестировать приложение на IOS, но тогда я не мог справиться с зависанием и медлительностью. Убедившись в успехе приложения, я принял решение обновить свой MacBook Pro, чтобы начать разработку для iOS. На данный момент это было хорошее решение, поскольку оно показало мне на многих уровнях важность разработки для всех платформ, хотя я все еще люблю Linux. Так что работа над этим приложением на моем новом MacBook Pro открыла мне глаза.

Испытания

Это был обучающий опыт, полный проблем, которые нужно было преодолеть. На выяснение даже самой простой ошибки уходили часы. С радостью я документировал каждый раз, когда застревал, чтобы этого не случилось в следующий раз. Будучи ведущим разработчиком этого проекта, мне пришлось сделать трудный выбор с точки зрения инфраструктуры приложения, построить весь API и в то же время изучить Ionic и привыкнуть к нему. Вот некоторые из основных задач:

1. Отладка/тестирование: все разработчики знают, насколько важно тестирование при разработке приложения любого уровня. Работая над мобильным приложением, я сначала начал разработку в Интернете. На самом деле я думал, что мне придется каждый раз выполнять развертывание, чтобы протестировать на мобильных устройствах. Я потратил немного времени только потому, что не знал, что у Ionic есть способ тестирования на мобильных устройствах, но локально. Поэтому в большинстве случаев мой CSS или некоторые обработчики событий ломаются, потому что это не та же реализация. После локального тестирования на мобильных устройствах процесс стал более плавным.
2. Уведомления . Когда я впервые начал работать над мобильным приложением, я увидел два интересных плагина, которые можно было использовать для уведомлений: локальные уведомления и push-уведомления. Локальные уведомления — это уведомления, управляемые локально в приложении, без взаимодействия с внутренним сервером. Я автоматически подумал, что локальные уведомления — это правильная и быстрая реализация выбора, поэтому я реализовал это довольно легко. Однако это было не то, что мы искали. Push-уведомления были подходящим вариантом, но их было немного сложнее реализовать, требовалась дополнительная настройка и внутренний сервер. Мы упростили задачу, просто отправляя одно уведомление каждый день в полдень по горному времени, хотя, возможно, нам захочется отправить немного больше. Если у вас есть мобильное приложение и принятые уведомления, вы должны получать уведомления такого типа о главной новости дня HackerNoon.
3. Список воспроизведения/плеер : это одна из основных функций приложения. Было приятно создавать, но мучительно отлаживать просто потому, что у него много функций. При тестировании потребовалось немало времени, чтобы убедиться, что каждая кнопка выполняет то, что от нее требуется. Было странно создавать аудиоплеер истории, поскольку я пробовал несколько аудиоплагинов для работы на мобильных устройствах. Основная проблема, с которой я столкнулся, заключалась в том, что я собрал плеер, но звук не воспроизводился или качество звука было очень плохим. Иногда звук работает в режиме разработки, но не в режиме производства. Что действительно сработало, так это родной Audio API. После этого все было просто: просто передайте исходный URL-адрес и добавьте кнопки действий. Список воспроизведения оказался менее сложной задачей, поскольку все, что нужно, — это сохранить истории в базе данных, чтобы создать список воспроизведения. Было действительно здорово реализовать такие функции, как упорядочение плейлиста, изменение голосов, изменение порядка и возможность добавления целой группы историй в плейлист. Возможно, в будущем у нас появятся общедоступные плейлисты, где вы сможете видеть, что слушают другие люди, конечно, с их участием. Вот как мой плейлист выглядит сейчас:
4. Обновления Ionic против обновлений iOS против обновлений Xcode: я думаю, это была самая неприятная часть, когда у вас действительно хорошая версия, работающая на 100%, а потом она не работает, или не загружается, или не регистрируется. in. Я помню, как формы ввода работали на Ionic, но затем обновил версии Ionic, и события ввода не работали, поэтому я подумал, что ошибки были на бэкэнде. Или протестируйте приложение, чтобы затем понять, что я больше не могу видеть журналы Safari, потому что я обновил свой телефон, и Apple больше не поддерживает эту функцию. Или пытаюсь создать новую версию приложения, но не удалось, потому что xcode обновился и нужно было что-то изменить в моем коде. Это были действительно неприятные моменты и отнимали много времени. По крайней мере, это произошло только во время разработки 👍.
5. Вход в Google на Android: это была одна из ошибок приложения: пользователи Android буквально не могли войти в систему, используя метод Google. Это была сумасшедшая ошибка, потому что она произошла в производстве. Хотя это было действительно просто, это также было частью процесса обучения, когда дело касалось мобильной разработки. Оказывается, для входа в Google необходимы два типа ключей: один для разработки, настроенный в Firebase, и другой для рабочей среды, который также необходимо настроить в Firebase. Проблема здесь в том, что магазин Google Play фактически создает рабочий ключ, который должен заменить ключ разработки. У меня не было возможности узнать об этом, и в результате я потратил часы, пытаясь выяснить, в чем проблема. На исправление ушло менее 30 секунд, когда я понял, что все, что нужно, — это заменить ключи.
6. Пишу: … это были настоящие американские горки. Основной проблемой было просто найти редактор, который бы работал на мобильных устройствах и Ionic. Я попробовал около 20 различных редакторов, и большинство из них не сработало на мобильных устройствах, хотя в Интернете они работали идеально. Некоторые не загружали клавиатуру, некоторые пишут буквы, отличные от тех, что нажимаются, а некоторые просто не смогли установиться. Когда я наконец нашел тот, который работал, то набор текста был очень медленным, поэтому это было очень утомительно. К счастью, я попробовал другой редактор, QuillJS(!), и он, похоже, работает лучше, чем ожидалось. На самом деле это редактор, который я использую, чтобы написать эту историю. Эта функция по сути препятствовала выпуску новых обновлений, потому что мы действительно хотели позволить пользователям писать в мобильном приложении.

Что мне понравилось?

Весь процесс разработки был таким крутым, и я определенно рекомендую другим разработчикам попробовать. Чем больше я работал с приложением, тем больше я к нему привыкал и чувствовал себя более комфортно в процессе разработки. Было очень приятно видеть приложение на своем телефоне и перемещаться по всем страницам. Самой впечатляющей особенностью для меня стал плейлист/плеер как нечто органичное от HackerNoon и одна из основных функций приложения. Push-уведомления — это функция, которую я, вероятно, узнал больше всего, поскольку это было что-то совершенно новое, и мне удалось увидеть, как работают мобильные уведомления, и эти знания определенно можно будет применить в будущем к другим функциям.

Если у вас его еще нет, скачайте приложение и поделитесь своими мыслями в комментариях ⬇️. ✌️

Вот версия Apple:

Вот версия Android: