Heroku прорывается с помощью облачной интеграции Facebook
Февраль 25, 2019
Вслед за недавним объявлением о том, что он добавит поддержку Java к поддержке, уже предоставленной приложениям, написанным на Ruby, Node.js и Clojure, поставщик платформ как услуга Heroku этим утром объявил о прорывном партнерстве с Facebook это позволяет любому пользователю, имеющему учетную запись Heroku, стать опытным облачным разработчиком приложений для Facebook.
Чтобы дать читателям SitePoint преимущество, мы получили разрешение опубликовать следующий учебник, используя функциональность Facebook, доступную только с сегодняшнего дня.
Это руководство предназначено для разработчиков Facebook, которые создают приложения на Heroku с помощью интеграции с облачными сервисами Facebook. Это не предполагает никаких предварительных знаний о Heroku. Heroku — это платформа облачных приложений, а не старомодный веб-хостинг, поэтому некоторые вещи могут быть вам незнакомы.
В этой статье будут рассмотрены все этапы процесса: создание приложения и учетной записи Heroku, настройка локальных инструментов разработки и развертывание изменений в приложении Facebook.
Создать приложение
(Если вы уже создали приложение Heroku через Facebook, вы можете перейти к следующему разделу.)
Начните с того, что зайдите в Facebook Developers и нажмите Create New App в верхнем правом углу:
Введите все, что вы хотите в качестве имени приложения, установите флажок с условиями и нажмите « Продолжить» :
Заполните капчу в следующем диалоговом окне и нажмите « Отправить» . После небольшой задержки вы попадете на свою (в настоящее время пустую) страницу настроек приложения Facebook. На этой странице в разделе « Облачные службы» нажмите « Начать» :
Начни »/>
Heroku — единственная опция в этом диалоговом окне, поэтому нажмите Next :
Если у вас уже есть учетная запись Heroku под выбранным адресом электронной почты, новое приложение будет связано с вашей существующей учетной записью.
Выберите ваш любимый язык программирования из выпадающего списка (доступны PHP, Ruby и Python). Введите адрес электронной почты, который вы хотите использовать для своей учетной записи Heroku, затем нажмите « Создать» :
Вы попадете в диалоговое окно, в котором показан новый URL-адрес вашего приложения Facebook, работающего на Heroku:
Шаблонное приложение, написанное на выбранном вами языке, было скопировано и развернуто только для вас! Нажмите на ссылку или перейдите на страницу, чтобы посетить новое приложение.
Другие пользователи, посещающие ваше приложение, должны будут предоставить разрешение через аналогичный диалог. Пользователи должны делать это только при первом посещении приложения.
Поскольку вы посещаете свое приложение как пользователь, вам необходимо предоставить ему разрешение на доступ к вашему профилю Facebook, нажав кнопку Разрешить :
По умолчанию ваше новое приложение настроено как веб-сайт, который интегрируется с Facebook. Это означает, что он будет отображаться как отдельная страница. Если вы хотите, чтобы ваше приложение работало как страница холста в Chrome Facebook, следуйте этому руководству
Поздравляем! Теперь у вас есть собственное приложение на Facebook, работающее на Heroku:
Приложение показывает примеры доступа к API Facebook, чтобы перечислять друзей, фотографии, интересы и многое другое. Как только вы начнете редактировать код, вы сможете использовать эти возможности, чтобы приложение делало более интересные вещи.
Итак, теперь мы хотим настроить вас на редактирование приложения. Мы вернемся к этому в ближайшее время, но сначала кратко.
Что такое Героку?
(Если вы уже знакомы с Heroku, можете пропустить.)
Ваше приложение Facebook должно где-то работать. Это может быть традиционный хостинг, такой как ваше собственное оборудование или VPS; однако эти варианты требуют много времени и средств для настройки. Приложения на Heroku могут быть созданы мгновенно, и они ничего не стоят вам, если приложение не вырастет до большого количества трафика или пользователей.
Любое веб-приложение может быть развернуто в Heroku, и вы можете прочитать все о возможностях платформы в Heroku Dev Center . В оставшейся части этого руководства мы сосредоточимся на редактировании приложения Facebook, которое вы уже создали в предыдущем разделе.
Настройка учетной записи и инструментов Heroku
(Если у вас уже есть учетная запись Heroku и настроены локальные инструменты разработки, вы можете перейти к следующему разделу .)
Хотя учетная запись уже создана для вас, а приложение уже развернуто, вам все равно нужно создать пароль и настроить локальные инструменты, чтобы начать его редактирование.
1) Выберите пароль
Учетная запись пользователя Heroku была создана для вас при создании приложения через Facebook. Проверьте свою электронную почту под адресом электронной почты, который вы использовали для приветственного сообщения от Heroku:
Перейдите по первой ссылке в этом письме на страницу, где вы можете выбрать пароль для своей учетной записи Heroku:
Когда закончите, закройте окно браузера и перейдите к следующему шагу.
2) Установите инструментальный ремень Heroku
Для управления и редактирования вашего приложения вам понадобится инструмент командной строки Heroku и система контроля версий Git, которые будут установлены с помощью инструментальной ленты Heroku. Загрузите и установите набор инструментов для вашей ОС из списка ниже:
После установки у вас будет доступ к команде heroku из вашего терминала. Войдите, используя адрес электронной почты и пароль для своей учетной записи Heroku:
:::term $ heroku login Enter your Heroku credentials.Email: adam@example.com Password:Couldnot find an existing public key.Would you like to generate one?[Yn]GeneratingnewSSHpublic key.Uploading ssh public key /Users/adam/.ssh/id_rsa.pub
Нажмите enter при появлении запроса, чтобы загрузить существующий ключ ssh или создать новый, который будет использоваться для последующего ввода кода.
Редактирование вашего приложения
После настройки учетной записи Heroku и локальных инструментов вы можете начать вносить изменения в приложение Facebook.
1) Получить исходный код вашего приложения
Мы начнем с получения копии исходного кода вашего приложения с помощью Git. Для этого вам нужно знать имя вашего приложения: Heroku дала ему случайное имя хайку, чтобы начать с него, поэтому посмотрите в URL, чтобы найти имя вашего приложения. Например, если ваш URL-адрес http://furious-robot-218.herokuapp.com , то ваше приложение называется furious-robot-218 . Вставьте это в команду git clone следующим образом:
Вывод каталога, показанный выше, взят из примера приложения PHP. Другие языки будут иметь разные файлы.
2) внести изменения
Давайте настроим что-то маленькое в приложении и вернем его обратно в Heroku, иллюстрируя процесс развертывания. Например, найдите строку HTML, которая показывает приветственный баннер (в приложении PHP это находится в строке index.php 157), которая должна выглядеть следующим образом:
<p>Welcome to your Facebook app, running on <span>heroku</span>!</p>
Используйте ваш любимый текстовый редактор, чтобы изменить эту строку на:
<p>This is my app,I can edit it all I want.</p>
Сохраните файл, затем используйте свой терминал, чтобы зафиксировать изменения в Git:
Теперь самое интересное: перенести наше модифицированное приложение в Heroku, чтобы каждый, кто посещает приложение в Facebook, увидел новую версию. Нажмите на Heroku с помощью Git:
:::term $ git push heroku Counting objects:5, done.Delta compression using up to 4 threads.Compressing objects:100%(3/3), done.Writing objects:100%(3/3),347 bytes, done.Total3(delta 1), reused 0(delta 0)----->Heroku receiving push ----->PHP app detected ----->BundlingApache... done, v2.2.19----->BundlingPHP... done, v5.3.6----->Discovering process types Procfile declares types ->(none)Default types forPHP-> web ----->Compiled slug size is 20.9MB ----->Launching... done, v2 http://furious-robot-218.herokuapp.com deployed to HerokuTo git@heroku.com:furious-robot-218.git 396ec84..994290d master -> master
Теперь просмотрите приложение в вашем браузере. Вы должны увидеть измененный приветственный баннер:
Поздравляем, теперь вы разработчик приложений для Facebook!
Работая локально
В предыдущем разделе мы перенесли изменения в приложение в живую производственную среду, не тестируя его в локальной среде. Лучший рабочий процесс для работы с вашим приложением — запускать его локально, тестировать там и вносить изменения по мере внесения улучшений, которые вы тестировали как работающие. Когда вы будете готовы к развертыванию, используйте git push heroku для внесения изменений в живое производственное приложение.
Способы запуска приложения на локальном компьютере зависят от языка программирования и вашего выбора в локальной среде разработки. Например, разработчики PHP для Mac OS X могут использовать версии Apache и PHP, которые поставляются с операционной системой, поместив код приложения в подкаталог Sites в их домашней папке и сконфигурировав VirtualHost в /etc/apache2/users/USERNAME.conf . Разработчики Ruby, с другой стороны, вероятно, запустят свое приложение с Foreman и посетят его по адресу http://localhost:5000/ .
Независимо от того, как вы запускаете приложение локально, вам нужно знать о двух методах, которые характерны для запуска локальной версии приложения Facebook.
1) Создание приложения Facebook для разработчиков
Приложение Facebook, которое вы ранее создали, указывает на URL вашего приложения Heroku (которое будет выглядеть как https://furious-robot-218.herokuapp.com ). Это производственное приложение.
Для разработки вам нужно зарегистрировать другое приложение на Facebook. В отличие от первого приложения, оно не будет работать на Heroku, а вместо этого будет работать на вашей локальной рабочей станции и иметь URL-адрес, например http://localhost:5000/ (или любой другой URL-адрес, настроенный для вашего локального компьютера).
Перейдите в Facebook Developers и снова нажмите « Создать новое приложение» . Выберите имя, чтобы указать, что это версия для разработки вашего существующего приложения. Например, если ваше другое приложение называется «My Cool App», вы можете назвать его «My Cool App — Dev».
После создания установите флажок Веб-сайт и введите свой локальный URL:
Нажмите Сохранить изменения .
2) Настройка приложения Env Vars для Facebook
На той же странице настроек вашего приложения, которая использовалась для установки URL-адреса веб-сайта, вы также найдете App ID и App Secret:
Они были автоматически добавлены в ваше приложение Heroku в качестве конфигурационных переменных , но в вашей локальной среде вам нужно будет установить их как переменные среды. То, как вы установите env vars, зависит от вашей ОС и способа запуска вашего приложения. Вот два примера:
Форман .env
Если вы запустите приложение с помощью Foreman, оно автоматически .env файл с именем .env в корень проверки кода вашего приложения. Вырежьте и вставьте свой идентификатор приложения и секрет приложения в .env :
С этими двумя изменениями вы сможете посетить свое приложение локально и получить доступ ко всем функциям Facebook. Когда вы будете готовы поделиться своими изменениями в мире, git commit а затем git push heroku , а затем зайдите в свое производственное приложение, чтобы убедиться, что ваши изменения корректно работают в живом приложении.