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

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

Вот краткий обзор процесса:

  1. Технические варианты: нам нужно будет выбрать язык программирования, фреймворк и базу данных, которые мы будем использовать для нашего приложения. Нам также нужно будет определиться с архитектурой нашего приложения, например, будет ли оно одностраничным или многостраничным.
  2. Архитектура внешнего интерфейса: внешний интерфейс — это часть приложения, с которой взаимодействуют пользователи. Он отвечает за отображение данных пользователям и получение информации от пользователей. Нам нужно будет выбрать интерфейсный фреймворк, например React или Angular, и интерфейсную библиотеку, например Bootstrap или Material UI.
  3. Архитектура серверной части. Серверная часть — это часть приложения, которая отвечает за хранение данных, обработку данных и формирование ответов на запросы пользователей. Нам нужно будет выбрать внутреннюю структуру, такую ​​как Django или Rails, и внутреннюю базу данных, такую ​​как MySQL или PostgreSQL.
  4. Создание функциональных возможностей: после того, как мы выбрали технический стек, мы можем начать создавать различные функции нашего приложения. Это будет включать в себя написание кода, проектирование пользовательских интерфейсов и тестирование нашего кода.

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

Я уверен, что, работая вместе, мы сможем создать успешное приложение для управления задачами.

И. Технические варианты

  1. Язык программирования. В этом проекте мы будем использовать JavaScript, который является объектно-ориентированным языком программирования. Я выбрал JavaScript, потому что он:
  • Быстро: JavaScript — это компилируемый язык, а это означает, что перед выполнением он преобразуется в машинный код. Это делает его намного быстрее, чем интерпретируемые языки, такие как Python.
  • Простота изучения: JavaScript имеет простой синтаксис, который легко освоить новичкам. Он также имеет большое сообщество разработчиков, которые могут оказать поддержку и помочь с проблемами.
  • Динамический: JavaScript — это динамический язык, что означает, что типы переменных и выражений не проверяются во время компиляции. Это делает его гибким языком, который можно использовать для различных задач.
  • Универсальность: JavaScript — это универсальный язык, который можно использовать как для интерфейсной, так и для внутренней разработки. Это делает его хорошим выбором для разработки веб-приложений.

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

Вот некоторые дополнительные преимущества использования JavaScript для этого проекта:

  • JavaScript поддерживается всеми основными браузерами. Это значит, что наше приложение будет доступно широкому кругу пользователей.
  • Для JavaScript доступно множество библиотек и фреймворков. Эти библиотеки и фреймворки могут помочь нам ускорить разработку и создавать более сложные приложения.
  • JavaScript — это постоянно развивающийся язык. Это означает, что в язык всегда добавляются новые функции и улучшения. Это может помочь нам создавать более инновационные и удобные приложения.

Я уверен, что с помощью JavaScript мы сможем создать успешное и инновационное приложение для управления задачами.

2. Структура. Как вы знаете, JavaScript — это мощный язык, который можно использовать для создания динамических и интерактивных веб-приложений. Однако JavaScript может быть сложным в использовании и управлении сам по себе. Здесь на помощь приходят фреймворки JavaScript.

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

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

  • Vue.js — это прогрессивная среда JavaScript, которую легко освоить и использовать. Это также очень быстро и эффективно.
  • Vuetify — это библиотека компонентов пользовательского интерфейса для Vue.js, которая предоставляет широкий спектр готовых компонентов.
  • Pinia — это библиотека управления состоянием для Vue.js, простая в использовании и обеспечивающая большую гибкость.
  • Vitest — это платформа модульного тестирования для Vue.js, быстрая и простая в использовании.

Для серверной части мы будем использовать следующие фреймворки:

  • Express.js — это популярный веб-фреймворк для Node.js, который прост в освоении и использовании.
  • TypeORM — это ORM для Node.js, который обеспечивает простой и эффективный способ взаимодействия с базами данных.
  • Vitest — это платформа модульного тестирования для Node.js, быстрая и простая в использовании.

Для базы данных мы будем использовать PostgreSQL. PostgreSQL — это мощная и надежная база данных, которая хорошо подходит для веб-приложений.

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

II. Интерфейсная архитектура

Как вы знаете, мы создаем крупномасштабное приложение с использованием Vue.js. В моей предыдущей статье я поделился некоторыми рекомендациями по разработке приложений Vue.js | Лучшая практика». Сегодня я хотел бы более подробно рассказать о том, как мы применяем эти лучшие практики в нашем проекте.

Наша интерфейсная архитектура основана на следующих принципах:

  • Разделение проблем. Мы разделили задачи нашего приложения на три уровня: уровень представления, уровень бизнес-логики и уровень данных. Это упрощает понимание, сопровождение и тестирование нашего кода.
  • Композиция вместо наследования: мы использовали композицию вместо наследования для создания наших компонентов. Это делает наши компоненты более пригодными для повторного использования и упрощает их тестирование.
  • Управление состоянием: мы используем Pinia для управления состоянием нашего приложения. Это делает наше приложение более предсказуемым и понятным.
  • Интернационализация: мы используем Vue i18n для поддержки нескольких языков. Это делает наше приложение более доступным для более широкой аудитории.

Я включил ссылку на мою предыдущую статью в примечаниях к шоу. Я рекомендую вам прочитать его для получения более подробной информации об этих передовых методах.

II. Серверная архитектура

Как вы знаете, мы создаем крупномасштабное приложение. Это означает, что серверная часть нашего приложения должна быть хорошо организована и надежна. В моей предыдущей статье я поделился некоторыми Лучшей архитектурной папкой Express js для самого большого проекта | Best Pratice для крупных проектов. Сегодня я хотел бы более подробно рассказать о том, как мы применяем эти передовые методы в нашем проекте.

Преимущества хорошей серверной архитектуры

У хорошо спроектированной серверной архитектуры есть много преимуществ. Эти преимущества включают в себя:

  • Повышенная масштабируемость. Хорошо спроектированную серверную архитектуру легче масштабировать, поскольку каждый уровень можно масштабировать независимо.
  • Улучшенная ремонтопригодность: хорошо спроектированную внутреннюю архитектуру легче поддерживать, поскольку различные уровни отделены друг от друга, а код является более модульным.
  • Повышенная гибкость. Хорошо спроектированная внутренняя архитектура более гибкая, поскольку ее можно легко адаптировать к новым требованиям.

Наш подход к архитектуре бэкенда

Наш подход к серверной архитектуре основан на шаблоне чистой архитектуры. Этот шаблон делит приложение на четыре слоя:

  • Сущности: этот слой представляет основные данные приложения. Он реализован на TypeScript и не зависит ни от каких внешних фреймворков или библиотек.
  • Варианты использования: этот уровень определяет бизнес-логику приложения. Он реализован на TypeScript и использует слой сущностей для доступа к данным.
  • Адаптеры интерфейса: этот уровень отвечает за связь с внешними компонентами, такими как интерфейс или база данных. Он реализован в Express.js и использует уровень вариантов использования для доступа к бизнес-логике.
  • Платформы и драйверы: этот уровень содержит детали реализации внешних компонентов. Он не является частью основного приложения и может быть изменен, не затрагивая другие уровни.

Заключение

В этой первой части мы сделали технический выбор для нашего приложения для управления задачами. Мы выбрали JavaScript в качестве языка программирования, Vue.js в качестве внешнего интерфейса и Express.js и TypeORM в качестве внутреннего. Мы также обсудили архитектуру нашего приложения, и я предоставил ссылку на свою статью, в которой содержится более подробная информация по этой теме.

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

Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение ниже. Я сделаю все возможное, чтобы ответить на них.

Спасибо за прочтение!