اذهب إلى المحتوى

محمد المتوكل

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    9

  • تاريخ الانضمام

  • تاريخ آخر زيارة

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة محمد المتوكل

  2. إضافة زر التسجيل بحساب تويتر

    في أسئلة البرمجة

    نشر

    بتاريخ الآن قال محمد ربيع زليول:

    إن كنت تستخدم express، أنصحك بإستخدام مكتبة passport، تقدم المكتبة خيارات لتسجيل الدخول عن طريق مختلف مواقع التواصل الإجتماعي، والتي من بينها Twitter طبعًا.

    لا أنا لا أستعمل express للأسف

    هل هذا يعني أن التعامل مع api تويتر ليس كالتعامل مع google أو facbook

    وجدت التعامل معها صعبا مقارنة بالآخرين

  3. إضافة زر التسجيل بحساب تويتر

    في أسئلة البرمجة

    نشر

    بتاريخ 2 دقائق مضت قال محمد ربيع زليول:

    لإضافة تسجيل الدخول عن طريق تويتر يجب عليك أولًا القيام بالخطوات التالية:

    1. التسجيل كمطور على تويتر: يمكن القيام بذلك من هذا الرابط.
    2. إنشاء تطبيق على منصة Twitter: يمكنك إنشاء تطبيق من خلال الرابط التالي، قم بالدخول وانشاء تطبيق عن طريق ملئ الحقول الازمة، حقل callback URL هو الرابط الذي ستقوم من خلاله بإعادة توجيه المستخدم بعد تسجيله للدخول، كما أنه عليك التأكد من تحديد الخيار "السماح باستخدام هذا التطبيق لتسجيل الدخول باستخدام Twitter".
    3. احصل على مفاتيحك: بعد إنشاء تطبيقك ، ستتمكن من الحصول على مفتاحي العميل Consumer Key و Consumer Secret  من علامة التبويب Keys and Access Tokens في صفحة التطبيق.
    4. تحقق من أذوناتك: إذا كنت ترغب في استرداد البريد الإلكتروني للمستخدم لتسجيله في تطبيقك ، فعليك تغيير أذوناتك في تبويب الأذونات في صفحة التطبيق. حدد الخيار "طلب عنوان بريد إلكتروني من المستخدمين".

    ثم عليك البحث عن مكتبة للقيام بعملية تسجيل الدخول، تختلف المكتبات من لغة برمجية لأخرى وتحتاج هذه المكتبات Consumer Key و Consumer Secret للعمل.

    أنا أريد إسعمال javascript هل من مكتبات تنصحني بها

  5. الإنتقال بين views مع animation في angular js

    في تطوير الواجهات الأمامية

    نشر

     
     
     
     
    بتاريخ On 6/4/2020 at 08:10 قال محمد ربيع زليول:

    لإضافة animation قم بتضمين مكتبة animate: 

    
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.9/angular-animate.min.js"></script>

    ثم قم بإضافة وحدة ngAnimate للوحدة الرئيسية: 

    
var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);

    ثم قم بكتابة Animation عن طريق CSS Animations.

    ثم ضعها بملف CSS الخاص بك، مثلا قمت بإنشاء slideInRight و slideOutLeft كالتالي: 

    
@keyframes slideInRight {
    from    { transform:translateX(100%); }
    to      { transform: translateX(0); }
}

@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

    الآن تتبقى خطوة واحدة فقط وهي إضافة محددات لصنفي ng-enter و ng-leave.

    • المحدد الأول يأتي لتعريف Animation عند الإنتقال لل view.
    • المحدد الثاني لتعريف Animation عند مغادرة View. 
    
.ng-enter{ animation: slideOutLeft 0.5s both ease-in; z-index: 8888; }

.ng-leave{ animation: slideInRight 0.5s both ease-in; z-index: 9999; }

    ليصبح الكود الكامل كالتالي: 

    
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.7.9/angular-route.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.7.9/angular-animate.min.js"></script>

    <style>
      body {
        text-align: center;
      }
      @keyframes slideInRight {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(0);
        }
      }

      @keyframes slideOutLeft {
        to {
          transform: translateX(-100%);
        }
      }

      .ng-enter {
        animation: slideOutLeft 0.5s both ease-in;
        z-index: 8888;
      }
      .ng-leave {
        animation: slideInRight 0.5s both ease-in;
        z-index: 9999;
      }
    </style>
  </head>
  <body ng-app="myApp">
    <div ng-view></div>

    <a href="#/!">Main page</a>
    <a href="#!page1">Page 1</a>
    <a href="#!page2">Page 2</a>
    <a href="#!page3">Page 3</a>

    <script>
      var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);
      app.config(function ($routeProvider) {
        $routeProvider
          .when("/", {
            template: "<h1>Main page</h1><p>This is the main page</p>",
          })
          .when("/page1", {
            template: "<h1>Page 1</h1><p>This is the first page</p>",
          })
          .when("/page2", {
            template: "<h1>Page 2</h1><p>This is the second page</p>",
          })
          .when("/page3", {
            template: "<h1>Page 3</h1><p>This is the third page</p>",
          });
      });
    </script>
  </body>
</html>

    عدلت الملف السابق وأضفت له Animation يمكنك الإطلاع عليه من هنا.

    وهذا مشروع يحتوي على بعض التفاصيل إن أحببت الإطلاع عليه من هنا.

    جزاك الله خيرا أخي محمد على تعاونك و جعل هذا في ميزان حسناتك ووفقت للخير إن شاء الله

  7. الإنتقال بين views مع animation في angular js

    في تطوير الواجهات الأمامية

    نشر

    بتاريخ الآن قال Nezar Madi:

    أهلا محمد..

    ليس لدي دراية بAngular و لكن في حال كان فهمي لك صائبا فإن ما تتحدث عنه متواجد في vue و يسمى route transition و بعد البحث و وجدت كذلك في angular يسمى route transition animation و يوجد صفحة تتحدث عنه بالتفصيل في الدوكمنتيشن الخاصة بالفريموورك أنصحك بالإطلاع عليها في حال لم تفعل.

    رابط الصفحة ، تحياتي

    أشكر تعاونك,

    لقد إطلعت على الصفحة قبل نشري السؤال لكن وجدت أنه موجهة لمن يستعملون angular cli وأنا ليست لدي هذه الميزة لكن أقدر حقا مساعدتك وجزاك الله خيرا

    • أعجبني 1

  8. الإنتقال بين views مع animation في angular js

    في تطوير الواجهات الأمامية

    نشر

    السلام عليكم ورحمة الله وبركاته

    لدي برنامج ويب (مشابه لـ "أنا" ) وأستخدم فيه angular Js لعمل Route  بين الصفحات مع العلم أني لا أستعمل angular من cli وأريد أن أضيف تحريك يظهر عندما ينتقل المستخدم بين ال views ولقد بحثت في google ووجدت أغلب الدروس تتحدث عن الذين يستعملون angular cli

    أرجو من كل من يستطيع أن ينفعني أن يشارك جزاكم الله خيرا

  9. مشكلة الحفظ في الالستريتور بصيغة png

    في أسئلة التصميم

    نشر

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

    1-افتح الملف في اليستريتر وافتح الفوتوسوب في نفس الوقت .

    2-أنقل ماتريد من الاليسريتر الى الفوتوشوب عن طريق الماوس. 

    3-سيدخل الى الفوتوشوب بإسم (Objet dynamique vectoriel).

    أذكرك اخي الن هذا فقط بديل وليس الأصل

×
×
  • أضف...