شرح كيفية عمل نافذه ( تنبيه ) لتثبيت التطبيق باعلى الموقع

sweilemj • منذ 7 سنوات

بسم الله الرحمن الرحيم

للتنبيه :: الموضوع بقسم النقاشات العامه وليس سؤال وجواب

في هذا الدرس باذن الله سوف اقوم بشرح كيفية عمل نافذه ( تنبيه ) لتثبيت التطبيق باعلى الموقع , سوا للاندرويد او اجهزة الـ (IOS) او هواتف ويندوز فون ...

مثال على التنبيه

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

الآن راح نبداء بطريقة عمل هذه الاضافة ...

اولا :

نبداء باستخدام هذه الاضافة من هنا Smart App Banner , مايميز هذه الاضافة انها لاتستخدم اي اطار عمل حتى jQuery ! , طبعا راح تكون بلغة جافا سكربت .

ثانيا :

بعد تحميل الاضافة وفك الضغط عنها راح نحصل على ثلاث مجلدات بداخل مجلد smart-app-banner-master , كل مايهمنا هنا هو مجلد باسم dist لان الملفات الجاهزة تكون بداخله , طبعا يمكنك تخصيص الاضافة والتعديل عليها من الملفات بالمجلد الرئيسي لكن تتطلب معرفه متقدمه , لذلك راح نشرح على الملفات بداخل المجلد السابق dis.

ثالثا :

راح ننسخ الملفين smart-app-banner.css و smart-app-banner.js بداخل مجلد الموقع او مجلد الاستايل الخاص به , بعد نسخ الملفات نرجع لموقع الاضافة ونقوم بنسخ كود الـHTML بالاسفل ونقوم بلصقة بصفحة جديدة

هذه هو الكود بعد نسخه وسوف نقوم بالتعديل عليه مع شرح الخطوات ...


<html>
  <head>
    <title>MyPage</title>

    <meta name="apple-itunes-app" content="app-id=502838820">
    <meta name="google-play-app" content="app-id=ru.hh.android">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="node_modules/smart-app-banner/smart-app-banner.css" type="text/css" media="screen">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="android-touch-icon" href="android-icon.png" />
  </head>
  <body>
    ...
    <script src="node_modules/smart-app-banner/smart-app-banner.js"></script>
    <script type="text/javascript">
      new SmartBanner({
          daysHidden: 15,   // days to hide banner after close button is clicked (defaults to 15)
          daysReminder: 90, // days to hide banner after "VIEW" button is clicked (defaults to 90)
          appStoreLanguage: 'us', // language code for the App Store (defaults to user's browser language)
          title: 'MyPage',
          author: 'MyCompany LLC',
          button: 'VIEW',
          store: {
              ios: 'On the App Store',
              android: 'In Google Play',
              windows: 'In Windows store'
          },
          price: {
              ios: 'FREE',
              android: 'FREE',
              windows: 'FREE'
          }
          // , theme: '' // put platform type ('ios', 'android', etc.) here to force single theme on all device
          // , icon: '' // full path to icon image if not using website icon image
          // , force: 'ios' // Uncomment for platform emulation
      });
    </script>
  </body>
</html>

رابعا : راح نشرح الاسطر المهمه بالارقام , افضل من شرحها على الصورة

هذ صورة الكود بعد التعديل (الشرح بالاسفل )

img2.png.b217344b6af39e3a68d64083608bdcce.png

ملاحظة باقي الكود لم يظهر, للتسع الصورة لباقي الكود ....

الآن اول تعديل قمنا باضافته على الكود السابق , هو اضافة

بالسطر رقم 2 , الخاص بالترميز ليدعم اللغة العربية وتظهر بدون مشاكل ..

السطر 3 :

هنا سوف تقوم بوضع الـID الخاصبتطبيقك على الآب ستور AppStore

السطر 4 :

هنا تقوم بوضع اسم البكج الخاص بتطبيقك على قوقل بلاي , لاتضع الرابط قم بوضع اسم البكج فقط .

السطر 7 :

قم بوضع مسار ملف الـcss الصحيح الذي قمنا بنسخه للمجلد .

السطر 8,9 يمكنك جعلها كما هي افتراضيه لايقوان الايفون والاندرويد ...

السطر 13 :

قم بوضع مسار ملف JavaScript الصحيح الذي قمنا بنسخه للمجلد .

السطر 16 :

هنا قم بوضع عدد الايام التي سوف يظهر بعدها التنبيه مره اخرى , عند الضغط على إغلاق .

السطر 17 :

هنا قم بوضع عدد الايام التي سوف يظهر التنبيه مره اخرى , عند الضغط على تثبيت .

كلها تعتمد على الكوكيز الخاص بالمستخدم

السطر 18 :

اللغة الافتراضية للاب ستور AppStore يمكنك وضع 'ar' لللغة العربية .

السطر 19 :

اسم البرنامج او التطبيق .

السطر 20 :

هنا اسم ناشر التطبيق

السطر 21 :

يمكن وضع تنبيه او اي نص اخر

السطر 23,24,25,28,29,30 :

يمكنك وضع النصوص على حسب الترجمة التي تريد , من السطر 27 خاص بسعر التطبيق يمكنك كتابة مجاني .

السطر 33 :

ضع مسار ايقونة التطبيق .

حسنا هذا كل مافي الامر

يمكنك تجربته الآن بعد حفظ الملف ونشره على موقعك ,

لابد من تجربته على جهاز حقيقي ليعمل .

تم بحمد الله

كلمات دليلية:

أعجبني السؤال تابع السؤال شارك السؤال

ساعد بالإجابة

"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !

اشترك الآن