Develop

[romanenkoandrew]

1. Task: Shedule
2. Deploy: Link
3. Score: 400 / 600

• Создание концепта приложения +30

  • выполнены и оформлены в виде markdown файла или документа Google Docs требования пункта "Определение потребностей пользователей" +10
  • идеи по улучшению расписания представлены в виде списка конкретных изменений и усовершенствований, которые необходимо внести в приложение +10
  • создан макет приложения в figma либо другом редакторе (нарисованные от руки и отсканированные наброски и схемы тоже подойдут) +10

• Оформление приложения +30

  • приложение корректно отображается как на компьютере, так и на мобильных устройствах, оптимально занимает площадь страницы. Минимальная ширина страницы, при которой приложение отображается корректно, 320рх. Наличие в таблице полосы прокрутки не является ошибкой +10
  • дизайн приложения должен гармонично сочетаться с оформлением rs app. Допускаются небольшие отличия, улучшающие визуальное восприятие созданного вами приложения либо упрощающие работу с ним. Единое стилевое оформление всех страниц приложения +10
  • у приложения есть версия для слабовидящих - больший размер шрифта, доступные элементы пользовательского интерфейса, высокая контрастность и т.д. +10

• Просмотр расписания (пользователь - студент) +180

  • возможность просмотра расписания в виде календаря +10
  • возможность просмотра расписания в виде списка +10
  • значения в ячейках таблицы с расписанием отображаются и форматируются согласно типу находящихся в них данных +10
  • при просмотре расписания есть возможность выбора часового пояса +10
  • строки таблицы, строки списка, даты календаря, которым соответствуют разные типы заданий (лекция, тест, выдача таска, дедлайн таска и т.д.) выделены разным фоновым цветом +10
  • при просмотре расписания есть возможность указать пользовательские настройки цвета фона и цвета шрифта для выделения заданий разных типов +10
  • можно настраивать видимость колонок расписания демо +10
  • возможность фильтрации расписания по типам заданий +10
  • ряд таблицы или списка можно выделить кликом. Выделенный ряд должен отличаться визуально +10
  • выделенный ряд можно скрыть. Скрытый ряд можно отобразить +10
  • с зажатым shift можно выделить несколько рядов таблицы. Выделенные ряды можно скрыть. Скрытые ряды можно отобразить +10
  • возможность сохранения расписания в виде таблицы, в виде списка и в виде календаря в одном или нескольких форматах файлов. При сохранении расписания пользовательские настройки расписания (цветовая схема, скрытые ряды и колонки, применённые фильтры и т.д.) сохраняются +10 баллов за каждый формат файлов, но не более 20 баллов
  • по клику по пункту расписания открывается страница задания с подробной информацией о нём +10
  • продуманная структура и внешний вид страницы задания - разная структура страницы задания для разных типов заданий, содержится вся необходимая информация о задании, наиболее важная информация выделена и т.д. +10
  • страница задания может содержать текст, ссылки, фото и видео +10
  • для событий, которые проходят офлайн, на странице задания отображается карта с местом их проведения +10
  • на странице задания можно оставить feedback о задании +10

• Редактирование расписания (пользователь - ментор) +180

  • у ментора есть возможность редактирования расписания Редактируется только основная форма расписания - таблица. Расписание в виде календаря или списка автоматически генерируются на основе введённых в таблицу данных +20
  • редактирование расписания организовано понятно и удобно - интуитивно понятный интерфейс, наличие необходимых подсказок, доступные элементы управления +10
  • в процессе редактирования ментор сразу видит, как будет выглядеть таблица с расписанием +10
  • в процессе редактирования есть возможность предпросмотра расписания в виде календаря +10
  • в процессе редактирования есть возможность предпросмотра расписания в виде списка +10
  • при редактировании расписания дату можно выбрать на календаре +10
  • при редактировании расписания есть возможность выбора часового пояса +10
  • при редактировании расписания есть возможность изменять цвет фона и цвет шрифта для выделения заданий разных типов +10 (цвет тегов менятся в таблице кликом по нужному тегу)
  • в ходе редактирования расписания есть возможность добавлять новые типы заданий и выбирать для них цвет фона и цвет шрифта +20
  • у ментора есть возможность редактирования страницы задания +10
  • редактирование страницы задания организовано понятно и удобно - интуитивно понятный интерфейс, наличие необходимых подсказок, доступные элементы управления +10
  • в процессе редактирования на страницу задания можно добавлять текст, ссылки, фото и видео +20
  • для событий, которые проходят офлайн, есть возможность указать на карте место их проведения +10
  • в процессе редактирования ментор сразу видит, как будет выглядеть страница с заданием +10
  • в процессе редактирования страницы с заданием есть возможность разрешить или запретить оставлять feedback о задании +10

• Оптимизация расписания +80

  • выбранные пользователем способ отображения расписания, часовой пояс, видимость колонок, применённые фильтры, выбранный цвет фона и цвет шрифта, скрытые ряды, другие применённые настройки, если они есть, сохраняются в localStorage так, что при обновлении страницы состояние расписания сохраняется +10
  • определите эффективность использования виртуализации рядов, других способы оптимизации производительности приложения. Примените наиболее эффективные способы для оптимизации производительности приложения +20
  • в расписание внесены дополнительные не указанные в задании полезные усовершенствования, которые облегчают работу с ним, делают его более удобным и функциональным, улучшают внешний вид и т.д. +10 баллов за каждое полезное качественно выполненное усовершенствование*, но не более 50 баллов:
  1. Есть возможность объединить расписания по курсам,
  2. Добавление эффетка прозрачности и невозможности редактирования при завершении события.

• Использованные технологии +40

  • TypeScript +30
  • Ant Design of React +10

• Документирование кода +20

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

• Целесообразность интеграции в rs app +40

  • созданное приложение целесообразно интегрировать в rs app + 40

• Штрафные баллы

  • внесённые изменения делают использование приложения менее удобным, снижают его качество -10 баллов за каждое изменение, которое привело к ухудшению юзабилити приложения

* под усовершенствованием понимаем добавление нового функционала либо комплексное изменение дизайна. Это не касается мелких правок вроде добавления логотипа или изменения размера шрифта.

Примеры усовершенствований:

• у студента есть возможность объединить расписание разных курсов, которые он проходит одновременно
• у ментора есть возможность указать время появления задания в расписании, когда заранее добавленное задание отображается в расписании в указанное время

Schedule

Содержание документа:

• Цель разработки
  • Концепт приложения
  • Преимущества и недостатки
  • Идеальное расписание
  • Определение потребностей пользователей
  • Идеи по улучшению расписания
• Макет приложения
• Документация для разработчиков
  • Требования
  • Технологии проекта
  • Особенности приложения
  • Библиотеки и модули
• Обратная связь
  
  
  

Цель разработки

Это приложение разработано для Rolling Scopes School.
Цель - улучшить существующее расписание для студентов и менторов.

Концепт приложения

Преимущества и недостатки

rs app		*	Таблица в Google docs
Преимущества	Недостатки	*	Преимущества	Недостатки
находится внутри приложения и не нужно переключаться	неверная неточная информация	*	предположительно легко править менторам	слишком много информации в 1 месте
у пройденных тасков шрифт более прозрачный и проще ориентироваться какие таски актуальны	неполное расписание	*	можно добавить любое количество информации, в отличии от расписания в rss app	яркие цвета непонятно что обозначающие
мало информации (сразу видно какой таск, когда дедлайн, нет миллиона полей и человек не путается)	мало информации(нет уточнения, комментариев, дополнительных ссылок)	*	не нужно быть записанным на курс чтобы смотреть расписание и учиться по нему	можно случайно открыть не ту вкладку, это трата времении раздражает
вся информация в одном месте	нет деления на недели	*	разделение на стэйджи	нужно найти определенную дату и определенный таск, что непросто даже тем кто уже давно знаком с расписанием
приятный внешний вид	не выделены главные таски, вообще ничего не выделено, стена текста	*		чтобы понять как пользоваться - нужно провести стрим, на это уходит время
наглядно видно тип задания (test, interview, task, deadline)		*		внешний вид - это таблица, немного разукрашенная. Но при любом объеме ее заполнения она превращается в кашу.
		*		когда работает много пользователей одновременно тупит или вообще не открывается

Идеальное расписание

1. полностью готово ДО старта курса
2. всегда актуально, то есть изменения сначала вносятся и потом анонсируются в чатах
3. пройденные задания и те у которых прошел дедлайн отмечены более светлым шрифтом
4. расписание должно быть в rs-app, то есть все в 1 месте

Определение потребностей пользователей

Проведен опрос среди студентов и менторов:

• каким они видят идеальное расписание,
• чего им не хватает в действующем расписании и в расписании rs app,
• какие у этих двух расписаний преимущества и недостатки с точки зрения пользователей

Ответы:

1. неудобная статистика заданий сделано/не сделано. Нет четкого чек-листа

2. Все расписание в экселе, ссылки не очень хорошо систематизированы. Наверное, в экселе это сложно
   сделать (или невозможно). Но мне лично неудобно. Особенно что задание в одном месте, решать задачи в другом,
   видео в третьем, а отправлять из четвертого. Т.к. это для совсем новичков, вносит неразбериху.
   "Было бы удобнее сделать все (или хотя бы большую часть как в htmlacademy). Вот сейчас мой кабинет студента выглядит так
   http://joxi.ru/p27N6agTNpjRlm"

3. "Программа в html academy выглядит вот так, и это тоже удобно. Я понимаю, что я сделала, а что еще нет.
   http://joxi.ru/eAOP0z5iknq8xr"

4. "Еще я сейчас занимаюсь на другой платформе, там очень удобные баллы по ДЗ. Сразу видно, сделала ли я задание и
   сколько баллов получила. Вот ссылка на сайт https://itgid.info/course/javascript-2
   Вот скрин. Лично мне оч нравится такой формат, легко ориентироваться.
   И сразу понятно, что не сделано и куда двигаться дальше - http://joxi.ru/LmGPq97ild5Od2"

5. "вот скрин ответа по ДЗ от преподавателя (там же, не отходя от кассы) - http://joxi.ru/J2bPNgJiVELner"

6. вот мне бы хотелось чтобы все было в одном месте и виден прогресс. Потому что у меня сейчас так: открываешь дискорд,
   там ссылка на задание, с задания на гитхаб, с гитхаба на codewars(17 разных ссылок), оттуда переходишь по ссылке
   в приложение, оттуда ссылка на тестирование по юзернику. В этот момент тебе кто-то звонит, ты выходишь из комнаты,
   и через 10 минут, когда возвращаешься, у тебя 23 открытых ссылки. Главное чтобы в это время ребенок не успел
   поклацать по клавиатуре)) И ты сидишь со своими 22 ссылками и пытаешься вспомнить, кто ты есть и зачем ты здесь)).
   это я утрирую конечно, но смысл примерно такой)

7. Если не считать того , что расписания не синхронизированы, что они не доделаны и пока редактируются,
   я бы для себя в google docs выделила цветом выдачу таск, помимо дедлайнов, а то я когда смотрю расписание,
   все время переживаю, что пропустила, не увидела, не заметила какое-то задание.

8. неудобно что это гугл-док. На платформе было бы удобнее, чтобы была возможность ставить галочки о прохождении этапа.
   Например, я сейчас копировала себе всю таблицу и зеленой заливкой отмечаю что выполнено.
   Но минус в том, что это моя локальная таблица. Если что-то поменяется в главном расписании, я могу это потерять.
   Чтобы не потерялось, я захожу раз в 2-3 дня и сверяю координаты.
   Пока идет 1-я неделя обучения это норм. Но потом можно что-то упустить из-за большого кол-ва информации.
   Вот у меня в академии сейчас так, и мне так намного удобнее https://pastenow.ru/A5MB1
   Сделаное зелененьким, остальное выделено серым. Сложно перепутать или пропустить что-то)
   1.если бы расписание было полностью готово, я бы тоже его себе скопировала и там бы уже сама и цветами выделила,
   что и как надо, отметила бы что уже сдала, какие лекции посмотрела.

9. расписание в гугл доках, когда над ним работает много пользователей одновременно тупит или вообще не открывается

Идеи по улучшению расписания

1. когда человек заходит в rs app - он сразу видит меню слева, как например, в lingvist - http://joxi.ru/zANPpzQijO5bXm
   там слева меню, при наведении раскрывается и так людям будет понятно где что,
   
   ссылки на доки слева в меню,
   
   ссылки на чат слева в меню и на расписание тоже.
2. все задания должны быть в rs-app, включая самообучение
3. из расписания всего 1 переход:
   • на гитхаб (и там уже пояснения и много ссылок)
   • на ютуб
   • на сайт по теме
     Но не милллион ссылок тк люди путаются
4. если для выделения используются цвета, то отдельно выделены подсказки по цветам - что они означают
   и не нужно догадываться и првоодить для этого отдельный стрим
   
   
   

Макет приложения

По клику вы перейдете на макет приложения в Figma

Документация для разработчиков

Требования

1. Mac OS X, Windows, или Linux
2. Yarn package + Node.js v6.5 или выше
   
   
   

Технологии проекта

• React
• Typescript
• Ant Design
• Redux и Redux Saga
  
  
  

Особенности приложения

• выбор курса

Возможности студента:

• просмотр расписания в виде таблицы (основная форма расписания), календаря либо списка
• просмотр детальной информации об отдельных заданиях расписания. Структуру страницы задания для разных типов заданий вам необходимо продумать самостоятельно
• сохранение расписания в виде таблицы, списка или календаря. Оптимальные форматы файлов (.txt, .pdf, .csv etc) для сохранения расписания определите исходя из потребностей пользователей

Дополнительные возможности ментора:

• редактирование расписания - добавление, удаление и изменение данных
• редактирование страницы задания - добавление, удаление и изменение данных
  
  
  

Установка приложения

установка приложения через yarn

как установить yarn, официальная документация на русском

yarn install

yarn start

Библиотеки и модули

emotion

Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

SVGR

Transform SVGs into React components.

lodash

Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.
Lodash’s modular methods are great for:

• Iterating arrays, objects, & strings
• Manipulating & testing values
• Creating composite functions

ramda

The primary distinguishing features of Ramda are:

• Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple, elegant code.
• Ramda functions are automatically curried. This allows you to easily build up new functions from old ones simply by not supplying the final parameters.
• The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on is generally supplied last.
  The last two points together make it very easy to build functions as sequences of simpler functions, each of which transforms the data and passes it along to the next. Ramda is designed to support this style of coding.

styled-components

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

superagent

Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features

dotenv

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.

fs-extra

fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILE errors. It should be a drop in replacement for fs.

downloadjs

Client-side file downloading using JS and HTML5.
The download() function is used to trigger a file download from JavaScript. It specifies the contents and name of a new file placed in the browser's download directory. The input can be a String, Blob, or Typed Array of data, or via a dataURL representing the file's data as base64 or url-encoded string. No matter the input format, download() saves a file using the specified file name and mime information in the same manner as a server using a Content-Disposition HTTP header.

rc-tooltip

React Tooltip

lint-staged

Run linters against staged git files and don't let 💩 slip into your code base!

moment

Parse, validate, manipulate,
and display dates and times in JavaScript.

ts-pnp

This package exports a function that can be used to implement the resolveModuleName hook from CompilerHost. It mimics the interface from the one you'd typically use and, as all other PnP plugins, works just fine whether your application is actually running under PnP or not.

Обратная связь

Для обратной связи пишите в канал дискорда - https://discord.com/channels/720532874629087253/720532874629087256