/algososh

Welcome to the MBOU ALGOSOSH Fibonacci project! Join us in creating a visualizer that animates algorithm steps, enhancing your understanding and skills in programming and animation.

Primary LanguageTypeScript

МБОУ АЛГОСОШ

React TypeScript

Проектная работа. МБОУ АЛГОСОШ им. Фибоначчи

Добро пожаловать в проектный репозиторий МБОУ АЛГОСОШ им. Фибоначчи! Здесь мы рады представить вам уникальную возможность: создание визуализатора алгоритмов, которые вы изучаете в течение месяца. Наш проект направлен на разработку инструмента, способного демонстрировать работу алгоритмов через анимацию и последовательное отображение шагов, что позволит вам более глубоко понять каждый этап их функционирования. Благодаря этому подходу вы сможете не только улучшить свои знания в области алгоритмов, но и развить навыки программирования и анимации. Давайте вместе создадим инструмент, который сделает изучение алгоритмов увлекательным и наглядным!

Реализованный функционал

Строка

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

Строка

Последовательность Фибоначчи

Визуализатор для генерации и отображения последовательности чисел Фибоначчи. Позволяет пошагово продемонстрировать процесс формирования последовательности, начиная с первых двух чисел и последующего добавления следующего числа путем сложения двух предыдущих.

Последовательность Фибоначчи

Сортировка массива

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

Сортировка массива

Стек

Инструмент для визуализации структуры данных "стек". Пользователь может добавлять и удалять элементы из стека, а также наблюдать изменение его состояния на каждом шаге операции. Стек работает по принципу Last-In-First-Out (LIFO), где последний добавленный элемент будет первым, который будет удален.

Стек

Очередь

Модуль, который позволяет визуализировать работу структуры данных "очередь". Пользователь может добавлять элементы в очередь, извлекать их и наблюдать, как очередь изменяется с каждой операцией. Очередь работает по принципу First-In-First-Out (FIFO), где первый добавленный элемент будет первым, который будет извлечен.

Очередь

Связный список

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

Связный список

Инструкция по установке и сборке

Эта инструкция предназначена для разработчиков и технических специалистов, которые хотят установить и собрать проект "Stellar Burger: Космическая бургерная" на своем локальном устройстве.

Предварительные требования

  1. Node.js и npm: убедитесь, что на вашем компьютере установлены Node.js и npm. Вы можете скачать их с официального сайта Node.js.
  2. Git: установите Git для клонирования репозитория и управления версиями. Вы можете загрузить его с официального сайта Git.

Установка

  1. Клонирование репозитория: в терминале выполните команду для клонирования репозитория на вашу локальную машину:
git clone https://github.com/NotACat1/algososh.git
  1. Переход в директорию проекта: перейдите в директорию проекта:
cd ваш-путь-к-репозиторию/stellar-burger
  1. Установка зависимостей: выполните команду для установки зависимостей проекта:
npm install

Сборка и запуск

  1. Запуск локального сервера: для запуска локального сервера разработки выполните:
npm run start

Это запустит приложение и откроет его в вашем браузере по адресу http://localhost:3000.

  1. Сборка проекта: Если вы готовы развернуть проект на сервере, выполните команду для создания оптимизированной для продакшена сборки:
npm run build

Сборка будет размещена в папке build.

Дополнительные команды

  1. Развертывание на GitHub Pages: Если вам нужно развернуть проект на GitHub Pages, используйте команду:
npm run deploy

Это предполагает, что у вас есть репозиторий на GitHub и вы настроили его для использования GitHub Pages.

  1. Установка Git Hooks: Для установки git hooks (Husky) и необходимых прав выполните:
npm run husky-inst

Эта команда устанавливает и настраивает Husky для автоматизации проверок при коммите.

Теперь у вас должны быть удовлетворены все предварительные требования, и вы готовы устанавливать, разрабатывать и разворачивать проект "Сайт космической бургерной Stellar Burger".

Технологии

Основные библиотеки и фреймворки

  1. React: JavaScript библиотека для разработки пользовательских интерфейсов. React позволяет создавать масштабируемые веб-приложения с использованием компонентного подхода, что делает код более модульным, понятным и легким для поддержки.
  2. Sass: Sass (Syntactically Awesome Stylesheets) - препроцессор CSS, расширяющий возможности обычного CSS с помощью переменных, вложенности, миксинов и много других функций. Sass облегчает процесс написания и поддержки стилей, делая их более читаемыми и управляемыми.
  3. TypeScript: Язык программирования, расширяющий возможности JavaScript путем добавления статической типизации. TypeScript помогает выявлять ошибки на этапе разработки, повышает читаемость кода и облегчает его поддержку. Благодаря статической типизации TypeScript улучшает процесс разработки, делая его более надежным и эффективным.

Инструменты для контроля качества кода

  1. ESLint: Инструмент для статического анализа кода JavaScript с целью выявления и исправления паттернов программирования.
  2. Prettier: Инструмент форматирования кода, который автоматически приводит код к установленным стандартам.
  3. Stylelint: Линтер для стилей, который проверяет CSS/SCSS на соответствие правилам написания кода.
  4. HTMLHint: Инструмент для статического анализа HTML-кода, написанного на JavaScript.

Инструменты для управления коммитами

  1. Husky: Инструмент для предотвращения плохих коммитов и предварительного выполнения скриптов перед коммитом.
  2. Commitlint: Инструмент для проверки соответствия сообщений коммитов заданным конвенциям.

Заключение

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

Использование современных технологий, таких как React, Sass и TypeScript, обеспечивает высокую производительность и удобство в использовании. Мы стремились создать интуитивно понятный и эффективный инструмент, который поможет учащимся в освоении сложных концепций программирования.

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