Создайте быстрое приложение без сервера с помощью Zipper пишите на TypeScript, оффлодьте все остальное.

Создайте приложение без сервера с помощью Zipper на TypeScript и оффлодьте остальное.

Я помню первый раз, когда я увидел демонстрацию Ruby on Rails. С минимальными усилиями демонстранты создали полноценное веб-приложение, которое можно использовать для реального бизнеса. Я был впечатлен, особенно когда подумал о том, сколько времени мне потребовалось, чтобы создать подобные решения с использованием фреймворков Seam и Struts.

Ruby был создан в 1993 году как простой в использовании скриптовый язык, который также включал объектно-ориентированные возможности. Ruby on Rails поднял планку на новый уровень в середине 2000-х годов, вовремя, чтобы стать выбором для первых стартапов Twitter, Shopify, GitHub и Airbnb.

Я задал себе вопрос: “Возможно ли иметь продукт, подобный Ruby on Rails, без необходимости беспокоиться о инфраструктуре или базе данных?”

Именно тогда я открыл для себя платформу Zipper.

• Новости VoAGI, 20 сентября Python в Excel Это навсегда изменит науку о данных • Новый опрос VoAGI!
• Безопасные разговоры Защита конфиденциальности и данных при использовании ChatGPT 🛡️
• Как построить и управлять портфелем данных

О платформе Zipper

Zipper – это платформа для создания веб-сервисов с использованием простых функций TypeScript. Вы используете Zipper для создания апплетов (не связанных с Java, хотя они носят то же название), которые затем создаются и разворачиваются на платформе Zipper.

Самое замечательное в Zipper заключается в том, что он позволяет вам сосредоточиться на кодировании вашего решения с использованием TypeScript, и вам не нужно беспокоиться о чем-либо еще. Zipper заботится о следующем:

• Пользовательском интерфейсе

• Инфраструктуре для размещения вашего решения

• Уровне сохранности данных

• API для взаимодействия с вашим апплетом

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

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

• Hello World – базовый апплет, чтобы вы могли начать

• CRUD Template – предлагает список задач, в котором можно создавать, просматривать, обновлять и удалять элементы

• Slack App Template – предоставляет пример взаимодействия с сервисом Slack

• AI Generated Code – выражает ваше решение на естественном языке и позволяет ИИ создать апплет для вас

На платформе Zipper также есть галерея апплетов, которые могут быть форкнуты так же, как репозитории на основе Git.

Я решил проверить платформу Zipper и создать апплет для голосования.

Пример использования голосования HOA

Концепция ассоциации собственников жилья (HOA) начала набирать популярность в Соединенных Штатах в XX веке. Группы для HOA создавались для решения таких вопросов, как уход за общими территориями и установление правил и руководящих принципов для жителей. Их целью является поддержание качества жизни всего поселка на протяжении длительного времени после завершения строительства дома.

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

В этой статье я хотел использовать тот же подход с помощью Zipper.

Требования к апплету для голосования

Требования к апплету для голосования:

1. В качестве владельца голосования мне необходима возможность создавать список кандидатов для голосования.

2. В качестве владельца голосования мне необходима возможность создавать список зарегистрированных избирателей.

3. В качестве избирателя мне необходима возможность просматривать список кандидатов.

4. В качестве избирателя мне необходима возможность отдать один голос за одного кандидата.

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

Кроме того, я считаю, что было бы неплохо иметь несколько дополнительных целей:

1. В качестве владельца голосования мне необходима возможность очистить список кандидатов.

2. В качестве владельца голосования мне необходима возможность очистить список избирателей.

3. В качестве владельца голосования мне необходима возможность установить заголовок для голосования.

4. В качестве владельца голосования мне необходима возможность установить подзаголовок для голосования.

Проектирование приложения “Голосование”

Для начала работы на платформе Zipper я перешел на сайт zipper.dev и нажал кнопку Войти. Затем я выбрал источник аутентификации:

После успешного входа в систему, я использовал кнопку Создать приложение на панели инструментов для создания нового приложения:

Генерируется уникальное имя, но его можно изменить, чтобы лучше идентифицировать вашу задачу. Пока что я оставил все значения по умолчанию и нажал кнопку Далее – это позволило мне выбрать из четырех различных шаблонов для создания приложения.

Я начал с шаблона CRUD, потому что он дает пример того, как работают общие потоки создания, просмотра, обновления и удаления на платформе Zipper. После создания кода экран выглядит следующим образом:

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

Определение основных элементов

Для приложения “Голосование” первое, что я хотел сделать, – обновить файл types.ts следующим образом:

Я хотел определить постоянные значения для заголовка и подзаголовка голосования в новом файле с именем constants.ts:

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

Затем я добавил файл common.ts, который содержал функцию validateRequest():

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

Определение кандидатов

После понимания того, как был создан элемент ToDo в исходном приложении CRUD, я смог добавить файл create-candidate.ts следующего содержания:

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

Пока я здесь, я сразу же написал файл delete-all-candidates.ts, который удаляет всех кандидатов из хранилища данных по ключу/значению:

На этом этапе я использовал функцию Предварительный просмотр, чтобы создать Кандидата A, Кандидата B и Кандидата C:

Регистрация избирателей

Голосование готово, мне нужна возможность регистрировать избирателей для голосования. Поэтому я добавил файл create-voter.ts со следующим содержимым:

Чтобы зарегистрировать избирателя, я решил предоставить поля для адреса электронной почты и имени. Также есть логическое свойство с именем voted, которое будет использоваться для обеспечения правила “голосовать только один раз”.

Как и раньше, я создал файл delete-all-voters.ts:

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

Создание голосования

Единственное, что мне оставалось сделать, – это создать голосование. Для этого я обновил файл main.ts следующим образом:

Я добавил следующие проверки в рамках логики обработки:

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

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

• Должен быть хотя бы один кандидат для голосования, иначе будет отображено сообщение “Для этого голосования не настроены кандидаты”.

• Если зарегистрированный избиратель уже проголосовал, кнопки голосования будут отключены для всех кандидатов на голосовании.

Файл main.ts содержит кнопку для каждого кандидата, которые вызывают файл vote.ts, отображенный ниже:

На этом этапе приложение “Голосование” было готово к использованию.

Работа голосования HOA

Для каждого зарегистрированного избирателя я бы отправил им электронное письмо со ссылкой, аналогичной приведенной ниже:

https://squeeking-echoing-cricket.zipper.run/run/main.ts?email=some.email@example.com

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

Бюллетень выглядит следующим образом:

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

Количество голосов за кандидата В увеличилось на один, и все кнопки голосования были отключены. Успех!

Вывод

Оценивая требования к приложению для голосования, я понял, что смог удовлетворить все критерии, включая расширенные цели, примерно за два часа – и это включало создание пользовательского интерфейса, инфраструктуры и развертывания. Лучшей частью этого опыта было то, что 100% моего времени было сосредоточено на создании решения, и мне не приходилось тратить время на работу с инфраструктурой или даже хранилищем данных.

Мои читатели могут помнить, что я сосредоточен на следующем миссионерском заявлении, которое, на мой взгляд, может применяться к любому IT-профессионалу:

“Сосредоточьте свое время на предоставлении функциональности, которая расширяет ценность вашей интеллектуальной собственности. Используйте фреймворки, продукты и услуги для всего остального.”

– Дж. Вестер

Платформа Zipper полностью соответствует моему личному миссионерскому заявлению на 100%. Фактически, они смогли пойти еще дальше, чем Ruby on Rails, потому что мне не нужно беспокоиться о том, где будет запущена моя служба или какое хранилище данных мне нужно будет настроить. Используя подход с использованием приложений, мой бюллетень уже развернут и готов к использованию.

Если вас интересует попробовать приложения, просто войдите на zipper.dev и начните создавать. В настоящее время использование платформы Zipper бесплатно. Попробуйте также шаблон кода, сгенерированного искусственным интеллектом, так как это действительно здорово – предоставить параграф о том, что вы хотите создать, и увидеть, насколько близко полученное приложение соответствует вашим ожиданиям.

Если вы хотите попробовать мое приложение для голосования, оно также доступно для форка в галерее Zipper по следующему адресу:

https://zipper.dev/johnjvester/ballot

Хорошего дня!