rusaub / justlinksite Goto Github PK

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

При разработке сайта было решено использовать язык программирования JavaScript, а именно его библиотеку React. Этот выбор обусловлен тем, что React позволяет эффективно работать с HTML и CSS. Это означает, что в процессе создания сайта HTML (язык разметки) и CSS (язык стилей) также являются неотъемлемой частью проекта.

Ниже приведена статистика того какой язык программирования чаще всего использовался для нашего сайта:

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

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

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

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

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

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

Для разработки мобильного приложения наш выбор в пользу React Native, обусловлен его основным преимуществом - возможностью создавать приложения, совместимые как с операционной системой Android, так и с iOS.

React Native - это фреймворк для разработки мобильных приложений, основанный на React, который позволяет разработчикам создавать приложения, используя общий код для двух популярных операционных систем - Android и iOS. Это достигается благодаря концепции "write once, run anywhere" (напиши один раз, запусти где угодно), которая позволяет использовать один и тот же код для создания функционально и визуально схожих приложений для обеих платформ.

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

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

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

Для сайта:

Для приложения:

На главной странице сайта реализована структура, которая обеспечивает пользователям навигацию по основным разделам и предоставляет доступ к важной информации. Меню содержит восемь элементов: Home, Agenda: Позволяет просматривать план мероприятий или расписание, Events: Предоставляет информацию о предстоящих событиях в учреждении, Topics: Содержит темы для обсуждений или важные темы, касающиеся учреждения, Messages: Позволяет пользователям взаимодействовать и обмениваться сообщениями, Users: Доступен только для администраторов, юристов и преподавателей, предоставляет возможность управления пользователями или просмотра информации о них, Documents: Предоставляет доступ к документам или ресурсам, связанным с учреждением, Settings: Позволяет настраивать параметры и функции сайта или приложения.

Домашняя страница (Home) состоит из трех секций, в первой секции отображаются важные события, связанные с жизнью учреждения, такие как мероприятия, встречи, или другие значимые события. Вторая секция "Новости": В этой секции пользователи могут ознакомиться с актуальными новостями, касающимися учреждения, образования или юридических аспектов. Секция "FAQ": Предоставляет ответы на часто задаваемые вопросы, что помогает пользователям быстро находить нужную информацию.

В мобильном приложении присутствует четыре элемента навигационной панели. Home (Домашняя страница): Отвечает за основной контент и информацию. Chats (Чаты): Предоставляет возможность общения и обмена сообщениями между пользователями.Topics (Темы): Содержит разделы для обсуждений важных тем и вопросов.Profile (Профиль): Позволяет пользователям управлять своей учетной записью и персональной информацией.

Домашняя страница (Home) мы решили добавить карусель событий который отображает важные события и мероприятия, происходящие в учреждении. Это позволяет пользователям быстро ознакомиться с ключевыми событиями и активностями. А также события на ближайшие два дня который позволяет предоставлять краткий обзор событий, запланированных на ближайшие дни.

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

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

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

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

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

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

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

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

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

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

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

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

Такой подход позволяет создать разнообразные возможности для подростков и обеспечить выбор и разнообразие событий на платформе, способствуя их личностному развитию и расширению сферы интересов

На странице чатов предоставляется возможность общаться в режиме реального времени благодаря сервису "RealTime Database", предоставленному Firebase. Этот сервис обеспечивает моментальную передачу сообщений между пользователями, создавая удобную и оперативную среду для общения. Пользователи могут не только обмениваться текстовыми сообщениями, но и делиться документами, что улучшает функционал чатов и обеспечивает более глубокое взаимодействие. Однако наиболее значимой особенностью является возможность предложения встречи прямо в чате. Для этого пользователю нужно нажать кнопку "Ask for a meeting" рядом с профилем собеседника. Если собеседник соглашается на встречу, то будет автоматически добавлено новое событие в календаре с обговоренным временем.

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

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

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

Настройки конфиденциальности и безопасности аккаунта, включая управление паролем, настройки конфиденциальности профиля и данные для восстановления аккаунта.

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