Как работать с online-IDE CodeHS

Хорошо, когда на компьютере уже установлен Python. А еще здорово когда стоит ваш любимый текстовый редактор или даже IDE, и все настройки привычны, и всё лежит на своих местах. Тогда ничто не будет отвлекать вас от программирования, просто пишите код и получайте удовольствие. Красота!

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

Что у вас получится

Обычно первым шагом в изучении языков программирования и инструментов для них является вывод на экран фразы Hello World. Это дань традиции, и CodeHS решает эту задачу за нас прямо при создании проекта – он выдаёт готовый код для этого. Поэтому для проверки работы сервиса нам останется лишь нажать кнопку Run.

1. Зарегистрируйтесь на сайте CodeHS

CodeHS — это веб-сервис, где можно писать и запускать код прямо в браузере, ничего не устанавливая к себе на компьютер. Сервис умеет работать с Python, JavaScript, HTML, CSS, полный список технологий огромен. На сайте вы найдёте больше 50 вариантов — взгляните сами!

Для этого сначала зарегистрируйтесь в CodeHS. Этот процесс на удивление запутанный, поэтому рассмотрим его подробно.

На главной странице необходимо нажать зеленую кнопу Sign Up For Free (Зарегистрироваться бесплатно)

В открывшемся окне нажимаем еле заметную ссылку At Home Learner (Для домашнего обучения)

Далее выбираем левый пункт меню с подписью FREE $0 (Бесплатно, 0 долларов)

И на той же странице прокрутив экран ниже можно выбрать одно из двух:

Войти через аккаунт Google+ – это самый простой вариант, но требует активной почты в Gmail
Указать Имя, Фамилию, Возраст, E-mail и дважды повторить пароль (от 5 символов)

В случае с Google+, при нажатия кнопки Sign up with Google необходимо выбрать аккаунт из списка или авторизоваться в Google.

После чего нажимаем кнопку Create Account (Создать аккаунт).

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

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

Соответствующее оповещение можно увидеть в списке “Песочниц” (подробнее в Пункте 4):

Чтобы этого избежать, сразу же скорректируем настройки аккаунта, для этого:

Нажмите на меню профиля в правом верхнем углу
Выберите пункт Account Settings (Настройки Аккаунта)

В настройках необходимо изменить значение в поле Username, нажав на кнопку с карандашом. Самое простое – убрать все символы, начиная с “собачки” @. Например, вы указали почту test@test.ru – тогда оставляем test. Однако такой короткий логин сайт тоже не принимает, поэтому придется добить его как минимум до 8 символов (английские буквы или цифры) – например testtest. Безусловно, есть вероятность, что такой простой логин уже занят, тогда измените его любым удобным способом.

Далее переходите в “Песочницу” по соответствующей кнопке в верхнем меню – отсюда будет удобно создавать проекты в дальнейшем.

3. Проверьте, узнал ли вас сайт

Если вы уже регистрировались ранее, то обязательно проверьте, узнал ли вас сайт. Очень часто люди пишут код, а потом теряют его из-за того, что забыли авторизоваться. Заметить это сразу сложно, а на следующий день код просто “исчезает” из личного кабинета. Всегда начинайте работу с вопроса:

А я авторизован?

Вот как узнать, что вы авторизованы – при открытии главной страницы вы попадете на страницу “Sections Enrolled as Student”, а в правом верхнем углу должно быть меню профиля.

Если сайт вас не узнал, необходимо авторизоваться. Для этого нажмите кнопку Log In в верхнем меню и введите контактные данные, выбранные при регистрации (подробнее в Пункте 2 туториала)

4. Создайте песочницу

Каждый проект программисты обычно сохраняют в новую папку, чтобы не запутаться. В CodeHS всё работает так же, только вместо папок там используются "песочницы (или sandbox по-английски).

А теперь создайте свой первый проект, для этого откройте страницу песочниц:

Напишите название
Нажмите кнопку + Create Program

В открывшемся окне выберите Python3 и нажмите кнопку Create Program

Вы сразу попадёте на страницу IDE

Когда проект создаётся авторизованным пользователем, сервис автоматически ограничивает доступ на просмотр кода для посторонних. Чтобы это исправить, необходимо включить эту возможность, для этого необходимо нажать кнопку Share (Поделиться)

После чего во всплывающем меню включить обе указанные галочки. Тут же можно скопировать код для передачи коллегам (в нижнем поле).

6. Разберемся с интерфейсом

Как и любая классическая IDE главное окно содержит 3 основных экрана + 1 важную кнопку:

Панель, где пишем код
Консоль, куда выводим результат
Список файлов проекта
Кнопка запуска кода

После нажатия кнопки Run, придётся подождать несколько секунд, пока код наконец заработает – это особенность работы CodeHS.

7. Как найти на CodeHS ранее написанный код

Если вы авторизованы на сайте, то все созданные ранее проекты хранятся в разделе Песочниц

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

Если страница выглядит совсем не так, как на скриншоте, значит вы не авторизованы – вернитесь к Пункту 2.

8. Если не удалось создать аккаунт

На самом деле CodeHS позволяет “расшаривать” код даже без регистрации, для этого на главной странице необходимо нажать кнопку + New Project

Во всплывающем окне выберите Python 3, после чего вы автоматически попадёте на страницу нового проекта с включенным доступом к коду для всех, у кого есть ссылка (дополнительных настроек в таком случае не требуется).

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

Кроме того, при работе с CodeHS без зарегистрированного аккаунта, кто угодно при наличии этой ссылки сможет исправить код проекта. Поэтому крайне не рекомендуем показывать эту ссылку своим друзьям до тех пор, пока Ментор не примет работу, во избежание разного рода диверсий 😄