Идея Skypad принадлежит моему коллеге Хове. Он высказал одну из своих случайных идей в наших офисных чатах: Почему бы вам не написать Skypad, как Firepad?

Firepad связан с Firebase, который является бессерверным решением, как и моя компания. . После проверки я сказал: Это немного сложно. Мне не понравился стиль. Я хотел что-то попроще - что-то, что мог бы использовать хакер.

У меня уже была полная пластина, выполняющая сторонние проекты Oursky's Playground, поэтому я знала, что если не сделаю этого в тот день, я забуду об этом . Я никогда не ожидал, что этот двухчасовой ночной проект попадет на первую полосу Hacker News.

Вот как я это построил.

Для начала сделайте это просто.

Я начал проект в 11 часов вечера после вечеринки, и я выкатил первую версию около часа ночи. Для хостинга я включил настройки страницы GitHub для размещения статической страницы из репозитория GitHub напрямую, так как в любом случае она будет с открытым исходным кодом.

Моя временная шкала была:

5 минут: Настройте Skygear Server, чтобы использовать бессерверный бэкэнд. Я использовал API облачной базы данных для сохранения и извлечения существующих заметок и API публикации / подписки для синхронизации в реальном времени.

10 минут: Создал простой макет текстовой области с MUI. Я решил использовать <textarea> для области ввода пользователя

20 мин. Реализовано сохранение и загрузка заметки.

30 минут: синхронизация в реальном времени.

20 минут: добавлено примечание для создания общедоступного URL и добавлены параметры совместного использования.

20 мин. Последние штрихи и укладка.

10 минут. Написал лучший файл README для репозитория GitHub.

15 минут: Настройка сервера Skygear и загрузка CSS Framework

У меня уже есть бесплатная учетная запись на Skygear.io, на которой есть портал для разработчиков, где я могу просто создать новое приложение. Каждое новое приложение будет иметь собственный ключ API, а на портале есть руководства по быстрому запуску (я использовал Web для JS). Со своей учетной записью я могу использовать любую из функций Skygear, но для этого проекта мне нужно было только настроить CloudDB и Pub / Sub (что занимает 5 минут). Вы можете зарегистрироваться здесь, следуя инструкциям по быстрому запуску.

Как я уже упоминал, я использовал MUI для внешнего интерфейса CSS. MUI использует рекомендации Google по материальному дизайну и предлагает образцы макетов для блогов, сообщений электронной почты и целевых страниц.

20 минут. Сохраните и загрузите заметку.

  1. Создайте новую заметку, если в URL нет идентификатора заметки:

2. Если пользователь посещает Skypad с указанным идентификатором заметки, Skypad загрузит существующую заметку:

30 минут: синхронизация в реальном времени

Я реализовал синхронизацию с помощью pubsub. Механизм прост: клиент, открывающий заметку с идентификатором aaa-bbb-ccc, подписывается на канал note/aaa-bbb-ccc. Когда в заметке есть обновление, соответствующий клиент публикует событие на канале. Если на той же заметке есть другие зрители, они получат событие обновления с последним контентом.

Я добавил случайный токен, который привязывается к каждому клиенту (вы можете представить его как уникальный идентификатор вкладки). Чтобы текущий клиент, инициирующий событие обновления, не попал в бесконечный цикл обновления.

20 минут: добавьте примечание генерации общедоступного URL-адреса и добавьте параметры обмена

Я добавил базовый обмен для Skypad, который включает публикацию в Facebook и Twitter, а также прямой URL-адрес заметки. Пример URL-адреса заметки: https://skygear-demo.github.io/skypad/#5e2fd94d-5d9d-4838-bd21-40db164f15ef, где 5e2fd94d-5d9d-4838-bd21-40db164f15ef - идентификатор существующей заметки.

20 минут: финальные штрихи и укладка

После создания логики приложения я вернулся к стилизации приложения следующим образом:

  • сделали панель опций совместного доступа липкой внизу
  • исправлен размер экрана, слишком маленький для мобильных устройств (даже хакерские проекты заслуживают того, чтобы быть мобильными в первую очередь!)
  • исправил некоторые ошибки CSS, которые я сделал

10 минут: Написал лучший файл README для репозитория GitHub.

Обновленный README включает в себя обзор функций, демонстрационную ссылку, руководства по установке и развертыванию, а также сведения о других библиотеках с открытым исходным кодом. Хороший README - ключ к общению с пользователями!

Кстати, я рекомендую использовать Toggle в качестве бесплатного трекера времени.

Из всех задач и технических решений, которые я принимал, это был единственный принцип, который я запомнил в полночь:

« Будьте проще , глупо»

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

Показать HN.

И, когда я закончил, я решил, что нечего терять, поделившись этим на HackerNews, прежде чем бросить курить.

Также ознакомьтесь с бесплатными инструментами разработчика и серверной частью с открытым исходным кодом моей компании Oursky!

Oursky - агентство по дизайну и разработке веб- и мобильных приложений с офисами в Гонконге и на Тайване. Мы все стремимся помочь брендам и предпринимателям воплотить свои идеи в жизнь. Свяжитесь с нами, если вы ищете партнера для создания вашего следующего цифрового продукта.