مع استمرار وانتشار جائحة كورونا المستجد COVID-19 - في جميع أنحاء العالم ، تعرضت العديد من الشركات لضغوط الإغلاق. خلال فترة الإغلاق والبعد الاجتماعي والحزن ، فلا عجب أن العديد من تطبيقات الترفيه قد وصلت إلى ذروة شعبيتها.
وكذلك فعل تطبيق TikTok ، حيث تجاوز ملياري عملية تنزيل في أبريل 2020.
كل هذا يقودنا إلى حقيقة لا يمكن إنكارها: منصات التواصل الاجتماعي قامت وستستمر في فعل ذلك حيث سيستمر الناس في السعي للتفاعل والترفيه. وقد يكون هذا هو الوقت المثالي لإنشاء تطبيق مثل TikTok.
لذا ، الإجابة على السؤال التالي هل بإمكاني إنشاء تطبيق مثل TikTok؟ نعم يمكنك بالتأكيد!
ولكن إن إنشاء تطبيق ليس بالأمر اليسير. يدرس الناس مواد كاملة في الجامعات لمعرفة كيفية تصميم التطبيقات وهيكلتها وتطويرها وتنفيذها. كل ذلك سيتم إتاحته في هذه المدونة، ولا تنسى إلى جانب دراسة شهادة جامعية، إذا كنت لا تزال طالباً.
لكن إذا كنت مبتدأ يمكنك تطوير تطبيق كحد أدنى تابع قراءة المقال سنذكر ذلك بالتفصيل.
يمكنك تنزيل الكود وإستمر في القراءة لتفهم الكثير من التفاصيل المهمة والضرورية لعمل التطبيق 📲.
برمجة واجهة المستخدم UI
أول خطوة 1 - فتح أندرويد استديو وعمل مشروع جديد - ونختار Empty Activitie
اكتب الأسم الخاص بتطبيق ليكن مثلاً PikPok ونحدد ال SDK الأفضل إختيار 22.
سيبدأ Android Studio بعمل البناء لمشروعك وملفاته وبعد الأنتهاء، ستجد في مجلد Java ال Class الخاص بمشروعك.
ثاني خطوة 2 - ربط مشروعك بـقاعدة البيانات من قائمة Tools سنستخدم Firebase الخاصة بشركة Google ونبدأ بعمليات الربط بالوظائف التي نريدها مثلاً نضيف الأداة الخاصة بعمليات تسجيل الدخول، ستتم إضافتها بنجاح، قم بالرجوع إلى الصفحة الرئيسية وإضافة Cloud Mess إشعارات المستخدم، وآخر عملية ربط هي Storeg الخاصة بالتخزين، ونكون قد انتهينا من عمليات الربط التي نحتاجها بقاعدة البيانات.
ثالث خطوة - إنشاء حدث
يمكنك حذف ال MineActivitie وحذف ال Xml الخاص بها ثم إعادة إنشاء من جديد بإسم HomeActivity وهي الصفحة الرئيسية الخاصة بالتطبيق، الآن تقوم بتحديد الصفحة التي تبدأ عند فتح التطبيق.
ومن ثم نقوم بتصميم الصفحة الرئيسية قم بتحويل إلى Relative layout .
-الآن حان الوقت لإضافة مشغل فيديو VideoView, التصميم هو ملأ الشاشة بالكامل، لذلك تحتاج إلى إعطاء ال Width و Height قيمة Match_parent, نعطي id لمشغل الفيديو ليكن id home video .
تصميم الأزرار الخاصة بالصفحة الرئيسية:
مثل التعليقات والقلب وزر المشاركة وكل ال Bottons نعطيها عرض 40 db وكذلك الأرتفاع، ونحدد مواقعها بواسطة Xml لا تنسى إعطاء id واسم حسب كل boutton ووظيفته ، كي يسهل عليك تذكر الكود، إذا حدث خطأ ما أو أحببت إضافة جديدة للكود.
💡 : يمكنك إختصار وقتك بنسخ شفرة كل button لتوفير الجهد والوقت بدل من كتابة كل منها على حدة.
تصميم وتنسيق الأزرار الموجودة في الجهة السفلية من الشاشة.
ليس بالضرورة الإلتزام بهذا التصميم يمكنك، اضافة ماتشاء أو التغيير كما يحلو لك .
لتوفير الوقت والجهد نقوم بنسخ أكواد Boutton في الأعلى وتغيير فقط أحجامها والوانها وتغيير أبعادها لتتناسق مع بعضها ومكانها على الشاشة، يمكنك ضبط كل منها من خلال Xml والتغيير ومراقبة ما يحدث أمامك على الشاشة، حتى تصل للتصميم الذي يعجبك أو واجهة المستخدمة UI المفضلة لديك.
كما تلاحظ قمنا بزيادة حجم الأزرار في الأسفل إلى 60 db - ونتوقع أنه الحجم المناسب، يمكنك جعل المسافة بينها 15 db . كما ذكرنا سابقاً ليس بالضرورة الإلتزام بهذا التصميم يمكنك، اضافة ماتشاء أو التغيير كما يحلو لك.
اضافة صور وايقونات إلى الأزرار - مثل زر الصفحة الرئيسية رمز(🏠) والبحث رمز (🔍)
كما تلاحظ في TikTok لكن يمكنك تنسيق بشكل آخر ليس بالضرورة الإلتزام بتصميم واجهة المستخدم هذه.
نذهب إلى مجلد res ومن ثم drwable ونختار Vectar Accesst ونحدد صورة كل زر حسب وظيفته مثلاً نبحث عن رمز ال Home 🏠 أو رمز الإضافة ➕
ملاحظة : تستطيع جلب أيقونات وصور من جهاز الكمبيوتر الخاص بك ليس بالضرورة طبق الأصل بما يقدمه أندرويد إستديو. يمكنك تصميم ستايلات تعجبك على برامج مثل الفوتشوب وضبط حجمها بعد التصميم إلى 450 بيكسل حسب تصميم الزر.
يمكنك إضافة صور للأزرار على الجهة الآمامية. القلب - والتعليقات - والمشاركة.
نحن نعطيك الفكرة الأساسية وانت يمكنك التعديل كما يحلو لك وتطوير تطبيق بشكل أكبر حتى تصل إلى النتيجة التي تلبي طلبات المستخدمين.
قسم برمجة الأزرار ومشغل الفيديو .
يمكنك الإنتقال إلى Firebase ثم تعيين أداة إضافة مساحة لفيديوهات وتعليقات المستخدمين ، واخرى لقسم الدردشة، بحيث يمكن التواصل مع بعضهم البعض. يتم تسمية كل مساحة على حسب وظيفتها واسمها الذي إخترته في Android Studio كي لا تصبح لديك أي أخطاء في الكود، مثلاً الفيديوهات بإسم VideoView. إذا إختلفت الأسماء ستظهر لديك إشعار خطأ ❌ كما هو مبين في الصورة أدناه
يجب عمل تسجيل الدخول لكل مستخدم، بحيث يحصل على مساحة سحابية من قاعدة بيانات firebase يتم الإحتفاظ بالفيديوهات والتعليقات التي ينشرها . بعد الربط يتم ذلك ببرمجة HomeActivity بالسطور التالي :
برمجة مشغل الفيديو الموجود في التطبيق بحيث يستدعي البيانات والفيديوهات من قاعدة بيانات Firebase لكل مستخدم على حدة.
إذا قام المستخدم بتسجيل الدخول، سيحجز مكان في Firebase يسمح له بنشر فيديو في التطبيق، وسيظهر في أداة VideoView التي قمنا بإضافتها ، مع إمكانية التعليق على كل فيديو، وتصل إلى المستخدم الإشعارات عن طريقة إضافة Cloud Messages.
برمجة زر الإضافة ➕ ، عند الضغط عليه، سيسمح للمستخدم بإضافة فيديو من تخزين هاتفه إلى قاعدة بيانات Firebase وبالتالي مشاهدته داخل التطبيق.
برمجة video view عند السحب للأعلى سيتم إستدعاء فيديو آخر من قاعدة Firebase وعند السحب للأسفل يتم الرجوع للفيديو السابق.
نقوم ببرمجة زر القلب، عند الضغط عليه سيصبح باللون الأحمر، وينتقل الفيديو إلى قاعدة بيانات Firebase ضمن قسم أعجبني في التطبيق، لنبدأ.
يتم الإحتفاظ بكل الفيديوهات التي حصلت على إعجاب من قبل المستخدم.
برمجة زر التعليق عند الضغط عليه تظهر نافذة منبثقة نسميها قسم التعليقات. يمكن للمستخدم من خلالها إضافة تعليق وسنقوم بربطه في قاعدة Firebass ليتم حفظ البيانات، ورؤية التعليقات من قبل جميع المستخدمين.
واخيراً ، ✅ أكتمل بناء التطبيق كحد أدنى عند التشغيل يمكن لعدة مستخدمين تسجيل الدخول عند إضافة أي فيديو سيتم نشره ورؤيته من داخل تطبيقك مباشرة.
في الجزء الثاني سنكمل عدد المشاهدات على كل فيديو وجدولة كل فيديو ، والبحث عن مستخدمين والدردشة معهم من داخل التطبيق. يمكن أن تعتمد على نفسك ، قبل نزول الجزء الثاني نحب ان نسمع منك في التعليقات عن الأفكار الجديدة التي تحب إضافتها إلى تطبيقك وتنافس باقي المطورين، بعد هذا الدرس يمكنك الإعتماد على نفسك ولا تنسى نرد على جميع التعليقات ليكون نبض سوفت مكانك الأفضل لتعلم البرمجة.
يمكنك تنزيل الكود 📲.
إن أهم سؤال يجب مراعاته هو "لماذا".
لماذا تحتاج إلى تطبيق مثل TikTok؟
لماذا تريد التنافس مع شركة كبيرة؟
لماذا يجب على المستخدمين القدوم إلى التطبيق الخاص بك وليس للآخرين المتاحين؟
وأعتقد أن تطبيقك الاجتماعي مثل TikTok قد يحظى بفرصة الازدهار الآن إذا تمكنت من مواجهة تحدياتك وتجنب نفس المشكلات التي يواجهها المستخدمين TikTok.