docs: онлайн-инструменты для студентов — OneCompiler и работа с GitHub

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).
+:::

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
+<?php
+$name = "Hexlet";
+for ($i = 1; $i <= 3; $i++) {
+  echo "$i: привет, $name!\n";
+}
+```
+
+**Go:**
+
+```go
+package main
+
+import "fmt"
+
+func main() {
+	name := "Hexlet"
+	for i := 1; i <= 3; i++ {
+		fmt.Printf("%d: привет, %s!\n", i, name)
+	}
+}
+```
+
+**Java:**
+
+```java
+public class Main {
+    public static void main(String[] args) {
+        String name = "Hexlet";
+        for (int i = 1; i <= 3; i++) {
+            System.out.println(i + ": привет, " + name + "!");
+        }
+    }
+}
+```
+
+Если в коде есть ошибка, её описание появится в области вывода — можно сразу исправить и запустить снова.
+
+### Работа с базой данных
+
+Для SQL откройте страницу [onecompiler.com/postgresql](https://onecompiler.com/postgresql). Откроется редактор с готовым примером:
+
+![Стартовый экран PostgreSQL в OneCompiler](/img/docs/img-192--onecompiler-start.png)
+
+Замените пример своим SQL: можно сразу создать таблицу, наполнить её данными и написать запрос. После нажатия **Run** результат последнего запроса покажется в виде таблицы:
+
+![Результат SQL-запроса в OneCompiler](/img/docs/img-193--onecompiler-result.png)
+
+Как наполнить базу данных и выполнять запросы по шагам — подробно разобрано в статье [Как практиковаться в выполнении SQL запросов](/docs/practice-guides/kak-praktikovatsya-v-vypolnenii-sql-zaprosov/kak-praktikovatsya-v-vypolnenii-sql-zaprosov.md).
+
+## Загружаем решение на GitHub
+
+Если вы пишете код для проекта, готовый файл нужно загрузить в репозиторий проекта на GitHub. Как это сделать через веб-интерфейс, со скриншотами — в отдельной статье [Как работать с GitHub через веб-интерфейс](/docs/project-work/rabota-s-github-cherez-veb-interfeys/rabota-s-github-cherez-veb-interfeys.md).
+
+## Делимся кодом по ссылке
+
+Иногда нужно показать свой код другому человеку — например, наставнику или сокурснику. В OneCompiler для этого есть кнопка **Share** (значок «поделиться» рядом с кнопкой **Save** вверху справа).
+
+Откроется окно **Save your code**: введите название (**Title**), при желании — описание, и выберите, кому будет виден код в разделе **Who can see this?**:
+
+- **Public** — код виден всем и может попасть в поиск по сайту.
+- **Unlisted** — код доступен только по прямой ссылке. Подходящий вариант, чтобы поделиться кодом, не выкладывая его в общий доступ.
+- **Private** — код виден только вам (нужен вход в аккаунт).
+
+![Окно «Save your code» с выбором видимости](/img/docs/img-197--onecompiler-share.png)
+
+После сохранения адрес страницы станет постоянной ссылкой на ваш код — её можно скопировать из адресной строки браузера и отправить.

docs/project-work/rabota-s-github-cherez-veb-interfeys/rabota-s-github-cherez-veb-interfeys.md

@@ -0,0 +1,71 @@
+---
+title: "Как работать с GitHub через веб-интерфейс"
+---
+
+[Перейти на сайт](https://ru.hexlet.io)
+
+# Как работать с GitHub через веб-интерфейс
+
+> Во многих проектах решение нужно сдавать через 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).
+:::