Groupd Mobile Application
1.0.0
تطبيق الهاتف المحمول ، الذي تم تطويره باستخدام إطار Ionic 2 ، يعمل كواجهة أمامية أخرى لـ GroupD - تطبيق للتواصل الاجتماعي للعثور على زملاء الفريق لبدء المشاريع. السنة الثالثة ، تطوير البرمجيات.
تم تنفيذ تطبيق Groupd-Mobile كإحالة لمشروع السنة الثالثة الطويلة. تم وضع هذه المهمة وتطويرها كمشروع جماعي مع Imervin. تعتبر تطبيق GroupD-Mobile-Application ، تطبيق Cross Platform Mobile ، أحد المستودعات الثلاثة. وتشمل المستودعان الآخران GroupD-Backend و GroupD API مع مساهمات من كلا الطرفين ، و GroupD-pronervending ، تطبيق الويب الذي طورته Imervin. لمزيد من التفاصيل حول GroupD ، يرجى الانتقال إلى قسم GroupD.
تشير إلى النظر في:
GroupD هو موقع للتواصل الاجتماعي الذي تم وضعه لمساعدة المستخدمين في العثور على زملاء الفريق للعمل على فكرة مشروع قد يكون لديهم. تم تصميم GroupD مع وضع المطورين في الاعتبار ، ومع ذلك ، تشجع GroupD وترحب المستخدمين بجميع المهن ويحتاج إلى استخدام هذا النظام الأساسي للعثور على زملائه في الفريق. معًا ، طورنا أنا و Ervin قاعدة بيانات مشتركة (انظر لماذا GroupD لمخطط قاعدة البيانات) و API Restful لإدارة قاعدة البيانات الخاصة بنا وإدارة ميزات CRUD الخاصة بنا لمساعدة اثنين من الواجهة الأمامية (انظر GroupD-Backend للحصول على الوثائق الكاملة). أردنا GroupD للسماح للمستخدمين بنشر مشاريعهم المطلوبة والتواصل مع المستخدمين الآخرين والعمل في المشاريع مع مستخدمين آخرين. يمكن استخدام GroupD في الترفيه و/أو لاكتساب خبرة وفي نهاية المطاف بناء محفظة من المشاريع التي عملوا عليها. GroupD مفيد أيضًا للعثور على أعضاء الفريق لبدء العمل.
راجع GroupD-prondract للاطلاع على التوضيح الكامل على تطبيق الويب.
بعد انفصالتي عن فكرتي الأصلية ، انضممت إلى مشروع زميل في الفصل ، بدا لي Imervin ، الذي بدا لي وديًا للغاية بالنسبة لي. كنا أيضًا حريصين على العمل في المجموعة لتجربة وممارسة التعاون في جيثب. رحب Ervin بفكرة تطبيق الهاتف المحمول المكافئ لتطبيق الويب الخاص به. الانضمام لتشكيل مجموعة يمكننا إضافة ميزات إضافية. معا ، قمنا بتصميم مخطط قاعدة بيانات جديد ، مرفق أدناه ، وقمنا بتحديث واجهة برمجة التطبيقات (API) لتتوافق مع هذه التغييرات.
كانت فكرتي الأصلية هي إنشاء تطبيق أمان لسطح المكتب Windows ، و Encrypt Keeper.
سوف تشفير Keeper:
مشاكل:
على الرغم من أنني تخلت عن هذه الفكرة كمشروع نهاية العام ، إلا أنني لا أرغب في التخلي عن تنفيذ هذا المشروع ، وربما ليس كتطبيق Windows Store. لقد قمت بالفعل بتطبيق التعرف على الوجه لمهمة حيث اضطررنا إلى إنشاء تطبيق منصة Windows Universal في هذا الفصل الدراسي ، يمكن العثور على تطبيق Wup هذا على GitHub: Note ، وعلى متجر Windows: ملاحظة آمنة (لم يكن الاسم المذكرة الآمن متوفرة في وقت التقديم).
الميزات الرئيسية:
ميزات إضافية
لقد صممت تطبيق Groupd-Mobile مع Sidemenu يعرف بذكاء متى تتغير البيانات. يتم استدعاء مزود بيانات المستخدم لتسجيل المستخدم داخل أو خارج ، ويؤدي إلى حدث تسجيل الدخول لتغيير القائمة الجانبية. تقوم بيانات المستخدم أيضًا بتعيين المستخدم عن طريق تخزين المستخدم الحالي في التخزين المحلي وإطلاق حدث لتنبيه أي موارد للتغيير. في كل صفحة تحميل وإعادة تحميل المستخدم الحالي يتم إعادة تحميله من واجهة برمجة التطبيقات (API) وسيقوم موفر بيانات المستخدم بتنبيه أي موارد للتغييرات ، حيث ستحصل الموارد بشكل غير متزامن على البيانات الجديدة من التخزين.
تتكون القائمة المسجلة من قسمين:
تتكون القائمة المسجلة من ثلاثة أقسام:
اشتراك
تتكون صفحة التسجيل من مجموعة من الشرائح ، مع نموذج في كل شريحة لاتخاذ بيانات التسجيل. لقد استخدمت Angular 2's Formbuilder للتحقق من صحة المدخلات في الوقت الفعلي مع صحة مدمجة ومقحة مخصصة. للأسف ، لم أتمكن من الحصول على مُحسّن غير متزامن لاستخدام استخدام المستخدم-فاليداتور غير متزامن ، حيث أن أساليب المدقق ثابتة ، لم أتمكن من معرفة كيفية استخدام مكالمة HTTP داخل المدقق. يتم التحقق من صحة اسم المستخدم بمجرد إرسال البيانات. إذا تم أخذ اسم المستخدم بالفعل ، فسيتم نقل المستخدم تلقائيًا إلى الشريحة اللازمة وتنبيهه إلى أن اسم المستخدم يتم أخذه. إذا كان اسم المستخدم متاحًا ، يتم حفظ البيانات كمستخدم ، ويتم إعادة تعيين النموذج ، ويتم تنبيه المستخدم إلى النجاح ومنح خيار الانتقال مباشرة إلى صفحة تسجيل الدخول مباشرة.
تسجيل الدخول
تعد صفحة تسجيل الدخول إلى حد كبير تفسيريًا ذاتيًا ، ويمكن للمستخدم تسجيل الدخول باستخدام اسم المستخدم وكلمة المرور. إذا لم يكن اسم المستخدم موجودًا ، فسيتم تنبيه المستخدم بعدم العثور على اسم المستخدم. إذا كان اسم المستخدم موجودًا وكانت كلمة المرور غير صالحة ، فسيتم تنبيه المستخدم أيضًا. إذا كان اسم المستخدم وكلمة المرور مطابقة ، فسيتم تسجيل الدخول من قبل مزود المستخدم كما هو موضح أعلاه ، ونقله إلى الصفحة الرئيسية كمستخدم مسجل. سيتم حفظ حالة تسجيل الدخول في التخزين بحيث يتم بالفعل تسجيل الدخول إلى المستخدم في الشركات الناشئة التالية ، ما لم يسجل المستخدم.
درس تعليمي
مجموعة من الشرائح التي تشرح GroupD ووصفًا موجزًا لكيفية استخدامه.
بيت
تتكون الصفحة الرئيسية من قائمة بجميع المشاريع المعروضة في بطاقات منفصلة ، كل بطاقة مشروع لها اسم المشروع ، ووصف المصغرة للمشروع ، والوقت الذي تم إنشاؤه ومقدار المواقف المتاحة. كل بطاقة لديها أيضا زرين. واحد لإضافة أو إزالة المشروع من أو من أو من المستخدم المفضل/المرجعية ، وواحد لعرض المشروع في صفحة المشروع.
صفحة المشروع
تأخذ صفحة المشروع معرف المشروع كمعلمة ، ومن هناك تحصل على بيانات المشروع وبيانات المبدع. تتكون هذه الصفحة من بطاقتين ، بطاقة المشروع وبطاقة المبدع. إذا كان منشئ المشروع قد حذف حسابه أو لم يتم العثور عليه ، فلن تظهر بطاقة المبدع.
تتكون بطاقة المبدع من أيقونة العنصر النائب الذي يحدده جنس المبدع (الذكور أو الإناث - الافتراضي هو أنثى) ، اسم الخالق وزر. إذا كان العارض هو المبدع ، فسيقوم الزر بإحضار المشاهد إلى صفحة مشروع التحرير. إذا لم يكن المشاهد هو المبدع ، فسيقوم الزر بإحضار المستخدم إلى ملف تعريف المبدع.
تتكون بطاقة المشروع من اسم المشروع ، وصف المشروع المصغرة ، وصف المشروع ، المواقف القصوى ، المواقف المتاحة ، العلامات ، والأعضاء. إذا تم النقر على عضو المشروع ، فسيقوم GroupD بالتحقق مما إذا كان هذا العضو لا يزال موجودًا (قد يكون العضو قد حذف ملفه الشخصي ، فقد يكون هناك مستخدم جديد آخر قد أخذ اسمه). إذا كان العضو موجودًا ، فسيتم نقل المشاهد إلى ملف تعريف العضو. تحتوي بطاقة المشروع أيضًا على زرين يقعان في تذييل البطاقة ؛ زر التعليقات ، الذي يوضح ويخفي قسم التعليقات ، والزر المفضل لإضافة أو إزالة المشروع إلى أو من مشاريع العارض.
يتكون قسم التعليقات من قائمة بتعليقات المشروع ، مع مربع إدخال لإضافة تعليق تحته.
تحرير المشروع
تعد صفحة Project Edit مجرد نموذج مع المشاريع التي تم إدخالها/حفظها مسبقًا تم تحميلها في مربعات الإدخال. يشبه نموذج صفحة التعديل في Project Project نموذج صفحة المشروع ، والفرق في صفحة Project Edit ، يمكن للمبدع إضافة أعضاء. يمكن للمبدع فقط إضافة أعضاء موجودين في قاعدة البيانات. يتم إعطاء المبدع خيارين ، حفظ التغييرات أو حذف. يتم استلام كلا الخيارين مع تحذير في حالة تأهب عند النقر عليه. عند حفظ التغييرات ، يتم تحديث مستند المستخدم لأي أعضاء تم تغييره ويتم تحديث مستند المشروع أيضًا. عند الحذف ، تتم إزالة أي مثيل للمشروع في المبدع والأعضاء ويتم حذف المشروع بشكل دائم.
مشروع جديد
على غرار صفحة المشروع تحرير ، فإن صفحة المشروع الجديدة هي نموذج مع تدبير في الوقت الفعلي. يحتوي على زر واحد لإضافة المشروع الجديد.
يبحث
البحث عبارة عن صفحة معدومة ، مع علامات التبويب هي: مشروع البحث والمستخدمين البحث.
تستخدم مشاريع البحث أنبوبًا مخصصًا للبحث عن المشاريع حسب اسم المشروع أو العلامات في الوقت الفعلي. هذا مثالي للمستخدمين الذين يبحثون عن مشاريع للعمل عليها. تخطيط قائمة المشاريع هو نفسه الصفحة الرئيسية.
يستخدم مستخدمو البحث أنبوبًا مخصصًا للبحث عن المستخدمين حسب اسم المستخدم أو المهارات في الوقت الفعلي. هذا مثالي للمستخدمين الذين يبحثون عن المستخدمين للعمل في مشاريعهم. يتم عرض كل مستخدم معروض في بطاقة ، مع التفاصيل التالية: أيقونة الجنس ، المهنة ، البريد الإلكتروني ، والعلامات. تحتوي البطاقة أيضًا على زر للانتقال إلى صفحة المستخدم المحدد.
حساب تعريفي
تأخذ صفحة الملف الشخصي اسم المستخدم كمعلمة ، ثم تحصل على مستند المستخدم ويتحقق مما إذا كان ملف تعريف المشاهد. يعرض الملف الشخصي اسم المستخدم للمستخدم والموقع والمهنة والبريد الإلكتروني والتصنيف والمهارات. إذا كان هذا هو ملف تعريف المشاهدين ، فسيتم عرض العارض على زر تحرير ، سينتقل إلى صفحة حساب التحرير (الموضحة أدناه) ، وزر RATERS ، الذي سيكون له ظهور مشروط مع قائمة بجميع الفئران ومعدلاتها. يمكن للمشاهد أيضًا النقر على أسماء مستخدمي Rater للانتقال إلى ملفاتهم الشخصية. إذا لم يكن ملف تعريف المشاهد ، فسيتم عرض زر العارض. إذا تم النقر على زر السعر ، فسيظهر تنبيه مع مربع إدخال لدخول التصنيف. إذا قام المشاهد بتصنيف هذا الشخص من قبل ، فسيقوم بالكتابة فوق سعره الأخير. يتم عرض مشاريع المستخدم ، سواء أكان عضوًا أو منشئًا ، بنفس تنسيق المشاريع في الصفحة الرئيسية.
المفضلة
ستعرض الصفحة المفضلة جميع المشاريع المحفوظة في مفضلات المستخدم. تخطيط قائمة المشاريع هو نفسه الصفحة الرئيسية.
تحرير الحساب
صفحة حساب التحرير هي ببساطة نموذج مع المشاريع التي تم إدخالها/حفظها مسبقًا تم تحميلها في مربعات الإدخال. يتم إعطاء المشاهد خيارين ، حفظ التغييرات أو حذف. يتم استلام كلا الخيارين مع تحذير في حالة تأهب عند النقر عليه. عند حفظ التغييرات ، يتم تحديث مستند المستخدم. عند الحذف ، تتم إزالة تصنيفات المستخدم من تصنيف أي مستخدم آخر (إذا لم يتم حذف التصنيف ، فقد تصبح التصنيفات مشكلة إذا أخذ مستخدم آخر اسم المستخدم نفسه بمجرد توفره) ويتم حذف مستند المستخدم من قاعدة البيانات.
تسجيل الخروج
تحتوي صفحة Log Out على زر يدعو موفر بيانات المستخدم إلى Tigger لحدث تسجيل الدخول لتغيير القائمة ، لمسح التخزين المحلي والانتقال إلى صفحة تسجيل الدخول.
أيوني
يمكن استخدام الإطار الأيوني لإنشاء تطبيقات متنقلة عبر النظام الأساسي أو تطبيقات الويب مع HTML و CSS و JavaScript (Angular).
الأيوني 1 مقابل الأيوني 2
يستخدم Ionic 1 Angular 1 و HTML و CSS بينما يستخدم Ionic 2 Angular 2 و HTML و SCSs.
لماذا أيوني 2؟
نظرًا لأن Ervin قد بدأ بالفعل في استخدام 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 لأول مرة كلاهما مساهمين رائعين في هذا. إذا كنت سأعيد إعادة المشروع ، فسوف أبدأ فكرة المشروع هذه من البداية ، بدلاً من محاولة فكرة مشروع آخر. أود أيضًا أن أشير إلى مستند تعليقات منفصلة ، بدلاً من تضمين التعليقات في وثيقة المشاريع ، حيث أن التعليقات هي بيانات ذات صلة بالمشروع ، ومع ذلك تتغير التعليقات مع اختلاف التقليل من بيانات المشروع. يمكن أن تنمو التعليقات أيضًا بسرعة كبيرة إلى كمية لا حصر لها ، ويجب ألا تثقل في عبء وثيقة المشروع بحجم كبير. أخيرًا ، أود أن أفكر في استخدام معرف فريد في مكان اسم المستخدم الفريد ، وسأضيف بالتأكيد خاصية مثل "Dormant": True/False. سيتم استخدام هذه الخاصية في مكان حذف مستند المستخدم فعليًا ، وسوف تحل مشكلة أسماء المستخدمين المشار إليها (أو معرفات إذا تم تغيير ذلك) في الخلط بين المستخدمين القدامى/الجدد ، وسوف يخدم مفيدًا لتزويد المستخدمين القدامى بخيار استرداد.
مراجع:
إطار أيوني
http://stackoverflow.com/questions/13935733/mongoose-limit-desset-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/Repeatally-background-task-ionic-framework
https://github.com/yannbf/ionic2-components
http://stackoverflow.com/questions/17616624/detect-if-tring-contains-ane-spaces
https://www.joshmorony.com/advanced-forms-validation-in-ionic-2/
http://stackoverflow.com/questions/35039610/angular2-manial-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-the-screen/
http://www.neilberry.com/how-to-t-t-wrun-your-ion- app-on-real-devices/
تارا أوكيلي - [email protected]
