Groupd Mobile Application
1.0.0
แอปพลิเคชั่นมือถือที่พัฒนาขึ้นโดยใช้เฟรมเวิร์ก Ionic 2 ซึ่งทำหน้าที่เป็นอีกส่วนหนึ่งสำหรับ GroupD - แอปพลิเคชั่นเครือข่ายสังคมออนไลน์เพื่อค้นหาเพื่อนร่วมทีมสำหรับการเริ่มต้นโครงการ ปีที่สามการพัฒนาซอฟต์แวร์
กลุ่มแอพพลิเคชั่นกลุ่ม Mobile ได้ดำเนินการเป็นงานมอบหมายสำหรับโครงการปีที่สามที่ยาวนานภาคการศึกษา การมอบหมายนี้ได้รับการออกแบบและพัฒนาเป็นโครงการกลุ่มที่มี IMERVIN แอปพลิเคชั่น Mobile-Mobile-Mobile-Mobile ซึ่งเป็นหนึ่งในสามที่เก็บ อีกสองที่เก็บ ได้แก่ GroupD-Backend, กลุ่ม API ที่มีการสนับสนุนจากทั้งสองฝ่ายและ GroupD-Frontend เว็บแอปพลิเคชันที่พัฒนาโดย IMERVIN สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ GroupD โปรดไปที่ส่วนเกี่ยวกับ GroupD
คะแนนที่ต้องพิจารณา:
GroupD เป็นเว็บไซต์เครือข่ายสังคมออนไลน์ที่คิดค้นขึ้นเพื่อช่วยให้ผู้ใช้ค้นหาเพื่อนร่วมทีมในการทำงานในแนวคิดโครงการที่พวกเขาอาจมี กลุ่มได้รับการออกแบบโดยคำนึงถึงนักพัฒนาในใจอย่างไรก็ตาม GroupD สนับสนุนและยินดีต้อนรับผู้ใช้ทุกอาชีพและจำเป็นต้องใช้แพลตฟอร์มนี้เพื่อค้นหาเพื่อนร่วมทีม ร่วมกัน Ervin และฉันได้พัฒนาฐานข้อมูลที่ใช้ร่วมกัน (ดูว่าทำไมกลุ่มสำหรับสคีมาฐานข้อมูล) และ RESTFUL API เพื่อจัดการฐานข้อมูลของเราและจัดการคุณสมบัติ CRUD ของเราเพื่อช่วยสองด้านหน้าของเรา (ดู GroupD-Backend สำหรับเอกสารเต็มรูปแบบ) เราต้องการให้ GroupD อนุญาตให้ผู้ใช้โพสต์โครงการที่ต้องการสื่อสารกับผู้ใช้รายอื่นและทำงานกับโครงการกับผู้ใช้รายอื่น กลุ่มสามารถใช้ในการพักผ่อนหย่อนใจและ/หรือเพื่อรับประสบการณ์และในที่สุดก็สร้างพอร์ตโฟลิโอจากโครงการที่พวกเขาได้ทำงาน GroupD ยังมีประโยชน์สำหรับการค้นหาสมาชิกในทีมสำหรับการเริ่มต้นธุรกิจ
ดู GroupD-Frontend สำหรับการจัดทำเอกสารเต็มรูปแบบบนเว็บแอปพลิเคชัน
หลังจากการปลดจากความคิดดั้งเดิมของฉันฉันได้เข้าร่วมโครงการเพื่อนร่วมชั้น Imervin ซึ่งโครงการดูเหมือนจะเป็นมิตรกับฉันมาก นอกจากนี้เรายังกระตือรือร้นที่จะทำงานเป็นกลุ่มเพื่อสัมผัสและฝึกฝนการร่วมมือกับ GitHub Ervin ยินดีต้อนรับแนวคิดของแอปพลิเคชันมือถือเทียบเท่ากับเว็บแอปพลิเคชันของเขา การเข้าร่วมเป็นกลุ่มเราสามารถเพิ่มคุณสมบัติพิเศษได้ เราออกแบบสคีมาฐานข้อมูลใหม่ที่แนบมาด้านล่างและอัปเดต API เพื่อให้สอดคล้องกับการเปลี่ยนแปลงเหล่านี้
แนวคิดดั้งเดิมของฉันคือการสร้างแอพ Security Windows Desktop, Encrypt Keeper
ผู้ดูแลเข้ารหัสจะ:
ปัญหา:
แม้ว่าฉันจะละทิ้งความคิดนี้เป็นโครงการสิ้นปีของฉัน แต่ฉันไม่ต้องการที่จะยอมแพ้ในการใช้โครงการนี้อาจไม่ใช่แอปพลิเคชัน Windows Store ฉันได้ใช้การจดจำใบหน้าสำหรับการมอบหมายที่เราต้องสร้างแอปพลิเคชันแพลตฟอร์ม Windows Universal ภาคเรียนนี้แอปพลิเคชัน WUP นี้สามารถพบได้ใน GitHub: Safe-Note และใน Windows Store: Note Safe (Name Safe Note ไม่สามารถใช้งานได้ในเวลาที่ส่ง)
คุณสมบัติหลัก:
คุณสมบัติเพิ่มเติม
ฉันออกแบบแอพพลิเคชั่น groupD-mobile ด้วย sidemenu ที่รู้ได้อย่างชาญฉลาดเมื่อมีการเปลี่ยนแปลงข้อมูล ผู้ให้บริการข้อมูลผู้ใช้ถูกเรียกให้เข้าสู่ระบบผู้ใช้ในหรือนอกและทริกเกอร์เหตุการณ์ที่เข้าสู่ระบบเพื่อเปลี่ยนเมนูด้านข้าง ข้อมูลผู้ใช้ยังตั้งค่าผู้ใช้โดยการจัดเก็บผู้ใช้ปัจจุบันในที่เก็บข้อมูลท้องถิ่นและเรียกเหตุการณ์เพื่อแจ้งเตือนทรัพยากรใด ๆ ของการเปลี่ยนแปลง ในทุกหน้าโหลดและโหลดซ้ำผู้ใช้ปัจจุบันจะถูกโหลดใหม่จาก API และผู้ให้บริการข้อมูลผู้ใช้จะแจ้งเตือนทรัพยากรใด ๆ ของการเปลี่ยนแปลงซึ่งทรัพยากรจะได้รับข้อมูลใหม่จากการจัดเก็บแบบอะซิงโครนัส
เมนูออกจากระบบประกอบด้วยสองส่วน:
เมนูเข้าสู่ระบบประกอบด้วยสามส่วน:
ลงทะเบียน
หน้าลงทะเบียนประกอบด้วยชุดของสไลด์โดยมีแบบฟอร์มในแต่ละสไลด์เพื่อใช้ในข้อมูลการลงทะเบียน ฉันใช้ formbuilder ของ Angular 2 เพื่อตรวจสอบอินพุตแบบเรียลไทม์ด้วยตัวตรวจสอบในตัวและตัวตรวจสอบที่กำหนดเอง น่าเสียดายที่ฉันไม่สามารถใช้ชื่อผู้ใช้ที่กำหนดเองแบบอะซิงโครนัสได้เนื่องจากวิธีการของผู้ตรวจสอบความถูกต้องฉันไม่สามารถหาวิธีใช้การโทร HTTP ภายในตัวตรวจสอบได้ การตรวจสอบความถูกต้องของผู้ใช้ในชื่อผู้ใช้จะเสร็จสิ้นเมื่อข้อมูลถูกส่ง หากมีการใช้ชื่อผู้ใช้แล้วผู้ใช้จะถูกนำไปยังสไลด์ที่จำเป็นโดยอัตโนมัติและได้รับการแจ้งเตือนว่าชื่อผู้ใช้จะถูกนำมาใช้ หากชื่อผู้ใช้พร้อมใช้งานข้อมูลจะถูกบันทึกเป็นผู้ใช้แบบฟอร์มจะถูกรีเซ็ตและผู้ใช้จะได้รับการแจ้งเตือนถึงความสำเร็จและให้ตัวเลือกตรงไปที่หน้าเข้าสู่ระบบ
เข้าสู่ระบบ
หน้าเข้าสู่ระบบเป็นคำอธิบายด้วยตนเองค่อนข้างผู้ใช้สามารถเข้าสู่ระบบด้วยชื่อผู้ใช้และรหัสผ่าน หากชื่อผู้ใช้ไม่มีอยู่ผู้ใช้จะได้รับการแจ้งเตือนว่าไม่พบชื่อผู้ใช้ หากชื่อผู้ใช้มีอยู่และรหัสผ่านไม่ถูกต้องผู้ใช้ก็จะได้รับการแจ้งเตือนด้วยเช่นกัน หากชื่อผู้ใช้และรหัสผ่านเป็นการจับคู่ผู้ใช้จะเข้าสู่ระบบโดยผู้ให้บริการตามที่อธิบายไว้ข้างต้นและย้ายไปที่โฮมเพจในฐานะผู้ใช้ที่เข้าสู่ระบบ สถานะการเข้าสู่ระบบจะถูกบันทึกไว้ในพื้นที่เก็บข้อมูลเพื่อให้ผู้ใช้จะลงชื่อเข้าใช้ในการเริ่มต้นแอปพลิเคชันต่อไปนี้เว้นแต่ผู้ใช้จะออกจากระบบ
การสอน
ชุดสไลด์อธิบายกลุ่มและคำอธิบายสั้น ๆ เกี่ยวกับวิธีการใช้งาน
บ้าน
โฮมเพจประกอบด้วยรายการของโครงการทั้งหมดที่แสดงในการ์ดแยกแต่ละการ์ดโครงการมีชื่อโครงการคำอธิบายภาพย่อของโครงการเวลาที่สร้างขึ้นและจำนวนตำแหน่งที่มีอยู่ การ์ดแต่ละใบยังมีสองปุ่ม หนึ่งในการเพิ่มหรือลบโครงการไปที่หรือออกจากรายการโปรดของผู้ใช้/บุ๊กมาร์กและอีกรายการหนึ่งเพื่อดูโครงการในหน้าโครงการ
หน้าโครงการ
หน้าโครงการใช้ ID โครงการเป็นพารามิเตอร์จากนั้นจะได้รับข้อมูลของโครงการและข้อมูลของผู้สร้าง หน้านี้ประกอบด้วยการ์ดสองใบการ์ดโครงการและการ์ดผู้สร้าง หากผู้สร้างโครงการได้ลบบัญชีของพวกเขาหรือไม่พบบัตรผู้สร้างจะไม่ปรากฏขึ้น
การ์ดผู้สร้างประกอบด้วยไอคอนตัวยึดตำแหน่งที่กำหนดโดยเพศของผู้สร้าง (ชายหรือหญิง - ค่าเริ่มต้นคือหญิง) ชื่อผู้สร้างและปุ่ม หากผู้ชมเป็นผู้สร้างปุ่มจะนำผู้ชมไปยังหน้าโครงการแก้ไข หากผู้ชมไม่ใช่ผู้สร้างปุ่มจะนำผู้ใช้ไปยังโปรไฟล์ของผู้สร้าง
การ์ดโครงการประกอบด้วยชื่อโครงการคำอธิบายรูปขนาดย่อของโครงการคำอธิบายโครงการตำแหน่งสูงสุดตำแหน่งที่มีอยู่แท็กและสมาชิก หากมีการคลิกสมาชิกโครงการ GroupD จะตรวจสอบว่าสมาชิกนี้ยังคงมีอยู่ (สมาชิกอาจลบโปรไฟล์ของพวกเขาแล้วผู้ใช้ใหม่รายอื่นอาจใช้ชื่อของพวกเขา) หากสมาชิกมีอยู่ผู้ดูจะถูกย้ายไปยังโปรไฟล์ของสมาชิก การ์ดโครงการยังมีสองปุ่มตั้งอยู่ที่ส่วนท้ายของการ์ด ปุ่มความคิดเห็นซึ่งแสดงและซ่อนส่วนความคิดเห็นและปุ่มโปรดเพื่อเพิ่มหรือลบโครงการไปยังหรือออกจากโครงการของผู้ชม
ส่วนความคิดเห็นประกอบด้วยรายการความคิดเห็นของโครงการพร้อมกล่องอินพุตเพื่อเพิ่มความคิดเห็นใต้
แก้ไขโครงการ
หน้าโครงการแก้ไขเป็นเพียงรูปแบบที่มีโครงการที่ป้อน/บันทึกไว้ก่อนหน้านี้ที่โหลดลงในกล่องอินพุต แบบฟอร์มการแก้ไขหน้าโครงการคล้ายกับแบบฟอร์มหน้าโครงการความแตกต่างที่อยู่ในหน้าโครงการแก้ไขผู้สร้างสามารถเพิ่มสมาชิกได้ ผู้สร้างสามารถเพิ่มสมาชิกที่มีอยู่ในฐานข้อมูลเท่านั้น ผู้สร้างจะได้รับสองตัวเลือกบันทึกการเปลี่ยนแปลงหรือลบ ได้รับตัวเลือกทั้งสองพร้อมคำเตือนการแจ้งเตือนเมื่อคลิก ในการบันทึกการเปลี่ยนแปลงเอกสารผู้ใช้ของสมาชิกที่เปลี่ยนแปลงจะได้รับการปรับปรุงและเอกสารโครงการได้รับการอัปเดตด้วย ในการลบอินสแตนซ์ใด ๆ ของโครงการในผู้สร้างและสมาชิกจะถูกลบออกและโครงการจะถูกลบอย่างถาวร
โครงการใหม่
คล้ายกับหน้าโครงการแก้ไขหน้าโครงการใหม่เป็นแบบฟอร์มที่มีการรับรองความเป็นจริงแบบเรียลไทม์ มีปุ่มเดียวเพื่อเพิ่มโครงการใหม่
ค้นหา
การค้นหาเป็นหน้าแท็บโดยมีแท็บ: ค้นหาโครงการและค้นหาผู้ใช้
โครงการค้นหาใช้ท่อที่กำหนดเองเพื่อค้นหาโครงการด้วยชื่อโครงการหรือแท็กแบบเรียลไทม์ เหมาะอย่างยิ่งสำหรับผู้ใช้ที่กำลังมองหาโครงการที่จะทำงาน เค้าโครงของรายการโครงการเหมือนกับโฮมเพจ
ผู้ใช้ค้นหาใช้ท่อที่กำหนดเองเพื่อค้นหาผู้ใช้ด้วยชื่อผู้ใช้หรือทักษะแบบเรียลไทม์ เหมาะอย่างยิ่งสำหรับผู้ใช้ที่มองหาผู้ใช้ในการทำงานในโครงการของพวกเขา ผู้ใช้แต่ละคนที่แสดงจะแสดงในการ์ดโดยมีรายละเอียดต่อไปนี้: ไอคอนเพศอาชีพอีเมลและแท็ก การ์ดยังมีปุ่มเพื่อไปที่หน้าผู้ใช้ที่เลือก
ประวัติโดยย่อ
หน้าโปรไฟล์ใช้ชื่อผู้ใช้เป็นพารามิเตอร์จากนั้นจะได้รับเอกสารผู้ใช้และตรวจสอบว่าเป็นโปรไฟล์ของผู้ชมหรือไม่ โปรไฟล์แสดงชื่อผู้ใช้ที่ตั้ง, อาชีพ, อีเมล, การจัดอันดับและทักษะของผู้ใช้ หากเป็นโปรไฟล์ผู้ชมผู้ชมจะแสดงปุ่มแก้ไขซึ่งจะย้ายไปยังหน้าบัญชีแก้ไข (อธิบายไว้ด้านล่าง) และปุ่ม SHOW RATERS ซึ่งจะมีโมดัลขึ้นมาพร้อมกับรายการผู้ประเมินและอัตราทั้งหมด ผู้ชมยังสามารถคลิกที่ชื่อผู้ใช้ของผู้ประเมินเพื่อย้ายไปยังโปรไฟล์ของพวกเขา หากไม่ใช่โปรไฟล์ของผู้ชมผู้ชมจะแสดงปุ่มอัตรา หากคลิกปุ่มอัตราการแจ้งเตือนจะปรากฏขึ้นพร้อมกับกล่องอินพุตเพื่อป้อนการจัดอันดับ หากผู้ชมได้ให้คะแนนบุคคลนี้มาก่อนมันจะเขียนทับอัตราสุดท้ายของพวกเขา โครงการของผู้ใช้ไม่ว่าจะเป็นสมาชิกหรือผู้สร้างจะแสดงในรูปแบบเดียวกับโครงการในโฮมเพจ
รายการโปรด
หน้าโปรดจะแสดงโครงการทั้งหมดที่บันทึกไว้ในรายการโปรดของผู้ใช้ เค้าโครงของรายการโครงการเหมือนกับโฮมเพจ
แก้ไขบัญชี
หน้าบัญชีแก้ไขเป็นเพียงรูปแบบที่มีโครงการที่ป้อน/บันทึกไว้ก่อนหน้านี้ที่โหลดลงในกล่องอินพุต ผู้ชมจะได้รับสองตัวเลือกบันทึกการเปลี่ยนแปลงหรือลบ ได้รับตัวเลือกทั้งสองพร้อมคำเตือนการแจ้งเตือนเมื่อคลิก ในการบันทึกการเปลี่ยนแปลงเอกสารผู้ใช้จะได้รับการอัปเดต ในการลบการจัดอันดับของผู้ใช้จะถูกลบออกจากการจัดอันดับของผู้ใช้รายอื่น (หากการจัดอันดับไม่ได้ถูกลบการจัดอันดับอาจกลายเป็นปัญหาหากผู้ใช้รายอื่นใช้ชื่อผู้ใช้เดียวกันเมื่อมีอยู่) และเอกสารผู้ใช้จะถูกลบออกจากฐานข้อมูล
ออกจากระบบ
หน้าการออกจากระบบมีปุ่มที่เรียกผู้ให้บริการข้อมูลผู้ใช้เพื่อ tigger เหตุการณ์ออกจากระบบเพื่อเปลี่ยนเมนูเพื่อล้างที่เก็บข้อมูลในเครื่องและย้ายไปยังหน้าเข้าสู่ระบบ
ไอออน
เฟรมเวิร์กไอออนิกสามารถใช้ในการสร้างแอพพลิเคชั่นมือถือข้ามแพลตฟอร์มหรือเว็บแอปพลิเคชันด้วย HTML, CSS และ JavaScript (Angular)
Ionic 1 vs ionic 2
Ionic 1 ใช้ Angular 1, HTML และ CSS ในขณะที่ Ionic 2 ใช้ Angular 2, HTML และ SCSS
ทำไม Ionic 2?
เมื่อเออร์วินเริ่มใช้ Angular 1 แล้วจึงสามารถมองเห็นได้ว่ามีความสมเหตุสมผลที่จะใช้ Ionic 1 เพื่อสร้างแอปพลิเคชันมือถือของฉันเนื่องจากเขามีงานจำนวนมากแล้ว อย่างไรก็ตามฉันเลือก Ionic 2 เพราะฉันอยากให้งานของฉันสง่างามอย่างสมบูรณ์เป็นของตัวเองและ เหตุผลหลัก คือ Ionic 2 เสนอ การปรับปรุงมากมาย Josh Morony อธิบายการปรับปรุงเหล่านี้ได้อย่างมีประสิทธิภาพที่นี่ ในความคิดของฉัน Ionic 2 ซึ่งเป็นรุ่นใหม่และปรับปรุงของ Ionic จะยังคงได้รับการปรับปรุงและจะเป็นจุดสนใจของทีมของ Ionic เช่นเดียวกันสำหรับทีม AngularJS ในกรณีของ Angular 2 ฉันก็ค่อนข้างกระตือรือร้นที่จะได้สัมผัสกับการใช้ TypeScript
ทำตามขั้นตอนใน GroupD-Backend: วิธีเรียกใช้
หากคุณไม่ได้ติดตั้ง Ionic 2 ให้ทำตามขั้นตอนการติดตั้งบนเว็บไซต์ไอออนิกที่พบที่นี่
โคลนที่เก็บนี้และเรียกใช้คำสั่ง:
npm install
เมื่อทุกอย่างถูกตั้งค่าและทำงาน ตรวจสอบให้แน่ใจว่าคุณเป็นไดเรกทอรีปัจจุบันคือ: แอพพลิเคชั่น groupD-mobile (ไดเรกทอรีย่อยของที่เก็บ) จากนั้นเรียกใช้คำสั่งต่อไปนี้:
ionic lab
เพื่อสรุปโครงการนี้เป็นประสบการณ์ที่คุ้มค่า การทำงานเป็นกลุ่มและใช้ Ionic 2 เป็นครั้งแรกทั้งคู่เป็นผู้สนับสนุนที่ยอดเยี่ยมในเรื่องนี้ ถ้าฉันต้องทำโครงการใหม่ฉันจะเริ่มต้นความคิดโครงการนี้ตั้งแต่ต้นแทนที่จะเป็นความคิดโครงการอื่น ฉันจะอ้างอิงเอกสารความคิดเห็นแยกต่างหากแทนที่จะฝังความคิดเห็นในเอกสารโครงการเนื่องจากความคิดเห็นเป็นข้อมูลที่เกี่ยวข้องกับโครงการอย่างไรก็ตามความคิดเห็นเปลี่ยนไปกับ Volatiliy ที่แตกต่างกันไปยังส่วนที่เหลือของข้อมูลโครงการ ความคิดเห็นยังสามารถเติบโตได้อย่างรวดเร็วจนถึงจำนวนที่ไม่มีที่สิ้นสุดและไม่ควรเป็นภาระของเอกสารโครงการที่มีขนาดใหญ่เป็นไปได้ ในที่สุดฉันจะพิจารณาใช้รหัสที่ไม่ซ้ำกันในสถานที่ของชื่อผู้ใช้ที่ไม่ซ้ำกันและฉันจะเพิ่มคุณสมบัติเช่น "อยู่เฉยๆ": จริง/เท็จ คุณสมบัตินี้จะถูกใช้ในสถานที่ของการลบเอกสารผู้ใช้จริง ๆ จะแก้ปัญหาของชื่อผู้ใช้ที่อ้างอิง (หรือ IDs หากจะเปลี่ยนไป) โดยผู้ใช้เก่า/ใหม่และจะให้บริการตัวเลือกการกู้คืนผู้ใช้เก่า
ข้อมูลอ้างอิง:
เฟรมเวิร์กไอออนิก
http://stackoverflow.com/questions/13935733/mongoose-limit-offset-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-ionic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/detect-if-string-contains-anspaces
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-manually-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-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-side-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-of-the-screen/
http://www.neilberry.com/how-to run-your-ionic-app-on-real-devices/
Tara O'Kelly - [email protected]
