Glitch, отличная платформа для разработчиков

Glitch - отличная платформа для изучения кода и экспериментов с ним. Этот пост знакомит вас с Glitch и заставит вас пройти путь от нуля до героя.

Сбойотличная платформа для обучения программированию.

Я использую Glitch во многих своих уроках, я думаю, что этоотличный инструментквитринаконцепции, а такжепозволить людям использовать ваши проектыи строить на них.

Вот пример проекта, который я сделал на Glitch сРеагироватьиReact Router:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2

С Glitch вы можете легко создаватьдемонстрацииипрототипыприложений, написанных на JavaScript, от простых веб-страниц до продвинутых фреймворков, таких как React илиVueи серверные приложения Node.js.

Он построен поверхУзел, и у вас есть возможность установить любойnpmпакет, который вы хотите, запуститеwebpackи многое другое.

Его принесли вам люди, которые сделали несколько чрезвычайно успешных продуктов, в том числе Trello и Stack Overflow, так что у него есть много бонусов за это.

Почему я считаю, что Glitch - это здорово?

Глюк "щелкнул" для меня тем, как он проявляется взабавныйинтерфейс, ноне тупой.

У вас есть доступ кжурналы, токонсольи множество других вещей.

Кроме того, концепция ремикса, столь заметная в интерфейсе, дает мне гораздо больше шансов создать там множество проектов, поскольку мне никогда не приходится начинать с чистого листа.

Вы можете начать погружаться в кодне теряя временинастройка среды, контроль версий и фокус на идее с автоматическимHTTPSURL иCDNдля медиаресурсов.

Кроме того, нет никакой блокировки, это просто Node.js (или, если вы не используете серверный JavaScript, это просто HTML, JS и CSS)

Это бесплатно?

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

Есть разумные ограничения вроде

  • У вас есть 128 МБ пространства, исключая пакеты npm, плюс 512 МБ для медиаресурсов.
  • Вы можете обслуживать до 4000 запросов в час
  • Приложения останавливаются, если к ним не обращаются в течение 5 минут, и они не получают никаких HTTP-запросов, а долго работающие приложения останавливаются через 12 часов. Как только приходит HTTP-запрос, они запускаются снова

Обзор Glitch

Это домашняя страница Glitch, на ней показаны несколько проектов, которые они решили продемонстрировать, потому что они классные, и несколько начальных проектов:

The homepage as guest

Создать учетную запись легко и бесплатно, просто нажмите «Войти» и выберите Facebook или GitHub в качестве «точек входа» (я рекомендую GitHub):

Sign in to Glitch

Вы будете перенаправлены на GitHub для авторизации:

Authorize Glitch on GitHub

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

The home page once logged in

ЩелкнувВаши проектыотправляет вас на страницу вашего профиля, в URL-адресе которой указано ваше имя. Мойhttps://glitch.com/@flaviocopes.

The Glitch profile

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

Концепция ремикса

Когда вы только начинаете, конечно, у вас не будет собственных проектов.

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

Вы можете ремиксировать проект, который вам нравится, может быть, тот, который вы нашли в Твиттере или представили на домашней странице Glitch, или вы можете начать с проекта, который является шаблоном, чтобы что-то начать:

В этих сборниках много других стартовых глюков:

Если вы учитесь программировать прямо сейчас,Научитесь кодировать сборник сбоевэто очень мило.

Я создал несколько начальных приложений, которые постоянно использую для своих демонстраций и тестов, а именно:

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

Ремикс глюк

Если у вас есть глюк, который вы хотите использовать, вы просто нажимаете на него, и появляется окно:

Remix glitch modal

Есть 3 кнопки:

  • Предварительный просмотрглюк - это код, который что-то делает. Это показывает результат сбоя.
  • Редактировать проектпоказывает источник проекта, и вы можете приступить к его редактированию
  • Ремикс этоклонирует глюк на новый

Каждый раз, когда вы делаете ремикс на глюк, создается новый проект со случайным именем.

Вот глюк сразу после его создания путем ремикса другого:

A remixed glitch

Глюк дал ему имяguttural-noodle. Щелкнув по названию, вы можете его изменить:

Rename a glitch

Вы также можете изменить описание.

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

Импорт / экспорт GitHub

Есть простой импорт / экспорт из / в GitHub, что очень удобно:

GitHub Import export

Держите свой проект в секрете

Щелчок по замку делает глюк приватным:

Keep project private

Создать новый проект

При нажатии «Новый проект» отображаются 3 варианта:

  • узел-приложение
  • узел-sqlite
  • страница в Интернете

Create a new project on Glitch

Это ярлык для поиска этих начальных приложений и их ремикса. Под капотами щелчок по одной из этих опций устраняет существующий сбой.

При любом сбое нажатие «Показать» откроет новую вкладку, на которой запущено приложение:

The app running

URL приложения

Обратите внимание на URL-адрес, это:

https://flavio-my-nice-project.glitch.me

Это отражает название приложения.

URL редактирования немного отличается:

https://glitch.com/edit/#!/flavio-my-nice-project

Предварительный просмотр выполняется на субдоменеglitch.me, а редактирование выполняется наglitch.com.

Заметили рыбок справа на странице? Это небольшой код JavaScript, который Glitch рекомендует добавить на страницу, чтобы другие люди могли сделать ремикс проекта или увидеть исходный код:

The fish on preview

Запуск приложения

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

Это настолько удобно, что внесение изменений в реальном времени дает немедленную обратную связь, что очень помогает при разработке.

Секреты

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

Если вы пригласите соавторов, они смогут видеть контент, поскольку они являются частью проекта.

Но любой, кто его ремиксирует, или люди, приглашенные вами для помощи, не увидят содержимое файла.

Управление файлами

Добавить новый файл в проект очень просто.

Вы можетеперетаскивайте файлы и папки с локального компьютера, или щелкните значок «Новый файл»Над списком файлов.

Также интуитивно понятно, как переименовывать, копировать или удалять файлы:

Manage the glitch

Лицензия в один клик и кодекс поведения

Наличие лицензии в коде - это одна из вещей, которую упускают из виду в примерах проектов, но она определяет, что другие могут или не могут делать с вашим проектом. Без лицензии проект не является открытым исходным кодом, и все права защищены, поэтому код не может быть распространен, и другие люди не могут ничего с ним сделать (примечание: это мое понимание и IANAL - я не юрист).

Глюк делает этосупер легкочтобы добавить лицензию, вНовый файлпанель:

Add a license

View the license

Вы также можете легко изменить его:

Change the license

Кодекс поведения - еще одна очень важная часть для любого проекта и сообщества. Это заставляет участников чувствовать себя желанными и защищенными при их участии в сообществе.

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

Добавление пакета npm

Щелкните значокpackage.jsonфайл, и если у вас его еще нет, создайте пустой.

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

Add an npm package

Кроме того, если у вас есть пакет, который необходимо обновить, Glitch покажет количество пакетов, которым требуется обновление, и вы можете обновить их до последней версии простым щелчком:

Update dependencies

Используйте собственную версию Node.js

Вы можете установить версию Node.js налюбой из этихв твоейpackage.json. С помощью.xбудет использовать последний выпуск основной версии, что является наиболее полезным, например:

{
  //...
  "engines": {
    "node": "8.x"
  }
}

Место хранения

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

Это позволяет хранить данные на диске, используя локальные базы данных или файловое хранилище (плоские файлы).

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

Встраивание сбоя на страницу

Ключом к использованию Glitch для создания руководств является возможность встроить код и представление презентации на страницу.

НажмитедоляиВстроить проект, чтобы открыть представление «Встроить проект». Оттуда вы можете выбрать только встроить код, приложение или настроить высоту виджета - и получить его HTML-код для размещения на своем сайте:

Embed glitch

Совместная работа над ошибкой

На панели "Поделиться" значокПригласите соавторов для редактированияссылка позволяет вам пригласить кого угодно редактировать сбой в режиме реального времени вместе с вами.

Вы можете видеть их изменения по мере их внесения. Это круто!

Просить помощи

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

Ask for help on a line

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

Describe your problem

После этого ваш запрос будет показан на главной странице Glitch, и любой сможет его забрать.

Когда человек бросается на помощь, он видит выделенную вами строку, и я обнаружил, что комментарии - это хороший способ общения, как в чате:

Help out someone

Посмотреть журналы

НажмитеЖурналычтобы иметь доступ ко всем журналам приложения:

The project logs

Доступ к консоли

На панели журналов естьКонсолькнопка. Щелкните его, чтобы открыть интерактивную консоль на отдельной вкладке в браузере:

The project console

Отладчик

Щелкнув поОтладчикна панели журналов, экземпляр Chrome DevTools откроется на другой вкладке со ссылкой на URL-адрес отладчика.

The debugger

История изменений

Отличная особенность - возможность проверять все свои изменения в истории проекта.

Это очень похоже на то, как работает Git - на самом деле, Git поддерживает этот действительно простой в использовании интерфейс, который открывается нажатием кнопки ⏪:

The history of changes

Чем Glitch отличается от Codepen или JSFiddle?

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

Codepen и JSFiddle могут запускать только код внешнего интерфейса, в то время как Glitch может даже использоваться в качестве легкого сервера для ваших приложений - с учетом ограничений использования.

Например, я настроил сервер Express.js, который запускается веб-перехватчиком в определенное время в течение дня для выполнения некоторых обязанностей. Мне не нужно беспокоиться о том, что он будет запущен на другом сервере, я просто написал его на Glitch и запустил прямо оттуда.

Вот и все!

Надеюсь, вам понравился мой небольшой учебник по использованию Glitch, и я надеюсь, что я объяснил большинство его потрясающих функций.

Больше вопросов?

Я предлагаю просто попробовать и посмотреть, понравится ли вам тоже.

ВЧасто задаваемые вопросы о сбояхэто отличное место для начала.

Радоваться, веселиться!


Дополнительные руководства по услугам: