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

1. ‫التدريجي‬ ‫الويب‬ ‫تطبيقات‬ ‫تطوير‬
‫مستخدم‬ ‫تجربة‬ ‫توفير‬ ‫في‬ ‫ترغب‬ ‫التي‬ ‫للشركات‬ ‫ًا‬‫ع‬‫رائ‬ ‫ا‬ً‫خيار‬ ‫تقدمي‬ ‫ويب‬ ‫تطبيق‬ ‫تطوير‬ ‫يكون‬ ‫أن‬ ‫يمكن‬
‫في‬ .‫وسريعة‬ ‫موثوقة‬ ‫التطبيقات‬ ‫تشبه‬ ‫تجربة‬ ‫إنشاء‬ ‫يمكنك‬ ،‫الحديثة‬ ‫الويب‬ ‫تقنيات‬ ‫باستخدام‬ .‫لعمالئها‬ ‫محسنة‬
‫بعض‬ ‫ًا‬‫ض‬‫أي‬ ‫سنناقش‬ .‫تطويرها‬ ‫يمكنك‬ ‫وكيف‬ ‫التقدمية‬ ‫الويب‬ ‫تطبيقات‬ ‫ماهية‬ ‫سنستكشف‬ ،‫هذا‬ ‫المدونة‬ ‫منشور‬
‫التدريجي‬ ‫التطوير‬ ‫عن‬ ‫المزيد‬ ‫بمعرفة‬ ‫ًا‬‫م‬‫مهت‬ ‫كنت‬ ‫إذا‬ ،‫لذا‬ .‫التطبيقات‬ ‫لتطوير‬ ‫النهج‬ ‫هذا‬ ‫استخدام‬ ‫فوائد‬
!‫الزبيدي‬ ‫بهاء‬ ‫من‬ ‫القصة‬ ‫قراءة‬ ‫في‬ ‫فاستمر‬ ،‫الويب‬ ‫لتطبيقات‬
‫تطبيق‬
‫الويب‬
:‫التقدمي‬
(
PWA
)
‫هو‬
‫نوع‬
‫من‬
‫تطبيقات‬
‫الويب‬
‫يقدم‬
‫تجربة‬
‫مستخدم‬
‫مشابهة‬
‫لتجربة‬
‫تطبيق‬
‫الهاتف‬
.‫المحمول‬
‫يتم‬
‫بناء‬
PWAs
‫باستخدام‬
‫تقنيات‬
‫الويب‬
،‫القياسية‬
‫مثل‬
HTML
‫و‬
CSS
‫و‬
JavaSCricpt
.
‫تشمل‬
‫فوائد‬
‫تطوير‬
PWA
‫القدرة‬
‫على‬
‫الوصول‬
‫إلى‬
‫جمهور‬
‫أوسع‬
‫حيث‬
‫يمكن‬
‫الوصول‬
‫إلى‬
PWAs
‫على‬
‫أي‬
‫جهاز‬
‫باستخدام‬
‫متصفح‬
.‫الويب‬
‫تحسين‬
‫األداء‬
‫ا‬ً‫نظر‬
‫ألن‬
PWAs
‫يتم‬
‫تقديمها‬
‫من‬
‫قاعدة‬
‫رموز‬
.‫واحدة‬
‫باإلضافة‬
‫إلى‬
،‫ذلك‬
‫فإن‬
‫تطوير‬
PWAs
‫أسهل‬
‫وأرخص‬
‫بشكل‬
‫عام‬
‫من‬
‫تطبيقات‬
‫الهاتف‬
‫المحمول‬
.‫المحلية‬
.‫اإلنترنت‬ ‫عبر‬ ‫وجودها‬ ‫تحسين‬ ‫في‬ ‫ترغب‬ ‫التي‬ ‫للشركات‬ ‫ًا‬‫ب‬‫جذا‬ ‫ا‬ً‫خيار‬ ‫نقدم‬ ،‫لذلك‬ ‫نتيجة‬
‫؟‬ ‫لعملك‬ ‫الويب‬ ‫لتطبيق‬ ‫الصحيح‬ ‫التدريجي‬ ‫التطوير‬ ‫تختار‬ ‫كيف‬
‫تحتاج‬ ‫التي‬ ‫األشياء‬ ‫بعض‬ ‫فهناك‬ ،‫لعملك‬ ‫الصحيح‬ ‫التدريجي‬ ‫الويب‬ ‫تطبيق‬ ‫تطوير‬ ‫باختيار‬ ‫األمر‬ ‫يتعلق‬ ‫عندما‬
.‫االعتبار‬ ‫في‬ ‫أخذها‬ ‫إلى‬
1
.
‫ومعروف‬ ‫حافل‬ ‫بسجل‬ ‫تتمتع‬ ‫معها‬ ‫تعمل‬ ‫التي‬ ‫الشركة‬ ‫أن‬ ‫من‬ ‫التأكد‬ ‫إلى‬ ‫تحتاج‬ ،‫شيء‬ ‫كل‬ ‫وقبل‬ ً‫ال‬‫أو‬
‫و‬ ‫البطيء‬ ‫بالعمل‬ ‫حافل‬ ‫من‬ ‫تاريخ‬ ‫لديها‬ ‫شركة‬ ‫مع‬ ‫العمل‬ ‫من‬ ‫فائدة‬ ‫ال‬ .‫الجودة‬ ‫عالية‬ ‫أعمال‬ ‫بتقديم‬
.‫مناسبة‬ ‫الغير‬ ‫الجودة‬
2
.
‫نوع‬ ‫تطوير‬ ‫في‬ ‫بخبرة‬ ‫تتمتع‬ ‫معها‬ ‫تعمل‬ ‫التي‬ ‫الشركة‬ ‫أن‬ ‫من‬ ‫التأكد‬ ‫إلى‬ ‫تحتاج‬ ،‫ذلك‬ ‫إلى‬ ‫باإلضافة‬
.‫عنها‬ ‫تبحث‬ ‫التي‬ ‫النتائج‬ ‫تقديم‬ ‫من‬ ‫يتمكنوا‬ ‫فلن‬ ،‫كذلك‬ ‫يكونوا‬ ‫لم‬ ‫إذا‬ .‫تحتاجه‬ ‫الذي‬ ‫التطبيق‬
3
.
‫بعد‬ .‫مرن‬ ‫زمني‬ ‫لجدول‬ ‫ا‬ً‫ق‬‫وف‬ ‫معك‬ ‫للعمل‬ ‫مستعدة‬ ‫معها‬ ‫تعمل‬ ‫التي‬ ‫الشركة‬ ‫أن‬ ‫من‬ ‫التأكد‬ ‫عليك‬ ،‫ا‬ً‫أخير‬
.‫العكس‬ ‫وليس‬ ،‫عملك‬ ‫الحتياجات‬ ‫ا‬ً‫ق‬‫وف‬ ‫التطوير‬ ‫إلى‬ ‫تطبيقك‬ ‫يحتاج‬ ،‫شيء‬ ‫كل‬
‫تطبيقات‬ ‫تطوير‬ ‫شركة‬ ‫ستجد‬ ‫أنك‬ ‫من‬ ‫ا‬ً‫ق‬‫واث‬ ‫تكون‬ ‫أن‬ ‫يمكنك‬ ،‫االعتبار‬ ‫في‬ ‫العوامل‬ ‫هذه‬ ‫كل‬ ‫أخذ‬ ‫خالل‬ ‫من‬
.‫لعملك‬ ‫المناسبة‬ ‫التقدمية‬ ‫الويب‬
‫اإلنترنت‬ ‫شبكة‬ ‫على‬ ‫تدريجي‬ ‫تطبيق‬ ‫تطوير‬ ‫عليها‬ ‫ينطوي‬ ‫التي‬ ‫الخطوات‬

2. ‫تطبيقات‬
‫الويب‬
‫التقدمية‬
(
PWAs
)
‫هي‬
‫تطبيقات‬
‫ويب‬
‫مبنية‬
‫باستخدام‬
‫تقنيات‬
‫الويب‬
‫الحديثة‬
‫ويمكن‬
‫نشرها‬
‫على‬
‫خوادم‬
.‫الويب‬
‫تستفيد‬
PWAs
‫من‬
‫اإلمكانات‬
‫الجديدة‬
‫التي‬
‫توفرها‬
،‫المتصفحات‬
‫بما‬
‫في‬
‫ذلك‬
‫عمال‬
.‫المحلية‬ ‫المحمول‬ ‫الهاتف‬ ‫تطبيقات‬ ‫لتجربة‬ ‫مشابهة‬ ‫مستخدم‬ ‫تجربة‬ ‫إلنشاء‬ ،‫اإلشعارات‬ ‫ودفع‬ ‫الخدمة‬
‫باإلضافة‬
‫إلى‬
،‫ذلك‬
‫يمكن‬
‫تثبيت‬
PWAs
‫على‬
‫أجهزة‬
‫من‬
‫متاجر‬
،‫التطبيقات‬
‫مثل‬
Google Play Store
‫أو‬
Apple App Store
.
‫وفيما‬
‫يلي‬
‫لمحة‬
‫عامة‬
‫عن‬
‫الخطوات‬
‫التي‬
‫ينطوي‬
‫عليها‬
‫وضع‬
‫تقييم‬
‫للـ‬
PWA
●
‫ينبغي‬ ،‫المتطلبات‬ ‫وضع‬ ‫من‬ ‫االنتهاء‬ ‫وبمجرد‬ .‫واستعراضها‬ ‫المشروع‬ ‫احتياجات‬ ‫جمع‬ ‫يجب‬ ،‫أوال‬
.‫المقترحة‬ ‫والنواتج‬ ‫الزمني‬ ‫الجدول‬ ‫تحدد‬ ‫للمشروع‬ ‫طريق‬ ‫خارطة‬ ‫وضع‬
●
‫والمطورين‬ ‫األمامية‬ ‫الواجهة‬ ‫مطوري‬ ً‫ة‬‫عاد‬ ‫سيشمل‬ ‫والذي‬ ،‫المشروع‬ ‫فريق‬ ‫تجميع‬ ‫يجب‬ ،‫ذلك‬ ‫بعد‬
.‫الجودة‬ ‫ضمان‬ ‫ومحللي‬ ‫والمصممين‬ ‫الخلفيين‬
●
.‫التطوير‬ ‫يبدأ‬ ‫أن‬ ‫يمكن‬ ،‫الفريق‬ ‫تجميع‬ ‫بمجرد‬
‫سيبدأ‬
‫مطورو‬
‫الواجهة‬
‫األمامية‬
‫بإنشاء‬
‫صفحات‬
‫ومكونات‬
‫باستخدام‬
HTML
‫و‬
CSS
‫و‬
JavaScript
.
.‫المحمولة‬ ‫واألجهزة‬ ‫المكتب‬ ‫أجهزة‬ ‫من‬ ‫كل‬ ‫على‬ ‫جيد‬ ‫بشكل‬ ‫لتعمل‬ ‫والمكونات‬ ‫الصفحات‬ ‫هذه‬ ‫تصميم‬ ‫سيتم‬
‫برمجة‬ ‫وواجهات‬ ‫الخادم‬ ‫لجانب‬ ‫التحتية‬ ‫البنية‬ ‫إنشاء‬ ‫على‬ ‫الخلفية‬ ‫النهاية‬ ‫مطورو‬ ‫سيعمل‬ ،‫ذلك‬ ‫مع‬ ‫بالتوازي‬
.‫التطبيقات‬
‫مثل‬ ،‫ضرورية‬ ‫بصرية‬ ‫أصول‬ ‫أي‬ ‫المصممون‬ ‫سينشئ‬ ،‫والخلفية‬ ‫األمامية‬ ‫التطوير‬ ‫أعمال‬ ‫من‬ ‫االنتهاء‬ ‫بمجرد‬
‫المتطلبات‬ ‫بجميع‬ ‫يفي‬ ‫أنه‬ ‫من‬ ‫للتأكد‬ ‫التطبيق‬ ‫جودة‬ ‫ضمان‬ ‫محللو‬ ‫سيختبر‬ ،‫ا‬ً‫أخير‬ . ‫وغيرها‬ ‫األيقونات‬
.‫المطلوبة‬ ‫الوظيفية‬ ‫وغير‬ ‫الوظيفية‬
‫تطبيقات‬
‫الويب‬
‫التقدمية‬
(
PWAs
)
‫هي‬
‫الشيء‬
‫الكبير‬
‫االقادم‬
‫في‬
‫تطوير‬
.‫الويب‬
‫إنهم‬
‫يجمعون‬
‫بين‬
‫أفضل‬
‫ما‬
‫موقع‬ ‫لتطوير‬ ‫متطور‬ ‫حل‬ ‫عن‬ ‫تبحث‬ ‫كنت‬ ‫إذا‬ .‫وجذاب‬ ‫وموثوق‬ ‫سريعة‬ ‫التطبيقات‬ ‫تشبه‬ ‫تجربة‬ ‫ويقدم‬ ،‫موجود‬
‫الويب‬
‫يمنح‬
‫مستخدميك‬
‫أفضل‬
‫تجربة‬
،‫ممكنة‬
‫فقد‬
‫يكون‬
PWA
‫ًا‬‫ب‬‫مناس‬
.‫لك‬
www.bahaaalzubaidi.net
‫شكرا‬
‫الهتمامكم‬
‫بمدونات‬
‫بهاء‬
.‫الزبيدي‬
‫ترقبوا‬
‫المزيد‬
‫على‬