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