Некоторое время я хотел сделать клон 9Gag и решил посмотреть, смогу ли я сделать его в качестве шаблона, чтобы другие могли легко настроить его и запустить как собственное приложение.

Младшим разработчикам сложно клонировать репозиторий GitHub, настроить его и запустить как новое приложение.

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

Вот некоторые мысли из моего опыта:

Чтобы создать новый проект на Koji, вы выбираете шаблон и даете ему новое имя. Есть десятки шаблонов для клонирования, и каждый день добавляются новые.

Вместо того, чтобы загружать репозиторий на ваш компьютер, Коджи настраивает все для вас в облаке Amazon. В течение 30 секунд вы получаете всю среду разработки со всевозможными потрясающими возможностями, включая горячую перезагрузку, встроенный предварительный просмотр в реальном времени, веб-редактор кода (Монако, тот же, что используется VSCode), элементы управления визуальной настройкой (VCC), которые позволяют для абстракции гипер-переменных (что упрощает настройку шаблона даже для неспециалистов), развертывание в один клик и многое другое.

В отличие от таких вещей, как CodePen, JSFiddle и других игровых площадок JavaScript, Koji поддерживает проекты Full Stack и охватывает весь процесс разработки и развертывания. Фактически, Koji выходит далеко за рамки этого, помогая вам привлекать пользователей, измерять и расти.

Вы можете найти мой шаблон здесь :)

Возможности приложения

Вот особенности нашего шаблона приложения 9gag:

Новостная лента:

В ленте новостей два раздела: Горячий и Свежий. Горячий раздел содержит сообщения, набравшие более 200 баллов (голоса за-против) и ограниченные до 50 сообщений. Свежий раздел содержит сообщения ниже 200 баллов и отсортирован по дате создания.

Создать новый пост

Пользователи могут создавать 3 типа сообщений: видео YouTube, изображение и ссылку. Пользователи должны войти в систему, чтобы создать сообщение

Комментарий, голос за, голос против

Как и у 9gag, у нас есть три важные функции: комментарии, голоса за и против. Пользователи не могут спамить голосами за или против, потому что их голоса хранятся в базе данных, и мы проверяем информацию о голосовании перед ее сохранением в базе данных.

Войти и зарегистрироваться

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

Инструменты администратора

У нас также есть инструменты модерации в нашем клоне 9gag. Чтобы использовать его, пользователь должен войти в систему под учетной записью администратора (admin / pass). У нас есть простой механизм защиты, который гарантирует, что такие действия, как: удалить сообщение, удалить комментарий и заблокировать пользователя, выполняются только из учетной записи администратора.

Скрипт генерации данных

Чтобы упростить процесс разработки, я создал сценарий генерации данных, который загружает в базу данных несколько примеров сообщений. Их можно удалить во время развертывания. Этот сценарий запускается сам по себе после клонирования шаблона.

Начать

Наш шаблон приложения состоит из двух частей: серверных API и внешнего интерфейса.

Фронтенд

Наш интерфейс построен на React и styled-components.

Давайте пройдемся по каждой папке в разделе внешнего интерфейса :)

обычный

Эта папка содержит некоторые повторно используемые компоненты, такие как Button, PageContainer, входные данные формы и даже компонент Post, поскольку он повторно используется в ленте, сведениях о публикации и создании сообщений. страница.

страницы

Эта папка содержит компоненты для страниц в нашем приложении. Внутри каждой папки у нас есть файл с именем koji.json. Это образец содержимого koji.json.

Этот файл определял маршрут, имя, путь и должен ли наша страница требовать входа в систему или нет.

Мы будем использовать информацию о странице в /frontend/helpers/router/index.js, поэтому вам следует взглянуть на этот файл, чтобы понять, как работает наша маршрутизация!

Кроме того, koji.json также влияет на предварительный просмотр встраивания. Когда вы открываете любой файл в папке pages, предварительный просмотр внедрения перенаправляет на маршрут, определенный в koji.json!

контексты

Я решил использовать React Context, который легче понять и достаточно хорошо справляется с этим вариантом использования. Вы можете легко добавить Mobx или Redux, если хотите.

помощники

Эта папка содержит несколько вспомогательных файлов для нашего внешнего интерфейса, включая помощники маршрутов и помощники API. Мы используем response-router-dom для обработки маршрутизации.

Бэкэнд

В шаблоне 9gag мы используем ExpressJS для поддержки конечных точек нашего внутреннего API. Для хранения данных мы могли бы использовать любую базу данных, но я решил использовать хранилище Jiro, это хранилище данных ключевых значений, предоставляемое платформой Koji (хранилище Jiro - это оболочка API вокруг Google Firebase, которая не не требует создания новой учетной записи Firebase).

Вот как мы создаем конечную точку для создания API сообщений:

Так что это похоже на Firebase или MongoDb. Вот методы, которые вы можете использовать для получения и установки данных с помощью хранилища Jiro:

  • Store.set (collectionName, key, data): этот метод используется для хранения данных в конкретной коллекции, определяемой ключом.

Пример: Store.set (‘posts’, 1234, {hello: «world»})

  • Store.get (collectionName, keyValue): мы используем этот метод для получения одной записи из коллекции, идентифицируемой keyValue.

Пример: Store.get («пользователи», 1234).

  • Store.getWhere (collectionName, queryKey, operator, queryValue) метод getWhere немного более гибок, чем метод get, поскольку мы можем запрашивать данные. используя имя поля, оператор и значение запроса. Возвращаемое значение будет массивом
// Example: find the records where username equals "davidtran"
Store.getWhere('users', 'username', '==', 'davidtran')

Для этого метода нет сортировки по или сортировки по, поэтому вам придется делать это самостоятельно, используя Javascript. Вот как я это делаю в GetFeed API:

Настройка

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

Мы используем контекст React и стилизованные компоненты ThemeProvider, чтобы гарантировать, что наши изменения в настройках будут обновляться всякий раз, когда пользователь что-либо изменяет.

Вот как мы получаем сообщение, содержащее изменения с сервера Koji.

Поскольку наши компоненты используют данные темы, предоставленные ThemeProvider, новые изменения будут обновляться автоматически.

Заключение

На реализацию этого шаблона ушло 10 дней, но теперь, когда это шаблон, многие люди могут легко клонировать, настраивать и развертывать его. Я очень хочу увидеть, что вы можете сделать с этим шаблоном :)

Чтобы получить живую помощь от других разработчиков, вы можете присоединиться к группе Koji Discord здесь: https://discordapp.com/invite/GF4pN3v. Я обнаружил, что группа очень дружелюбна и благосклонна.