Groupd Mobile Application
1.0.0
Ionic 2 프레임 워크를 사용하여 개발 한 모바일 애플리케이션은 GroupD의 또 다른 프론트 엔드 - 스타트 업 프로젝트를위한 팀 동료를 찾는 소셜 네트워킹 응용 프로그램으로 작용합니다. 3 년째, 소프트웨어 개발.
Groupd-Mobile-Application은 한 학기 3 학년 프로젝트에 대한 과제로 수행되었습니다. 이 과제는 Imervin과 함께 그룹 프로젝트로 고안되어 개발되었습니다. 크로스 플랫폼 모바일 애플리케이션 인 Groupd-Mobile-Application은 3 개의 리포지토리 중 하나입니다. 다른 두 저장소에는 GroupD-Backend, 양 당사자의 기여가 포함 된 GroupD API 및 Imervin이 개발 한 웹 응용 프로그램 GroupD-Frontend가 있습니다. GroupD에 대한 자세한 내용은 About GroupD 섹션을 참조하십시오.
고려해야 할 사항 :
GroupD는 사용자가 팀 동료가 자신이 가질 수있는 프로젝트 아이디어를 찾을 수있는 팀 동료를 찾도록 도와주기 위해 고안된 소셜 네트워킹 사이트입니다. GroupD는 개발자를 염두에두고 설계되었지만 GroupD는 모든 직업의 사용자를 권장하고 환영 하며이 플랫폼을 사용하여 팀원을 찾아야합니다. Ervin과 저는 공유 데이터베이스 (데이터베이스 스키마 용 GroupD 이유 참조)와 RESTFUL API를 개발하여 데이터베이스를 관리하고 CRUD 기능을 관리하여 두 개의 프론트 엔드를 지원합니다 (전체 문서화는 GroupD-Backend 참조). GroupD는 사용자가 원하는 프로젝트를 게시하고 다른 사용자와 의사 소통하며 다른 사용자와 프로젝트를 수행 할 수 있도록했습니다. GroupD는 레크리에이션 및/또는 경험을 얻고 결국 작업 한 프로젝트에서 포트폴리오를 구축하는 데 사용될 수 있습니다. GroupD는 또한 스타트 업 비즈니스를 위해 팀원을 찾는 데 유용합니다.
웹 애플리케이션에 대한 완전한 가입은 Groupd-Frontend를 참조하십시오.
원래 아이디어에서 분리 한 후, 나는 반 친구의 프로젝트 인 Imervin에 합류했습니다. 우리는 또한 Github에서의 공동 작업을 경험하고 연습하기 위해 그룹에서 일하기를 간절히 원했습니다. Ervin은 웹 응용 프로그램과 동등한 모바일 응용 프로그램의 아이디어를 환영했습니다. 그룹을 구성하기 위해 참여하여 추가 기능을 추가 할 수 있습니다. 함께 아래에 첨부 된 새로운 데이터베이스 스키마를 설계하고 이러한 변경 사항에 해당하도록 API를 업데이트했습니다.
저의 원래 아이디어는 Windows 데스크탑 보안 앱인 암호화 Keeper를 구축하는 것이 었습니다.
골키퍼 암호화 :
문제 :
이 아이디어를 연말 프로젝트로 버렸지만이 프로젝트 구현을 포기하고 싶지는 않습니다. 이번 학기에 Windows Universal Platform Application을 만들어야하는 과제에 대한 얼굴 인식을 이미 구현했습니다.이 Wup 응용 프로그램은 Github : Safe-Note에서 찾을 수 있으며 Windows Store : Safe (Safe Note 이름은 제출 시점에 사용할 수 없었습니다).
주요 기능 :
추가 기능
데이터가 언제 변경 될지 지능적으로 아는 Sidemenu로 GroupD-Mobile 신청을 설계했습니다. 사용자 데이터 제공 업체는 사용자를 인출하거나 로그인하고 로그인 한 이벤트를 트리거하여 측면 메뉴를 변경합니다. 사용자 데이터는 또한 로컬 스토리지에 현재 사용자를 저장하고 변경의 모든 리소스를 경고하기 위해 이벤트를 트리거하여 사용자를 설정합니다. 모든 페이지에서로드 및 Reload에서 현재 사용자는 API에서 다시로드되며 사용자 데이터 제공 업체는 모든 리소스에 변경 사항을 알리며 리소스가 스토리지에서 새 데이터를 비동기로 가져옵니다.
로그인 메뉴는 두 섹션으로 구성됩니다.
로그인 된 메뉴는 세 가지 섹션으로 구성됩니다.
가입하십시오
가입 페이지는 슬라이드 세트로 구성되며 각 슬라이드의 양식이 가입 데이터를 가져옵니다. 나는 Angular 2의 Formbuilder를 사용하여 내장 유효성 검사기 및 사용자 정의 유효성 검사기를 사용하여 입력을 실시간으로 검증했습니다. 불행히도, 나는 유효성 검사기의 메소드가 정적이기 때문에 비동기 사용자 정의 사용자 이름을 이용할 수있는 변환기를 작동시킬 수 없었습니다. 데이터가 제출되면 사용자 이름의 가용성에 대한 유효성 검사가 수행됩니다. 사용자 이름이 이미 가져 오면 사용자는 자동으로 필요한 슬라이드로 가져 와서 사용자 이름을 사용한다는 경고를받습니다. 사용자 이름을 사용할 수 있으면 데이터가 사용자로 저장되고 양식이 재설정되고 사용자는 성공에 대해 경고하고 로그인 페이지로 바로 이동할 수있는 옵션이 주어집니다.
로그인하십시오
로그인 페이지는 자체 설명이 꽤 많으며 사용자는 사용자 이름과 비밀번호로 로그인 할 수 있습니다. 사용자 이름이 존재하지 않으면 사용자 이름이 찾을 수 없음을 알려줍니다. 사용자 이름이 존재하고 비밀번호가 유효하지 않으면 사용자에게도 경고합니다. 사용자 이름과 비밀번호가 일치하는 경우 위에서 설명한대로 사용자 제공 업체가 사용자를 로그인하고 로그인 한 사용자로 홈페이지로 이전됩니다. 로그인 상태는 스토리지에 저장되므로 사용자가 로그 아웃하지 않는 한 사용자가 다음 애플리케이션 시작에 이미 로그인됩니다.
지도 시간
GroupD를 설명하는 슬라이드 세트와 사용 방법에 대한 간단한 설명.
집
홈페이지는 별도의 카드로 표시되는 모든 프로젝트 목록으로 구성되며 각 프로젝트 카드에는 프로젝트 이름, 프로젝트 썸네일 설명, 생성 된 시간 및 사용 가능한 위치의 양이 있습니다. 각 카드에는 두 개의 버튼도 있습니다. 하나는 사용자가 즐겨 찾기/북마크에 또는 프로젝트를 추가하거나 제거하고 프로젝트 페이지에서 프로젝트를 볼 수 있습니다.
프로젝트 페이지
프로젝트 페이지는 프로젝트 ID를 매개 변수로 가져옵니다. 여기에서 프로젝트의 데이터와 제작자의 데이터를 가져옵니다. 이 페이지는 프로젝트 카드와 Creator 카드의 두 카드로 구성됩니다. 프로젝트 제작자가 계정을 삭제했거나 발견되지 않은 경우 제작자 카드가 나타나지 않습니다.
Creator 카드는 제작자의 성별 (남성 또는 여성 - 기본값은 여성), 제작자 이름 및 버튼에 의해 결정된 자리 표시 자 아이콘으로 구성됩니다. 뷰어가 제작자 인 경우 버튼은 뷰어를 편집 프로젝트 페이지로 가져옵니다. 시청자가 제작자가 아닌 경우 버튼은 사용자를 Creator의 프로필로 가져옵니다.
프로젝트 카드는 프로젝트 이름, 프로젝트 썸네일 설명, 프로젝트 설명, 최대 위치, 사용 가능한 위치, 태그 및 멤버로 구성됩니다. 프로젝트 멤버가 클릭되면 GroupD는이 멤버가 여전히 존재하는지 확인합니다 (회원이 프로필을 삭제했을 수도 있고 다른 새 사용자가 이름을 찍었을 수 있음). 멤버가 존재하면 뷰어는 회원의 프로필로 이전됩니다. 프로젝트 카드에는 또한 카드 바닥 글에 두 개의 버튼이 있습니다. 댓글 섹션을 보여주고 숨겨지는 댓글 버튼과 시청자의 프로젝트에 또는 프로젝트를 추가하거나 제거하는 좋아하는 버튼.
주석 섹션은 프로젝트 주석 목록으로 구성되며 아래에 주석을 추가 할 수있는 입력 상자가 있습니다.
프로젝트 편집
편집 프로젝트 페이지는 단순히 입력 상자에로드 된 프로젝트가 이전에 입력/저장된 데이터가있는 양식입니다. 프로젝트 편집 페이지의 양식은 프로젝트 페이지의 양식과 매우 유사하며, 차이는 프로젝트 편집 페이지에 있으며 제작자는 멤버를 추가 할 수 있습니다. 제작자는 데이터베이스에 존재하는 멤버 만 추가 할 수 있습니다. 제작자에게는 두 가지 옵션이 주어지고 변경 사항을 저장하거나 삭제합니다. 클릭하면 경고 경고로 두 옵션이 모두 수신됩니다. 저장 변경에서 변경된 구성원의 사용자 문서가 업데이트되고 프로젝트 문서도 업데이트됩니다. Delete에서 제작자 및 회원의 프로젝트 인스턴스가 제거되고 프로젝트가 영구적으로 삭제됩니다.
새로운 프로젝트
프로젝트 편집 페이지와 마찬가지로 새 프로젝트 페이지는 실시간 가치가있는 양식입니다. 새 프로젝트를 추가 할 수있는 단일 버튼이 있습니다.
찾다
검색은 탭이있는 페이지이며 탭은 검색 프로젝트 및 검색 사용자입니다.
검색 프로젝트는 사용자 정의 파이프를 사용하여 프로젝트 이름 또는 태그로 실시간으로 프로젝트를 검색합니다. 이것은 작업 할 프로젝트를 찾는 사용자에게 이상적입니다. 프로젝트 목록의 레이아웃은 홈페이지와 동일합니다.
검색 사용자는 사용자 정의 파이프를 사용하여 사용자 이름이나 기술로 실시간으로 사용자를 검색합니다. 이는 사용자가 프로젝트 작업을 수행하는 사용자에게 이상적입니다. 표시된 각 사용자는 성 아이콘, 직업, 이메일 및 태그와 같은 세부 사항과 함께 카드에 표시됩니다. 카드에는 선택한 사용자 페이지로 이동하는 버튼도 있습니다.
윤곽
프로필 페이지는 사용자 이름을 매개 변수로 가져 가면 사용자 문서를 가져 와서 뷰어의 프로필인지 확인합니다. 프로필에는 사용자의 사용자 이름, 위치, 직업, 이메일, 등급 및 기술이 표시됩니다. 시청자 프로파일 인 경우 뷰어에 편집 버튼이 표시되며, 이는 계정 편집 페이지 (아래 설명)로 이전하고 Show Raters 버튼으로 모든 평가자와 그 요금 목록과 함께 모달 팝업이됩니다. 뷰어는 평가자의 사용자 이름을 클릭하여 프로파일로 이전 할 수도 있습니다. 뷰어의 프로필이 아닌 경우 뷰어에 속도 버튼이 표시됩니다. 속도 버튼이 클릭되면 등급을 입력 할 입력 상자와 함께 경고가 나타납니다. 시청자가 이전 에이 사람을 평가 한 경우 마지막 요금을 덮어 씁니다. 회원이든 제작자이든 사용자의 프로젝트도 홈페이지의 프로젝트와 동일한 형식으로 표시됩니다.
즐겨 찾기
가장 좋아하는 페이지에는 사용자의 즐겨 찾기에 저장된 모든 프로젝트가 표시됩니다. 프로젝트 목록의 레이아웃은 홈페이지와 동일합니다.
계정 편집
계정 편집 페이지는 단순히 입력 상자에로드 된 프로젝트가 이전에 입력/저장된 데이터가있는 양식입니다. 뷰어에게는 두 가지 옵션이 주어지고 변경 사항을 저장하거나 삭제합니다. 클릭하면 경고 경고로 두 옵션이 모두 수신됩니다. 저장 변경에서 사용자 문서가 업데이트됩니다. 삭제시, 사용자의 등급은 다른 사용자의 등급에서 제거됩니다 (등급이 삭제되지 않은 경우 다른 사용자가 사용 가능한 경우 동일한 사용자 이름을 사용하면 등급이 문제가 될 수 있으며 사용자 문서가 데이터베이스에서 삭제됩니다.
로그 아웃하십시오
로그 아웃 페이지에는 사용자 데이터 제공 업체가 호출하여 로그 아웃 이벤트를 tigger하기 위해 메뉴를 변경하고 로컬 스토리지를 지우고 로그인 페이지로 이전하는 버튼이 있습니다.
이온
이온 성 프레임 워크는 HTML, CSS 및 JavaScript (Angular)를 사용하여 크로스 플랫폼 모바일 애플리케이션 또는 웹 응용 프로그램을 작성하는 데 사용될 수 있습니다.
이온 성 1 대 이온 성 2
Ionic 1은 각도 1, HTML 및 CSS를 사용하는 반면 이온 2는 각도 2, HTML 및 SCSS를 사용합니다.
왜 Ionic 2인가?
Ervin은 이미 Angular 1을 사용하기 시작 했으므로 이미 대부분의 작업이 완료되었으므로 Ionic 1을 사용하여 모바일 애플리케이션을 구축하는 것이 더 현명한 것으로 보일 수 있습니다. 그러나 나는 오히려 내 작품이 내 자신의 일을 완전히 위엄있게 만들려고했기 때문에 Ionic 2를 선택했으며, 주된 이유는 Ionic 2가 많은 개선을 제공하기 때문입니다. Josh Morony는 이러한 개선 사항을 효과적으로 설명합니다. 제 생각에, Ionic 2는 새로운 Ionic 버전 인 Ionic 2가 계속 개선 될 것이며 Ionic 팀의 초점이 될 것입니다. Angular 2의 경우 AngularJS 팀에 대해서도 마찬가지입니다. 나는 또한 TypeScript 사용을 경험하기를 간절히 원했습니다.
Groupd-Backend : 실행 방법의 단계를 따르십시오.
Ionic 2가 설치되지 않은 경우 여기에있는 이온 웹 사이트의 설치 단계를 따르십시오.
이 저장소를 복제하고 명령을 실행하십시오.
npm install
다른 모든 것이 설정되어 실행되면. 현재 디렉토리가 Groupd-Mobile-Application (저장소의 하위 디렉토리)인지 확인하십시오. 그런 다음 다음 명령을 실행합니다.
ionic lab
결론적으로,이 프로젝트는 보람있는 경험이었습니다. 그룹에서 일하고 Ionic 2를 처음으로 사용하여 처음으로 둘 다 큰 공헌자입니다. 프로젝트를 다시 만들려면 다른 프로젝트 아이디어 시도가 아니라 처음 부터이 프로젝트 아이디어를 시작할 것입니다. 또한 주석이 프로젝트와 관련된 데이터이므로 프로젝트 문서에 주석을 포함시키기보다는 별도의 주석 문서를 참조하지만, 주석은 다른 프로젝트 데이터와 다른 휘발성으로 변경됩니다. 의견은 또한 무한한 금액으로 상당히 빠르게 성장할 수 있으며, 프로젝트 문서에 큰 규모가 가능하다는 부담을 주어서는 안됩니다. 마지막으로, 고유 한 사용자 이름 대신 고유 ID를 사용하는 것을 고려하고 "Dormant": True/False와 같은 속성을 확실히 추가 할 것입니다. 이 속성은 실제로 사용자 문서를 삭제하는 대신 사용되며, 기존/신규 사용자와 혼동되는 참조 사용자 이름 (또는 변경 될 경우 ID)의 문제를 해결하고 오래된 사용자에게 복구 옵션을 제공하는 데 유용합니다.
참조 :
이온 성 프레임 워크
http://stackoverflow.com/questions/13935733/mongoose-limit-port- 및-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- 이온 -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/repeately-background-task-ionic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/detect-if-string-contains-any-an-Anypaces
https://www.joshmorony.com/advanced-forms-validation-iniionic-2/
http://stackoverflow.com/questions/35039610/angular2-manally-set-value-for-formbuilder-control
https://ionicframework.com/docs/v2/cli/generate/
https://www.youtube.com/watch?v=-ynj-qrhvgc
https://ionicframework.com/docs/v2/resources/forms/
https://www.youtube.com/watch?v=-O_VGPJP-Q0
http://blog.ionic.io/10-minutes-with-ionic-2-adding-pages-and-navigation/
https://www.joshmorony.com/a-simple-guide-to-navigation-in- 이온 -2/
http://reactivex.io/documentation/observable.html
https://www.youtube.com/watch?v=ei7fsoxkpl0
https://egghead.io/lessons/javaScript-introducting-shobservable
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-side-menu-tabs/
https://developer.mozilla.org/en/docs/web/javascript/reference/global_objects/string/trim
http://pointdeveloper.com/how-to-place-inic-2-tabs-at-the-bottom-or-top-of-the-screen/
http://www.neilberry.com/how-to-run-youriounic-app-on-real-devices/
Tara O'Kelly [email protected]
