مرحبا بالجميع! في الآونة الأخيرة ، كانت هناك مسابقة من VKontakte Mobile Challenge ، وفاز عملي بجائزة. بناءً على تعليمات المرحلة الثانية ، كان من الضروري تطوير موجز أخبار للأجهزة المحمولة ، وكانت معايير التقييم الرئيسية هي التمرير السلس والتحميل اللاحق. عندما شاركت ، قررت أنه بغض النظر عن النتيجة النهائية ، سأحاول كتابة مقال عن النهج المتبع في تنفيذ الشريط وعن مشاعري ومشاعري أثناء المسابقة. ما فعلت. تحت نصائح القط والحيل لتطوير تغذية الأخبار في وضع سرد القصص.
عن المسابقة
بادئ ذي بدء ، يجدر الحديث قليلاً عن المنافسة. كما أعرف ، تنظم فكونتاكتي سنويًا مثل هذه الأحداث لمطوري الأجهزة المحمولة. أنا شخصيا شاركت بالفعل في عامي 2012 و 2013. وكانت المهام تطوير الدردشة ومرشحات الصور ، على التوالي. في عام 2013 ، تمكنت من الوصول إلى الجولة النهائية وكسب 100000 روبل ، والتي بدا لي حينها مبلغًا جيدًا لمدة 4 أيام من العمل الشيق.
ومشاهدة الإعلانات على شبكة اجتماعية ، قررت أن أحتاج إلى المحاولة ، لأن الشيء الرائع هو أن تثبت لنفسك أنك لا تزال قادرًا على كتابة كود عالي الجودة في وقت قصير جدًا)
كانت هناك مرحلتان في المسابقة: في المرحلة الأولى ، تم اقتراح اجتياز اختبار لـ 30 سؤالًا وحل مشكلتين في الأولمبياد وواحدة عالية الجودة (أي الحل عبارة عن مجموعة من أفكارك في شكل نص). في الجولة الثانية التي تضم أكثر من 1000 شخص ، مر 112 فقط (نحن نتحدث فقط عن iOS ، وعلى نظام Android قيم أقل قليلاً) وبدأت المرحلة الرئيسية - تطوير التطبيق.
عند التعيين ، كان عليك إنشاء موجز للأخبار وكتابة التكامل مع VK API بنفسك ، وكان يجب أن تكون الخلاصة سلسة للغاية على جميع الأجهزة ، وكانت هناك متطلبات معينة لإخراج المحتوى (النشرات ذات الصور ومجموعة متقاطعة ، عدادات الإعجابات ، المشاركات ، عدد مرات المشاهدة ، بالإضافة إلى القدرة على تقليل ونشر المشاركة في ظل ظروف معينة).
وضعت تخطيطات في figma. يعد هذا اختيارًا جيدًا للمنافسة - نظرًا لوجود عدد من المستخدمين النشطين ، يتم الشعور بالمنافسة على الفور (وحتى يتم إيقافها يوم السبت بسبب تجاوز الحد المتزامن البالغ 50 اتصالًا).
بشكل عام ، كان تنظيم المسابقة سلسًا ، باستثناء بضع نقاط: مباشرة بعد نشر المهمة ، تبين أن الارتباط بالتخطيطات قد تم كسره ، ثم ، كما قلت أعلاه ، تم حظر الدخول إلى Figma (تم إصلاح هذه المشكلة بسرعة كبيرة) ، جيدًا ، بعد انتهاء الحدث نتوقع نتائج. لكن كل العناصر السلبية تنعش وظيفة مماثلة:
خطة النصر والاستراتيجية
كتلة مهمة جدا ومثيرة للاهتمام إذا كنت تشارك في المسابقات أو ترغب في محاولة. قبل المشاركة ، أوصي الجميع بالتفكير في الهدف الذي تسعى لتحقيقه والنتيجة التي ترغب في الحصول عليها. قبل أن أبدأ المسابقة ، قررت بنفسي أن أرغب في الفوز بها (أي الحصول على الجائزة). وللقيام بذلك ، تحتاج إلى استراتيجية:
فيما يلي صيغة الإستراتيجية الفائزة (يبدو لي أنها عالمية وبسيطة ، لكنني متأكد من أن معظم المشاركين لا يتبعونها):
- قراءة المهمة بعناية فائقة . بعد بضع ساعات ، اقرأها مرة أخرى (حصلت في موقف عدة مرات عندما لم أكن أدرك المهام في المرة الأولى). وقبل ساعتين من التسليم مرة واحدة فقط في حالة.
- قم بطرح الأسئلة واطرحها على المنظمين (عادة ما لا تأخذ متطلبات المهمة في الاعتبار العديد من المواقف ، أو يتم كشفها بشكل سطحي للغاية). فعلت ذلك بالضبط ، حيث حصلت على إجابات بأسلوب "اختيارك".
- ضع خطة مشروع نعم ، المشاركة في مسابقة أو hackathon هو مشروع. للمشروع هدف ، جدول زمني ، موارد وميزانية. الوقت محدود للغاية ، ومن المستحيل تحريك نهاية التغيير. لا يمكن دعوة أشخاص إضافيين - المسابقة ليست منافسة جماعية. كل ما لديك هو شعبك. / ساعات. حدِّد على الفور المبلغ الذي ترغب في إنفاقه (فكر جيدًا في المبلغ الذي ستذهب إليه للنوم ، والطعام ، والإخصاء ، والاستراحات ، ونعم ، ستنخفض إنتاجيتك بسبب التعب والأعصاب من الشعور بالعجز أمام إطار زمني يقترب بلا هوادة).
- يجب أن تحتوي الخطة على مهام وأولوياتها وأوزانها (استخدمت تقديرات النموذج 1 و 2 و 4 و 8). ويشمل التقييم المدة وعدم الرغبة في الوفاء بها والمخاطر المحتملة (التعقيد ، والظروف غير المفهومة ، وعدم الخبرة في هذا التطور ، وما إلى ذلك). بعد ذلك ، يمكنك وضع خطة مفصلة (أو مهام خريطة الطريق) - أولاً تلك الأكثر أهمية وتعقيدًا (اتركها سهلة ومفهومة في النهاية).
- اختر بعض الفواصل الزمنية أو المعالم الكبيرة (الأيام رائعة - كان لدينا 3 أيام). وبينما تمر بكل منها ، انظر إلى خطة عملك ، وحلل المهام ، وفرزها ، والأهم من ذلك ، شطب تلك التي قمت بها بالفعل بكل سرور.
الآن النصيحة (لقد فعلت ذلك): انظر بعناية في كيفية صياغة المهمة ، سواء كانت تحتوي على الكلمتين "مطلوب" و "إضافي". وما هي معايير التقييم للعناصر من "الإضافي" ، أي ما إذا كانت ستتجاوز افتقارها إلى المتطلبات المنفذة من قسم "إلزامي". أنا أشك في ذلك. لذلك ، ركز على القسم "المطلوب". بنفسي ، شطبت عمومًا القسم "المتقدم" ولم أكن أنوي البدء به. - عند التنفيذ ، كن حذرًا في التفاصيل . على سبيل المثال ، إذا كانت المهمة بها الكثير من نماذج الواجهة ، فقم بذلك بالطريقة التي يتم عرضها بها في التخطيطات. انتبه إلى المسافات البادئة والخطوط والظلال وتباعد الأسطر وما إلى ذلك هذا سيضيف لك بالتأكيد نقاط للدقة والاتساق. بالمناسبة ، في Figma ، بخلاف Zeplin ، هناك تصدير واسع للغاية من الإعدادات ، على سبيل المثال ، يمكنك الحصول على NSAttributedString جيد.
تم فتح المهمة في ليلة الخميس إلى الجمعة. الجمعة يوم عمل ولم تكن هناك فرصة ورغبة في المشاركة في مسابقة في العمل. لذلك ، بعد عودتي من العمل ليلة الجمعة ، شاركت أولاً في تخطيط وتقييم وحساب مقدار الوقت الحقيقي الذي يمكنني قضاءه.
كانت الخطة الأولية على النحو التالي:
| يوم | الوقت | المهام |
| الجمعة | 4 ساعات | إذن ، الحصول على بيانات لملف التعريف والشريط. |
| السبت | 9 ساعات | النموذج الأولي للشريط مع عرض المربعات الحمراء ذات ارتفاعات مختلفة ، وتحميلها في الأعلى بالسحب للتحديث والتحميل إلى ما لا نهاية في السجل ، وإعداد جميع الطرز والخدمات (العمل مع واجهة برمجة التطبيقات ، وطلب التخزين المؤقت ، وتخزين الصور مؤقتًا).
|
| الأحد | 9 ساعات | إخراج البيانات الحقيقية (النص والصور الفردية والدوارات) ، عدادات الإعجابات ، المشاهدات والضبط النهائي حسب التخطيطات. |
تقنية تنفيذ الشريط
الصيحة! السادة ، المطورين ، لقد وجدت الكتلة الصحيحة. هنا سنتحدث عن تنفيذ الجزء الرئيسي من المهمة - تغذية الأخبار.
بشكل عام ، إذا قمنا بفك الارتباط ، فإن موجز الأخبار ليس سوى تطبيق مطبق ، بشكل عام ، سنتحدث عن إنشاء قائمة بالكيانات غير المتجانسة (أي ، يمكن أن يكون لكل منها شاشة خاصة بها ، والتي تتطلب حسابات إضافية وارتفاعها ، والتي يمكن أن تتغير ديناميكيًا حتى بعد عرض المنشور) ، بالإضافة إلى أنه يمكن تحديث القائمة من خلال السحب إلى التحديث وتحميل البيانات بلا حدود من الأسفل.
كانت المشكلة العامة التي قررت حلها في المقام الأول. الخطوة الأولى هي تحليل الحلول الحالية. تحتاج إلى التركيز على الأقوى ، لذلك اخترت 3 تطبيقات للمقارنة: فكونتاكتي ، فيسبوك ، إنستغرام.
لذلك ، أردت إجراء دراسة لأكثر 6 مشاكل حادة وحرجة:
- السحب للتحديث (إضافة إلى أعلى القائمة)
- سلاسة تحميل التاريخ (إضافة إلى نهاية القائمة)
- التمرير السريع (بالتناوب مع الأصابع نقوم بتسريع الشريط بقدر ما تسمح به قوة الاحتكاك)
- التمرير إلى الأعلى (تجميع قصة كبيرة والنقر فوق شريط الحالة)
- هل هناك كشف ديناميكي (زيادة) للنشر وما هي الرسوم المتحركة
- كيف يعمل الشريط في وضع فقد الحزمة بالكامل (مطور -> Network Link Conditioner -> شبكة سيئة للغاية)
بشكل عام ، جميع التطبيقات تتصرف بشكل جيد ، لكنني ما زلت لاحظت بعض المشاكل.
انظر ، على سبيل المثال ، كيف يتصرف السحب إلى التحديث على VKontakte إذا لم تفرج عن إصبعك أثناء التحديث واسحب الشريط برفق لأعلى (انظر الصورة المتحركة على اليسار).
هل ترى أيضًا هذه القفزة؟
لم يظهر Instagram و Facebook مثل هذا السلوك.
وهناك أيضا فرق ملحوظ في الكشف عن آخر. بالنسبة إلى Facebook و Instagram ، يحدث هذا من خلال الرسوم المتحركة السلسة ، ويقوم VKontakte ببساطة بتحديث الحجم بالنقر.
لذلك ، تتمثل مهمتنا في التمرير السلس وتنزيل المنشورات وكذلك الكشف عن الرسوم المتحركة.
الخطوة الأولى هي اختيار مفهوم وإنشاء نموذج أولي على المربعات الحمراء (أتساءل لماذا اخترت دائمًا اللون الأحمر للنماذج الأولية. هل هذا هو الحال مع الجميع؟).
كانت فكرتي الرئيسية في تحسين الإنتاجية هي التخلي عن جميع الأجراس والصفارات التي قدمتها Apple لسنوات عديدة والعودة حرفيًا إلى التطوير لنظام iOS 3. وهذا يعني:
- رفض من AutoLayout (نعم ، إنه بطيء ، لا أصدق ذلك - يمكنني إثبات ذلك في التعليقات)
- رفض حساب ارتفاع خلايا الجدول تلقائيًا
نتيجة لذلك ، تم اختيار المفهوم التالي:
دعونا الحصول على مزيد من التفاصيل قليلا.
في سلسلة الرسائل الرئيسية ، نقوم بتحديث الواجهة ، ومعالجة إجراءات المستخدم (التمرير لأسفل والسحب للتحديث ، والنقر على منشور لزيادةه) وتشغيل نموذج خدمة لاستلام البيانات وإعدادها.
استدعاء API . كل شيء بسيط هنا - NSURLSession مع NSURLCache تكوينه. من المهم أنه عند تحميل السجل لأسفل ، فإننا نستخدم ذاكرة التخزين المؤقت ، وعندما نقوم بالسحب للتحديث ، نقوم بتعطيله. بالضبط هذا السلوك أنا تجسست على VK و Facebook.
تحليل وخلق النماذج . هنا هو المنطق لمعالجة طلب معين ، ورمي الأخطاء وإرجاع نماذج النقل بالبيانات.
حساب نماذج العرض . أهم خطوة لتحسين الأداء. هنا يتم نقل نماذج النقل إلى كيانات باستخدام PostModel postfix. يخزن ViewModel البيانات المعدة تمامًا للعرض - AttributesString ، ارتفاع الخلية المحسوب (لحالتين: مطوي وموسع) ، الاسم الكامل كسلسلة ، سلسلة تاريخ (تم تحويلها بالفعل من DateFormatter).
بعد ذلك فقط ، تعود البيانات إلى الدفق الرئيسي. إن تطبيق هذا المنطق على سويفت سهل للغاية وبسيط. نصنع هيكل ViewModel. يتم نسخ الهياكل عند نقلها إلى دفق جديد.
مفهوم ممتاز جاهز ، والآن دعونا نتحدث عن آلية الإخراج نفسها.
أولاً ، كان عليك اختيار ما يجب تنفيذه على الشريط - UITableView أو UICollectionView (بالتأكيد لن يكون هناك وقت كافٍ للتنفيذ). من الواضح أن UITableView مناسبة لإخراج القائمة ، لكنني كنت قلقًا للغاية إذا كانت هناك مشاكل في توسيع القائمة من أعلى وأسفل وأيضًا زيادة خلية المحتوى. لذلك ، قررت الانتقال من البسيط إلى المعقد - أي إذا كان UITableView لا يوجد لديه مشاكل ، فإننا نتركها.
أول شيء قررته هو اتخاذ قرار بشأن التجديد. لتطبيق هذا النمط ، هناك UIRefreshControl. مرة واحدة ، منذ حوالي 5-6 سنوات ، كتبت تنفيذي باستخدام UIActivityIndicator وتغيير محتوىإعداد الجدول. لذلك ، من فضلك لا تفعل ذلك الآن! UIRefreshControl لديه واجهة مدمجة مريحة ويأخذ سحابة من العكازات ، والتي سيكون لديك بالتأكيد لجعل. استخدامه بسيط للغاية:
ومع ذلك ، عند استخدامه ، يصبح من الواضح أين تنمو المشكلات الموضحة أعلاه لعميل VK. يبدو أنها موجودة في المكون نفسه. حاولت بسرعة البحث عن السبب الذي يمكن أن يكون وما هي الحلول.
نصائح الإنترنت تقول (
مثل هذا أو
ذاك ):
- تحقق عند استدعاء endRefreshing سواء تم تحديث عنصر التحكم الآن (isRefreshing)
- استخدم UITableViewController بالضبط (لأنه في هذه الحالة تسمى الطريقة السحرية الخاصة)
حاولت كل هذا وذاك - لم يكن لدي أي تأثير إيجابي. كنت منزعجًا ، لكنني قررت عدم تضييع الوقت والمضي قدمًا. بالمناسبة ، إذا كان شخص ما يعرف كيفية التغلب على هذه المشكلة - يرجى الكتابة في التعليقات.
الخطوة التالية هي تنفيذ تحميل البيانات من الأسفل.
في البداية ، لم أحصل على روعة - عند التحميل من الأسفل ، كان هناك تأخر رهيب (لقد قفزت حجم المحتوى من الجدول على ما يبدو):
وهذا هو الجحيم :-) مع هذه النتيجة ، بالتأكيد لا يمكنك الفوز. لكن البحث السريع أعطاني فكرة رائعة نسيتها:
وفويلا:
يبقى أن تقرر كيفية تحريك ارتفاع الخلية.
كانت الفكرة الأولى التي تتبادر إلى الذهن هي الركض على طول الخلايا المرئية المرئية وزيادة الطول في كتلة الرسوم المتحركة. ولكن حتى في مرحلة التحليل ، يجب تجاهل هذه الفكرة - المشكلة هي أنه سيكون من الضروري مزامنة الارتفاع المحدد في UITableViewDataSource والقيام بشيء مع contentSize (وهذا موصى به بشدة من قبل Apple).
الفكر الثاني الذي يتبادر إلى الذهن تبين أنه صحيح - UITableView لديها أساليب إدراج / إعادة تحميل / حذف التي يمكن تنفيذها في كتلة الرسوم المتحركة:
لا تنس أنه في heightForRowAt نحتاج أيضًا إلى إضافة ارتفاع جديد:
كل شيء يبدو ، ولكن ليس تماما! في الرسوم المتحركة لنشر المنشور ، كانت هناك نقطة خفية واحدة. ابحث عن النص في Intagram أو Facebook - يظهر بسلاسة فورًا مع زيادة الارتفاع. ما يجب القيام به جعله سطرا سطرا؟ إذا وصلت إلى مستوى NSTextContainer ، فربما تظهر فرصة مماثلة. لكن يبدو لي أنها لم تكن فكرة سيئة (لمثل هذا الوقت) عرض كل النص مرة واحدة. ما عليك سوى تعيين clipToBounds على طريقة العرض superView ، والتي سيتم تحديد موقع UILabel بها ، مع عرض نصنا. ونجح النهج! أوه ، هذه الرسوم المتحركة ألهمتني كثيرًا وفتحت ريحًا ثانية. بعد كل شيء ، لا يوجد مثل هذه الرسوم المتحركة في العميل الأصلي لـ VK. لذلك يجب أن تضيف فرصًا للفوز :-)
التفاصيل المتبقية في تنفيذ الشريط ليست مثيرة للاهتمام للغاية. ولكن يمكنك أن تسألهم في التعليقات. ولا حرج في وضع الكود. ومن هنا -
github.com/katleta3000/vkmobilechallenge . أنا آسف لأنني لست ممشطًا ، وهناك أرقام سحرية في بعض الأماكن (ولكن هذه مسابقة سرعة ، كان علي التضحية بشيء ما). بالمناسبة ، يمكنك القفز على الالتزامات هناك (الأسماء واضحة تمامًا).
يمكن رؤية النتيجة هنا -
www.youtube.com/watch؟v=Md8YiJxSW1M&feature=youtu.be (الجودة مفقودة بشكل سيئ بالطبع ، ولكن أفضل مما كانت عليه في gif لإظهار التمرير السلس تمامًا)
الاحصائيات ، النتائج ، الاستنتاجات
طوال الوقت عملت المسابقة على توقيت. 20 ساعة ونصف من الوقت الترميز الخالص خرج. ساعد وقت التتبع في شيئين: كما تتذكر ، كانت هناك تقديرات في وحدات مجردة ، لذلك بحلول منتصف اليوم الأخير كانت هناك بالفعل إحصاءات تتبع جيدة وكان من الممكن التخطيط للمهام النهائية المتبقية بدقة أكبر بكثير. وثانيا ، كان من الممكن تحديد وإثبات نمط "التركيز في جلسة واحدة". كل بُعد يمثل تكرارًا جديدًا ، لذلك تبين أن لدي 68 تكرارًا لكود الكتابة. إذا كنت في المتوسط ، ستحصل على 18.5 دقيقة. ولكن في الواقع ، في اليوم الأول من التكرار ، كان هناك 25 دقيقة في المتوسط ، وبنهاية اليوم الثاني ، 7 دقائق لكل منهما :-) تبدأ في الجنون ، والتوتر الشديد ، والتعب ، وانخفاض الأداء. مثل هذه البيانات سوف تساعد بشكل جيد في المرة القادمة.
أنا شخصياً استخدمت برنامج "
كل ساعة " (يمكنك تنزيله وتجربته) - إنه ببساطة ويحل المهمة الضرورية (وحتى تطويره بنفسي):
من المكافآت اللطيفة - لكل لغز مغلق ، تظهر لك شاشة مطمئنة لطيفة للغاية مثل هذه:
من المضحك أنه عند الانتهاء من مهمة "VK Mobile Challenge" ، ظهرت لي الشاشة التالية:
ونعم! وحدث ذلك :-) ننتقل إلى النتائج.
دعونا لا سحب الخوخ للأفخم. الخوخ ، الذي لم يكن يعرف ، هو اسم القطة - الشخصية الرئيسية لـ VK. ميرش هدية رائعة جدا:
أخذت المركز الرابع وحصلت على 175 ألف روبل. (نعم ، وربما كنت قد أحرقت بالفعل الصورة على Habra-kat). ونعم ، أنا بالتأكيد سعيد. وصلت هدفي :-) وهذا بلا شك لطيف بجنون.
في النهاية ، أود أن أقول شكراً لـ
vkontakte - بعد كل شيء ، كانت المنافسة باردة ومنظمة جيدًا. أوصي جميع القراء بالمشاركة في التحديات والاختراقات - إنها طريقة رائعة لتحدي نفسك والتنافس مع كبار المطورين في جميع أنحاء العالم (جيدًا ، أو على الأقل مجتمع الناطقين بالروسية).