كيف فعلت شبكة اجتماعية في عام 2019

في هذه المقالة ، سوف أخبرك كيف صنعت مشروعي لشبكة اجتماعية من أجل المجال الفني havidea.ru من الفكرة إلى الإصدار. سوف أخبرك عن الجزء الفني ، وعن الدوافع والتنظيم الذاتي ، والأدوات التي أستخدمها في عملية التطوير ، وعن المشكلات في العمل في مجال الفن الذي واجهته فورًا تقريبًا. نجا المشروع من التناسخ ، أي كان الخيار الأول الذي تخلت عنه والنهائي ، والثاني ، الذي دخل حيز الإصدار.

لقد عملت في مجال تطوير الويب لأكثر من ثلاث سنوات بقليل. تم رفع المشروع بمفرده في وقت فراغه من العمل الرئيسي وكان الهدف الرئيسي هو إطلاق المنتج في الوقت المحدد (6 أشهر).

إلهام ، فكرة ، بحث

عندما كنت مراهقًا ، بدأت التورط في الموسيقى والرسم. بعد ذلك بقليل ، اشتعلت فيه النيران باستخدام رسومات ثلاثية الأبعاد ، وتمكن حتى من كسب أول قرش على النماذج ثلاثية الأبعاد. بعد ذلك بعامين ، تناولت بجدية التصوير الفوتوغرافي وتصوير الفيديو ، وخلال الفترة نفسها قابلت زوجتي المستقبلية ، ممثلة ، في دروس صوتية (وكانت في حياتي ، نعم). كل هذا دفع إلى عمل نوع من المشاريع لدعم المصائر "المضحكة" للأشخاص المبدعين. IRS؟ الشبكة الاجتماعية؟ لم لا؟ لكن هذا هو هيتات ، كما يقولون ، اجتماعي. الشبكات تموت. يموت شخص ما ، لكن يمكنني القيام بذلك ، أليس كذلك؟ وبشكل عام ، إذا كانت هناك فكرة ومفهوم جيد ، فلماذا لا يتم ترجمتها إلى صفحة ويب؟ غوغلينغ قائمة الحسابات الاجتماعية ، واجهت خيارا مثيرا للاهتمام - stage32. في رأيي ، هذه هي المنصة الأجنبية الجادة الوحيدة التي جمعت المجتمع المشترك في إنتاج الأفلام. في روسيا ، في ذلك الوقت (أوائل عام 2017) ، لم أجد أي نظائرها (هل كنت أبحث بشكل سيئ؟). تم حلها. سأقدم الخدمة الخاصة بي ، استنادًا إلى أفضل الصور والممارسات و UX للشبكات الاجتماعية الحالية. الشبكات ، ولكن مع التحيز نحو مجال المسرح والسينما والفن بشكل عام.

أيديولوجية المشروع

غير هادفة للربح ، دون الإعلان ، والأكثر فائدة للمشاركين أنفسهم. مجانا ، لا تتبع ، لا المقاييس. حماية بيانات المستخدم.

الخيار الأول (2017)

يجب أن يبدأ أي مشروع بطرح الأسئلة والإجابة عليها: لمن؟ من اجل ماذا؟ ما المشكلة التي يحلها هذا (الهدف)؟ ما هي البدائل؟ ما الفوائد التي يمكن تقديمها؟ بعد إجابات واضحة وموجزة ، أقوم بعمل قائمة بالمشروع المستقبلي. بعد ذلك ، أقرر باستخدام الهيكل العظمي: أزل كل قائمة الأمنيات والتخيلات من قائمة الوظائف العامة وأترك ​​فقط الأكثر ضرورة - شيء لن يعمل التطبيق بدونه. من الحد الأدنى من الوظائف يمكنني تحديد مكدس. أنا أبحث عن أمثلة للتنفيذ. في هذه المرحلة ، هناك بالفعل صورة كبيرة: ماذا تفعل ولماذا وكيف. أكتب العملية بأكملها والتعليقات والأفكار في دفتر ملاحظات حتى لا أقرر بشكل متكرر ما كنت قد رفضته من قبل.

أبدأ في تصميم واجهة مستخدم مع ورقة وقلم رصاص. أي ورقة في متناول اليد تدخل حيز التنفيذ حتى يهرب الفكر. أقرر على الصفحات وأجري التكرار التقريبي الثاني بالفعل في شكل إلكتروني (من السهل تغيير شيء ما):


بعد ذلك ، أدرس الرسومات بالتفصيل. هنا ، على سبيل المثال ، هو الإصدار الأول من صفحة الملف الشخصي:


المشاركات والتعليقات والإعجابات والألبوم مع الصور - كل ذلك في الكلاسيكية. من الجديد:
الملف المتقدم للجهات الفاعلة ، البحث عن طريق المهنة والمهارة.

لتخطيط التصميم اعتدت modulargrid.org :


لقد جربت شبكات 12 ، 15 عمودًا ، لكني توقفت عند 12. أريد أن أشير إلى أن التخطيط على شبكة معيارية أمر غامض. لن تكون قادرًا دائمًا على إدخال المعلومات في الكتل ، لأن الواجهات هي تمثيل رسومي للبيانات. أتابع مبادئ تصميم البيانات ، أي الغرض الرئيسي من الواجهات هو تقديم البيانات وخيارات ملائمة للتفاعل معها. هذا هو السبب في المصمم! = مصمم الويب. بالعودة إلى مشكلة الشبكة المعيارية ، سأقول إنها تساعد فقط في الترتيب الأولي للكتل ، ويجب تأكيد الإصدار النهائي بمساعدة عين مدربة. بالإضافة إلى ذلك ، في أي كيان يجب أن يكون هناك تطور أو خروج عن القواعد لإضافة حيوية.

بضع مسودات الصفحة الرئيسية:



لا تبدو بعض الحلول ناجحة جدًا وتتم إزالتها / تصحيحها أثناء التخطيط. في مرحلة التصميم ، تحتاج إلى منح نفسك الحرية وعدم تقديم كل شيء إلى المثالية.

صفحة تسجيل الدخول:


بعد الرسومات الخاصة بإصدار سطح المكتب ، أود الانتباه إلى الجوال. هل الجزء الرسومي جاهز؟ Normas. حان الوقت لشفرة.

الخيار الأول للواجهة الأمامية.

كخلفية للصفحة الرئيسية ، استخدمت مكتبة Three.js للعمل مع WebGL. مثلثات تطفو بحرية و "متابعة" الماوس. بالنظر إلى المستقبل ، سأقول أنه في التناسخ ، رفضت Three.js وفعلت ذلك على css + png ، لأن المكتبة تزن حوالي 570 كيلوبايت ويبدو أنها مضيعة لاستخدامها في تأثير واحد بسيط. في مجال التطوير ، ألتزم بالإعدادات: الحد الأدنى والأداء وسهولة الدعم. بما أن الشبكات الاجتماعية تستخدم حوالي 3/4 من الهاتف المحمول ، فقد أعطيت الأولوية للخفة والسرعة. كيف أخذت مكتبة مكونات واجهة المستخدم Bootstrap 4 . بدون مسج ، فقط المغلق. حاولت التفاف bootstrap-vue لكن بطريقة ما لم تنجح. كانت علامات html غير صالحة ملفتة للنظر وتريد حرية التخصيص. كما كنت قد خمنت ، وإطار فو . كنت أرغب في البداية في وضع فهرسة جيدة بواسطة محركات البحث ، لذلك قمت بفحص Nuxt .

الخلفية من الخيار الأول .

لارافل. لمشاريع رجل واحد ، vue + laravel = يجب أن يكون. سرعة التنمية ، مجتمع كبير ، مجموعة من الحزم الجاهزة. هندسة واجهة برمجة التطبيقات (API) الأولى (الخلفية التي تم تطويرها في الأصل باعتبارها واجهة برمجة تطبيقات)
ما API دون وثائق؟ ApiDoc هو شيء رائع يمكنه إنشاء وثائق من PHPDoc. توجيه ملفات التوجيه المخصصة والمقدمة من api.php واحد ، أي ملف واحد ، مسار واحد. للراحة وتوليد الوثائق. أخذت الإلهام من Apiato . مجموعة بداية جيدة لواجهة برمجة التطبيقات ، محشوة بأنماط تصميم مختلفة وبورتو المعمارية الأصلية ، والمصممة لتقسيم التطبيق إلى وحدات ، ولكن يؤدي في الأساس إلى متراصة. انطلاقًا من المستودع ، تم التخلي عن المشروع منذ أكثر من عام. على الأرجح ، بسبب الانتشار الفعال للهندسة المعمارية microservice.

الراحة ، مهارات التسوية

كان 2018. في الإصدار الأول ، تمكنت من تنفيذ التسجيل ، المصادقة ، صفحة الملف الشخصي مع التحرير ، صفحة الإعدادات. لم يكن هناك الكثير من الوقت في المساء. ثم بدأت للتو مسار vue ، وكان ssr على nuxt غير مطيع. نتيجة لذلك ، بعد 4-5 أشهر تم تفجيره. لقد كان مشروعًا طموحًا ولم تكن هناك مهارة كافية لرفعه دون أن تسقط. بالنسبة لعام 2018 ، نجحت في العمل كمطور مكدس كامل ، ورسو السفن المتقن ، وفي بداية عام 2019 بدأت من الصفر. حسنا ، من الصفر تقريبا.

الخيار الثاني (2019) ، الإصدار

الواجهة الأمامية للخيار الثاني .

لقد رفضت nuxt ssr - تتطلب الطبقة من node.js اهتمامًا إضافيًا ، ولم أر حاجة لذلك على وجه التحديد في هذا المشروع. استبدل Bootstrap Quasar - إطار واجهة مستخدم كامل الرؤية (وليس فقط) (لماذا أخذته سأقول أدناه). واجهات إعادة بنائها بالكامل ، ترك مفهوم vk النمط. الآن على غرار إنستا. وأضاف القدرة على إنشاء ثلاثة أنواع من المنشورات: الصورة والفيديو والنص. في تخطيط اعتدت 24 شبكة العمود. تبدو الخدمة الآن كالتالي:


نعم ، يمكنك جعل القائمة العلوية شفافة. ولكن عليك أن تعرف كيف تقول "لا". وجهت في نهاية المطاف الصفحة الرئيسية مرة أخرى. لذلك ، يجب ألا تدخل في التفاصيل قبل الصورة كاملة. عاجلاً أم آجلاً ، سوف ترغب في تغيير كل شيء ، ولا يهم كم كان القرار رائعًا. بالطبع ، تم تكييف الموقع بالكامل:


حول TypeScript. لقد حاولت تطبيقه ، لكن تم قصه لاحقًا ، لأن الكتابة الصارمة تتطلب مزيدًا من الوقت لترتيب الأنواع والواجهات. جئت إلى استنتاج مفاده أن TS دون وضع صارم لا معنى له. صحيح - لماذا الكتابة دون تحديد أنواع. في الوضع الصارم ، عليك أن تصف كل شيء تمامًا ، وهذا على الأقل + 30٪ من فترة التطوير. وإذا لم تكن قد وافقت على مخطط تبادل البيانات مع الواجهة الخلفية ، فسيتعين عليك دائمًا صرف انتباهك عن طريق التعديلات الطفيفة. في بعض الأماكن ، ستحتاج إلى تجاهل أخطاء برنامج التحويل البرمجي عن طريق إضافة تعليق @ ts-ignore إلى الرمز لمجرد أنك غير مسؤول عن كود الجهة الخارجية الذي لا يدعم TS بالكامل. بالإضافة إلى ذلك ، يتم الكشف عن جميع فوائد TS في الحسابات المنطقية المعقدة ، أي كتابة ملفات .vue زائدة عن الحاجة إلى حد ما. سأكون سعيدًا لسماع تعليقات حول هذا الموضوع.

عندما كانت الواجهة جاهزة بنسبة 90٪ ، قمت بلف Browserstack واختبار التطبيق على Safari. لست نادما على الأموال التي أنفقت ، لأنني تمكنت من إصلاح بعض الأخطاء البسيطة ولكن الحرجة. قنبلة دقيقة. Safari ، متى ستبدأ التفكير في المستخدمين والمطورين؟ لا إصلاح الخلل لسنوات. انتقل لزجة خاصة في مشروط. لم أجد طريقة عمل بنسبة 100٪ حول كيفية الحصول على Safari لتمرير المحتوى بشكل صحيح في نافذة مشروطة. سأكون سعيداً إذا صادف أحدهم وأخبرني بحل.

بالإضافة إلى التطبيق الرئيسي ، قمت أيضًا بإنشاء لوحة إدارة بسيطة باستخدام api:


لا يوجد شيء رائع في لوحة الادارة. مجرد تغطية واجهة مستخدم لبعض الميزات ، والتي بسببها كسول جدًا في الدخول إلى قاعدة البيانات وتعديل البيانات يدويًا.

الخلفية من الخيار الثاني .

لارافل. التحقق من صحة إلزامية لجميع البيانات الواردة ، ورؤوس كور ، ورؤوس أمن إضافية لرؤوس آمنة ، باتباع المواصفات RESTful (سأحاول JSON-RPC بطريقة أو بأخرى) ، كسورية لتحويل البيانات التي تم إرجاعها إلى المقدمة. جرّب كل شيء حتى لا يضغط المستخدم على الماوس ، لكن يحصل على سبب واضح للخطأ. مقالب تلقائية لكل من قواعد البيانات باستخدام db-dumper . لم أكتب أي اختبار آلي ، لأنه محدود في الوقت المناسب. تحتاج إلى ضخ ما يصل ومحاولة TDD ، فقد لا يؤدي إلى زيادة كبيرة في وقت التطوير أو حتى تقليله.

بشكل منفصل ، أود أن أقول إنني أتجنب استخدام التجريد في المراحل الأولية للتصميم ، إذا كان بإمكانك الآن الاستغناء عنها. استخدامهم السابق لأوانه يعقد وحدة التطبيق ، والتي لا يمكن استخدامها أبداً. حل المشاكل عندما تصبح متاحة. نعم ، إن تحقيق توازن بين الهندسة المعمارية والتوقيت ليس بالأمر السهل ، فهو يأتي بالتجربة فقط ، ولكن من الأفضل قضاء الوقت في التفكير من خلال قاعدة البيانات ، ويمكنك إعادة كتابة رمز التطبيق في أي وقت. أهم مورد لدينا هو الوقت. من الأفضل إطلاق منتج غير مثالي وأن يكون أول من يلحق بركب المنافسين. وسوف يكون.

مشكلة ، ركود

تم الإطلاق في نهاية مايو. بدأت الإعلان وشاهدت على الفور خدمة مماثلة. نعم ، لقد طبقوا نفس الفكرة بشكل أساسي. قبل عامين. كان من الأفضل البحث في السوق ومراقبته باستمرار للخدمات الجديدة. لكن المشكلة ليست حتى ذلك. في عملية النقاش والتفكير والتجربة الحياتية العادلة ، توصلت إلى استنتاج مفاده أن مشكلة توظيف الناس في الفن أعمق بكثير ، وربما لا يمكن أن تساعد شبكة اجتماعية متخصصة. هذه مشكلة سوق نقص الوظائف. في أي اتجاه لتطوير المنتج لا أعرف بالتأكيد. الآن المشروع يعاني من الركود.

تحت غطاء محرك السيارة

يؤدي

على الرغم من الوضع الحالي بأفكاري حول خصائص سوق الفن ، لا أشعر بالأسف لبضع مئات الساعات التي أمضيتها. كانت العملية رائعة ، أعطت الكثير من الخبرة وليس فقط للمبرمج. قدمت الخدمة كما قصدت وفخرت بالتنفيذ النهائي. كنت مدفوعًا بالاعتقاد بأنني أستطيع مساعدة المبدعين. كان هذا هو الدافع الرئيسي. ربما النهج الأولي غير الربحية وضع المشروع في موقف صعب؟ هناك رأي (مثير للجدل) مفاده أن المرء يحتاج إلى بدء عمل تجاري أو لا شيء. إنه لأمر محزن ، لكن من الأفضل في بعض الأحيان التوقف في الوقت المناسب عن فعل ما لا تؤمن به. إذا كان هناك فهم جديد يأتي في أي اتجاه للتحرك ، فسأواصل التطوير. سوف أكون راضيا بآرائكم.