diff --git a/index.html b/index.html index 0e991ab..1417950 100644 --- a/index.html +++ b/index.html @@ -3,131 +3,286 @@ - Обучение вайбкодингу | Vibe42 + Вайбкодинг Гайд | Обучение от Казахтелеком
-

Обучение вайбкодингу

-

Как создавать приложения без написания кода — история, теория и практика no-code/low-code разработки

-
- - +
+ +

Вайбкодинг Гайд

+

Образовательная платформа от Казахтелеком: создавай сайты, ботов и приложения без программирования за 15 минут

+
+ + +

📖 Что такое вайбкодинг?

-
-
🚀
-

Vibe coding

-

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

-
-
+
+ Рекомендуется
🎨
-

No-code

-

Полное отсутствие написания кода. Использование готовых шаблонов, drag-and-drop интерфейсов и визуальных конструкторов.

+

No-Code

+

Полное отсутствие кода. Визуальные конструкторы, drag-and-drop интерфейсы, готовые шаблоны. Идеально для лендингов, сайтов-визиток и простых ботов.

⚡
-

Low-code

-

Минимальное использование кода для кастомизации. Визуальная разработка + возможность добавить код при необходимости.

+

Low-Code

+

Минимум кода для кастомизации. Визуальная разработка + возможность добавить код при необходимости. Для приложений с данными и интеграциями.

+
+
+
🤖
+

Vibe Coding

+

Современный подход: ИИ-ассистенты (Claude, ChatGPT) помогают создавать код, ты только описываешь задачу словами. Будущее разработки уже здесь.

-
-

No-code/low-code платформы позволяют создавать приложения в 10-20 раз быстрее традиционной разработки, делая программирование доступным каждому.

-
— Gartner Research
+ +
+
🎮 Попробуй прямо сейчас!
+

Нажми на кнопку — увидишь, как работает вайбкодинг:

+
+ + + +
+
Результат появится здесь...
+
+
+ +
+

✅ Подготовка к тренингу

+
+
+
1
+
👤
+
+

Аккаунт ИИ-сервиса

+

Claude (claude.ai) или ChatGPT (chatgpt.com). Рекомендуется вход через Google для простоты.

+
+
+
+
2
+
💻
+
+

Операционная система

+

Windows или macOS — инструкция подстроится под вашу систему.

+
+
+
+
3
+
📦
+
+

Git установлен

+

Система сохранения истории проекта. Скачай с git-scm.com или через Homebrew (macOS).

+
+
+
+
4
+
🔧
+
+

Claude Code или Codex

+

Инструмент для работы с кодом. Помогает писать, менять и проверять проект.

+
+
+
+
5
+
🐙
+
+

Аккаунт GitHub

+

github.com — хранилище кода и публикация сайтов через GitHub Pages.

+
+
+
+
6
+
📁
+
+

Папка проекта

+

Создай рабочую папку (например, "Первый проект Вайбкодинг") и открой в приложении.

+
+
+
+
7
+
🔗
+
+

Связь Codex и GitHub

+

Авторизуй GitHub через GitHub CLI: `gh auth login` — следуй инструкциям.

+
+
+
+
+ +
+

🛠 Выбор инструмента

+
+
+ Рекомендуется +
💬
+

ChatGPT + Codex

+

ChatGPT — чат с ИИ для обсуждения идей. Codex — инструмент OpenAI для работы с кодом: помогает писать, менять и проверять проект. Идеально для новичков.

+ +
+
+
🎯
+

Claude + Claude Code

+

Claude — чат с ИИ от Anthropic. Claude Code — инструмент для работы с файлами: читает файлы, пишет код и помогает собирать проект. Альтернатива ChatGPT.

+ +
@@ -135,34 +290,34 @@

📅 История развития

-
1990-е
-
Рождение RAD
-
Visual Basic (1991) и Delphi (1995) — первые визуальные среды разработки с drag-and-drop интерфейсами. Принцип: перетаскивание элементов вместо написания кода.
+ 1990-е +
Рождение RAD (Rapid Application Development)
+
Visual Basic (1991) и Delphi (1995) — первые визуальные среды разработки. Принцип: перетаскивание элементов вместо написания кода.
-
2000-е
+ 2000-е
End-User Development
-
Microsoft Access, Excel, SharePoint Designer. Salesforce.com (1999) — облачные CRM с конструктором приложений. Рост автоматизации бизнес-процессов.
+
Microsoft Access, Excel, SharePoint Designer. Salesforce.com (1999) — облачные CRM с конструктором приложений.
-
2011
-
Зарождение рынка
-
Появление первых специализированных low-code платформ. Начало формирования отдельного рынка инструментов.
+ 2011 +
Зарождение рынка low-code
+
Появление первых специализированных low-code платформ. Начало формирования отдельного рынка.
-
9 июня 2014
-
Термин «low-code»
-
Аналитики Forrester Research (Клэй Ричардсон) вводят термин «low-code» в отчёте «New Development Platforms Emerge For Customer-Facing Applications».
+ 2014 +
Термин «low-code» от Forrester
+
9 июня 2014: аналитики Forrester Research вводят термин «low-code» в отчёте о новых платформах разработки.
-
2017
+ 2017
Признание Forbes
-
Forbes называет no-code/low-code движение «чрезвычайно разрушительной технологией», которая изменит разработку ПО.
+
Forbes называет no-code/low-code «чрезвычайно разрушительной технологией», которая изменит разработку ПО.
-
2020-2025
-
Бум no-code
-
Пандемия ускорила цифровизацию. Gartner: к 2024 году 65% приложений создаются на low-code. Рынок достиг $25 млрд. Интеграция ИИ (ChatGPT, автогенерация).
+ 2020-2025 +
Бум no-code и ИИ-революция
+
Пандемия ускорила цифровизацию. Gartner: 65% приложений на low-code к 2024. Рынок $25 млрд. Интеграция ChatGPT и автогенерация кода.
@@ -170,155 +325,63 @@

📊 Статистика рынка

-
+
$15.5 млрд
-
Рынок low-code к 2020 (Forrester)
+
Рынок low-code к 2020
(Forrester)
-
+
65%
-
Приложений на low-code к 2024 (Gartner)
+
Приложений на low-code к 2024
(Gartner)
-
+
10-20x
Быстрее традиционной разработки
-
+
80%
-
No-code разработчиков без тех. образования
+
Разработчиков без тех. образования
-
+
70%
Экономия затрат vs наём разработчиков
-
+
$25 млрд
Рынок no-code/low-code к 2025
-
-

🛠 Популярные платформы

- -
- -
-

🎓 Принципы обучения

-
-
-

📈 От простого к сложному

-

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

-
-
-

⚡ Практика сразу

-

Первый результат за 10-15 минут. Не зубри теорию — создавай проекты с первой минуты.

-
-
-

🧠 Понимать логику

-

Не копируй слепо — разбирайся, почему работает именно так. Это поможет создавать свои решения.

-
-
-

🔄 Итерации

-

Сделал → показал → получил фидбек → улучшил. Повторяй цикл как можно чаще.

-
-
-
-

Цель обучения — не выучить инструменты, а развить мышление создателя. Инструменты меняются, мышление остаётся.

-
— Vibe42 Methodology
-
-
- -
-

🚀 С чего начать новичку?

+
+

🚀 7 шагов к первому проекту

-
-

Выбрать простую идею

-

Лендинг-визитка, персональное резюме, афиша мероприятия или Telegram-бот. Что-то, что можно сделать за один вечер.

+
+

Шаг 1: Создай аккаунт Claude или ChatGPT

+

Открой claude.ai или chatgpt.com. Рекомендуется вход через Google — проще входить на разных устройствах. Проверь, что чат открывается.

+
+
+

Шаг 2: Оформи подписку (рекомендуется)

+

Claude Pro (~$20/мес) или ChatGPT Plus дают больше возможностей. Открой claude.ai/upgrade или настройки ChatGPT, выбери тариф.

+
+
+

Шаг 3: Установи Git

+

Windows: скачай git-scm.com, установи с настройками по умолчанию. macOS: открой Терминал, вставь `brew install git`. Перезапусти приложение.

-

Открыть Vibe42

-

Ты уже в проекте! Следуй рецептам из AGENTS.md — там готовые шаблоны для каждого типа проекта.

+

Шаг 4: Установи Claude Code или Codex

+

Скачай приложение для своей системы. Запусти, войди в аккаунт из шага 1. Убедись, что приложение открывается без ошибок.

+
+
+

Шаг 5: Создай аккаунт GitHub

+

Открой github.com, зарегистрируйся через Google. Подтверди email через письмо. Проходи капчу внимательно с первого раза.

-

Создать первую версию

-

Используй design.md как основу для стилей. Скопируй структуру из презентации или создай свою.

+

Шаг 6: Создай папку проекта

+

Создай папку (например, на рабочем столе) с названием вроде "Первый проект Вайбкодинг". Открой её в Claude Code через "Choose project" → "New project".

-

Опубликовать

-

Нажми «Опубликовать» — сайт мгновенно появится на pages.git.vibe42.kz/Medet/твой-проект.

-
-
-

Поделиться и улучшить

-

Покажи друзьям, получи фидбек, добавь формы, данные или ИИ-интеграции.

-
-
-
- -
-

⚠️ Типичные ошибки

-
-
-
❌
-

Всё и сразу

-

Желание сделать идеальный продукт с первого раза. Решение: начни с MVP за 15 минут.

-
-
-
📚
-

Учить программирование

-

Параллельное изучение JavaScript или Python замедлит прогресс. No-code работает без кода!

-
-
-
🏗️
-

Сложные инструменты

-

Использование Bubble для лендинга или React для бота. Выбирай стек по таблице в AGENTS.md.

-
-
-
🔒
-

Не публиковать

-

Проект живёт только когда его видят другие. Публикуй после каждой итерации.

+

Шаг 7: Подключи GitHub к Codex

+

В Codex вставь: `gh auth login --hostname github.com --git-protocol https --web`. Открой ссылку, введи код с экрана в GitHub, подтверди авторизацию.

@@ -328,43 +391,57 @@
$50-100K
-
No-code разработчик (США)
+
No-code разработчик (США)
Фриланс и работа в компаниях
∞
-
Фриланс: сайты и боты на заказ
+
Фриланс: сайты и боты
на заказ от $500 за проект
🚀
-
Свой стартап без программиста
+
Свой стартап
без сооснователя-программиста
📊
-
Бизнес-аналитик с автоматизацией
+
Бизнес-аналитик
с навыками автоматизации
-
-

🎯 Готов начать?

-

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

-
- - +
+
+

🎯 Готов начать?

+

Твой первый сайт, бот или приложение — за 15 минут. Не нужно быть программистом. Просто следуй шагам выше.

+
+ + +
-

© 2025 Vibe42 | Образовательная платформа по вайбкодингу

-

- Pages • - Git • +

+ + + +
+

© 2025 Vibe42 × Казахтелеком | Образовательная платформа по вайбкодингу

+

Создано для обучения будущих разработчиков Казахстана

+
+ Vibe42 Pages + Vibe42 Git Alem AI -

+ Гайд GitHub Pages + Claude + ChatGPT +
diff --git a/vibemap.html b/vibemap.html new file mode 100644 index 0000000..3a5aa12 --- /dev/null +++ b/vibemap.html @@ -0,0 +1,747 @@ + + + + + + + + VibeMap — карта студентов Vibe42 + + + + + + + + + + + + + + + +
+ + + + +
+ + +
+ + + + + + +
+ + +
+ + + + + + + + + + + + + + +
+
+
+

Название проекта

+
+

Описание проекта

+
+
+ + +
+
+
+ + + + + +
+ + +
+
Нажми + чтобы добавить проект!
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +