كيفية تطوير تطبيق وسائل التواصل الاجتماعي؟

إنشاء غلاف تطبيق وسائل التواصل الاجتماعي

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

علاوة على ذلك، سنلقي نظرة على كيفية إنشاء شبكة اجتماعية خطوة بخطوة. سنستخدم Back4app على الواجهة الخلفية و Next.js على الواجهة الأمامية.

ما هي الشبكة الاجتماعية؟

الشبكة الاجتماعية هي تطبيق تواصل اجتماعي يسمح للأشخاص بالتواصل والتفاعل مع بعضهم البعض.

بمجرد اتصال مستخدمين اثنين، يمكنهما مشاركة معلومات المستخدم الخاصة بهما، وتبادل الرسائل والصور ومشاركة المنشورات وغيرها.

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

  • فيسبوك (2.96 مليار مستخدم MAUs)
  • يوتيوب (2.2 مليار مستخدم MAUs)
  • إنستجرام (2 مليار مستخدم (MAUs)
  • تيك توك (1 مليار مستخدم)
  • سناب شات (500 مليون مستخدم MAUs)

يرمز MAUs إلى المستخدمين النشطين شهرياً. وهو عدد المستخدمين الفريدين الذين يتفاعلون مع منصة التواصل الاجتماعي الخاصة بك شهرياً.

على الرغم من أن سوق تطبيقات وسائل التواصل الاجتماعي هائل، إلا أن تطوير تطبيق وسائل التواصل الاجتماعي مهمة صعبة.

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

أنواع تطبيقات وسائل التواصل الاجتماعي

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

  • شبكات مشاركة الوسائط (إنستغرام، تيك توك، يوتيوب)
  • شبكات مشاركة المحتوى (بينتيريست، تمبلر، فليكر)
  • شبكات تقييم المستهلكين (Trustpilot, Angi, Choice)
  • شبكات التدوين والنشر (ميديوم، تويتر)
  • منتديات النقاش (ريديت، كورا، هاكر نيوز)
  • شبكات العلاقات (Tinder، Bumble)

فوائد تطوير تطبيق وسائل التواصل الاجتماعي

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

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

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

ميزات يجب أن تتوفر في تطبيق الوسائط الاجتماعية

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

حسابات المستخدمين

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

أفضل ميزة لحسابات المستخدمين من منظور الأعمال التجارية هي أنه يمكنك إنشاء “ملف تعريف مستخدم”. وأعني بـ “ملف تعريف المستخدم” أنك تكتشف ما يحبه مستخدم معين ومن يتفاعلون معه ثم تصمم الإعلانات وفقًا لذلك.

ربط المستخدمين

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

مشاركة المحتوى

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

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

البحث والاكتشاف

خوارزميات البحث والاكتشاف الرائعة جزء لا يتجزأ من كل تطبيق اجتماعي ناجح.

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

الإشعارات

ستحتاج إلى التفكير في تنفيذ الإشعارات الفورية لزيادة التفاعل وزيادة استخدام التطبيق.

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

لمعرفة المزيد حول الإشعارات الفورية وكيفية دمجها في مشروعك، راجع ما هي الإشعارات الفورية؟

كيف تصنع تطبيقاً لوسائل التواصل الاجتماعي؟

في هذا القسم التعليمي، سنلقي نظرة على كيفية إنشاء تطبيق وسائط اجتماعية خطوة بخطوة. سنستخدم Back4app كواجهة خلفية و React مع إطار عمل Next.js على الواجهة الأمامية.

المتطلبات الأساسية

إليك مجموعة التقنيات التي سنستخدمها في هذا المشروع:

ما هو تطبيق Back4app؟

Back4app هو واجهة خلفية رائعة منخفضة التعليمات البرمجية لإنشاء تطبيقات ويب وتطبيقات جوال حديثة بسرعة. فهو يأتي مع عدد من الميزات، بما في ذلك قواعد البيانات في الوقت الحقيقي، وإدارة المستخدمين، ووظائف الرمز السحابي، والإشعارات الفورية، والتكاملات الاجتماعية، وواجهات برمجة التطبيقات، وحزم SDK، والمزيد!

باستخدام تطبيق Back4app، يمكنك الاستعانة بمصادر خارجية لمعظم أعمال الواجهة الخلفية والتركيز على منطق عملك الأساسي والواجهة الأمامية.

لن تضطر أيضًا إلى القلق بشأن البنية التحتية الأساسية أو توسيع نطاق التطبيق. سيغطي Back4app كل ذلك. إنه خيار رائع لتسريع تطوير تطبيقات الوسائط الاجتماعية.

يقدم Back4app مستوى مجاني وهو رائع للاختبار والنماذج الأولية. ومع توسع تطبيقك، يمكنك الترقية لاحقًا إلى مستويات متميزة بأسعار يمكن التنبؤ بها.

لماذا نستخدم Back4app لبناء شبكة اجتماعية؟

مقدمة المشروع

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

في الواجهة الخلفية سنستخدم تطبيق Back4app، وفي الواجهة الأمامية سنستخدم React مع إطار عمل Next.js لإنشاء تطبيق وسائط اجتماعية

سنقوم أولاً بإنشاء تطبيق Back4app، وإعداد نماذج قاعدة البيانات، ثم ننتقل إلى الواجهة الأمامية.

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

سيبدو المنتج النهائي بهذا الشكل:

شبكة باك فور آب الاجتماعية

إنشاء تطبيق

ستتطلب الخطوات الأخرى أن يكون لديك حساب Back4app. إذا لم يكن لديك حساب حتى الآن، فقم بإنشاء حساب مجانًا.

عند تسجيل الدخول إلى حساب Back4app الخاص بك، ستظهر لك قائمة التطبيقات الخاصة بك. انقر على “إنشاء تطبيق جديد” لبدء عملية إنشاء التطبيق.

Back4app بناء تطبيق Back4app جديد

يتيح لك تطبيق Back4app إنشاء نوعين من التطبيقات:

  1. الواجهة الخلفية كخدمة (BaaS)
  2. الحاويات كخدمة (CaaS)

BaaS هو حل خلفي متكامل مدعوم من Parse، بينما تُستخدم CaaS لنشر التطبيقات المعبأة في حاويات عبر Docker.

بما أننا نبني شبكة اجتماعية، سنستخدم خيار “الواجهة الخلفية كخدمة”.

Back4app Build Back4app Build BaaS

بعد ذلك، امنح تطبيقك اسمًا وصفيًا، واختر “NoSQL” كقاعدة بيانات، وانقر على “إنشاء”.

سيستغرق Back4app دقيقتين تقريباً لإعداد كل ما هو مطلوب لتطبيقك. بمجرد الانتهاء من ذلك، ستتم إعادة توجيهك إلى عرض قاعدة بيانات تطبيقك.

عرض قاعدة بيانات Back4app Back4app

فئات قاعدة البيانات

للمضي قدماً، دعونا نعد قاعدة البيانات لتطوير تطبيقات وسائل التواصل الاجتماعي.

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

+-----------+-------------------------------------------------------------------------+
| Name      | Explanation                                                             |
+-----------+-------------------------------------------------------------------------+
| objectId  | Object's unique identifier                                              |
+-----------+-------------------------------------------------------------------------+
| updatedAt | Date time of the object's last update.                                  |
+-----------+-------------------------------------------------------------------------+
| createdAt | Date time of object's creation.                                         |
+-----------+-------------------------------------------------------------------------+
| ACLs      | Allow you to control the access to the object (eg. read, update).       |
+-----------+-------------------------------------------------------------------------+

دعنا نعدل فئة المستخدم لدينا بشكل طفيف عن طريق إضافة حقلي الوصف والصورة الرمزية. سيتمكن المستخدمون لاحقًا من تعديل هذين الحقلين في إعداداتهم.

انقر على زر “+ عمود” في أعلى يمين الشاشة وأضف الحقلين التاليين:

+-----------+-------------+--------------------+----------+
| Data type | Name        | Default value      | Required |
+-----------+-------------+--------------------+----------+
| String    | description | Another cool user! | yes      |
+-----------+-------------+--------------------+----------+
| String    | avatarUrl   | <some_image_url>   | yes      |
+-----------+-------------+--------------------+----------+

تأكد من استبدال بعنوان url حقيقي للصورة، ينتهي بـ .png أو .jpg أو .jpeg. إذا لم يكن لديك أي أفكار، يمكنك استخدام هذا.

إضافة عمود قاعدة بيانات Back4app Back4app

بعد ذلك، دعنا ننشئ صنفًا باسم منشور. سيكون لكل منشور مؤلف وبعض المحتوى النصي.

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

ثم أضف العمودين التاليين إليه:

+-----------------+---------+---------------+----------+
| Data type       | Name    | Default value | Required |
+-----------------+---------+---------------+----------+
| Pointer -> User | author  | <leave blank> | yes      |
+-----------------+---------+---------------+----------+
| String          | content | <leave blank> | yes      |
+-----------------+---------+---------------+----------+
فئة إنشاء قاعدة بيانات Back4app Back4app

أمان قاعدة بيانات Back4app Back4app

فيما يتعلق بأمان قاعدة بيانات Back4app، هناك طريقتان يمكننا من خلالهما حماية الفئات والكائنات. يمكننا الاختيار من بين ما يلي:

  1. أذونات مستوى الفئة (CLPs)
  2. مستويات التحكم في الوصول (ACLs)

تركز CLPs على تحديد قيود الوصول على مستوى الفئة، مما يسمح بالتحكم الدقيق في الوصول إلى البيانات وتعديلها. وعلى العكس، تمنح ACLs الوصول أو تقيد الوصول إلى كائنات محددة وتستند إلى الأدوار أو الأذونات التي يحددها المستخدم.

لمعرفة المزيد حول أمان Parse، راجع مقالة Parse Server Security.

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

حدِّد فئة النشر في الشريط الجانبي، ثم استخدم النقاط الثلاث أعلى يمين الشاشة و”الأمان > أذونات مستوى الفئة”. قم بتعيين CLPs هكذا:

Back4appback4app Post CLPs

عظيم، هذا كل شيء. تم الانتهاء من الواجهة الخلفية الآن. لم يكن ذلك صعباً للغاية.

كود الواجهة الأمامية

في هذا القسم من المقالة، سنعمل على الجزء الأمامي من شبكتنا الاجتماعية.

المشروع الأولي

ابدأ باستخدام أداة إنشاء تطبيق Next-next لتهيئة مشروع Next.js جديد:

$ npx create-next-app@latest back4app-social-network

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ... No
√ Would you like to customize the default import alias? ... No

Created a new Next.js app in ~\back4app-social-network.

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

يأتي مشروع Next.js الافتراضي مع بعض الملفات والدلائل “عديمة الفائدة”. لتقليل حجم المشروع، امض قدمًا واحذف ما يلي:

  • الصفحات/مجلد API
  • مجلد الأنماط
  • عام/التالي.svg
  • عام/فيرسيل.svg

لا تنسَ أيضًا إزالة استيراد globals.css من الصفحات/التطبيق.js:

// pages/_app.js

import "@/styles/globals.css";  // remove this line

ثم استبدل محتويات الصفحات/index.js بما يلي:

// pages/index.js

export default function Home() {
  return (
    <>
      <p>Hello world!</p>
    </>
  );
}

ابدأ تشغيل خادم التطوير التالي:

$ next dev

أخيرًا، افتح متصفح الويب الخاص بك وانتقل إلى http://localhost:3000. إذا كان كل شيء يعمل بشكل جيد، يجب أن يتم تجميع تطبيقك، ويجب أن تكون قادرًا على رؤية رسالة “مرحبًا أيها العالم!”.

إعداد ChakraUI

لتسريع عملية بناء واجهة المستخدم، سنستخدم ChakraUI. ChakraUI هي مكتبة React ممتازة تحتوي على مكونات مبنية مسبقًا، ونظام مصمم، وخطافات متخصصة، والمزيد.

امض قدمًا وقم بتثبيته عبر NPM:

$ npm i @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

بعد ذلك، قم بلف المكون الخاص بك مع ChakraProvider هكذا:

// pages/_app.js

import {ChakraProvider} from "@chakra-ui/react";

function MyApp({Component, pageProps}) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

لا تنسى استيراده في أعلى الملف:

import {ChakraProvider} from "@chakra-ui/react";

لكي تعمل شقرا بشكل صحيح، يجب علينا تضمين البرنامج النصي لوضع الألوان. يضمن هذا البرنامج النصي عمل مزامنة التخزين المحلي بشكل صحيح ويزيل “ومضات الألوان”.

قم بتعديل صفحاتك/_document.js هكذا:

// pages/_document.js

import { Html, Head, Main, NextScript } from "next/document";
import {ColorModeScript, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme();

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme}/>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

هذا كل شيء بالنسبة لإعداد الشاكرا الأولي.

أيقونات React Icons

لجعل تطبيقنا أكثر روعة، سنقوم بتثبيت أيقونات React-icons. أيقونات React هي مكتبة تتيح لك تضمين أيقونات شائعة بسرعة في مشروعك. تأتي مع أيقونات Ant و Bootstrap و Heroicons و Font Awesome وغيرها.

قم بتثبيته عن طريق تشغيله:

$ npm install react-icons --save

يمكنك بعد ذلك استيراد أي أيقونة واستخدامها هكذا:

import {FaMusic} from "react-icons/fa";

return (
    <FaMusic/>
);

للاطلاع على قائمة الرموز، راجع مستنداتهم الرسمية.

التخطيط والمكونات

معظم الشبكات الاجتماعية لديها تخطيط موحد. جميع الصفحات لها نفس العنوان في الأعلى والتذييل في الأسفل. دعنا ننفذ تخطيطنا.

ابدأ بإنشاء مجلد باسم المكونات في جذر المشروع. ثم أنشئ هذه الملفات فيه:

components/
├── header.js
├── footer.js
└── layout.js

بعد ذلك، املأ ملف header.js بما يلي:

// components/header.js

import NextLink from "next/link";
import {Box, Container, Divider, Heading, HStack, Link} from "@chakra-ui/react";

export default function Header() {
  return (
    <Box py={4}>
      <Container 
        maxW="container.lg" 
        display="flex" 
        alignItems="center" 
        justifyContent="space-between"
      >
        <Heading as="h1" size="md">
          <Link as={NextLink} href="/">
            back4app-social-network
          </Link>
        </Heading>
        <HStack spacing="1em">
          <Heading size="sm">
            <Link as={NextLink} href="/login">
              Log in
            </Link>
          </Heading>
          <Heading size="sm">
            <Link as={NextLink} href="/signup">
              Sign up
            </Link>
          </Heading>
        </HStack>
      </Container>
      <Divider my={4}/>
    </Box>
  );
}

ثم افعل الشيء نفسه مع ملف footer.js: 

// components/footer.js

import NextLink from "next/link";
import {Box, Container, Divider, Heading,
  HStack, Link, Tag, Text, VStack} from "@chakra-ui/react";
import {FaGithub} from "react-icons/fa";

export default function Footer() {
  return (
    <Box py={4}>
      <Divider my={4}/>
      <Container
        maxW="container.lg"
        display="flex"
        justifyContent="space-between"
        alignItems="center"
      >
        <VStack alignItems="left">
          <Heading size="sm">
            A simple social network powered by Back4app.
          </Heading>
          <Link
            as={NextLink}
            href="https://blog.back4app.com/how-to-develop-a-social-media-app/"
          >
            Click here to learn how to build it!
          </Link>
        </VStack>
        <Link href="https://github.com/duplxey/back4app-social-network">
          <Tag background="black" color="white" py={2}>
            <HStack>
              <FaGithub size="1.5em"/>
              <Text>View on GitHub</Text>
            </HStack>
          </Tag>
        </Link>
      </Container>
    </Box>
  );
}

لا يوجد الكثير مما يمكننا شرحه هنا. استخدمنا مكونات شقرا المدمجة لتشكيل رأس وتذييل جميلين. بما أننا نستخدم Next.js، دمجنا رابط شقرا مع رابط Next.

وأخيرًا، استخدم مكوِّن الرأس والتذييل المنشأ حديثًا لتشكيل تخطيط:

// components/layout.js

import {Container} from "@chakra-ui/react";
import Header from "@/components/header";
import Footer from "@/components/footer";

export default function Layout({children}) {
  return (
    <>
      <Header/>
      <Container maxW="container.lg">
        {children}
      </Container>
      <Footer/>
    </>
  );
}

ثم قم بتطبيق التخطيط على index.js:

// pages/index.js

import Layout from "@/components/layout";

export default function Home() {
  return (
    <Layout>
      <p>Hello world!</p>
    </Layout>
  );
}

انتظر حتى يقوم خادم التطوير التالي بإعادة تجميع التعليمات البرمجية الخاصة بك، ثم قم بزيارة http://localhost:3000. إذا كان كل شيء يعمل بشكل جيد، يجب أن ترى أن التخطيط الجديد قد تم تطبيقه.

باك فور آب سوشيال نتوورك مرحبًا بالعالم

إعداد Parse.js

ابدأ بتثبيت Parse عبر NPM:

$ npm install parse

بعد ذلك، أضف التهيئة التالية ضمن واردات _app.js:

// pages/_app.js

// ...

import Parse from "parse/dist/parse";

const PARSE_APPLICATION_ID = process.env.NEXT_PUBLIC_PARSE_APPLICATION_ID;
const PARSE_JAVASCRIPT_KEY = process.env.NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY;
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = "https://parseapi.back4app.com/";

// ...

بدلاً من الترميز الثابت لبيانات الاعتماد، استخدمنا المتغيرات البيئية. مع Next.js، ليس عليك تكوين أي شيء لتمكين المتغيرات البيئية. يتم تحميلها تلقائيًا من ملف .env.local.

قم بإنشاء ملف .env.local في جذر المشروع بالمحتويات التالية:

NEXT_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

تأكد من استبدال و بمعرفك الفعلي ومفتاحك. للحصول على بيانات الاعتماد الخاصة بك، انتقل إلى تطبيق Back4app الخاص بك واختر “إعدادات التطبيق > الأمان والمفاتيح” في الشريط الجانبي.

السياق

بدلًا من تمرير مثيل Parse عبر طبقات متعددة من التسلسل الهرمي للمكون، سنستخدم سياق React. يسمح لك سياق React بنقل البيانات من مكوّن إلى آخر دون تمريرها عبر الخاصيّات.

أولاً، أنشئ مجلدًا جديدًا باسم السياق مع ملف parseContext.js فيه:

// context/parseContext.js

import {createContext} from "react";

const ParseContext = createContext();

export default ParseContext;

ثم لف المكون الخاص بك مع ParseContext.Provider ومرر مثيل Parse إليه:

// pages/_app.js

// ...

function MyApp({Component, pageProps}) {
  return (
    <ChakraProvider>
      <ParseContext.Provider value={Parse}>
        <Component {...pageProps} />
      </ParseContext.Provider>
    </ChakraProvider>
  );
}

export default MyApp;

مرة أخرى، لا تنسَ استيراد ParseContext:

import ParseContext from "@/context/parseContext";

يمكننا الآن الحصول على مثيل Parse من خلال خطاف useContext() في طرق العرض الخاصة بنا. لنختبر اتصال Parse في index.js.

استبدل محتويات الصفحات/index.js بما يلي:

// pages/index.js

import {useContext} from "react";
import ParseContext from "@/context/parseContext";
import {Button} from "@chakra-ui/react";
import Layout from "@/components/layout";

export default function Home() {

  const parse = useContext(ParseContext);

  async function testConnection() {
    try {
      await new parse.Query("TestClass").first();
      console.log("Connection successful");
    } catch (error) {
      console.error("Connection failed: " + error);
    }
  }

  return (
    <Layout>
      <p>Hello world!</p>
      <Button onClick={() => testConnection()}>Parse.js test</Button>
    </Layout>
  );
}

انتظر حتى يتم إعادة تجميع خادم التطوير التالي وزيارة http://localhost:3000. ثم افتح وحدة التحكم وانقر على زر “Parse.js test”. يجب أن تظهر لك رسالة “الاتصال ناجح” إذا سار كل شيء على ما يرام.

المصادقة

كما ذكرنا في قسم “ما هو Back4app؟” يحتوي Back4app على نظام مصادقة مدمج. إعداد مصادقة المستخدم سهل مثل استدعاء بعض الطرق. حتى تخزين الجلسة يتم التعامل معه تلقائيًا من أجلك عبر Parse SDK.

لنعمل على نماذج مصادقة المستخدم.

ابدأ بإنشاء صفحة جديدة باسم signup.js وضع ما يلي بداخلها:

// pages/signup.js

import NextLink from "next/link";
import {useState} from "react";
import {Button, Card, CardBody, CardFooter, CardHeader, FormControl, 
    FormLabel, Heading, HStack, Input, Link, Text, VStack,
} from "@chakra-ui/react";
import {FaUserPlus} from "react-icons/fa";
import Layout from "@/components/layout";

export default function SignUp() {

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const onSubmit = async (event) => {
    // implement logic
  };

  return (
    <Layout>
      <Card>
        <CardHeader>
          <HStack>
            <FaUserPlus/>
            <Heading as="h2" size="md"> Sign up</Heading>
          </HStack>
        </CardHeader>
        <CardBody py={0}>
          <VStack spacing="1em" alignItems="left">
            <FormControl>
              <FormLabel>Username</FormLabel>
              <Input
                placeholder="Username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
            </FormControl>
            <FormControl>
              <FormLabel>Password</FormLabel>
              <Input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </FormControl>
          </VStack>
        </CardBody>
        <CardFooter 
            w="full" 
            display="flex" 
            alignItems="center" 
            justifyContent="space-between"
        >
          <Text>
            Already have an account?{" "}
            <Link as={NextLink} href="/login">
              Log in
            </Link>
          </Text>
          <Button colorScheme="teal" onClick={onSubmit}>Sign up</Button>
        </CardFooter>
      </Card>
    </Layout>
  );
}

ينشئ هذا الرمز صفحة جديدة على /signup ويعرض نموذج التسجيل. لإنشاء حساب، سيحتاج المستخدمون إلى إدخال اسم المستخدم وكلمة المرور الخاصة بهم.

ثم قم بتعديل الصفحات/signup.js لتضمين المنطق:

// pages/signup.js

// ...

import {useRouter} from "next/router";
import {useContext, useEffect} from "react";
import ParseContext from "@/context/parseContext";

export default function SignUp() {

  const router = useRouter();
  const parse = useContext(ParseContext);

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  // redirect the user if already logged in
  useEffect(() => {
    (async () => {
      if (parse.User.current() !== null) {
        await router.push("/");
      }
    })();
  }, [router, parse.User]);

  const onSubmit = async (event) => {
    event.preventDefault();

    if (!username || !password) {
      console.error("Please fill out all the fields.");
      return;
    }

    try {
      await parse.User.signUp(username, password).then(() => {
        router.push("/");
        console.log("Successfully signed up.");
      });
    } catch (error) {
      console.error(error.message);
    }
  };

  return (
    // ...
  );
}
  1. إذا كان المستخدم قد سجل دخوله بالفعل، فسيتم إعادة توجيهه الآن إلى / عبر خطاف استخدام الموجه التالي ().
  2. لقد قمنا بتعديل onSubmit() لاستدعاء User.signUp()، وإنشاء جلسة عمل المستخدم وتخزين ملف تعريف الارتباط على متصفح المستخدم.

افعل الشيء نفسه مع ملف pages/login.js. احصل على الشيفرة المصدرية من مستودع GitHub.

عظيم، لقد انتهى نظام المصادقة الآن بشكل أو بآخر. آخر شيء سنفعله هو تعديل header.js قليلاً لعرض روابط تسجيل الدخول أو روابط تسجيل الدخول/التسجيل إذا لم تتم المصادقة.

عدِّل المكونات/header.js هكذا:

// components/header.js

import NextLink from "next/link";
import {Avatar, Box, Container, Divider, Heading, HStack, Link} from "@chakra-ui/react";
import {useContext, useEffect, useState} from "react";
import ParseContext from "@/context/parseContext";

export default function Header() {

  const parse = useContext(ParseContext);
  const [user, setUser] = useState(null);

  useEffect(() => {
    setUser(parse.User.current());
  }, [parse.User]);

  return (
    <Box py={4}>
      <Container 
        maxW="container.lg" 
        display="flex" 
        alignItems="center" 
        justifyContent="space-between"
      >
        <Heading as="h1" size="md">
          <Link as={NextLink} href="/">
            back4app-social-network
          </Link>
        </Heading>
        {user != null ? (
          <HStack>
            <Avatar 
              size="sm" 
              name={user.attributes.username} 
              src={user.attributes.avatarUrl}
            />
            <Heading size="sm">
              <Link as={NextLink} href="/settings">
                {user.attributes.username}
              </Link>
            </Heading>
          </HStack>
        ) : (
          <HStack spacing="1em">
            <Heading size="sm">
              <Link as={NextLink} href="/login">
                Log in
              </Link>
            </Heading>
            <Heading size="sm">
              <Link as={NextLink} href="/signup">
                Sign up
              </Link>
            </Heading>
          </HStack>
        )}
      </Container>
      <Divider my={4}/>
    </Box>
  );
}

انتظر حتى يقوم خادم التطوير التالي بإعادة تجميع واختبار نظام المصادقة. حاول إنشاء حساب والتحقق مما إذا كان الرأس يتغير.

ليست لدينا وظيفة تسجيل الخروج حتى الآن، لذا سيتعين عليك حذف ملفات تعريف الارتباط يدويًا إذا كنت تريد تسجيل الخروج.

رأس ديناميكي لشبكة Back4app الاجتماعية

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

مستخدم جديد لقاعدة بيانات Back4app Back4app

إعدادات المستخدم

لنجعل حقلي الوصف والصورة الرمزية التي أضفناها إلى فئة المستخدم قابلة للتحرير.

أنشئ ملفًا جديدًا باسم settings.js في دليل الصفحات:

// pages/settings.js

import React, {useContext, useEffect, useState} from "react";
import {useRouter} from "next/router";
import {Button, Card, CardBody, CardFooter, CardHeader, FormControl, FormLabel,
  Heading, HStack, Input, VStack} from "@chakra-ui/react";
import {FaCog} from "react-icons/fa";
import ParseContext from "@/context/parseContext";
import Layout from "@/components/layout";

export default function Settings() {

  const router = useRouter();
  const parse = useContext(ParseContext);

  const [description, setDescription] = useState("");
  const [avatarUrl, setAvatarUrl] = useState("");

  useEffect(() => {
    (async () => {
      const user = parse.User.current();

      // redirect the user if not logged in
      if (user === null) {
        await router.push("/");
        return;
      }

      // load data from the database
      setDescription(await user.get("description"));
      setAvatarUrl(await user.get("avatarUrl"));
    })();
  }, [router, parse.User]);

  const onSave = async () => {
    const user = parse.User.current();
    user.set("description", description);
    user.set("avatarUrl", avatarUrl);
    await user.save();

    console.log("Successfully saved settings.");
  };

  const onLogout = async () => {
    await parse.User.logOut();
    await router.push("/");

    console.log("Successfully logged out.");
  };

  return (
    <Layout>
      <Card>
        <CardHeader>
          <HStack>
            <FaCog/>
            <Heading as="h2" size="md"> Settings</Heading>
          </HStack>
        </CardHeader>
        <CardBody py={0}>
          <VStack spacing="1em">
            <FormControl>
              <FormLabel>Description</FormLabel>
              <Input
                placeholder="Description"
                value={description}
                onChange={e => setDescription(e.target.value)}
              />
            </FormControl>
            <FormControl>
              <FormLabel>Avatar URL</FormLabel>
              <Input
                placeholder="Avatar URL"
                value={avatarUrl}
                onChange={e => setAvatarUrl(e.target.value)}
              />
            </FormControl>
          </VStack>
        </CardBody>
        <CardFooter display="flex" justifyContent="right">
          <HStack>
            <Button colorScheme="red" onClick={onLogout}>Log out</Button>
            <Button colorScheme="teal" onClick={onSave}>Save</Button>
          </HStack>
        </CardFooter>
      </Card>
    </Layout>
  );
}
  1. لقد استخدمنا خطاف UseEffect() الخاص بـ React لإعادة توجيه المستخدم إذا لم تتم مصادقته. علاوةً على ذلك، يجلب الخطاف وصف المستخدم وAvatarUrl.
  2. قمنا بتنفيذ أسلوب onSave() ، الذي يقوم بتحديث معلومات المستخدم ببيانات الحالة.
  3. لقد نفذنا طريقة onLogout() التي تستدعي طريقة Parse’s logOut(). يقوم Parse’s logOut() بحذف جلسة العمل من قاعدة البيانات وإزالة ملف تعريف الارتباط من متصفح المستخدم.

المنشورات

آخر شيء يجب أن نفعله قبل أن تكتمل شبكتنا الاجتماعية البسيطة هو تنفيذ المنشورات. لقد أنشأنا بالفعل فئة قاعدة البيانات. الآن كل ما علينا فعله هو إنشاء نموذج لإنشائها وجلبها من قاعدة البيانات.

أولًا، أضف مكوّنًا جديدًا يُدعى post.js:

// components/post.js

import {Avatar, Box, Card, CardBody, CardHeader, Heading, HStack, Text} from "@chakra-ui/react";

export default function Post(props) {
  return (
    <Card mt={2}>
      <CardHeader pb={0}>
        <HStack spacing="1em">
          <Avatar name={props.author.username} src={props.author.avatarUrl}/>
          <Box>
            <Heading size="sm">{props.author.username}</Heading>
            <Text>{props.author.description}</Text>
          </Box>
        </HStack>
      </CardHeader>
      <CardBody>
        <Text>{props.content}</Text>
      </CardBody>
    </Card>
  );
}

ثم قم بتعديل index.js الخاص بك هكذا:

// pages/index.js

import {useContext, useEffect, useState} from "react";
import {Alert, AlertIcon, Button, Card, CardBody, CardFooter,
  CardHeader, Heading, HStack, Textarea} from "@chakra-ui/react";
import {FaPlus} from "react-icons/fa";
import ParseContext from "@/context/parseContext";
import Layout from "@/components/layout";
import Post from "@/components/post";

export default function Home() {

  const parse = useContext(ParseContext);

  const [user, setUser] = useState(null);
  const [postContent, setPostContent] = useState("");
  const [posts, setPosts] = useState([]);

  const onCreatePost = async () => {
      // implement logic
  };

  return (
    <Layout>
      {user ? (
        <Card mb={2}>
          <CardHeader>
            <HStack>
              <FaPlus/>
              <Heading as="h2" size="md"> Create post</Heading>
            </HStack>
          </CardHeader>
          <CardBody py={0}>
            <Textarea
              placeholder="What's on your mind?"
              value={postContent}
              onChange={(event) => setPostContent(event.target.value)}
            />
          </CardBody>
          <CardFooter display="flex" justifyContent="right">
            <Button colorScheme="teal" onClick={onCreatePost}>Post</Button>
          </CardFooter>
        </Card>
      ) : (
        <Alert status="warning" mb={2}>
          <AlertIcon/>
          You need to log in to create posts.
        </Alert>
      )}
      {posts.map(post => (
        <Post
          key={post.id}
          content={post.attributes.content}
          author={{...post.attributes.author.attributes}}
        />
      ))}
    </Layout>
  );
}

ثم قم بتنفيذ onCreatePost() هكذا:

const onCreatePost = async () => {
  if (!user == null) return;

  const post = new parse.Object("Post");
  post.set("content", postContent);
  post.set("author", user);
  await post.save();

  setPostContent("");
  setPosts([post, ...posts]);
};

وأخيرًا، أضف خطاف useEffect() لجلب المنشورات:

useEffect(() => {
  setUser(parse.User.current());

  (async () => {
    const posts = await new parse.Query("Post")
      .include("author").descending("createdAt").find();
    setPosts(posts);
  })();
}, []);

لمعرفة المزيد حول كائنات واستعلامات Parse، راجع وثائق Parse الرسمية.

ابدأ تشغيل خادم التطوير التالي مرة أخرى:

$ next start

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

منشورات قاعدة بيانات Back4app4back4app

الخاتمة

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

الآن، يجب أن يكون لديك فهم جيد لكيفية عمل Back4app وكيفية البدء في بناء شبكتك الاجتماعية.

يمكن أن يكون المشروع الذي أنشأناه في هذه المقالة بمثابة أساس متين لمزيد من التطوير. اختبر معرفتك من خلال تنفيذ ميزات جديدة، مثل وظيفة الإعجاب/عدم الإعجاب، ووظيفة المشاركة، والتعليقات.

الكود المصدري متاح على مستودع Back4app-social-network GitHub.

الخطوات المستقبلية

  1. اتبع هذه المقالة لنشر واجهة Next.js الأمامية الخاصة بك على حاويات Back4app.
  2. ابحث في وظائف التعليمات البرمجية السحابية لإضافة وظائف متقدمة إلى الواجهة الخلفية.
  3. فرض التحقق من البريد الإلكتروني للمستخدم عند التسجيل لمكافحة الروبوتات.

Nik Tomazic

نيك من سلوفينيا هو مطور Full-Stack متعدد المهارات، متمرس في لغات مثل Python و Java و JavaScript. إلى جانب البرمجة، تشمل خبراته إدارة الخوادم، التصميم الجرافيكي، والكتابة التقنية. مدفوعًا بالسعي إلى التميز، يواجه نيك التحديات بشغف ويهدف دائمًا إلى الكمال في مساعيه. اكتشف المزيد من أعمال ومشاريع نيك على موقعه الشخصي 🌐 أو تفقد مستودعاته البرمجية على GitHub 🛠️. للمزيد من التفاصيل المهنية، زوروا حسابه على LinkedIn 🔗.

Leave a reply

Your email address will not be published.