История о том, как и почему я создал Facebook Writing Prompts Group для поддержки StoryOrigin Chrome Extension.

Когда Facebook объявил о закрытии Parse, это был гвоздь в гробу для одного из моих побочных проектов (ладно, честно говоря, было много гвоздей). Тем не менее, Parse живет… по крайней мере, в виде групп Facebook. Если вы не знакомы с ними, группы Facebook позволяют вам создать сообщество вокруг определенных интересов, как это делают форумы старой школы. С помощью группы Facebook вы можете аутентифицировать пользователей, модерировать сообщения и вести базу данных пользователей.

Почему вы должны использовать группу Facebook в качестве бэкэнда?

TL; DR: привлечение пользователей и простота развертывания, если вы только учитесь программировать.

В долгосрочной перспективе это не идеальная ситуация, но, в отличие от форумов старой школы, Facebook обеспечивает легкий путь к привлечению пользователей. Facebook рекомендует людям группы по интересам, и все, что им нужно сделать, это нажать кнопку «присоединиться». Примечание: для того, чтобы ваша группа была «рекомендована Facebook», ваша группа обычно должна иметь значительный размер (600+ человек) и быть относительно активной.

Другое преимущество для кого-то вроде меня (то есть для кого-то, кто только что уволился с работы 2 месяца назад, чтобы изучить программирование) заключается в том, что с API групп Facebook легко работать, и вы можете начать изучать некоторые навыки, необходимые для создания приложений на основе базы данных. без головной боли выяснения, как развернуть бэкэнд, аутентифицировать пользователей, выбрать облачного провайдера и т. д.

Сделайте «бессерверное» приложение с помощью расширения для браузера

После того, как вы создали свою группу Facebook, теперь вам нужен контекст приложения для ее предоставления. Здесь и появляются расширения браузера. Если вы не знакомы, расширения браузера - это, по сути, веб-страницы, которые вы можете установить в своем браузере, поэтому они обслуживаются локально, а не через Интернет. Вместо того, чтобы платить хостинг-провайдеру за обслуживание ваших файлов, вы просто загружаете их в магазин приложений (например, Интернет-магазин Chrome или Надстройки для Firefox). , и пользователи могут скачать ваше расширение. Чтобы развернуть новую версию для своих пользователей, просто загрузите новый набор файлов в магазин приложений, и они автоматически обновятся на стороне клиента.

Исходя из своего опыта, я считаю, что сочетание API групп Facebook и расширения Chrome - это самый простой и быстрый способ запустить свой MVP. Надеюсь, вы думаете о следующем.

Ладно ладно. Давайте перейдем к хорошему ... коду!

Я предполагаю, что вы уже знакомы с тем, как создавать расширения для Chrome в целом, поэтому я не буду здесь останавливаться на этом. Если вы не знакомы, я рекомендую посмотреть эту серию руководств на YouTube. Я также построил свое расширение Chrome с помощью React, что было бы намного сложнее, если бы я не нашел эту запись в блоге Анатолия Ястреба. Он использует Webpack с несколькими точками входа и выхода для создания папки сборки, которую вы можете установить как расширение. Не очень хорошо знакомы с Webpack? Я рекомендую эту серию уроков на YouTube. Хорошо, разобрались с этим, пора приступить к делу!

Шаг 1

Политика безопасности Chrome не разрешает расширениям загружать скрипты от третьих лиц. Итак, чтобы загрузить Facebook SDK и получить доступ к Graph API, нам нужно добавить следующее в наш файл manifest.json.

Шаг 2

Мы загружаем Javascript SDK от Facebook, как показано в документации Facebook, за исключением того, что мы называем https://connect.facebook.net/en_US/sdk.js, а не позволяем ему просто предварительно отложить протокол расширения Chrome, который называется chrome -расширение://". Введите в «‹your-app-id› идентификатор приложения, который вы получите от Facebook при создании нового приложения Facebook. Если вы собираете расширение с помощью React, вы можете добавить приведенный ниже код в свой componentDidMount в файле App.js.

Шаг 3

Теперь нам нужно определить функцию, которая позволяет пользователю «войти в систему через Facebook» (т.е. аутентифицировать наше приложение и предоставить нам токен доступа пользователя). Chrome API предоставляет изящную функцию chrome.identity.launchWebAuthFlow (), которая автоматически запускает всплывающее окно и обрабатывает получение URL-адреса перенаправления от Facebook.

Если вы знакомы с OAuth, то можете подумать: «Как мы получим URL-адрес перенаправления от Facebook, если наше приложение использует протокол расширения Chrome« chrome-extension: // »?» Отличный вопрос! Когда мы предоставляем наш URI внутри AUTH_URL, который отправляется в Facebook, мы используем метод chrome.identity.getRedirectURL (), который создает URL-адрес в виде «https: // ‹chrome-id› .chromiumapp.org / . » Для тех, кто не знаком с OAuth, провайдерам аутентификации, таким как Facebook, нужен URL-адрес, использующий протокол https. (Обратите внимание, что URI, созданный с помощью chrome.identity.getRedirectURL (), также вы будете включать в URL-адреса перенаправления «Войти через Facebook» вашего приложения Facebook в свою учетную запись разработчика.)

Когда мы получаем URL-адрес перенаправления от Facebook, содержащий токен доступа пользователя и секунды до истечения срока действия или ошибки, они поступают в качестве параметров в URL-адрес перенаправления (т. Е. Данные после символа "?", Который вы иногда видите в URL-адресах). Мы получаем токен доступа пользователя и срок действия из параметров URL-адреса и выполняем с ними свое обещание. Если параметры возвращаются с ошибкой, мы отклоняем наше обещание.

Когда вы вызываете функцию AuthenticateWithFacebook, вы можете обработать решение, сохранив токен и время истечения срока действия в Chrome Storage с помощью chrome.storage.sync.set () и получив его позже с помощью chrome.storage.sync.get ().

Шаг 4

И последнее, но не менее важное: нам нужно определить нашу функцию для вызова API групп Facebook с использованием полученного токена доступа. Если вы не знакомы с API Facebook, ознакомьтесь с их обозревателем API графиков.

Шаг 5: похлопайте себя по спине

Бум! Теперь у вас есть приложение, которое можно развернуть без каких-либо настроек и счетов. О, и он интегрирован с машиной для привлечения пользователей! И, эй, для этого не потребовалось даже столько кода!

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

За месяц до того, как я уволился с работы, чтобы научиться программировать, я основал группу в Facebook под названием Группа написания подсказок, где люди могут делиться подсказками и рассказами по этим подсказкам. Написание подсказок - отличный способ получить вдохновение для написания; однако вход в Facebook может отвлекать, и писателям (особенно таким, как я) сложно получить мотивацию, чтобы начать писать. Итак, я создал Расширение StoryOrigin для Chrome, которое помогает вам выработать привычку писать, блокируя отвлекающие веб-сайты, пока вы не достигнете своей дневной цели.

После создания расширения я подключился к API групп Facebook, поэтому, если вы не знаете, о чем писать в течение дня, он может получать подсказки из группы Writing Prompts Group. Мне нравится думать, что это лучший инструмент для выработки привычки к письму: мотивация + вдохновение. Посмотрите демонстрационное видео ниже :)

Вы писатель, который хочет решить некоторые проблемы? Есть дополнительные вопросы? Просто хотите сказать «привет»? Отправьте мне письмо на адрес [email protected].