Фронтенд приложения "Твой Физфак!"

Как начать*

1. Установите систему контроля версий git;

2. Проверьте успешность установки с помощью команды

   git --version

3. Склонируйте репозиторий: В необходимой директории выполните в консоли команду

   git clone https://github.com/profcomff/webapp-ui

Появится папка webapp-ui с исходным кодом проекта.

3. Установите среду выполнения языка JavaScript Node.js;

4. Проверьте успешность установки с помощью команды

   node --version

5. Вместе с Node.js у вас установится пакетный менеджер по умолчанию — npm. Рекомендуем использовать более совеременный вариант — pnpm. Для его установки выполните

   npm install --global pnpm

6. Для установки зависимостей проекта выполните команду

   pnpm install

7. Для запуска проекта локально выполните команду

   pnpm run dev

8. Введите в адресной строке браузера http://localhost:9000. Откроется главная страница приложения "Твой ФФ!".

* при возникновении проблем пишите в наш телеграм-чат или @physphile.

Инструменты разработчика

1. Среда разработки. В последние годы самым популярным редактором кода стал Visual Studio Code (не путать с Visual Studio!). Необходимо установить именно его и несколько полезных плагинов, таких как

   • Vue Language Features (Volar)
   • TypeScript Vue Plugin (Volar)
   • ESLint
   • Prettier - Code formatter
   • Auto Close Tag
   • Auto Rename Tag
   • Auto Import
   • CSS Variable Autocomplete

2. Самое главное для веб-разработки у вас, безусловно, было установлено всегда и вы этим активно пользуетесь. Конечно, я говорю о браузере. В целом можно использовать любой браузер последней версии, но я советую Google Chrome. Нововведения первыми появляются в нем, удобная панель разработчика. Опыт в других браузерах на движке chromium, например, в Яндекс Браузере, будет аналогичным. Непременно стоит установить расширение Vue.js devtools для просмотра дерева компонентов, отслеживания их состояния и общего состояния приложения.

Обучающие материалы

В первую очередь необходимо знание "трёх китов" веб-разработки, а именно HTML, CSS и JavaScript. Обучающие материалы о них лезут из каждого угла, но нет ничего лучше, чем:

• HTML для Начинающих - Практический Курс,
• CSS для Начинающих - Практический Курс,
• JavaScript Основы для Начинающих - Полный Курс за 6 часов.

Если понять HTML и CSS можно за пару вечеров, то вот изучение JavaScript может затянуться. Поэтому, если вам удобнее текстовый формат, используйте Современный учебник JavaScript, который охватывает все вожмости языка, а информация в нем структурирована и хорошо переведена на русский язык не одним годом работы разработчиков.

Проект построен на JavaScript-фреймворке Vue.js версии 3 с синтаксисом Composition APIс использованием TypeScript. Если какие-то термины для вас оказались непонятными, не отчаивайтесь! В Сети полно замечательного обучающего контента, на котором, в т. ч. учился автор:

• Vue 3 Основы для Начинающих - Полный Курс,
• TypeScript - Быстрый Курс за 70 минут,
• TypeScript для продвинутых за 2 часа,
• Продвинутые дженерики в TypeScript.

Напоминаем:

Чтобы научиться программировать, нужно программировать.

Поэтому, пожалуйста, смотрите код, задавайте много вопросов и пытайтесь его редактировать!

Следующие шаги

Архитектура приложения