Replit: руководство для начинающих

Replit — популярная бесплатная онлайн-IDE, требующая совсем небольшой настройки перед созданием проектов. Этот редактор поддерживает больше 50 языков и используется на многих курсах по программированию.

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

Как создать аккаунт в Replit

Для начала заходим на домашнюю страницу Replit. В правом верхнем углу кликните Sign Up. Для регистрации на сайте можно ввести username, email и пароль, а можно воспользоваться аккаунтом в Google, Facebook или GitHub.

Войдя, вы попадете на домашнюю страницу своего аккаунта.

Что такое Repl и как его создать?

Repl расшифровывается как «read-eval-print loop». Это интерактивная среда программирования, в которой создавать маленькие проекты.

В Replit есть три способа создания нового repl.

Первый — кликнуть кнопку Create Repl в верхнем левом углу домашней страницы.

Также можно кликнуть значок «+» под разделом Create.

Третий вариант — кликнуть «+» в верхнем правом углу.

После этого вы сможете выбрать один из множества шаблонов Replit, включая Python, Node, Java, HTML & CSS, Ruby и многие другие.

Выбрав язык, выберите имя для своего проекта.

В бесплатной версии Replit нельзя создавать приватные проекты. Если вам нужен приватный repl, придется заплатить за Pro-версию.

Выбрав имя, нажмите голубую кнопку Create Repl.

После этого вы должны переместиться в редактор.

Базовые функции редактора Replit

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

Файлы и папки

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

Для добавления файла кликните иконку Add file. Рядом с ней есть иконка Add folder — для создания папок.

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

Для удаления файлов или папок нажмите иконку с тремя точками, расположенную рядом с файлом, который хотите удалить. Откроется список опций.

Контроль версий в Replit

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

Сначала нажмите на значок контроля версий с левой стороны страницы редактора. Вы увидите возможность для подключения к GitHub-аккаунту.

Вам будет предложено разрешить Replit создавать новые репозитории на GitHub.

Введите ваши данные для входа на GitHub.

Если вы подключили несколько GitHub-аккаунтов, выберите тот, куда хотите установить Replit.

Затем нужно будет авторизоваться в Replit для установки.

После установки и авторизации вы будете перенаправлены обратно в редактор Replit.

Теперь все изменения будут отслеживаться и вы сможете пушить их на GitHub. Напишите короткое сообщение коммита и кликните кнопку Commit & push.

Все свои сообщения коммитов вы сможете видеть в панели контроля версий.

Нажмите кнопку Connect to GitHub, чтобы создать новый репозиторий.

Вы можете добавить описание репозитория, а затем нажать кнопку Create GitHub repository.

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

Он также будет виден на GitHub.

Отладчик

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

Эта функция тоже пока в бете. Найти ее можно с левой стороны страницы редактора.

Установка пакетов в Replit

Вы можете устанавливать различные пакеты в свои проекты, например, morgan, express или cors. Для этого воспользуйтесь панелью Packages в левой части страницы редактора.

Найдите пакет, который хотите установить, и нажмите значок «+».

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

Secrets (переменные окружения)

Replit больше не поддерживает создание .env-файлов.

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

В поле ввода Key нужно вписать имя своего ключа, а в поле value — его значение. Затем нажмите Add new secret.

После этого вы увидите новосозданную переменную окружения во вкладке Secrets.

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

Теперь вы можете использовать эту переменную окружения в своем коде.

Кастомизация Replit

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

База данных Replit

Если хотите использовать хранилище Replit для ключей и значений, нажмите значок Database в левой части страницы редактора.

Узнать больше об использовании Replit Database можно в документации.

Как добавить в Replit юнит-тесты

Если вы хотите добавить в свой проект юнит-тесты, кликните соответствующий значок («галочку») в левой части страницы редактора.

Затем нажмите кнопку Add test.

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

Скриншот, показывающий юнит-тест для сложения двух чисел:

После этого нажмите кнопку Run tests.

Запущенные тесты и результат вы увидите в консоли.

Как использовать кнопку Run в Replit

Если вы хотите запустить сервер для своего проекта, кликните на зеленую кнопку Run вверху страницы редактора.

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

Как очистить консоль в Replit

Чтобы очистить консоль, нажмите крестик в углу окна консоли.

Что собой представляет консоль Shell?

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

Как добавить в Replit кастомный домен?

В превью можно добавить кастомный домен для своего проекта. Для этого нажмите на иконку карандаша рядом с URL превью.

После этого можно будет добавить ваш домен и информацию CNAME:

Как опубликовать проект в Replit?

Завершив работу над проектом, вы сможете его опубликовать и поместить в коллекцию Replit Apps.

Для начала кликните на имя проекта в верхнем левом углу.

Вы сможете добавить короткое описание проекта и нажать кнопку Publish.

После этого можно будет вставить описание, добавить обложку и теги. Когда закончите, нажмите кнопку публикации.

Если захотите опубликовать обновление, опять же кликните на своем проекте, а затем — Publish update.

Допустим, вы хотите изменить статус проекта и убрать его из опубликованных. Нажмите иконку с тремя точками в правом углу страницы публикации и выберите опцию Unpublish.

Как поделиться ссылкой на проект на Replit

Если вы хотите расшарить URL проекта, сперва нужно кликнуть зеленую кнопку Run, а затем — иконку Open in new tab.

Ваша страница откроется в новой вкладке.

Если хотите поделиться URL, ведущий на редактор и окно предпросмотра, просто используйте ссылку в адресной строке браузера.

Перейдя по ссылке, вы увидите это:

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

Как пригласить других людей редактировать ваши repl

В Replit есть специальная функция, позволяющая пригласить в проект других разработчиков.

Нажмите кнопку Invite в правом верхнем углу страницы редактора.

В поле поиска можно добавить пользователей Replit или email-адреса людей, которых вы хотите пригласить.

Затем нажмите синюю кнопку Invite.

Вы увидите приглашение в ожидающих подтверждения.

Также можно послать специальную ссылку пользователю, которого хотите пригласить в проект. Кликните кнопку Generate a join link.

Если захотите удалить кого-то из приглашенных, нажмите крестик рядом с его именем.

Что дает платная подписка на Replit?

Тарифный план Hacker предполагает больше памяти и места, более высокую скорость и приватные repl.

План Teams предназначен для студентов и учителей, совместно работающих над учебными проектами.

Я надеюсь, это руководство по Replit для начинающих вам пригодится.

Перевод статьи «How to Use Replit – A Beginner’s Guide».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]