Groupd Mobile Application
1.0.0
Мобильное приложение, разработанное с использованием Framework Ionic 2, которое выступает в качестве еще одного фронтального класса для GroupD - приложение для социальных сетей, чтобы найти товарищей по команде для начальных проектов. Третий год, разработка программного обеспечения.
GroupD-Mobile-применение было предпринято в качестве задания для проекта третьего года в течение длительного семестра. Это задание было разработано и разработано как групповой проект с Imervin. GroupD-Mobile-применение, кросс-платформное мобильное приложение, является одним из трех репозиториев. Два других репозитория включают Groupd-Backend, API GroupD с вкладами обеих сторон и Frontend GroupD, веб-приложение, разработанное Imervin. Для получения более подробной информации о GroupD, пожалуйста, перейдите в раздел ABA GroupD.
Указывает на рассмотрение:
GroupD - это сайт социальных сетей, разработанный для того, чтобы помочь пользователям найти товарищей по команде работать над идеей проекта, которую они могут иметь. GroupD была разработана с учетом разработчиков, однако GroupD поощряет и приветствует пользователей всех профессий и необходимо использовать эту платформу для поиска товарищей по команде. Вместе мы с Эрвином разработали общую базу данных (см. Почему GroupD для схемы базы данных) и RESTFUL API для управления нашей базой данных и администрирования наших функций CRUD, чтобы помочь нашим двум фронтальным веществам (см. GroupD-Backend для полной документации). Мы хотели, чтобы GroupD позволил пользователям публиковать свои желаемые проекты, общаться с другими пользователями и работать над проектами с другими пользователями. GroupD может использоваться для отдыха и/или для получения опыта и в конечном итоге создать портфель из проектов, над которыми они работали. GroupD также полезна для поиска членов команды для стартового бизнеса.
См. Groupd-Fontend для полного доклада в веб-приложении.
После моего отряда от моей первоначальной идеи я присоединился к проекту одноклассника, Имерервину, который казался мне очень дружелюбным. Мы также стремились работать в группе, чтобы испытать и практиковать сотрудничество с GitHub. Эрвин приветствовал идею мобильного приложения, эквивалентного его веб -приложению. Присоединяясь, чтобы сформировать группу, мы могли бы добавить дополнительные функции. Вместе мы разработали новую схему базы данных, прикрепленную ниже и обновили API, чтобы соответствовать этим изменениям.
Моя оригинальная идея состояла в том, чтобы построить приложение для безопасности настольных столов Windows, Encrypt Keeper.
Хранитель шифрования:
Проблемы:
Хотя я отказался от этой идеи в качестве проекта «Конец года», я не хочу отказываться от реализации этого проекта, возможно, не в качестве приложения Windows Store. Я уже внедрил распознавание лиц для назначения, где нам пришлось создать приложение Windows Universal Platform в этом семестре, это приложение WUP можно найти на GitHub: Safe-Note, а в магазине Windows: примечание Safe (с безопасная нота имени не было доступно во время подчинения).
Основные особенности:
Дополнительные функции
Я разработал применение GroupD-Mobile с Sidemenu, которая разумно знает, когда данные меняются. Поставщик пользовательских данных вызван для входа или выхода пользователя, и запускает зарегистрированное событие, чтобы изменить боковое меню. Пользовательские данные также устанавливают пользователя, сохраняя текущего пользователя в локальном хранилище и запуская событие, чтобы предупредить любые ресурсы об изменении. На каждой странице загрузка и перезагрузить текущий пользователь перезагружается из API, и поставщик пользовательских данных будет предупреждать о любых ресурсах изменений, где ресурсы асинхронно получат новые данные из хранилища.
Зарегистрированное меню состоит из двух разделов:
Зарегистрированное в меню состоит из трех разделов:
Зарегистрироваться
Страница регистрации состоит из набора слайдов, с формой в каждом слайде для получения данных регистрации. Я использовал FormBuilder Angular 2 для проверки ввода в режиме реального времени со встроенными валидаторами и пользовательскими валидаторами. К сожалению, я не мог получить асинхронную пользовательскую валидатор имени пользователя, так как методы валидатора статичны, я не мог выяснить, как использовать HTTP-вызов внутри валидатора. Валидация для имени пользователя выполняется после отправки данных. Если имя пользователя уже взято, пользователь автоматически будет отправлен на необходимый слайд и будет предупрежден о том, что имя пользователя принимается. Если имя пользователя доступно, данные сохраняются в качестве пользователя, форма сбрасывается, а пользователь предупреждается об успехе и предоставляется возможность перейти на страницу в журнале.
Авторизоваться
Страница входа в систему является довольно самостоятельной, пользователь может войти в систему со своим именем пользователя и паролем. Если имя пользователя не существует, пользователь будет предупрежден о том, что имя пользователя не было найдено. Если имя пользователя существует и пароль недействителен, пользователь также будет предупрежден об этом. Если имя пользователя и пароль соответствуют совпадению, пользователь будет вошел в систему провайдером пользователей, как описано выше, и переведен на домашнюю страницу в качестве регистрации пользователя. Состояние входа в систему будет сохранено в хранилище, чтобы пользователь уже был вошел в систему на следующих запусках приложения, если пользователь не выйдет из системы.
Учебник
Набор слайдов, объясняющих группу и краткое описание того, как его использовать.
Дом
Домашняя страница состоит из списка всех проектов, отображаемых в отдельных картах, у каждой карты проекта есть название проекта, описание миниатюры проекта, созданное время и количество доступных позиций. Каждая карта также имеет две кнопки; Один, чтобы добавить или удалить проект в или из фаворитов пользователя/закладок, и один для просмотра проекта на странице проекта.
Project Page
Страница проекта принимает идентификатор проекта в качестве параметра, оттуда она получает данные проекта и данные создателя. Эта страница состоит из двух карт, карты проекта и карты Creator. Если создатель проекта удалил свою учетную запись или не была найдена, карта Creator не появляется.
Карта Creator состоит из иконы заполнителя, определяемой полом создателя (мужчина или женщина - по умолчанию - женщина), имя создателя и кнопку. Если зритель является создателем, кнопка приведет зрителя на страницу «Редактировать проект». Если зритель не является создателем, кнопка приведет пользователя в профиль создателя.
Карта проекта состоит из названия проекта, миниатюр проекта, описание проекта, максимальные позиции, доступные позиции, теги и участники. Если участник проекта нажимается, GroupD проверит, существует ли этот участник (участник, возможно, удалил свой профиль, тогда другой новый пользователь мог воспользоваться своим именем). Если участник существует, зритель будет перемещен в профиль участника. Карта проекта также имеет две кнопки, расположенные в нижнем колонтитуле карты; Кнопка комментариев, которая показывает и скрывает раздел комментариев, и любимая кнопка для добавления или удаления проекта в проекты зрителя или из просмотра.
Раздел комментариев состоит из списка комментариев проекта, с ящиком для ввода, чтобы добавить комментарий внизу.
Редактировать проект
Страница «Редактировать проект» - это просто форма с ранее введенными/сохраненными данными, загруженными в поля ввода. Форма страницы «Редактировать проект» очень похожа на форму страницы проекта, разница в том, что на странице «Редактировать проект» создатель может добавить участников. Создатель может добавить только участников, которые существуют в базе данных. Создателю дают два варианта, сохранять изменения или удалить. Оба варианта получены с предупреждением о предупреждении при нажатии. При изменениях сохранения пользовательский документ любых измененных участников обновляется, а документ проекта также обновляется. При удалении любой экземпляр проекта в создателе и членах удаляется, и проект удаляется навсегда.
Новый проект
Подобно странице «Редактировать проект», новая страница проекта представляет собой форму с валитацией в реальном времени. У него есть одна кнопка, чтобы добавить новый проект.
Поиск
Поиск - это страница с вкладками, причем вкладки: Проект поиска и пользователи поиска.
Поисковые проекты использует пользовательскую трубу для поиска проектов по названию проекта или тегам в режиме реального времени. Это идеально подходит для пользователей, ищущих проекты, над которыми нужно работать. Макет списка проектов такой же, как и домашняя страница.
Пользователи поиска используют пользовательскую трубу для поиска пользователей по имени пользователя или навыкам в режиме реального времени. Это идеально подходит для пользователей, которые ищут пользователей, работают над своими проектами. Каждый отображаемый пользователь отображается на карте со следующей сведением: Гендерный значок, занятие, электронная почта и теги. На карте также есть кнопка, чтобы перейти на страницу выбранного пользователя.
Профиль
Страница профиля принимает имя пользователя в качестве параметра, затем получает пользовательский документ и проверяет, является ли это профилем зрителя. В профиле отображается имя пользователя, местоположение, занятие, электронная почта, рейтинг и навыки. Если это профиль зрителей, зритель показывает кнопку «Редактировать», которая перейдет на страницу редактирования учетной записи (описанную ниже), и кнопку Show Raters, которая будет иметь модальное всплывающее окно со списком всех оценщиков и их скоростей. Зритель также может нажать на имена пользователей Rater, чтобы переехать в свои профили. Если это не профиль зрителя, зрителю будет показана кнопка скорости. Если кнопка «скорость» нажимается, оповещение появится с окном ввода, чтобы ввести рейтинг. Если зритель оценил этого человека ранее, это будет перезаписать их последний показатель. Проекты пользователя, будь то участник или создатель, также отображаются в том же формате, что и проекты на домашней странице.
Фавориты
В любимой странице будут отображаться все проекты, сохраненные в фаворитах пользователя. Макет списка проектов такой же, как и домашняя страница.
Редактировать аккаунт
Страница редактирования учетной записи - это просто форма с ранее введенными/сохраненными данными, загруженными в поля ввода. Зрителю дают два параметра, сохранить изменения или удалить. Оба варианта получены с предупреждением о предупреждении при нажатии. При изменениях сохранения пользовательский документ обновляется. При удалении рейтинги пользователя удаляются из рейтингов любого другого пользователя (если рейтинг не был удален, рейтинги могут стать проблематичными, если другой пользователь принимает одно и то же имя пользователя после его доступного), а пользовательский документ удален из базы данных.
Выходите из строя
На странице «Вход» есть кнопка, которая вызывает поставщика пользовательских данных для того, чтобы выпустить событие входа в систему, чтобы изменить меню, чтобы очистить локальное хранилище и переехать на страницу входа в систему.
Ионный
Ионная структура может использоваться для создания кросс -платформных мобильных приложений или веб -приложений с HTML, CSS и JavaScript (Angular).
Ionic 1 против Ionic 2
Ionic 1 использует Angular 1, HTML и CSS, тогда как Ionic 2 использует Angular 2, HTML и SCSS.
Почему Ionic 2?
Поскольку Эрвин уже начал использовать Angular 1, можно рассматривать как более разумное использовать Ionic 1 для создания моего мобильного приложения, поскольку у него уже была большая часть выполненной работы. Я, однако, выбрал Ionic 2, так как я бы предпочел, чтобы моя работа была полностью достойна как моя собственная, и главная причина в том, что Ionic 2 предлагает много улучшений . Джош Марония эффективно описывает эти улучшения здесь. На мой взгляд, Ionic 2, будучи более новой и улучшенной версией Ionic, будет продолжать улучшаться и будет в центре внимания команды Ionic. То же самое можно сказать и о команде AngularJS, в случае Angular 2. Я также очень хотел испытать использование TypeScript.
Следуйте шагам в Groupd-Backend: Как запустить.
Если у вас не установлен Ionic 2, следуйте этапам установки на ионном веб -сайте, найденном здесь.
Клонировать это хранилище и запустите команду:
npm install
Как только все остальное настроено и работает. Убедитесь, что ваш текущий каталог: GroupD-Mobile-применение (подкаталог репозитория). Затем запустите следующую команду:
ionic lab
В заключение, этот проект был полезным опытом. Работая в группе и впервые используя Ionic 2, оба являются отличными участниками этого. Если бы я заново рассказал о проекте, я бы начал с самого начала, а не после другой попытки идеи проекта. Я также ссылался на отдельный документ комментариев, вместо того, чтобы внедрять комментарии в документ «Проекты», так как комментарии связаны с данными с проектом, однако комментарии изменяются с различным улечением для остальных данных проекта. Комментарии также могут расти довольно быстро до, возможно, бесконечной суммы, и не должны обременять проектный документ с возможным большим размером. Наконец, я бы подумал об использовании уникального идентификатора на месте уникального имени пользователя, и я определенно добавил бы свойство, подобное «Dramnant»: True/False. Это свойство будет использовано в месте фактического удаления пользовательского документа, решит проблему ссылочных имен пользователей (или идентификаторов, если это будет изменено), которая будет запутана со старыми/новыми пользователями и будет полезным, чтобы предложить старым пользователям вариант восстановления.
Ссылки:
Ионная структура
http://stackoverflow.com/questions/13935733/mongoose-limit-ftsite-and-count-query
https://www.w3schools.com/jsref/jsref_indexof.asp
https://ionicframework.com/docs/storage/
http://ionicframework.com/docs/ionicons/
https://www.joshmorony.com/custom-pipes-in-ionic-2/
https://www.npmjs.com/package/ng2-search-filter
https://www.youtube.com/watch?v=-ZW1ZHQSDYC
https://www.youtube.com/watch?v=8gz-kbbddxm
http://stackoverflow.com/questions/32069388/Repeatly background-task-yonic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/detect-if-string-contains-iny Spaces
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-mery-set-value-for-formbuilder-control
https://ionicframework.com/docs/v2/cli/generate/
https://www.youtube.com/watch?v=-inj-qrhvgc
https://ionicframework.com/docs/v2/resources/forms/
https://www.youtube.com/watch?v=-O_VGPJP-Q0
http://blog.ionic.io/10-minutes-with-yonic-2-adding-pages-and-navigation/
https://www.joshmorony.com/a-simple-guide-tavigation-in-ionic-2/
http://reactivex.io/documentation/observable.html
https://www.youtube.com/watch?v=ei7fsoxkpl0
https://egghead.io/lessons/javascript-introducing-the-observable
https://www.youtube.com/watch?v=_FRPHSE2PZK
http://stackoverflow.com/questions/36655379/ionic-2-templates
https://github.com/driftyco/ionic2-starter-sidemenu
https://ionicframework.com/docs/v2/api/components/menu/menu/
https://blog.khophi.co/ionic-2-menu-tabs/
https://developer.mozilla.org/en/docs/web/javascript/reference/global_objects/string/trim
http://pointdeveloper.com/how-to-place-ionic-2-tabs-at-the-bottom-or-top-fthe-creen/
http://www.neilberry.com/how-torun-your-ionic-app-on-real-devices/
Тара О'Келли - [email protected]
