Без рубрики

Создайте клон Trello, используя угловые, Node.js, Mongo и Express

Этот учебник использовал Trello в качестве вдохновения, который показывает мотыгу, чтобы написать мочевую систему TrELLO-TECKEING, используя угловой, Node.js, Mongo и Express

Автор записи Автор: Guy Mograbi
Дата записи 02.06.2021

Автор оригинала: Guy Mograbi.

Введение
II. Задний план
III. Давайте построим Trello Clone!
- Шаг 0: Начало работы
- Шаг 1: Управление билетами на доске
- Шаг 2: Добавление списка и функциональность билета
- Шаг 3: время тестирования
- Шаг 4: Добавление некоторого прохлады – Drag & Drop
Внутри Давайте посмотрим на наши окончательные результаты
V. Кодирование Trello Clone: добавление дополнительных функций

Введение

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

II. Задний план

В этом руководстве показано, как написать систему Trello-Alke Ticking с царапин, чтобы помочь вам построить аналогичный инструмент управления проектами самостоятельно. На каждом этапе мы рассмотрим минимальные требования к жизнеспособным продуктам и внедряем их.

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

Стек, который мы будем использовать, это средний стек Mongo, Express, Angularjs и Node.js. Средний стек не имеет особого преимущества по сравнению с другими технологиями, поэтому выбор этой технологии – это просто мой личный вкус. Но вот некоторые причины, по которым я предпочитаю эти технологии:

A. Node.js.

Он имеет большой механизм зависимости. Это относительно, а не глобальные – как в файловой системе, так и в пути. Это означает:
- Вы можете иметь несколько версий одного и того же кода в одном проекте, что делает зависимости гораздо более стабильными.
- Вы можете легко упаковать свой код ».
- Очень легко опубликовать свой код на использование библиотеки Micro. Это, в свою очередь, значит, есть много кода, вы можете использовать для Node.js. Это также означает, что вы можете легко отделить свой код в небольшие библиотеки.
- Сочетается с NVM (диспетчер версии узла), что означает, что вы можете легко иметь несколько версий узла на вашем компьютере.
Он имеет большой стек утилит для среды развития.
- Nodemon и Lite Server Auto Обновите свой процесс после изменения кода. Это, в свою очередь, ускоряет ваш процесс разработки – помните, что нет компиляции!
- Bower организует ваши внешние зависимости (и мне все еще нравится, хотя NPM может заменить его ).
- Сценарии NPM – это очень мощный способ добавить функциональность в вашу среду разработки. Мне очень полезно иметь Nodejs в любом проекте, не говоря уже о том, что язык.
Это свет. Мне нравится тот факт, что я могу запустить Node.js на микрочти в Amazon.
- Это асинхронный по природе. Это делает его очень подходящим технологией для веб-серверов.
- Объединяется с электроном, мы можем легко опубликовать носный клиент в наше приложение.

B. Express.

Espress – это очень прямая библиотека, которая помогает организовать код вашего сервера.

C. Mongo.

Mongo очень хорошо играет с Node.js, и его схема меньше природы делает развитие очень легко, особенно когда вы начинаете проект.

D. угловой

Это полная рамка для интерфейса. Не нужно интегрировать несколько библиотек.
Я думаю, что он едва имеет какую-либо кривую обучения, которую я никогда не понимал тех, кто сказал иначе.
Он отделяет HTML от JavaScript, который мне нравится.

E. Они все JavaScript!

JavaScript потрясающий.
- Это язык сценариев, и поэтому вы видите результаты сразу после записи кода.
- Он работает на двигателях, написанных крупнейшими компаниями и использовал всех, используя браузер.
Один язык для всех сред.

III. Давайте построим Trello Clone!

Шаг 0: Начало работы

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

Шаг 1: Управление билетами на доске

Для первого шага давайте решим предположить

одна доска со списками и билетами
Нет пользователей, нет сотрудничества

A. Создайте страницу «Доска»

Во-первых, давайте настроим представление доски, которое позволяет пользователям добавлять списки и билеты. Для этого мы определим страницу в угловании:

// file : app.js
angular.module('demo', ['ngRoute']).config(function ($routeProvider) { console.log('configuring')
  $routeProvider

    .when('/board', {
      controller: 'BoardPageCtrl', templateUrl: '/app/views/board_page.html'
    });
  })

Затем мы определим контроллер с некоторыми данными издевательства, которые мы можем отобразить

// file : BoardPageCtrl.js

angular.module('demo').controller('BoardPageCtrl', function ($scope) { $scope.lists = [
    {
      name: 'list 1',
      tickets: [
        {title: 'task 1'},
        {title: 'task 2'}
      ]
    },
    {
      name: 'list 2',
      tickets: [
        {title: 'task 3'},
        {title: 'task 4'}
      ]
    }
  ]
})

Как видите, я выбрал очень наивную модель данных со следующими чертами:

У меня есть массив списков.
У каждого списка есть имя и его билеты.
У каждого билета есть титул.

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

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

Время добавить вид на отображение списков и билетов.

Для начала мы хотели бы увидеть, что все правильно подключено. Поэтому я начну с простой страницы:

Мы еще не закончили функциональность, поскольку кнопка «Добавить билет» еще ничего не делает. Но прежде чем мы движемся с функциональностью, я хотел бы, чтобы все выглядели потрясающе.

D. Добавление цвета и макета

До сих пор все выглядит ужасно. Так что пришло время добавить немного стиля. Чтобы проектировать организованный, давайте создадим файл с именем _board_page.scss (Обратите внимание на соглашение об именах, которую я сохраняю), и я начинаю его с идентификатором страницы.

#boardpage{ 
}

Давайте начнем с добавления цвета фона доски:

$BOARD_BACKGROUND_COLOR: #5BA4CF; background:$BOARD_BACKGROUND_COLOR;

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

Теперь я хочу, чтобы на заднем плане не был все на странице. Я мог бы использовать Ширина: 100% и Высота: 100% Но у этого есть некоторые другие последствия, которые мы хотим избежать. Так вместо этого я предпочитаю использовать Абсолютация Отказ Это также разрешит некоторые прокрутки по поводу проживания по дороге.

$BOARD_PAGE_PADDING:0px; 
position:absolute; 
top:$BOARD_PAGE_PADDING; 
bottom:$BOARD_PAGE_PADDING; 
left:$BOARD_PAGE_PADDING; 
right:$BOARD_PAGE_PADDING;

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

.list{ 
  display:inline-block; 
}

Теперь давайте поведем название правильно и добавить фон в списки с некоторым интервалом:

.list{ 
  display:inline-block; 
  $LIST_BACKGROUND_COLOR: #D2D7E5; 
  background:$LIST_BACKGROUND_COLOR; 
  width:300px; 
  padding:10px; 

  &:not(:first-child){ 
    margin-left:10px; 
  } 

  .list-name{ 
    padding:10px; 
    border:none; 
    background:transparent; 
  } 
}

Давайте также добавлю прокладки на #boardpage с прокладки: 20px;

Обратите внимание, что я использовал Маржа-левый Чтобы провести расстояние между списками, но когда я хотел интервал со страницы, я добавил прокладку на странице.

Я мог бы добавить Margin-Top в списках и Маржа-левый на левый ребенок достичь того же.

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

Говоря, что это то, что приложение должно выглядеть в этой точке

Теперь давайте стиль кнопку

.add-ticket{ 
  $ADD_TICKET_BACKGROUND_COLOR:linear-gradient(to bottom,#61BD4F 0,#5AAC44 
  background:$ADD_TICKET_BACKGROUND_COLOR; 
  color:white; 
  font-weight: bold; 
  border:none; 
  padding:10px; 
} 
.list-content { 
  margin-bottom:20px; 
}

Давайте добавим немного стиля на каждый билет:

.ticket{ 
  background:white; 
  &:not(:first-child) {
    margin-top: 10px; 
  }
  .ticket-title{ 
    width:100%; 
    padding:20px;
  }
}

Я проигнорировал первый ребенок, когда добавил маржу, потому что мне не нравится, когда расстояние между двумя элементами на странице представляет собой сумму двух стилей. В таком случае:

прокладка На названии списка
Margin-Top На билете

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

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

Это последний SCSS файл

#boardpage{ 
  $BOARD_BACKGROUND_COLOR: #5BA4CF; 
  background:$BOARD_BACKGROUND_COLOR;

  $BOARD_PAGE_PADDING:0px; 
  position:absolute; 
  top:$BOARD_PAGE_PADDING; 
  bottom:$BOARD_PAGE_PADDING; 
  left:$BOARD_PAGE_PADDING; 
  right:$BOARD_PAGE_PADDING;
  padding:20px;

  .list{ 
    display:inline-block; 
    $LIST_BACKGROUND_COLOR: #D2D7E5; 
    background:$LIST_BACKGROUND_COLOR; 
    width:300px;
    padding:10px;

    .list-content { 
      margin-bottom:20px;
    } 
    &:not(:first-child){
      margin-left:10px; 
    }
    .list-name{ 
      padding:10px; 
      border:none; 
      background:transparent;
    }

    .add-ticket{
      $ADD_TICKET_BACKGROUND_COLOR:lineargradient(to bottom,#61BD4F 0,#5AAC44 
      background:$ADD_TICKET_BACKGROUND_COLOR;
      color:white;
      font-weight: bold;
      border:none;
      padding:10px;
    }

    .ticket{ 
      background:white; 
      &:not(:first-child) {
        margin-top: 10px; 
      }
      .ticket-title{ 
        width:100%; 
        padding:20px;
      } 
    }
  } 
}

До сих пор весь стиль под #boardpage и многоразовые компоненты еще не определены. Это будет рефакторинг, мы сделаем, когда будем делать, как только мы найдем себя copypasting … (Примечание: мне нравится этот подход, потому что он держит меня очень ориентированным на цель. Я еще не думаю о инфраструктуре, но однажды мне это нужно, маленький рефакторинг заставит меня там .)

Если вы не видите изменения в стиле, убедитесь, что вы вспомнили, чтобы добавить @import 'Board_page'; Заявление на main.scss

Шаг 2: Добавление списка и функциональность билета

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

А в контроллере мы реализуем эти функции:

// BoardPageCtrl.js

$scope.addList = function () { 
  $scope.lists.push({name: 'new list', tickets: []})
}

$scope.addTicket = function (list) { 
  list.tickets.push({})
}

Довольно просто, и это будет делать сейчас.

Шаг 3: время тестирования

Так что играя с новым блестящим приложением, я обнаружил некоторые проблемы в стиле. Давайте рассмотрим и посмотрим, как их разрешить.

А. Списки не выровнены на вершине

Когда я создаю новый список, он не выровнен к вершине. Этого можно легко исправить, рассказывая все списки, которые будут выровнены на вершину. Просто добавьте Вертикально-выравнивание: верх; на .список

B. Списки превышают содержимое страницы

Когда я нажимаю «добавить билет», я вижу промывки списков по области содержимого.

Чтобы быстро исправить это, добавьте следующие CSS

.list-content {
  max-height: 80%; 
  overflow-y: auto; 
  $SCROLL_OFFSET:5px; 
  padding-right:$SCROLL_OFFSET; 
  margin-right:$SCROLL_OFFSET;
}

Обратите внимание на уродливую Максимальная высота: 80% Отказ Это очень уродливое решение. Расстояние между нижней частью списка до конца страницы будет изменяться в соответствии с высотой экрана. Это означает, что разрешение экрана высокое, список заканчивается относительно высоким на экране. Если экран небольшой, ошибка все равно будет воспроизводить. Так почему я реализовал это таким образом?

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

C. Генерация многих списков будет переполнена на следующую строку

Когда я пытаюсь добавить много списков, я вижу это ужасное изображение

Это легко решить, добавив Белое пространство: NOWRAP на борту.

#boardpage{ 
  overflow-x:auto; 
  white-space: nowrap;
}

Шаг 4: Добавление некоторого прохлады – Drag & Drop

Пока что у нас есть несколько довольно справедливых результатов. Но Trello очень известен своим сопротивлением, и было бы стыдно не иметь.

К счастью, есть довольно нефте угловая библиотека под названием Угловые перетаскивающие списки Так что я быстро добавляю его бежать Bower Установка -S угловой - канал-и-капли Отказ Я также добавляю зависимость модуля и соответствующий файл JavaScript на index.html.

// app.js

angular.module('demo', ['ngRoute', 'dndLists'])...

После его инструкции давайте добавим немного ДНД Атрибуты билет девочка

И тогда я с нетерпением жду проверки, если это работает – и это делает! Но это уродливо … Так что добавьте следующий стиль:

li.dndPlaceholder { 
  $PLACEHOLDER_COLOR:rgba(0,0,0,0.5); 
  height:60px;
  list-style:none;
  background:$PLACEHOLDER_COLOR;
  margin-top:10px;
}

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

.list-content{  
  padding-bottom:60px;
}

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

Я открою проблему на Угловые перетаскивающие списки Проект и на мой и добавьте ссылку между ними.

A. Давайте посмотрим, как реализован перетаскивание

Я хотел бы сделать паузу на минуту и расследовать, как работает эта библиотека. Он содержит только 1 файл 500 строк – большинство из них являются документацией. Так что не следует занимать много времени, чтобы понять, как это работает.

В этой библиотеке есть несколько классных вещей, которые я принял к сведению:

Директива не имеет изолированного масштаба. Это успокаивает меня, как я знаю, у меня не может иметь две директивы с изолированными облаками на одном элементе. Так что нет проблем здесь
event.dataTaTransfer.ettdata ("текст", angular.tojson (область применения. $ eval (attr.dnddraggable))); Эта строка показывает, как эта библиотека переводит строку, представляющую модель Draggable на фактическую модель. Он оценивает модель с объема, используя Область применения. $ Eval Отказ В нашем случае attr.dnddraggable это билет.
$ parse (attr.dnddragstart) (Scope, {событие: событие}); вызывает Начать Перезвоните.

Это пара хороших вещей, которые нужно знать, что вы можете сделать с угловой. И если я объединяю эти знания с Drag и Drop MDN документацией, я могу обернуть голову по всей реализации.

Внутри Давайте посмотрим на наши окончательные результаты

Весь код выше, получает нас к некоторым перспективным начальным результатам:

Как видите, я не шутил, когда сказал, что Trello будет моим вдохновением. Чтобы пересмотреть все, что мы сделали до сих пор:

Мы написали первую страницу для нашего приложения Trello Clone
Мы добавили стиль на страницу
Мы добавили возможность добавления списков и билетов.
Мы добавили способность перетаскивания.

V. Кодирование Trello Clone: добавление дополнительных функций

Давайте вместе построим приложение, посмотрите этот записанный сеанс в прямом эфире, где вы можете добавить синхронизацию постоянства и кросс-устройства в приложение для завершения вашего клона TreleLO!

Метки clone, inspiration, mongo, page, tutorial

Оглавление