تطبيقات الموبايل TODOS APP

عمل المشروع

تطبيق إدارة جهات الاتصال Contacts List

هو تطبيق موبايل بسيط يتيح للمستخدمين إضافة وتعديل وحذف جهات الاتصال بسهولة. يعتمد هذا التطبيق على تقنية الـ FLUTTER لتطويره، والتي تسمح ببناء واجهات مستخدم جميلة وسلسة على أنظمة ANDROID و IOS من خلال كتابة كود واحد يعمل على كلا المنصتين.

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

ميزات إطار العمل FLUTTER لتطوير التطبيقات المحمولة

FLUTTER هو إطار عمل مفتوح المصدر من GOOGLE لتطوير واجهات مستخدم جميلة وسلسة على مختلف أنظمة التشغيل. يتميز بواجهات مستخدم جميلة وسلسة، وكتابة كود مرة واحدة يعمل على كل من ANDROID و IOS، بالإضافة إلى أدوات تطوير متكاملة وأداء ممتاز. يقدم تخصيصًا متقدمًا ويتمتع بدعم مجتمع نشط، مما يجعله خيارًا قويًا لتطوير التطبيقات المحمولة.

بعض الميزات والجوانب الرئيسية لإطار العمل FLUTTER:

•واجهات مستخدم جميلة وسلسة.

•كتابة الكود مرة واحدة للتطبيقات على كل من ANDROID و IOS.

•أدوات تطوير متكاملة مثل FLUTTER SDK وFLUTTER ENGINE.

•أداء ممتاز باستخدام تقنية "الرسم المباشر".

•تخصيص متقدم للواجهات المستخدم.

•دعم مجتمع نشط وواسع النطاق.

الواجهة الرئيسية للتطبيق

شرح الواجهة الرئيسية للتطبيق

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

•مربع نص لإدخال الاسم:

⚬يقع في الجزء العلوي من الواجهة.

⚬يسمح للمستخدم بإدخال اسم جهة الاتصال الجديدة.

•مربع نص لإدخال رقم جهة الاتصال:

⚬يقع أسفل مربع النص الخاص بالاسم.

⚬يسمح للمستخدم بإدخال رقم هاتف جهة الاتصال الجديدة.

•زر "Save":

⚬يقع أسفل مربعي النص.

⚬عند النقر عليه، يتم حفظ جهة الاتصال الجديدة في قائمة جهات الاتصال.

•زر "Update":

⚬يسمح للمستخدم بتحديث المعلومات بعد إجراء التعديلات اللازمة.

⚬ 

•قائمة جهات الاتصال:

⚬تحتوي على قائمة بكل جهات الاتصال المحفوظة.

⚬لكل جهة اتصال، يتم عرض الاسم ورقم الهاتف.

•أيقونة التعديل:

⚬تظهر بجانب كل جهة اتصال في القائمة.

⚬عند النقر عليها، يتم تفعيل وضع التعديل للمستخدم ليتمكن من تعديل الاسم أو الرقم.

•أيقونة الحذف:

⚬تظهر بجانب أيقونة التعديل لكل جهة اتصال.

⚬عند النقر عليها، يتم حذف جهة الاتصال من القائمة.

الكود البرمجي ملف contact.dart

هذا الملف يعرّف نموذج الاتصال Contact في تطبيق الهاتف. يحتوي النموذج على اسم الشخص ورقم الاتصال. يتم استخدامه لتخزين معلومات الاتصال وإدارتها في التطبيق. تم تعريف المتغيرين name وcontact كنصيين، وتم تعريف مُنشئ يأخذ قيم افتراضية مطلوبة للإنشاء.

ملفhome_page.dart

e: const HomePage(),: يحدد صفحة البداية للتطبيق التي ستكون HomePage.

1. import 'package:contacts_app/contact.dart';: يستورد ملف contact.dart الذي يحتوي على تعريفات لنموذج الاتصال.

2. import 'package:flutter/material.dart';: يستورد مكتبة Flutter التي تحتوي على واجهات المستخدم والمرئيات.

3. class HomePage extends StatefulWidget { ... }: يعرّف صفحة الرئيسية HomePage كفئة StatefulWidget في Flutter.

4. const HomePage({Key? key}) : super(key: key);: يعرّف مُنشئ لصفحة الرئيسية يأخذ مفتاحًا key كمدخل اختياري.

5. State createState() => _HomePageState();: يعيد دالة createState() التي تنشئ وتعيد حالة صفحة الرئيسية.

6. TextEditingController nameController = TextEditingController();: يعرّف متحكم نصي TextEditingController لحقل الاسم.

7. TextEditingController contactController = TextEditingController();: يعرّف متحكم نصي TextEditingController لحقل جهة الاتصال.

8. List contacts = List.empty(growable: true);: يعرّف قائمة من أنواع Contact وتبدأ بقائمة فارغة قابلة للتوسيع.

9. int selectedIndex = -1;: يعرّف متغير لتخزين مؤشر العنصر المحدد في القائمة، ويبدأ بالقيمة -1.

عنصر واجهة المستخدم الرئيسي:

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

شريط العنوان

يحتوي شريط العنوان على عنوان التطبيق، وهو "قائمة جهات الاتصال".

الجزء الرئيسي من المحتوى

يحتوي الجزء الرئيسي من المحتوى على مثيل من فئة Column. تُستخدم فئة Column لترتيب عناصر واجهة المستخدم بشكل عمودي.

عناصر واجهة المستخدم داخل Column

يحتوي Column على عنصرين واجهة مستخدم:

.1مربع نص فارغ

يُستخدم مربع النص الفارغ لإدخال اسم جهة اتصال جديدة.

.1قائمة جهات الاتصال

تُستخدم قائمة جهات الاتصال لعرض قائمة بجميع جهات الاتصال الموجودة في التطبيق.

الكود في الصورة يقوم بالوظائف التالية:

1. مربع نص لإدخال رقم جهة الاتصال:

   - يتم إنشاء حقل إدخال نصي باستخدام `TextField`.

   - Controller: `contactController` للتحكم في النص المدخل.

   - KeyboardType: يحدد نوع الإدخال ليكون رقمي (`TextInputType.number`).

   - MaxLength: يحدد الحد الأقصى لطول النص بـ 10 أحرف.

   - Decoration: يحتوي على نص إرشادي "Contact Number" وإطار بإعدادات `OutlineInputBorder` مع زوايا دائرية (`BorderRadius.circular(10)`).

2. مسافة بين العناصر:

   - SizedBox: يضيف مسافة عمودية (ارتفاع 10) بين حقل الإدخال والعناصر التالية.

3.صف من الأزرار:

   - Row: ينظم الأزرار أفقيًا.

   - MainAxisAlignment: يوزع الأزرار بالتساوي (`spaceEvenly`).

   - ElevatedButton: الأزرار التي ستُستخدم في الواجهة.

الصورة تظهر جزءًا من الكود البرمجي في ملف `home_page.dart. الكود ينشئ واجهة مستخدم تتضمن زرًا لحفظ جهة الاتصال. 

عند الضغط على زر "Save"، يقوم الكود بالخطوات التالية:

1. استخراج البيانات:

   - يتم جلب الاسم من `nameController` بعد إزالة الفراغات الزائدة (`trim()`).

   - يتم جلب رقم جهة الاتصال من `contactController` بعد إزالة الفراغات الزائدة.

2. التحقق من الإدخال:

   - إذا كانت الحقول غير فارغة (`isNotEmpty`)، ينفذ الكود داخل الشرط.

3. إضافة جهة الاتصال:

   - يتم تحديث حالة الواجهة باستخدام `setState()`.

   - يتم إفراغ حقول الإدخال (`nameController.text = ''` و `contactController.text = ''`).

   - يتم إضافة جهة الاتصال الجديدة إلى قائمة جهات الاتصال (`contacts.add(Contact(name: name, contact: contact))`).

هذا الكود مسؤول عن حفظ بيانات جهة الاتصال المدخلة من قبل المستخدم وإضافتها إلى القائمة.

الصورة تظهر جزءًا من الشيفرة البرمجية في ملف `home_page.dart، موضحًا وظيفة زر التحديث "Update". عند الضغط على الزر، يقوم الكود بالآتي:

1. استخراج البيانات:

   - يتم جلب الاسم من `nameController` بعد إزالة الفراغات الزائدة (`trim()`).

   - يتم جلب رقم جهة الاتصال من `contactController` بعد إزالة الفراغات الزائدة.

2. التحقق من الإدخال:

   - إذا كانت الحقول غير فارغة (`isNotEmpty`)، يتم تنفيذ الكود داخل الشرط.

3. تحديث جهة الاتصال:

   - يتم تحديث حالة الواجهة باستخدام `setState()`.

   - يتم إفراغ حقول الإدخال (`nameController.text = ''` و `contactController.text = ''`).

   - يتم تحديث اسم ورقم جهة الاتصال المحددة في القائمة (`contacts[selectedIndex]`) بالقيم الجديدة.

   - إعادة تعيين `selectedIndex` إلى -1 للإشارة إلى عدم وجود جهة اتصال محددة حاليًا.

4. عرض الرسالة عند عدم وجود جهات اتصال:

   - إذا كانت قائمة جهات الاتصال فارغة (`contacts.isEmpty`)، يتم عرض نص "No Contact yet..".

باختصار، الكود مسؤول عن تحديث جهة اتصال موجودة في القائمة عند الضغط على زر "Update" وإعادة ضبط الحقول بعد التحديث.

الصورة تظهر جزءًا من الشيفرة البرمجية في ملف `home_page.dart

•child: ListView.builder(: هذا السطر يعرض استخدام ويدجيت ListView.builder. يُستخدم هذا الويدجيت لعرض قائمة من العناصر بناءً على بيانات محددة. يُعطى هنا عدد العناصر بواسطة itemCount ودالة لبناء كل عنصر itemBuilder.

•itemCount: contacts.length,: هذا السطر يحدد عدد العناصر التي سيتم عرضها في ListView بناءً على طول القائمة contacts.

الصورة تظهر جزءًا من الشيفرة البرمجية في ملف `home_page.dart

•foregroundColor: Colors.white,: يُحدد لون النص داخل العنصر، حيث يتم تعيينه هنا إلى اللون الأبيض.

•contacts[index].name[0],: يُعرض الحرف الأول من اسم جهة الاتصال الموجودة في الفهرس index.

•Text(contacts[index].name, style: const TextStyle(fontWeight: FontWeight.bold),),: يُعرض اسم جهة الاتصال كنص بنمط عريض.

•Text(contacts[index].contact),: يُعرض معلومات جهة الاتصال كنص.

الصورة تظهر جزءًا من الشيفرة البرمجية في ملف `home_page.dart

•nameController.text = contacts[index].name;: يُعيّن قيمة النص في متغير التحكم nameController بالاسم الموجود في قائمة الاتصالات في الفهرس index.

•contactController.text = contacts[index].contact;: يُعيّن قيمة النص في متغير التحكم contactController بمعلومات الاتصال الموجودة في قائمة الاتصالات في الفهرس index.

•setState(() { selectedIndex = index; });: يُحدث الحالة لتحديد العنصر المختار في الفهرس index، مما يتسبب في إعادة بناء واجهة المستخدم لعرض العنصر المحدد.

•Inkwell(onTap: (() { setState(() { contacts.removeAt(index); }); })),: يُقوم بإضافة تفاعل يُسمح للمستخدم بحذف العنصر المحدد عند النقر عليه. وعند النقر، يتم حذف العنصر الموجود في الفهرس index من قائمة الاتصالات.

الصورة تظهر جزءًا من الشيفرة البرمجية في ملف main.dart

هذا الملف هو نقطة البداية لتطبيق الهاتف

•import 'package:contacts_app/home_page.dart';: يستورد صفحة الرئيسية HomePage من ملف home_page.dart.

• import 'package:flutter/material.dart';: يستورد مكتبة Flutter لواجهات المستخدم والمرئيات.

• void main() { ... }: دالة main() هي نقطة البداية للتطبيق. تُشغل تطبيق Flutter وتمرر إليه MyApp كنقطة بداية.

•itemBuilder: (context, index) => getRow(index),: هذا السطر يحدد الطريقة التي يتم بها بناء كل عنصر في ListView. يتم استدعاء دالة getRow لبناء كل عنصر.

•ا runApp(const MyApp());: تُشغل التطبيق بتمرير MyApp كمدخل.

• class MyApp extends StatelessWidget { ... }: تعريف لتطبيق MyApp الذي يمثل التطبيق بأكمله.

• const MyApp({Key? key}) : super(key: key);: يعرف مُنشئ لتطبيق MyApp.

• Widget build(BuildContext context) { ... }: يعرض ويقوم ببناء واجهة التطبيق بما فيها صفحة الرئيسية وتفاصيل التصميم مثل العنوان والثيم والشعار.

• MaterialApp( ... ): يعرف تطبيقًا جديدًا بمعلومات مثل العنوان والثيم وصفحة البداية.

• home: const HomePage(),: يحدد صفحة البداية للتطبيق التي ستكون HomePage.

      تم إعداد البحث من قبل المهندسة/امةالرحمن الاسكندر

      لطلب البحث يرجى التواصل معنا عبر الواتساب من خلال الضغط على الرابط التالي:https://wa.me/+967770177866