سلسلة التحدي الأسبوعي - التحدي 3 -

مسابقات
#1

سلسلة التحدي الأسبوعي :trophy:

العودة لتفاصيل السلسلة

مهمة الأسبوع

سنقوم في هذا الأسبوع ببناء نسختنا الشخصية لمؤقت أو Timer يعمل بتقنية Pomodoro

ماهي تقنية Pomodoro؟

تقنية البومودورو أو الطماطمة بإسمها الظريف :joy: كما أشار لها @Hussien في موضوعة الأخير والتي هي طريقة لإدارة الوقت وذلك عن طريق استخدام مؤقت لتقسيم وقت العمل إلى فترات زمنية مدة الواحدة منها 25 دقيقة، ويفصل فيما بينها فترات راحة قصيرة. وتسمى الفترة الواحدة “بوموداري”

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

  • اختر العمل الذي تريد القيام به.
  • اضبط المؤقت على 25 دقيقة.
  • ابدأ في العمل حتى ينتهي المؤقت.
  • خذ فترة راحة قصيرة لمدة 5 دقائق ثم عد مرةً أخرى للاستكمال.
  • عند الانتهاء من كل مهمة خذ أيضا لمدة 5 دقائق (أنت تستحق ذلك :star_struck:)
  • عند كل 4 بروموداري (فترات عمل) خذ راحة من 15 إلى 30 دقيقة.

ملاحظة: الواجهات لا تهم في هذا التحدي. المهم هو التطبيق أن يقوم بالمطلوب :ok_hand:

نقاط اضافية

  • إضافة Push notifications لتنبيه المستخدم حتى و إن كان خارج المتصفح.

  • اضافة صوت الجرس لتنبيه المستخدم أيضا :bell:

ماهي شروط التحدي؟

لا يوجد أي شروط على هذا التحدي حيث يمكنك استعمال أي تقنية تريدها.

كيف يتم تقييم المشاركات؟

  • احتواء التطبيق على كل الشروط المطلوبة

  • نظافة الأكواد و اتباع ال best practices

  • النقاط الإضافية

  • لا يهم سرعة عملك و المدة المستغرقة في الوصول للنتيجة لذلك خذ وقتك في العمل :grin:

كيف أقدم مشاركتي؟

  • قبل كتابة اي سطر برمجي، اكتب اسمك في التعليقات.

  • عند الانتهاء من العمل يجب عليك رفع الحل على Github

  • وضع الحل في التعليقات :point_down:


لا تتردد في طرح أي تساؤلات أو اقتراحات سواءا في التعليقات أو مراسلة الأعضاء المنظمين على الخاص

اعلان الفائز سيكون يوم 06/12
التحدي القادم يوم 07/12

بالتوفيق :heart:

12 Likes
#2

مشارك بإذن الله :star_struck:

6 Likes
#3

وانا كمان ،

انا بستخدم firebase messaging
حاليا التطبيق يعمل وفيه إمكانية install
لكن importScripts غير مدعوم

image
image.png1440×900 145 KB

4 Likes
#4

جميل جداا صديقي نصر :heart_eyes: @sniperadmin

هممم المفروض أنها مدعومة من طرف كل المتصفحات الحديثة! هل أنت متأكد أنه لا يوجد أي خطأ في كودك؟

لا تنسى تحط لنا مشاركتك هنا في التعليقات كي يراها الجميع :grin:

4 Likes
#5

حسب متابعتي للـdocumentation أعتقد أنه لا يوجد مشاكل:

// firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/5.5.6/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.5.6/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in the messagingSenderId.
firebase.initializeApp({
  'messagingSenderId': 'xxxxxxxxxxx'
});

// Retrieve an instance of Firebase Messaging so that it can handle background messages.
const messaging = firebase.messaging();

messaging.onMessage((payload) => {
  console.log('Message received. ', payload);
})

لا تقلق، سأفاجئكم :smile:

4 Likes
#6

كيف اعمل الساعه
وكيف العد التنازلى

4 Likes
#7

هتشتغل جافاسكريبت ولا python ؟

4 Likes
#8

سأشارك إن شاء الله

4 Likes
#9

ههههههههه حيابك ياهشام احلى تحدي لاحلي طماطمة :joy:.
لكن هناك سؤال هل استطيع عمله باستخدام HTML , CSS , JavaScript?

4 Likes
#10

الطماطمة :joy: أجمل و أظرف اسم @Hussien

أكيد يمكنك عمل ذلك باستعمال Html و CSS و Javascript. هيا أمتعنا بابداعاتك يا حسين :heart_eyes:

4 Likes
#11

نبدا بى البايثون

import time
def countdown(n) :
    while n > 0:
        print (n)
        n = n -1
        if n ==0:
            print('BLAST OFF!')
countdown(50)
```````````````  انا وصلت لحد هنا  انا عاوز تبقى بى دقائق  وعاوز اعمل  25 دقيقه
+ عاوز انظم افكارى فى البرمجه بس عاوز طريقه
2 Likes
#12

تم بحمد الله انجاز الطماطماية :tomato: بـ2 frameworks بالإضافة الى الطريقة الـstatic = [html-css-js]

ملاحظات:

  • خاصية PWA مطبقة في النسخ المبرمجة بالفريمووركات
  • لم أنجح في معرفة الطريقة السهلة في ارسال push notifications لقلة معرفتي عن ديناميكية التعامل مع workbox،
    importScripts، service workers
  • الطماطماية :tomato: مزودة بـ text-to-speech engine يعرف بـ responsiveVoice يدعم متصفحات الكمبيوتر والموبايل
  • التحدي بالنسبة لي هو اكتساب المرونة من خلال التعامل بكل من vue / react
  • أرجو توفير خطوات لشرح طريقة عمل push notifications بعد المسابقة ان شاء الله

وإليكم الروابط والمستودعات:

Static version (html):

VueJS Version:

https://stopwatch-f179e.firebaseapp.com
رابط المستودع:

React Version:

https://react-stopwatch-78b98.web.app/
رابط المستودع:

6 Likes
#13 
import time

def countdown(n) :
  while n > 0
    # هنطبع الرقم الأول
    print(n)
    # لازم نخلي البرنامج يوقف 1 ثانية
    time.sleep(1)
    # هنشيل رقم 1 بعد ما البرنامج يوقف
    n -= 1
    # في حالة لما العداد = 0 هنعرف اليوزر
    if n == 0:
        print('timer is off')
        break
# هنا هنطلب عدد الثواني اللي عايزينها
countdown(5)
1 Like
#14


واو

وقت قياسي لعمل المشروع بـ2 frameworks

خاصية PWA مطبقة في النسخ المبرمجة بالفريمووركات

طالما مطبق للـ PWA وجاهز بالـ service worker فهذا هو الدليل للـ push notifications:

شغل جبار ي نصر ماشاء الله عليك :ok_hand:

2 Likes
#15

انا عملت كده انا عاوز اعمله دقائق

2 Likes
#16

:raised_hand::raised_hand:

2 Likes
#17

سأتفقد الشرح حالا :slight_smile:

1 Like
#18

يمكنك استخدام divmod method قبل ما تنقص 1 من الثواني:

# للتحويل لدقائق
m, s = divmod(n, 60)

# للتحويل لساعات
h, m = divmod(m, 60)

# بالنسبة للشكل ده `00:00:00` هنستخدم zfill عشان نطبع column زيادة
print(str(h).zfill(2) + ":" + str(m).zfill(2) + ":" + str(s).zfill(2))
1 Like
#19

ههههههههه ولايهمك هذه المرة ساكون حاضرا باذن الله :heart_eyes:

1 Like
#20

ما شاء الله
ما هذا الابداع؟؟؟
شيء عظيم

2 Likes