---
title: Learn How to Plan Your Future Project
localeTitle: تعلم كيف تخطط لمشروعك المستقبلي
---
أوقية من الإعداد يستحق رطل من العلاج. هذا صحيح في الطب ، وهذا صحيح بالتأكيد في تطوير البرمجيات.

في ما يلي سير عمل منظم من 10 خطوات سيوجهك خلال عملية تخطيط التطبيق ، وذلك بهدف إنقاذك من كتابة الكثير من الشفرات غير الضرورية.

معًا ، سنخطط لتطبيق ويب فردي "بسيط". سنخطط أيضًا لإنشاء واجهة خلفية واجهة برمجة التطبيقات لتطبيق جوّال في المستقبل.

## 1) قم بإنشاء لوحة Trello

[Trello](https://trello.com/) هي طريقة ممتعة ومجانية لكسر عملية التخطيط والتطوير الخاصة بك إلى مهام صغيرة يمكن تتبعها.

![صورة لوحة Trello](https://lh3.googleusercontent.com/EI4AQ4NINm3B2DHR_YIS29JyKVa5dTPiT3RtITylmndFlpshTHepsKuO8_1KQNfdPDSBjslDReHCuPFeH1GNrDtgOwTyq6ZtGf3DFBmq1AsAhPHKt_0pLXQLf0o4ZbDuKVj4-Bo)

[إليك ما سيبدو عليه لوح Trello الخاص بنا في النهاية](https://trello.com/b/O9MZcYyY/todo-app) . أفضل تقسيم المهام إلى 3 أعمدة (حسب درجة تعقيد المشروع):

*   للقيام - ما تبقى للقيام به
*   في التقدم - المهام التي يعمل الناس حاليا على
*   فعلت - المهام التي تتم وجاهزة للاختبار

## 2) كتابة قصص المستخدم

فيما يلي بعض الأمثلة على قصص المستخدمين. ستوجه هذه الطريقة كيف نفكر في ميزات ووظائف التطبيق لدينا. لاحظ أنهم جميعًا يتبعون بنية مشابهة: [كإنسان\] يمكنني \[أن أفعل شيئًا\].](https://lh5.googleusercontent.com/2v6iIMbCrLSKVfqttEToum7OA3YGQCBKWUHcSCB1KEbEcijXxQtKJKY6fhLXeecJiO27P4icOuPlkVc9_uNXolzlzNXOo_TPh09GZsAqRH-JISqPrpx0PZdtbHOr0RIuQUbTbaw)

*   كمستخدم مسجل الدخول ، يمكنني رؤية قائمة المهام الخاصة بي.
*   كمستخدم مسجل الدخول ، يمكنني إضافة وظيفة جديدة.
*   كمستخدم مسجل الدخول ، يمكنني حذف المهام (فقط ما يجب القيام به - ليس للمستخدمين الآخرين).
*   كمستخدم مسجّل يمكنني إكمال "المهام" (فقط المهام التي يجب القيام بها - وليس المستخدمين الآخرين).
*   كمستخدم مجهول ، يمكنني التسجيل للحصول على حساب جديد ، استعادة كلمة المرور الخاصة بي ، أو تسجيل الدخول إلى التطبيق باستخدام حساب موجود.

## 3) إنشاء نموذج حالة الاستخدام لدينا

سيساعدنا نموذج حالة الاستخدام لدينا في تصور قصص المستخدمين لدينا حتى نتمكن من فهم كيفية تنفيذها بشكل أفضل.

! \[مخطط حالة مستخدم مجهول

![مخطط حالة مستخدم مصادق عليه](https://lh6.googleusercontent.com/3V6dVvAcyjqFkaOukimucYOX0CfwBBYNN9SvjmnVy40Pdhs4Wtrr34i3E-9pbV7tFsp4jHm77IFQvFupjq6OWyxqEgCzcQ995Ayh52Msczu6TfwKeNhL9PYHyxSgmPYA1TR6l6Q)

## 4) إنشاء مخطط النشاط لدينا

سيوضح مخطط النشاط لدينا المسارات المختلفة التي يمكن لمستخدمينا اجتيازها من خلال تطبيقنا.

![صورة رسم بياني للنشاط](https://lh6.googleusercontent.com/jAQL4myqWOPA3gk2iTpGyAQBrO6p1GlPe8BQQ1Se6a-Di40X3Zw1p0wfJewZUL-YyDmedYzX5Lxvo2GW2Qnr6I-6kuKe1sDb9_5F_n46cKoawWReWW_ZoZCIJO6Semc4fvsiuHc)

مستخدم يصل إلى تطبيق لدينا القيام به.

*   إذا لم يقم المستخدم بتسجيل الدخول ، فسترى صفحة تسجيل الدخول الخاصة بنا.
    
*   إذا كان لديها حساب بالفعل ، يمكنها تسجيل الدخول.
    
*   إذا كان لديها حساب ، ولكنها نسيت كلمة المرور الخاصة بها ، يمكنها استرداد كلمة المرور الخاصة بها.
    
*   إذا لم يكن لديها حساب ، فيمكنها إنشاء حساب.
    
*   يتطلب كل من "إنشاء حساب" و "استرداد كلمة المرور الخاصة بي" التحقق من صحة البريد الإلكتروني. يمكن للمستخدم تسجيل الدخول إلى طلبنا فقط بعد أن تؤكد عنوان بريدها الإلكتروني.
    
*   إذا سجلت الدخول ، فسترى قائمة المهام الخاصة بها (يمكن أن يكون هذا فارغًا إذا لم تضف أية مهام تالفة حتى الآن).
    
*   مستخدم مسجل الدخول:
    
    *   قادر على رؤية قائمة مهامها
        
    *   قادر على تحديد مهمة من قائمتها على أنها مكتملة
        
    *   قادر على البحث داخل قائمة المهام الخاصة به
        
    *   قادر على حذف مهمة من قائمتها
        
    *   يمكن الخروج.
        
*   يمكن للمستخدم الخروج من التطبيق في أي وقت.
    

## 5) إنشاء نماذج بالأحجام الطبيعية لدينا

تعرض نماذجنا بالأحجام الطبيعية شكل التطبيق الذي يجب أن يبدو عليه. من الأسرع كثيرًا أن يتم التكرار في نموذج معين بدلاً من إجراء ذلك على رمز العمل.

![صورة بالحجم الطبيعي](https://lh3.googleusercontent.com/GBFhmBkfr-xM5YSXlR0Fm9y8b24ivdRlUtRWQOHJ8skNxEgjTkAef0e5nZ-CcHKNUq2p4V4hgDuAm9LSEuvbovlVborH1ZioAUXVlEblWZ4hN_d2tGEpxhfTkKH9os2JS1pab4w)

## 6) اختيار التقنيات المناسبة لمشروعنا

نظرًا لأن هذا تطبيق من صفحة واحدة ، سنعتمد بشكل كبير - أو في هذه الحالة على وجه الحصر - على جافا سكريبت. دعونا نستخدم واحدة من أكثر حزم جافا سكريبت شعبية: مكدس MEAN. إحدى الفوائد الكبيرة لمكدس MEAN هي أن جميع مكوناته مجانية ومفتوحة المصدر. هناك أيضا طن من الموارد المتاحة لتعلم مكدس MANAN ، ولإصلاحه عندما تواجه أخطاء لا محالة.

يمكنك الحصول على [بيئة تطوير مكدس MANAN](http://www.freecodecamp.com/challenges/get-set-for-our-back-end-development-projects) وتشغيلها في السحابة في أقل من ساعة ، مجانًا.

في ما يلي المكونات التي سنستخدمها:

1.  [MongoDB](http://mongodb.org/) لقاعدة البيانات الخاصة بنا
2.  [Node.js](http://nodejs.org/) و [Express.js](http://expressjs.com/) لتطبيق API الخاص بنا
3.  [AngularJS](http://angularjs.org/) ، جنبا إلى جنب مع HTML و CSS (و Bootstrap) لتطبيقنا على جانب العميل
4.  [النمس](http://mongoosejs.com/) لتوصيل طلبنا إلى MongoDB

## 7) تصميم مخطط قاعدة البيانات لدينا

إنه يستحق الجهد لتصميم مخطط قاعدة البيانات ، حتى بالنسبة للتطبيق البسيط.

سيكون لدينا مجموعتان: مجموعة "المستخدمين" الخاصة بنا ستحتوي على بيانات المستخدم الخاصة بنا ، وستتضمن مجموعة "ToDo" الخاصة بنا المهام التي يجب القيام بها. يمكن لمستخدم واحد أن يكون لديه صفر أو واحد أو العديد من المهام في قائمة المهام الخاصة به ، لذلك سيكون لدينا علاقة رأس بأطراف (1: م) بين مجموعتين.

![مخطط مخطط قاعدة البيانات](https://lh6.googleusercontent.com/5uSb_xnSSc5CWXJD0yyUGVJsL92RRZl3Bex_3wjuzl5Xr69Ks0j3od-yFju24SAd5wWMBNy9uqBrvOzdrUWluOkbcr4H5zFg-ZemJX3ZRWS12D42OowuvWnxA7wWIGrhhzaQ0aw)

## 8) تحديد حالات الاستخدام لدينا

1.  ماذا يحدث للمهام المتعلقة بالمستخدم الذي يقوم بحذف حسابها؟ عندما يحذف المستخدم حسابه ، يجب أيضًا حذف المهام المرتبطة بهذا المستخدم.
2.  لا يمكن إضافة أية أشياء بدون إرفاقها بمستخدم مؤكد.
3.  لا يمكن حذف أي شيء إلا بواسطة مالكه.
4.  لا يمكن إضافة أي مستخدم باسم مستخدم أو كلمة مرور فارغة.
5.  لا يمكن إضافة أي مهمة بمهمة فارغة.

أشياء لتأخذها بالحسبان:

1.  استخدم البرامج الوسيطة من Mongoose لإزالة المستندات التابعة مثل المهام عندما يقوم المستخدم بحذف حسابه.
2.  استخدم قواعد التحقق من Mongoose في النماذج لمنع إضافة الحقول الفارغة إلى قاعدة البيانات الخاصة بنا.

## 9) تصميم واختبار API لدينا

لقد استخدمت منتجًا مجانيًا يسمى Apiary [لتوثيق API لدينا](http://docs.fcctodoapp.apiary.io/) .

إليك بناء الجملة الذي استخدمته [لإنشاء BluePrint البسيط](https://jsapi.apiary.io/apis/fcctodoapp.apib) .

أوصيك بإنشاء حساب والبدء في اللعب به. إذا قمت بربط حساب [GitHub](http://github.com/) الخاص بك مع Apiary ، فيمكنك التأكد من أن وثائقك دائمًا ما تكون حديثة. ستتمكن أيضًا من اختبار بياناتك بشكل مرئي دون الحاجة إلى الوصول إلى نقاط نهاية API. إذا كنت تفضل اختبار واجهة برمجة التطبيقات من سطر الأوامر ، [فإليك مثالاً لكيفية القيام بذلك](http://docs.agendor.apiary.io/) .

لاحقًا ، بعد تنفيذ API باستخدام Node.js و Express.js ، ستحتاج فقط إلى تعيين عنوان URL في Apiary. ثم يمكنك البدء في اختبار مكالماتك. سيتم استبدال عنوان URL الحالي الخاص بمضيفنا ( [http://fcctodoapp.apiblueprint.org/](http://fcctodoapp.apiblueprint.org/) ) بعنوان URL الخاص بـ API الخاص بك.

![الصورة التجريبية التطبيق](https://lh6.googleusercontent.com/hU3ilG_y9FqtL_zajQ_KOjWy8Qx590Go8nkNvA1j0oR50YJTpjJhL1lAPgjyeLTAS06tq6V62EcJrLQyT_TR2BK49DYiX6kksU6s9cqJDvvaS6jvepIM6uiO4JMbXuu-oXhdsas)

## 10) ابدأ كتابة التعليمات البرمجية!

هذا هو الجزء الممتع ، وسيستغرق معظم وقت مشروعك. إذا كنت بحاجة إلى مساعدة بشأن ذلك ، انضم إلينا وتعلّم كيفية البرمجة.