Разработка приложений

Little Tech: как создать приложение самостоятельно, быстро и в рамках бюджета

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

В этом посте я объясню, как я создал приложение примерно за два месяца, работая всего несколько часов в день и потратив всего около 30 долларов (если не учитывать закуски). В процессе я расскажу об стратегиях, инструментах и ​​сервисах, которые использовал на этом пути. Я надеюсь, что вы найдете их полезными, если вы планируете создать собственное приложение или просто хотите лучше понять, как делается колбаса.

Прежде чем мы начнем, короткое заявление о моих базовых навыках. Последние семь лет я работаю в сфере ИТ, сначала в области автоматизации тестирования, а в последнее время — в разработке программного обеспечения и науке о данных. Это означает, что у меня уже был опыт программирования, но описанный здесь проект был моей первой попыткой создать приложение с нуля.

Приложение

Во-первых, я кратко представлю приложение, которое я создал, чтобы вы имели представление о том, какие возможности вы можете создать с помощью обсуждаемых здесь ресурсов. myGotu — это платформа для общения людей с дополнительными профилями знаний. Вы можете думать об этом как о Tinder для знаний.

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

Чтобы это работало, приложение myGotu должно обеспечивать следующие функции:

  • аутентификация
  • адаптация и управление профилями пользователей
  • механизм сватовства
  • список подключений пользователей с возможностью поиска по областям знаний
  • чат
  • механизм обмена профилями

Давайте углубимся.

Начало работы

Когда я впервые решил создать приложение, но еще не знал, как это сделать, я сделал то, что сделал бы любой хороший программист: погуглил. Я знал, что мне интересно создать что-то с механикой сопоставления, похожей на ту, что используется в Tinder и других приложениях для знакомств, поэтому я искал «клон Tinder».

Этот поиск привел меня к решениям без кода, созданным с помощью таких инструментов, как Bubble и Glide, а также к некоторым учебникам по настройке приложений в стиле Tinder без написания кода. Эти варианты выглядели многообещающе и предлагали быстрые результаты с минимальными усилиями. Но эти опции оказались за пределами моего бюджета, и я сомневался в их настраиваемости. Более того, поскольку я уже знал, как программировать, отсутствие кода в этих опциях не было главным аргументом в пользу продажи.

Альтернативный вариант, который я обнаружил, заключался в использовании готовых шаблонов от Codecanyon или Instamobile. Первый был доступным по цене, но доступные там шаблоны не предлагали всего спектра функций, которые меня интересовали, и многие из них были ориентированы только на ту или иную операционную систему. Последний предложил элегантный клон Tinder за 299 долларов, что, к сожалению, снова вышло за рамки моего бюджета. Тем не менее, Instamobile также предоставил несколько бесплатных шаблонов, которые позволили мне понять, как создаются приложения React Native.

Все еще ища хорошую отправную точку с открытым исходным кодом, я решил сосредоточиться на программном обеспечении с открытым исходным кодом и сузил свой поиск до «tinder clone github».

Этот поиск привел меня к золотой жиле: репозиторию @stevenpersia tinder-expo на GitHub. Там я нашел отличные примеры кодовой базы для приложения, похожего на Tinder, с экранами Исследование, Совпадения, Сообщения и Профиль. Это была хорошая отправная точка, но мне все еще нужно было найти несколько примеров потоков аутентификации. Благодаря большой поддержке сообщества, существует множество стартовых наборов для реагирования на нативные приложения. Для своего проекта я выбрал react-native-expo-template от @codingki, так как он был достаточно полным и простым в использовании.

С этими двумя ресурсами в качестве шаблонов у меня была основа для приложения.

Выбор выставки

Приступая к этому проекту, я уже имел опыт программирования на JavaScript.Я также знал, что хочу, чтобыmyGotu работал как в веб-браузерах, так и как отдельное мобильное приложение. Эти критерии сделали React Native очевидным выбором для создания пользовательского интерфейса. Однако я заметил, что @stevenpersia перенесли свой проект React Native в Экспо. Это вызвало первоначальный интерес к Expo, который усугубился, когда друг порекомендовал мне попробовать.

Документация Expo обещала упростить процесс разработки, предоставляя множество хорошо протестированных, согласованных и постоянно расширяющихся библиотек. Кроме того, Expo предлагает очень простой процесс публикации веб-сайтов, а также отличные инструменты для создания автономных мобильных приложений в своем облаке. Наконец, Expo может похвастаться прочной интеграцией со сторонними инструментами, в том числе с Firebase, который я рассматривал в качестве своего бэкэнд-инструмента.

Создание пользовательского интерфейса

Я решил начать с передней части по нескольким причинам. Во-первых, создание внешнего интерфейса помогло воплотить в жизнь то, что я имел в виду для приложения. Во-вторых, начав с внешнего интерфейса, я получил более четкое представление о том, каковы будут требования к внутреннему интерфейсу. Итак, вдохновившись проектами @stevenpersia и @codingki и пройдя ускоренный курс на Expo, я начал работать над интерфейсом myGotu.

Между ними React Native и Expo предоставили многое из того, что мне было нужно, в том числе:

По возможности я интегрировал существующие, хорошо оцененные пакеты с открытым исходным кодом. К ним относятся:

В некоторых случаях я находил пакет, похожий на то, что мне было нужно, но не совсем подходящий для работы. Например, вместо того, чтобы использовать эти фишки как plug-and-play, я потратил некоторое время и переписал код под свои нужды. Наконец, когда я не смог найти то, что мне нужно, я разработал собственные компоненты. К счастью, это случалось не часто.

В течение месяца у меня была интерактивная демо-версия с готовой фиктивной серверной частью.

Чтобы сделать пользовательский интерфейс myGotu немного веселее и привлекательнее, я добавил несколько картинок из Storyset. Он имеет большой выбор иллюстраций svg и позволяет настраивать изображения в вашем браузере. Некоторые изображения требовали более обширной настройки, для чего я использовал редактор Boxy SVG. Изображения из Storyset можно использовать бесплатно, если они содержат ссылку на Storyset вместе с иллюстрациями. Для многих проектов нежелательно включать атрибуции со своей графикой. К счастью, вы можете получить премиум-лицензию от Flaticon и использовать изображения без указания Storyset. Лицензия на это стоит 9,99 долларов США за подписку на один месяц.

Создание серверной части

Пришло время начать строить настоящий бэкэнд. Поскольку мой ноутбук не совсем подходил для работы в качестве внутреннего сервера myGotu, мне пришлось сделать выбор между Amazon’s Amplify и Google’s Firebase. Я работал с AWS раньше, но, несмотря на его мощь, он показался мне громоздким. При этом руководств по использованию Firebase было предостаточно, документация по использованию Expo with Firebase понятна, а затраты на использование инфраструктуры казались приемлемыми. Firebase может многое предложить, но я использовал его только для следующего:

Аутентификация

Firebase позволяет легко включить несколько методов аутентификации, включая аутентификацию по паролю, аутентификацию по номеру телефона и вход через социальные сети. Expo также предоставляет отличное руководство по настройке аутентификации вместе с пакетом AuthSession, который упрощает добавление аутентификации на основе веб-браузера как в веб-приложения, так и в мобильные приложения. Более того, Expo и Firebase хорошо интегрированы. Это позволило мне настроить и пароль, и аутентификацию Google за считанные часы.

Вот некоторые ресурсы, которые оказались чрезвычайно полезными при настройке аутентификации:

База данных

Firebase предлагает два варианта хранения данных: База данных в реальном времени и Firestore. Вы можете найти хороший интерактивный инструмент для сравнения двух здесь. Сначала меня привлек Firestore, который, согласно его спецификациям, является новейшей базой данных для разработки мобильных приложений с интуитивно понятной моделью данных, которая предлагает более богатые, быстрые запросы и масштабируется дальше, чем база данных реального времени. Однако эти функции имеют (буквальную) цену. Учитывая мой бюджет, я решил вместо этого использовать более старую, но более дешевую базу данных реального времени. Хотя база данных в реальном времени является менее яркой из двух опций, на данный момент она предоставляет все, что мне нужно для приложения.

Вот еще несколько ресурсов, которые очень помогли мне реализовать некоторые функции, связанные с БД:

Облачное хранилище

Облачное хранилище Firebase — простое решение для хранения неструктурированных данных. В моем случае я использовал облачное хранилище для хранения фотографий профиля, загруженных пользователями в процессе регистрации. Настроить это было просто. Вот учебник, который я использовал.

Облачные функции

Поскольку myGotu не использует особо сложную логику, все его функции можно было легко реализовать в самом приложении. Однако для повышения безопасности и удобства сопровождения я извлек некоторые функции, в том числе для выбора новых потенциальных совпадений, обработки событий считывания и удаления учетных записей пользователей, и развернул их в облаке. Все это стало проще благодаря руководствам Firebase Начало работы и Вызов функций из вашего приложения.

Обмен

Как и все социальные приложения, ценность myGotu обусловлена, главным образом, пользовательской базой. Таким образом, приоритетом является поощрение пользователей myGotu к тому, чтобы они делились своими профилями. Чтобы поощрить обмен, я черпал вдохновение из Wordle, чей вирусный успех частично связан с умным дизайном отображения результатов игроков, которыми они делятся в социальных сетях.

Как и игроки Wordle, пользователи myGotu могут делиться своими профилями в социальных сетях, и в этом случае их профили знаний — что они знают и что они хотят знать — отображаются в виде кругов, окрашенных в соответствии с категориями знаний. Все это относительно легко реализовать, следуя этому туториалу.

Подведение итогов

Это был краткий обзор моего подхода к созданию myGotu. В общей сложности процесс стоил около двух месяцев работы в свободное время, а также небольшую ежемесячную подписку на встроенную графику и 20 долларов за этот домен. Если вам интересно, вы можете узнать больше о самом приложении здесь. Если это руководство было полезным, пожалуйста, дайте мне знать в комментариях. Я ожидаю предоставить более подробные руководства по некоторым процессам, описанным здесь, в будущих сообщениях.

Как видите, различные инструменты в моем распоряжении — от React Native и Expo до множества руководств, любезно предоставленных другими разработчиками, — значительно упростили мой процесс разработки приложений. Итак, хотя я построил свой Gotu в одиночку, тем не менее, это объединило усилия многих других. Таким образом, процесс создания myGotu помог мне более глубоко оценить важность обмена знаниями, для продвижения которого предназначен myGotu.