Bir Sosyal Medya Uygulaması Nasıl Geliştirilir?

Bu makalede, sosyal ağlar, sosyal medya uygulamalarının türleri, faydaları ve sahip olunması gereken özellikler hakkında konuşacağız.

Bunun da ötesinde, adım adım bir sosyal ağın nasıl oluşturulacağına bakacağız. Arka uçta Back4app ve ön uçta Next.js kullanacağız.

Sosyal ağ nedir?

Sosyal ağ, insanların birbirleriyle bağlantı kurmasına ve etkileşime geçmesine olanak tanıyan bir sosyal medya uygulamasıdır.

İki kullanıcı bağlandıktan sonra, kullanıcı bilgilerini paylaşabilir, mesaj, resim, gönderi ve daha fazlasını paylaşabilirler.

Bugünlerde sosyal medya uygulamaları oldukça popüler. Neredeyse herkes en az bir sosyal medya uygulamasına kaydolmuş durumda. Buffer’ın araştırmasına göre, en popüler sosyal medya platformları şunlardır:

• Facebook (2,96 milyar MAU)
• YouTube (2,2 milyar MAU)
• Instagram (2 milyar MAU)
• TikTok (1 milyar MAU)
• Snapchat (500 milyon MAU)

MAU’lar aylık aktif kullanıcı anlamına gelir. Bu, sosyal medya platformunuzla aylık olarak etkileşime giren benzersiz kullanıcı sayısıdır.

Sosyal medya uygulama pazarı çok büyük olsa da, bir sosyal medya uygulaması geliştirmek zorlu bir iştir.

Bu, yapabileceğiniz en karmaşık BT projelerinden biridir. Birçok şirket bir sosyal ağ uygulaması oluşturmanın ne kadar zor olduğunu hafife alıyor ve ardından büyük kayıplarla başarısızlığa uğruyor.

Sosyal medya uygulama türleri

Önceki bölümde de belirtildiği gibi, sosyal ağ, sosyal medya uygulama türlerinden sadece biridir. Diğer sosyal medya uygulama türleri şunlardır:

• Medya paylaşım ağları (Instagram, TikTok, YouTube)
• İçerik paylaşım ağları (Pinterest, Tumblr, Flickr)
• Tüketici inceleme ağları (Trustpilot, Angi, Choice)
• Bloglama ve yayınlama ağları (Medium, Twitter)
• Tartışma forumları (Reddit, Quora, HackerNews)
• İlişki ağları (Tinder, Bumble)

Bir sosyal medya uygulaması geliştirmenin faydaları

Bir sosyal medya uygulaması oluşturmak çeşitli avantajlar sunar. Bu avantajlar arasında reklam geliri, para kazanma, değerli kullanıcı bilgileri toplama, gelişmiş analizler, diğer şirketlerle sponsorluklar ve daha fazlası yer alır.

Sosyal medya uygulamalarının bir diğer harika yanı da muazzam yeniden satış değerleridir. Uygulamanız nispeten başarılıysa (yani iyi bir kullanıcı tabanına sahipse), onu hızlı bir şekilde başka bir şirkete satabilirsiniz. Örneğin Twitter 44 milyar dolara, MySpace ise 87 milyon dolara satıldı.

Geliştirici açısından bakıldığında, basit bir sosyal ağ oluşturmak, birlikte çalıştığınız araçları tanımanızı sağlar ve böyle bir şey oluşturmanın ne kadar zor olduğu konusunda size bir fikir verir.

Bir sosyal medya uygulamasının sahip olması gereken özellikler

Sosyal medya uygulamaları işlevsellik açısından çok çeşitlilik gösterir. Bununla birlikte, her başarılı sosyal medya uygulamasının içerdiği bazı temel özellikler vardır.

Kullanıcı Hesapları

Tüm sosyal medya uygulamaları kullanıcıların bir hesap oluşturmasına izin verir. Kullanıcılar hesaplarını oluşturduktan sonra kişisel bilgilerini ekleyebilir ve uygulamayı kendi ihtiyaçlarına göre uyarlayabilirler. Örneğin, beğendikleri özellikleri seçebilir, ilgi alanlarını ekleyebilir, belirli içerikleri gizleyebilir vb.

Kullanıcı hesaplarının işletme açısından en iyi avantajı, bir “kullanıcı profili” oluşturabilmenizdir. “Kullanıcı profili” derken, belirli bir kullanıcının nelerden hoşlandığını ve kimlerle etkileşime girdiğini anlamanızı ve ardından reklamları buna göre uyarlamanızı kastediyorum.

Kullanıcıları Bağlama

Sosyal medya uygulamaları, kullanıcıların bağlantı kurmasına, örneğin birini arkadaş olarak eklemesine, takip etmesine ve abone olmasına olanak tanır. İki kullanıcı bağlandığında, akışları buna göre değiştirilir.

İçerik Paylaşımı

Her sosyal medya uygulamasının amacı içerik paylaşmaktır. Eğer uygulamanız kullanıcıların hızlı bir şekilde içerik paylaşmasına izin vermiyorsa, uygulamanız kesinlikle başarılı olamayacaktır.

Bir sosyal medya uygulamasını hayata geçirirken en iyi UI/UX uygulamalarını takip edin. Bir şey yayınlamak bir veya iki düğmeye basmak kadar kolay olmalıdır.

Arama ve Keşif

Harika arama ve keşif algoritmaları, her başarılı sosyal uygulamanın ayrılmaz parçalarıdır.

Sosyal medya uygulamanız, kullanıcıların ilgilendikleri içeriği kolayca bulmalarına olanak sağlamalıdır. Bunun da ötesinde, uygulamanız kişiselleştirilmiş bir akış ve gelişmiş arama işlevi sunmalıdır.

Bildirimler

Etkileşimi ve uygulama kullanımını artırmak için anlık bildirimleri uygulamayı düşünmeniz gerekir.

Anlık bildirimler, kullanıcılara bir şey olduğunda, örneğin arkadaşları paylaşım yaptığında, bir etkinlik olduğunda, uygulamayı bir süredir kullanmadıklarında vb. bildirimde bulunmanıza olanak tanıyan güçlü bir iletişim kanalıdır.

Anlık bildirimler hakkında daha fazla bilgi edinmek ve bunları projenize nasıl entegre edeceğinizi öğrenmek için Anlık Bildirimler Nedir?

Bir sosyal medya uygulaması nasıl yapılır?

Bu eğitim bölümünde, adım adım bir sosyal medya uygulamasının nasıl oluşturulacağına bakacağız. Arka uç olarak Back4app ve ön uçta Next.js çerçevesi ile React kullanacağız.

Ön Koşullar

İşte bu proje için kullanacağımız teknoloji yığını:

• JavaScript ES6 ile deneyim.
• React/Next.js ve React kancaları ile deneyim.
• Hizmet Olarak Arka Uç (BaaS) hakkında temel anlayış.
• Yerel makinenizde yüklü Node.js v16+ ve bir editör.

Back4app nedir?

Back4app, modern web ve mobil uygulamaları hızlı bir şekilde oluşturmak için harika bir düşük kodlu arka uçtur. Gerçek zamanlı veritabanları, kullanıcı yönetimi, Cloud Code işlevleri, push bildirimleri, sosyal entegrasyonlar, API’ler, SDK‘lar ve daha fazlası dahil olmak üzere bir dizi özellikle birlikte gelir!

Back4app’i kullanarak, arka uç işlerinin çoğunu dış kaynak olarak kullanabilir ve temel iş mantığınıza ve ön uca odaklanabilirsiniz.

Ayrıca temel altyapı veya uygulama ölçeklendirmesi hakkında endişelenmenize gerek kalmayacak. Back4app tüm bunları karşılayacaktır. Sosyal medya uygulaması geliştirmeyi hızlandırmak için harika bir seçenektir.

Back4app, test ve prototip oluşturma için harika olan ücretsiz bir katman sunar. Uygulamanız ölçeklendikçe, daha sonra öngörülebilir fiyatlandırma ile premium katmanlara yükseltebilirsiniz.

Bir sosyal ağ oluşturmak için neden Back4app kullanmalısınız?

• Kullanımı son derece kolay.
• Yerleşik kimlik doğrulama sistemi (sosyal kimlik doğrulama dahil ).
• Anlık bildirimler ve kolay e-posta gönderimi.
• Ölçeklendirme yetenekleri ve otomatik ölçeklendirme.

Proje Tanıtımı

Bu makalede, basit bir sosyal ağ oluşturacağız. Uygulanan sosyal ağ, kullanıcıların bir hesap oluşturmasına, kimliklerini doğrulamasına, bir profil oluşturmasına ve gönderi oluşturmasına olanak tanıyacak.

Arka uçta Back4app kullanacağız ve ön uçta bir sosyal medya uygulaması oluşturmak için Next.js çerçevesi ile React kullanacağız

Önce bir Back4app uygulaması oluşturacağız, veritabanı modellerini ayarlayacağız ve ardından ön uca geçeceğiz.

Ön uçta Parse SDK’yı yüklememiz, kimlik doğrulamayı ayarlamamız ve oturum açma, kaydolma, profil gibi belirli görünümler üzerinde çalışmamız gerekecek.

Nihai ürün bu şekilde görünecektir:

Uygulama Oluştur

Sonraki adımlar bir Back4app hesabınızın olmasını gerektirecektir. Henüz bir hesabınız yoksa, devam edin ve ücretsiz olarak bir tane oluşturun.

Back4app hesabınıza giriş yaptığınızda, uygulama listeniz karşınıza çıkacaktır. Uygulama oluşturma sürecini başlatmak için “Yeni uygulama oluştur” seçeneğine tıklayın.

Back4app iki tür uygulama oluşturmanıza olanak tanır:

1. Hizmet Olarak Arka Uç (BaaS)
2. Hizmet Olarak Konteynerler (CaaS)

BaaS, tam teşekküllü Parse destekli bir arka uç çözümüdür; CaaS ise Docker aracılığıyla konteynerli uygulamaları dağıtmak için kullanılır.

Bir sosyal ağ oluşturduğumuz için “Backend as a Service” seçeneğini kullanacağız.

Ardından, uygulamanıza açıklayıcı bir ad verin, veritabanı olarak “NoSQL “i seçin ve “Oluştur “a tıklayın.

Back4app’in uygulamanız için gereken her şeyi hazırlaması yaklaşık 2 dakika sürecektir. İşlem tamamlandığında, uygulamanızın veritabanı görünümüne yönlendirileceksiniz.

Veritabanı Sınıfları

Devam edelim, veritabanını sosyal medya uygulamaları geliştirmek için hazırlayalım.

Fark etmiş olabileceğiniz gibi, veritabanında zaten iki sınıf bulunmaktadır. Birincisi Kullanıcı, ikincisi Rol olarak adlandırılır. Varsayılan olarak, tüm Back4app sınıfları aşağıdaki alanlarla birlikte gelir:

+-----------+-------------------------------------------------------------------------+
| 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).       |
+-----------+-------------------------------------------------------------------------+

Kullanıcı sınıfımızı biraz değiştirerek description ve avatarUrl alanlarını ekleyelim. Kullanıcılar daha sonra bu iki alanı kendi ayarlarında düzenleyebilecekler.

Ekranın sağ üst köşesindeki “+ Sütun” düğmesine tıklayın ve aşağıdaki iki alanı ekleyin:

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

Değiştirdiğinizden emin olun .png, .jpg veya .jpeg ile biten gerçek bir resim URL’si ile. Herhangi bir fikriniz yoksa, bunu kullanabilirsiniz.

Sonra, Post adında bir sınıf oluşturalım. Her gönderinin bir yazarı ve bazı metin içerikleri olacaktır.

Sınıf oluşturma işlemini başlatmak için ekranın sol üst köşesindeki “Sınıf oluştur” düğmesini kullanın. Adını Yazı koyun, “Korumalı” yapın ve “Sınıf oluştur ve sütun ekle “ye tıklayın.

Ardından aşağıdaki iki sütunu ekleyin:

+-----------------+---------+---------------+----------+
| Data type       | Name    | Default value | Required |
+-----------------+---------+---------------+----------+
| Pointer -> User | author  | <leave blank> | yes      |
+-----------------+---------+---------------+----------+
| String          | content | <leave blank> | yes      |
+-----------------+---------+---------------+----------+

Back4app Veritabanı Güvenliği

Back4app veritabanı güvenliği ile ilgili olarak, sınıfları ve nesneleri koruyabileceğimiz iki yol vardır. Aşağıdakilerden birini seçebiliriz:

1. Sınıf Seviyesi İzinleri (CLP’ler)
2. Erişim Kontrol Düzeyleri (ACL’ler)

CLP’ler sınıf düzeyinde erişim kısıtlamalarının tanımlanmasına odaklanarak veri erişimi ve değişiklikleri üzerinde ince taneli kontrol sağlar. Buna karşılık, ACL’ler belirli nesnelere erişim sağlar veya erişimi kısıtlar ve kullanıcı tanımlı rollere veya izinlere dayanır.

Parse güvenliği hakkında daha fazla bilgi edinmek için Parse Sunucu Güvenliği makalesine göz atın.

Yalnızca kimliği doğrulanmış kullanıcıların gönderi oluşturmasını ve yalnızca gönderi yazarının bunları güncelleyebilmesini ve silebilmesini istiyoruz. Bunu başarmak için Post CLP’leri kuracağız.

Kenar çubuğunda Post sınıfını seçin, ardından ekranın sağ üstündeki üç noktayı ve “Güvenlik > Sınıf Düzeyi İzinleri “ni kullanın. CLP’leri şu şekilde ayarlayın:

Harika, işte bu kadar. Arka ucumuz artık tamam. Çok zor olmadı.

Kod Ön Yüzü

Bu makale bölümünde, sosyal ağımızın ön uç kısmı üzerinde çalışacağız.

Init Projesi

Yeni bir Next.js projesini önyüklemek için create-next-app aracını kullanarak başlayın:

$ 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.

Araç size bir dizi soru soracaktır. Sadece ESLint’i etkinleştirmenizi öneririm, çünkü sunulan diğer özelliklerin hiçbirini kullanmayacağız ve bunlar projenizi daha karmaşık hale getirecektir.

Varsayılan Next.js projesi bazı “gereksiz” dosya ve dizinlerle birlikte gelir. Proje boyutunu küçültmek için devam edin ve aşağıdakileri silin:

• pages/api klasörü
• stiller klasörü
• public/next.svg
• public/vercel.svg

Ayrıca, pages/_app.js dosyasından globals.css içe aktarımını kaldırmayı unutmayın:

// pages/_app.js

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

Ardından pages/index.js dosyasının içeriğini aşağıdakiyle değiştirin:

// pages/index.js

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

Next geliştirme sunucusunu başlatın:

$ next dev

Son olarak, web tarayıcınızı açın ve http://localhost:3000 adresine gidin. Her şey yolunda giderse, uygulamanız derlenmeli ve “Hello world!” mesajını görebilmelisiniz.

ChakraUI Kurulumu

UI oluşturma sürecini hızlandırmak için ChakraUI kullanacağız. ChakraUI, önceden oluşturulmuş bileşenler, şekillendirilmiş bir sistem, özel kancalar ve daha fazlasına sahip mükemmel bir React kütüphanesidir.

Devam edin ve NPM aracılığıyla yükleyin:

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

Ardından, Bileşeninizi aşağıdaki gibi bir ChakraProvider ile sarın:

// pages/_app.js

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

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

export default MyApp;

Dosyanın üst kısmına aktarmayı unutmayın:

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

Chakra’nın düzgün çalışması için renk modu betiğini dahil etmeliyiz. Bu betik, yerel depolama senkronizasyonunun doğru çalışmasını sağlar ve “renk yanıp sönmelerini” ortadan kaldırır.

pages/_document.js dosyanızı aşağıdaki gibi değiştirin:

// 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>
  );
}

İlk Çakra kurulumu için hepsi bu kadar.

React Simgeleri

Uygulamamızı biraz daha süslü hale getirmek için react-icons yükleyeceğiz. React icons, popüler simgeleri projenize hızlı bir şekilde dahil etmenizi sağlayan bir kütüphanedir. Ant, Bootstrap, Heroicons, Font Awesome ikonları ve daha fazlası ile birlikte gelir.

Çalıştırarak yükleyin:

$ npm install react-icons --save

Daha sonra herhangi bir simgeyi içe aktarabilir ve bu şekilde kullanabilirsiniz:

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

return (
    <FaMusic/>
);

Simgelerin listesi için resmi dokümanlarına göz atın.

Düzen ve Bileşenler

Çoğu sosyal ağın standart bir düzeni vardır. Tüm sayfalar üstte aynı üstbilgiye ve altta aynı altbilgiye sahiptir. Düzenimizi uygulayalım.

Proje kök dizininde components adında bir klasör oluşturarak başlayın. Ardından bu dosyaları içinde oluşturun:

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

Ardından, header.js dosyasını aşağıdakilerle doldurun:

// 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>
  );
}

Ardından footer.js dosyası için de aynısını yapın:

// 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>
  );
}

Burada açıklayabileceğimiz fazla bir şey yok. Güzel bir üstbilgi ve altbilgi oluşturmak için yerleşik Chakra bileşenlerini kullandık. Next.js kullandığımız için Chakra’nın Link ‘ini Next’in Link‘i ile birleştirdik.

Son olarak, bir düzen oluşturmak için yeni oluşturulan üstbilgi ve altbilgi bileşenini kullanın:

// 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/>
    </>
  );
}

Ardından Düzeni index.js dosyasına uygulayın:

// pages/index.js

import Layout from "@/components/layout";

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

Next geliştirme sunucusunun kodunuzu yeniden derlemesini bekleyin, ardından http://localhost:3000 adresini ziyaret edin. Her şey yolunda gittiyse, yeni düzenin uygulandığını görmelisiniz.

Parse.js’yi Kurun

Parse’ı NPM aracılığıyla yükleyerek başlayın:

$ npm install parse

Ardından, _app.js dosyasının içe aktarımları altına aşağıdaki yapılandırmayı ekleyin:

// 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/";

// ...

Kimlik bilgilerini sabit kodlamak yerine çevresel değişkenleri kullandık. Next.js ile çevresel değişkenleri etkinleştirmek için herhangi bir şey yapılandırmanız gerekmez. .env.local dosyasından otomatik olarak yüklenirler.

Proje kök dizininde aşağıdaki içeriğe sahip .env.local dosyasını oluşturun:

NEXT_PUBLIC_PARSE_APPLICATION_ID=<parse_app_id>
NEXT_PUBLIC_PARSE_JAVASCRIPT_KEY=<parse_javascript_key>

Değiştirdiğinizden emin olun ve gerçek kimliğiniz ve anahtarınız ile. Kimlik bilgilerinizi almak için Back4app uygulamanıza gidin ve kenar çubuğunda “Uygulama Ayarları > Güvenlik ve Anahtarlar “ı seçin.

Bağlam

Parse örneğini bileşen hiyerarşisinin birden fazla katmanından geçirmek yerine React bağlamını kullanacağız. React context, verileri prop’lar aracılığıyla geçirmeden bir bileşenden diğerine “ışınlamanıza” olanak tanır.

İlk olarak, içinde parseContext.js dosyası bulunan context adında yeni bir klasör oluşturun:

// context/parseContext.js

import {createContext} from "react";

const ParseContext = createContext();

export default ParseContext;

Ardından Bileşeninizi ParseContext.Provider ile sarın ve Parse örneğini ona aktarın:

// pages/_app.js

// ...

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

export default MyApp;

Yine, ParseContext içe aktarımını unutmayın:

import ParseContext from "@/context/parseContext";

Artık görünümlerimizdeki useContext() kancası aracılığıyla Parse örneğini elde edebiliriz. Parse bağlantısını index.js‘de test edelim.

pages/index.js dosyasının içeriğini aşağıdaki ile değiştirin:

// 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>
  );
}

Next geliştirme sunucusunun yeniden derlenmesini ve http://localhost:3000 adresini ziyaret etmesini bekleyin. Ardından konsolu açın ve “Parse.js testi” düğmesine tıklayın. Her şey yolunda giderse “Bağlantı başarılı” mesajını almalısınız.

Kimlik Doğrulama

“Back4app Nedir?” bölümünde belirtildiği gibi Back4app yerleşik bir kimlik doğrulama sistemine sahiptir. Kullanıcı kimlik doğrulamasını ayarlamak birkaç yöntemi çağırmak kadar kolaydır. Oturum depolama bile Parse SDK aracılığıyla sizin için otomatik olarak işlenir.

Kullanıcı kimlik doğrulama formları üzerinde çalışalım.

Signup.js adında yeni bir sayfa oluşturarak başlayın ve içine aşağıdakileri yerleştirin:

// 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>
  );
}

Bu kod /signup adresinde yeni bir sayfa oluşturur ve kayıt formunu işler. Bir hesap oluşturmak için kullanıcıların kullanıcı adı ve şifrelerini girmeleri gerekir.

Ardından pages/signup.js dosyasını mantığı içerecek şekilde değiştirin:

// 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. Kullanıcı zaten oturum açmışsa, artık Next’in useRouter() kancası aracılığıyla / adresine yönlendirilecektir.
2. User.signUp () işlevini çağırmak için onSubmit () işlevini değiştirdik, kullanıcı oturumunu oluşturduk ve çerezi kullanıcının tarayıcısında sakladık.

Aynı işlemi pages/login.js dosyası için de yapın. GitHub deposundan kaynak kodunu alın.

Harika, kimlik doğrulama sistemi artık aşağı yukarı tamamlandı. Yapacağımız son şey header.js ‘yi biraz değiştirerek oturum açmış kullanıcıyı veya kimliği doğrulanmamışsa oturum açma/kayıt olma bağlantılarını görüntülemek.

components/header.js dosyasını şu şekilde değiştirin:

// 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>
  );
}

Next geliştirme sunucusunun kimlik doğrulama sistemini yeniden derlemesini ve test etmesini bekleyin. Bir hesap oluşturmayı deneyin ve başlığın değişip değişmediğini kontrol edin.

Henüz oturumu kapatma işlevine sahip değiliz, bu nedenle oturumu kapatmak istiyorsanız çerezleri manuel olarak silmeniz gerekecektir.

Bir kullanıcı oluşturduktan sonra Back4app veritabanı görünümünüze gidebilir ve Kullanıcı sınıfı satırlarını kontrol edebilirsiniz. Yeni bir kullanıcı eklendiğini göreceksiniz.

Kullanıcı Ayarları

User sınıfına eklediğimiz description ve avatarUrl alanlarını düzenlenebilir hale getirelim.

Pages dizininde settings.js adında yeni bir dosya oluşturun:

// 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. React’in useEffect() kancasını, kimlik doğrulaması yapılmamışsa kullanıcıyı yeniden yönlendirmek için kullandık. Bunun da ötesinde, kanca kullanıcının açıklamasını ve avatarUrl‘sini getirir.
2. Kullanıcının bilgilerini durum verileriyle güncelleyen onSave() yöntemini uyguladık.
3. Parse’ın logOut () işlevini çağıran onLogout ( ) yöntemini uyguladık. Parse’ın logOut() yöntemi, oturumu veritabanından siler ve çerezi kullanıcının tarayıcısından kaldırır.

Mesajlar

Basit sosyal ağımız tamamlanmadan önce yapmamız gereken son şey gönderileri uygulamaktır. Veritabanı sınıfını zaten oluşturduk. Şimdi tek yapmamız gereken bunları oluşturmak için bir form oluşturmak ve bunları veritabanından almak.

İlk olarak, post.js adında yeni bir bileşen ekleyin:

// 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>
  );
}

Ardından index.js dosyanızı şu şekilde değiştirin:

// 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>
  );
}

Ardından onCreatePost() işlevini şu şekilde uygulayın:

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]);
};

Son olarak, gönderileri almak için useEffect() kancasını ekleyin:

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

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

Parse Nesneleri ve Sorguları hakkında daha fazla bilgi edinmek için resmi Parse belgelerine göz atın.

Next geliştirme sunucusunu bir kez daha başlatın:

$ next start

Birkaç örnek gönderi oluşturun ve sayfayı yenileyin. Her şey yolunda giderse, gönderiler veritabanına kaydedilmeli ve sayfayı ziyaret ettiğinizde getirilmelidir.

Sonuç

Bu makalede, basit bir sosyal medya uygulamasını başarıyla oluşturduk. Uygulama, kullanıcıların kaydolmasına, kimliklerini doğrulamasına, profillerini düzenlemesine ve gönderi oluşturmasına olanak tanıyor.

Şimdiye kadar Back4app’in nasıl çalıştığını ve sosyal ağınızı nasıl oluşturmaya başlayacağınızı iyi bir şekilde anlamış olmalısınız.

Bu makalede oluşturduğumuz proje, daha fazla geliştirme için sağlam bir temel oluşturabilir. Beğenme/beğenmeme işlevi, paylaşma işlevi ve yorumlar gibi yeni özellikleri uygulayarak bilginizi test edin.

Kaynak kodu back4app-social-network GitHub deposunda mevcuttur.

Gelecek adımlar

1. Next.js ön ucunuzu Back4app Containers‘a dağıtmak için bu makaleyi izleyin.
2. Arka ucunuza gelişmiş işlevler eklemek için Cloud Code Functions ‘a bakın.
3. Botlarla mücadele etmek için kayıt sırasında kullanıcı e-posta doğrulamasını zorunlu kılın.