Да , это так!
Вы можете построить магазин за час, не раскрутив сервер.
Черт возьми, как?!
— ты возможно
Прошли те времена платы дорогих разработчиков или возиться со странными расширениями WordPress.
Я запускаю группу в Facebook, Это группа ИТ -поддержки , и я хотел продать несколько наклеек логотипа группы. Я не хотел настроить другой сервер, оплачивать подписку Shopify или что -либо еще, что потребовало тонны работы.
Я так ленив.
Я покажу вам, как построить витрину, которая может принять платежи и управлять запасами.
Если вы хотите перейти к готовому продукту, он здесь: http://bit.ly/ITSupportStickers
Строительство фронтального конца
Я большой поклонник Каррд. Ко -Каррд позволяет создавать простые одностраничные веб-сайты с визуальным редактором. Это отлично подходит для быстрого тестирования идей и быстрого получения контента.
Я начал с выбора стартовой целевой страницы в Каррд.Ко. Я удалил любые элементы, которые не были полезны, и добавил пару фотографий моей наклейки и описание с текстовыми и элементами изображения.
Далее мы подпишемся на Snipcart Анкет
Snipcart – это решение электронной коммерции, которое работает уникальным образом – вся конфигурация и инвентарь хранятся в атрибутах HTML на странице магазина!
«Что, если какой -то Джокер просто изменит HTML и получает мои вещи бесплатно, это не круто, и без сервера отстой» -Во снова, может быть
Snipcart серьезно относится к безопасности. Прежде чем обрабатывать заказы, их серверы ползают на первой странице вашего магазина и убедитесь, что цены и детали являются правильными.
Лучше всего то, что Snipcart позволит нам создать магазин электронной коммерции с нулевым кодом (ISH). Хорошо, какой -то код, но нулевая конфигурация сервера. Хороший.
Snipcart config
Добавьте таблицу стиля по умолчанию
На вашей странице Carrd добавьте Enced элемент. Обязательно установите тип как код, стиль, чтобы скрыть и вставьте элемент стиля в разделе кода:
Добавление Snipcart
Добавить еще один Enced Элемент, чтобы Кард с теми же настройками, что и выше, но на этот раз возьмите код ключа API из Snipcart под Панель инструментов> Аккаунт> Ключи API :
Эти клавиши API являются особенными и не должны быть защищены, как вы обычно можете делать с сверхсекретными клавишами API.
Добавление инвентаря
Давайте добавим наш первый продукт и способ заказать!
Атрибуты – это то, где мы установим цену, описание и заголовок нашего товара!
Я установил свои атрибуты как:
type=button data-item-name=Two IT Support Stickers data-item-url=https://shop.thisisanitsupportgroup.com data-item-price=5.00 data-item-description=Two 2" by 2" This is an IT Support Group stickers. Each Quantity is 2 stickers. data-item-id=it-support-logo-sticker data-item-url=https://shop.thisisanitsupportgroup.com/ data-item-custom1-options=US Shipping|Non-US Shipping[+2.00]
Имя, удостоверение личности и цена являются обязательными полями. Другие просто добавляют немного больше деталей в элемент, например, описание и картинку для тележки.
Вот подробности от Snipcart’s Документы :
Добавить кнопку «Добавить к выводу»
Добавить кнопки Элемент на странице Carrd и откройте механизм настроек. Назовите свою кнопку Добавить в корзину Или все, что вы хотите.
Нажмите на значок передачи и под занятиями и вставками: snipcart-add-item
Прохладный. Это работает хорошо, но если пользователи вернутся на страницу элемента, у них не будет возможности проверить, просто добавьте другой элемент.
Добавить кнопку выбора
Добавьте еще один элемент кнопки в Carrd, названный Оформление , Моя тележка или похожие.
На этот раз установите Классы раздел к snipcart-checkout Анкет Никаких атрибутов!
Тестирование нашего магазина
Пришло время проверить наш поток проверки! Убедитесь, что вы находитесь в тестовом режиме с переключением на панели панели Snipcart.
Перейдите на целевую страницу, добавьте предмет в корзину. Вы можете заказать с помощью тестовой карты № 4242 4242 4242 4242 CVC 123 и дата в будущем.
Если все пойдет хорошо, вы увидите поддельную транзакцию на панели панели.
Добавить платежный шлюз
Вам придется добавить платежный шлюз для фактического получения платежей. Я использую полосу. Установите учетную запись с помощью полосы и подключите ее к Snipcart на панели панели.
Живи!
Код Snipcart, который мы добавили ранее для наших клавиш API, должен быть заменен нашими живыми клавишами API. Получите их из панели панели Snipcart, замените код, включите переключатель в Snipcart, чтобы сделать магазин в прямом эфире!
Мой магазин, магазин IT -поддержки Group Shop, Live здесь
Добро пожаловать в будущее. 😎
Бонус/Добавление кода
Я не думал, что будет какой -нибудь код, что это. – снова ты
Нам действительно не нужен код, но код может быть веселым.
Snipcart поддерживает Webhooks для любого события или транзакции. Когда продажа будет сделана, Snipcart отправит данные события в ваш настроенный веб -крючок.
Мне очень нравится использовать Slack для уведомлений в реальном времени. Давайте установим предупреждение о слабым, когда мы совершаем продажу.
Давайте раскрутим конечную точку с Чаша Анкет
Чаша – это вилка AWS из рамки Python, колба.
Колба отлично подходит для написания простых API или обслуживания веб -сайтов.
Chalice серьезно прохладная, мы можем раскрутить конечную точку API за считанные минуты для общего пользования благодаря использованию услуги Lambda и API -шлюза.
Вам понадобится учетная запись AWS для этой части, но она будет совершенно бесплатно.
Я предполагаю, что у вас есть аккаунт AWS. Если нет, они свободны и имеют щедрый бесплатный уровень.
Мы не будем тратить здесь никаких денег. Я дешев.
Во -первых, настройте Slack Webhook
Сделайте новый VirtualEnv, чтобы сдержать наши пакеты, активировать их, установить чашу.
$ pip install virtualenv $ virtualenv ~/.virtualenvs/chalice-demo $ source ~/.virtualenvs/chalice-demo/bin/activate
Добавьте свой AWS Access Keys Анкет
$ mkdir ~/.aws $ cat >> ~/.aws/config [default] aws_access_key_id=YOUR_ACCESS_KEY_HERE aws_secret_access_key=YOUR_SECRET_ACCESS_KEY region=YOUR_REGION (such as us-west-2, us-west-1, etc)
Сделать новый проект чаши
$ chalice new-project snipcart_webhook $ cd snipcart_webhook
Создайте файл с именем Требования.txt и добавить Запросы к этому. Мы будем использовать Запросы Библиотека, чтобы позвонить в Slack и опубликовать данные нашего сообщения.
Затем откройте свой app.py и вставьте следующее в:
from chalice import Chalice
import requests
app = Chalice(app_name='helloworld')
# paste your own SlackWebhook here 👇
slackWebhook = ("https://hooks.slack.com/services/x/x")
def slackAlert(payload, channel="#snipcart"):
slack_data = {"text": payload, "username": "Snipcart", "channel": channel}
response = requests.post(
slackWebhook,
json=slack_data,
headers={"Content-type": "application/json"},
timeout=5,
)
if response.status_code != 200:
raise ValueError(
"Request to slack returned an error %s, the response is:\n%s"
% (response.status_code, response.text)
)
@app.route('/snipcart', methods=['POST'])
def snipcart():
request = app.current_request
data = request.json_body
fullName = data['content']['shippingAddress']['fullName']
city = data['content']['shippingAddress']['city']
message = 'New sticker order for {} in {}'.format(fullName, city)
if data['eventName'] == 'order.completed':
slackAlert(message)
return('Thanks, Snipcart!'), 200
@app.route('/hello', methods=['GET'])
def hello():
return('Hello! 👋')
В приведенном выше коде мы настроим наш Slack Webhook, создаем функцию ( Slakalerert ) для отправки сообщений Slack, а затем создаем «маршрут» в /маршрут Это получает наш крюк с Snipcart, анализирует детали и передает его обратно в Slackalert функция
Мы также добавим простой маршрут для тестирования в /привет
Наконец, подтолкните свой код в AWS с
$chalice deploy ... Initiating first time deployment... https://qxea58oupc.execute-api.us-west-2.amazonaws.com/api/
Чаша вернет URL -адрес конечной точки API. Проверьте конечную точку тестирования, которую мы сделали, и проверьте ответ:
curl https://mbazi1dxs8.execute-api.us-east-2.amazonaws.com/api/hello Hello! 👋%
Если в вашем магазине включен режим тестирования, вы можете сделать еще одну тестовую транзакцию, чтобы увидеть наши результаты.
Бум 💥
Сделка была осуществлена, была вызвана конечная точка, в Slack был вызван еще один веб -крюк. Webhooks в Webhooks. Webhookception.
Уроки выучены
Я надеюсь, что это было полезное введение в Каррд. CO и Snipcart. Инструменты без кодов в последнее время набирают много тяги, и я думаю, что это здорово.
Чем больше людей имеют возможность получить доступ к технологиям и предпринимательству, тем лучше общество.
Это группа ИТ -поддержки является растущим сообществом для ИТ -специалистов, чтобы собрать и обсудить свою карьеру, технические вопросы и публикацию мемов. Это очень весело.
Магазин группы ИТ -поддержки, в прямом эфире здесь
Комментарии, вопросы? Я на stetson@heliositservices.com
Оригинал: “https://dev.to/stets/building-a-serverless-ecommerce-store-48hf”