• 0
sweilemj

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

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

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

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

 

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

img1.thumb.png.2cd8bd604f32907896c92ef1ade93475.png

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

 

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

 

اولا :

نبداء باستخدام هذه الاضافة من هنا 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

 

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

 

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

<meta charset="utf-8" />

بالسطر رقم 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 :

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

 

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

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

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

تم بحمد الله

 

0

شارك هذه المشاركة


رابط المشاركه
شارك

0 اجابات علي هذا السؤال

لاتوجد اجابات علي هذا السؤال بعد

انشئ حساب جديد او قم بتسجيل دخولك لتتمكن من اضافه تعليق جديد

يجب ان تكون عضوا لدينا لتتمكن من التعليق

انشئ حساب جديد

سجل حسابك الجديد لدينا في الموقع بمنتهي السهولة .


سجل حساب جديد

تسجيل الدخول

هل تمتلك حساب بالفعل ؟ سجل دخولك من هنا.


سجل دخولك الان

Ads Belongs To This website


عالم البرمجة

عالم البرمجة مقالات برمجة و دورات مجانية لإحتراف البرمجة هدفنا تبسيط البرمجة ونشرها بيد الكل بشكل ممتع ومتطور ومحدث بإستمرار لمواكبة جديد تطورات البرمجة الحديثة و المتقدمة بدون مقابل