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]
Это статья не для начинаюзих, в ней много незнакомых терминов и сленга.
А как переводить комментарии кода на русский