diff --git a/docs/practice-guides/kak-praktikovatsya-v-vypolnenii-sql-zaprosov/kak-praktikovatsya-v-vypolnenii-sql-zaprosov.md b/docs/practice-guides/kak-praktikovatsya-v-vypolnenii-sql-zaprosov/kak-praktikovatsya-v-vypolnenii-sql-zaprosov.md index 12ecf99c..71115819 100644 --- a/docs/practice-guides/kak-praktikovatsya-v-vypolnenii-sql-zaprosov/kak-praktikovatsya-v-vypolnenii-sql-zaprosov.md +++ b/docs/practice-guides/kak-praktikovatsya-v-vypolnenii-sql-zaprosov/kak-praktikovatsya-v-vypolnenii-sql-zaprosov.md @@ -54,3 +54,7 @@ title: "Как практиковаться в выполнении SQL запр Например, если мы выполним запрос выше, то получим такую таблицу: ![](/img/docs/img-130.png) + +:::tip +Кроме DB Fiddle, выполнять SQL-запросы в браузере можно в **OneCompiler** — там сразу доступна готовая база PostgreSQL, а создание таблицы, наполнение данными и запросы пишутся в одном окне. Подробнее: [Онлайн-редактор OneCompiler](/docs/project-work/onlain-redaktor-onecompiler/onlain-redaktor-onecompiler.md). +::: diff --git a/docs/project-work/onlain-redaktor-onecompiler/onlain-redaktor-onecompiler.md b/docs/project-work/onlain-redaktor-onecompiler/onlain-redaktor-onecompiler.md new file mode 100644 index 00000000..46c3035d --- /dev/null +++ b/docs/project-work/onlain-redaktor-onecompiler/onlain-redaktor-onecompiler.md @@ -0,0 +1,136 @@ +--- +title: "Онлайн-редактор OneCompiler" +--- + +[Перейти на сайт](https://ru.hexlet.io) + +# Онлайн-редактор OneCompiler + +Иногда нужно быстро запустить код или проверить запрос, а тратить время на установку среды на компьютер не хочется. В этой статье разберём онлайн-редактор OneCompiler: как запускать в нём код на разных языках и как поделиться кодом ссылкой. + +## Что такое OneCompiler + +[OneCompiler](https://onecompiler.com/) — это бесплатный онлайн-редактор кода. Он запускает код прямо в браузере, ничего не нужно устанавливать на компьютер, регистрация не обязательна. Сервис поддерживает множество языков программирования (Python, JavaScript, PHP, Go, Java, C, C++ и другие) и базы данных, например PostgreSQL. + +Где это пригодится: + +- **Как альтернатива GitHub Codespaces при работе над проектом.** Если по каким-то причинам не получается работать в Codespaces, код можно писать и запускать в OneCompiler, а готовый файл — загрузить в репозиторий. +- **Для любых экспериментов с кодом.** Захотелось проверить идею, разобрать пример из урока или быстро прогнать небольшой скрипт — открыли редактор и сразу запустили, без настройки окружения. + +:::caution +OneCompiler — это «черновик» для запуска кода. Это не замена полноценной среды разработки: сложные проекты с зависимостями и тестами здесь не поднять. Для проекта основная среда — GitHub Codespaces (см. [Как работать в GitHub Codespaces](/docs/project-work/kak-rabotat-v-github-codespaces/kak-rabotat-v-github-codespaces.md)). +::: + +## Выбираем язык + +У каждого языка свой адрес. Откройте нужную страницу напрямую: + +- Python — [onecompiler.com/python](https://onecompiler.com/python) +- JavaScript — [onecompiler.com/javascript](https://onecompiler.com/javascript) +- PHP — [onecompiler.com/php](https://onecompiler.com/php) +- Go — [onecompiler.com/go](https://onecompiler.com/go) +- Java — [onecompiler.com/java](https://onecompiler.com/java) +- PostgreSQL — [onecompiler.com/postgresql](https://onecompiler.com/postgresql) + +Список всех языков и баз данных есть на [главной странице](https://onecompiler.com/) — выберите нужный из списка. А прямо в редакторе язык можно сменить кнопкой-переключателем вверху. + +![Выбор языка на главной странице OneCompiler](/img/docs/img-195--onecompiler-languages.png) + +## Запускаем код + +Интерфейс редактора устроен одинаково для всех языков: + +- **Слева — редактор кода.** Здесь уже открыт файл с небольшим примером (например, `main.py` для Python). Замените его содержимое своим кодом. +- **Сверху — кнопка `Run`.** Она запускает код. +- **Справа — результат.** Для языков программирования это вкладка `Console`, для баз данных — панель `Output`. + +Напишите код и нажмите **Run** — результат появится справа. Например, простой код на Python: + +```python +name = "Hexlet" +for i in range(1, 4): + print(f"{i}: привет, {name}!") +``` + +![Запуск кода на Python в OneCompiler](/img/docs/img-196--onecompiler-python-run.png) + +Тот же пример на других языках выглядит так. + +**JavaScript:** + +```javascript +const name = "Hexlet"; +for (let i = 1; i <= 3; i += 1) { + console.log(`${i}: привет, ${name}!`); +} +``` + +**PHP:** + +```php + Во многих проектах решение нужно сдавать через GitHub: загрузить туда файлы, создать или поправить их. В этой статье разберём, как делать это прямо в браузере — без Git и командной строки. Статья пригодится в проектах по аналитике данных, тестированию и на первых программистских проектах. + +## Коротко о GitHub + +GitHub — это хранилище файлов вашего проекта. Каждый проект хранится в отдельном **репозитории** — это как папка с файлами и историей их изменений. + +Для учебных проектов репозиторий уже создан за вас на шаге «Подготовка», и он привязан к вашему профилю на GitHub. Туда вы и будете складывать результаты работы: готовые файлы (например, CSV-таблицу, PDF-презентацию, SQL-запросы, код) — их проверит автоматическая система. + +Чтобы работать с репозиторием, не нужно устанавливать Git и разбираться с командной строкой — всё можно сделать через веб-интерфейс GitHub. Разберём три действия: **загрузить файлы**, **создать файл** и **отредактировать файл**. + +## Открываем репозиторий + +Откройте страницу своего репозитория на GitHub. Вы увидите список файлов, а справа сверху — кнопки **Add file** («добавить файл») и **Code**. + +![Страница репозитория на GitHub](/img/docs/img-198--github-repo.png) + +## Загружаем готовые файлы + +Этот способ подходит, когда файл у вас уже готов на компьютере: таблица, презентация, скриншот, файл с кодом или запросами. + +Нажмите **Add file** и выберите **Upload files**: + +![Меню «Add file»: Create new file и Upload files](/img/docs/img-199--github-addfile-menu.png) + +Перетащите файлы в открывшееся поле или нажмите **choose your files** и выберите их вручную. Можно загрузить сразу несколько файлов. + +![Страница загрузки файлов в репозиторий](/img/docs/img-200--github-upload.png) + +Ниже, в блоке **Commit changes**, можно написать короткое описание изменений (необязательно) и нажать зелёную кнопку **Commit changes** — файлы сохранятся в репозитории. + +:::tip +Чтобы загрузить файл в подпапку, перетащите папку, в которой он лежит, — файл автоматически окажется в этой подпапке. А когда создаёте файл вручную (см. ниже), можно вписать путь со слешем: например, имя `reports/sales.csv` создаст файл `sales.csv` в папке `reports`. +::: + +## Создаём файл прямо на GitHub + +Если файла ещё нет и его содержимое небольшое (например, текстовая заметка или короткий код), файл удобно создать прямо в браузере. + +Нажмите **Add file** → **Create new file**. Впишите имя файла вверху, а его содержимое — в большое поле редактора: + +![Создание нового файла на GitHub](/img/docs/img-201--github-create-file.png) + +Когда закончите, нажмите **Commit changes…** справа сверху, при необходимости поправьте описание и подтвердите кнопкой **Commit changes**. + +## Редактируем файл + +Чтобы изменить уже существующий файл, откройте его в репозитории и нажмите значок карандаша ✏️ (**Edit this file**) над содержимым файла: + +![Просмотр файла с кнопкой редактирования](/img/docs/img-202--github-edit-file.png) + +Откроется редактор — внесите правки и сохраните их так же, через **Commit changes**. + +## Что такое «коммит» + +При любом изменении (загрузка, создание, редактирование) GitHub просит **подтвердить изменения** — это называется *коммит* (commit). В окне можно оставить описание по умолчанию, а вариант выбрать **Commit directly to the `main` branch** (сохранить сразу в основную ветку) и нажать зелёную кнопку **Commit changes**. + +![Окно подтверждения изменений (commit)](/img/docs/img-203--github-commit.png) + +После этого файлы появятся в репозитории. Если в проекте есть автоматическая проверка, она возьмёт файлы из репозитория и проверит их. + +:::note +Если для проекта нужно писать и запускать код, а не только загружать готовые файлы, посмотрите статьи [Как работать в GitHub Codespaces](/docs/project-work/kak-rabotat-v-github-codespaces/kak-rabotat-v-github-codespaces.md) и [Онлайн-редактор OneCompiler](/docs/project-work/onlain-redaktor-onecompiler/onlain-redaktor-onecompiler.md). +::: diff --git a/static/img/docs/img-192--onecompiler-start.png b/static/img/docs/img-192--onecompiler-start.png new file mode 100644 index 00000000..0fdbade0 Binary files /dev/null and b/static/img/docs/img-192--onecompiler-start.png differ diff --git a/static/img/docs/img-193--onecompiler-result.png b/static/img/docs/img-193--onecompiler-result.png new file mode 100644 index 00000000..d2baef98 Binary files /dev/null and b/static/img/docs/img-193--onecompiler-result.png differ diff --git a/static/img/docs/img-195--onecompiler-languages.png b/static/img/docs/img-195--onecompiler-languages.png new file mode 100644 index 00000000..bc3b9c7f Binary files /dev/null and b/static/img/docs/img-195--onecompiler-languages.png differ diff --git a/static/img/docs/img-196--onecompiler-python-run.png b/static/img/docs/img-196--onecompiler-python-run.png new file mode 100644 index 00000000..e6706ba2 Binary files /dev/null and b/static/img/docs/img-196--onecompiler-python-run.png differ diff --git a/static/img/docs/img-197--onecompiler-share.png b/static/img/docs/img-197--onecompiler-share.png new file mode 100644 index 00000000..488d37e9 Binary files /dev/null and b/static/img/docs/img-197--onecompiler-share.png differ diff --git a/static/img/docs/img-198--github-repo.png b/static/img/docs/img-198--github-repo.png new file mode 100644 index 00000000..4a0380a8 Binary files /dev/null and b/static/img/docs/img-198--github-repo.png differ diff --git a/static/img/docs/img-199--github-addfile-menu.png b/static/img/docs/img-199--github-addfile-menu.png new file mode 100644 index 00000000..8b9fd451 Binary files /dev/null and b/static/img/docs/img-199--github-addfile-menu.png differ diff --git a/static/img/docs/img-200--github-upload.png b/static/img/docs/img-200--github-upload.png new file mode 100644 index 00000000..9f91ea3b Binary files /dev/null and b/static/img/docs/img-200--github-upload.png differ diff --git a/static/img/docs/img-201--github-create-file.png b/static/img/docs/img-201--github-create-file.png new file mode 100644 index 00000000..3a4bb1ed Binary files /dev/null and b/static/img/docs/img-201--github-create-file.png differ diff --git a/static/img/docs/img-202--github-edit-file.png b/static/img/docs/img-202--github-edit-file.png new file mode 100644 index 00000000..e67523c8 Binary files /dev/null and b/static/img/docs/img-202--github-edit-file.png differ diff --git a/static/img/docs/img-203--github-commit.png b/static/img/docs/img-203--github-commit.png new file mode 100644 index 00000000..36fadd9c Binary files /dev/null and b/static/img/docs/img-203--github-commit.png differ