---
title: "Швидкий старт"
description: "Документація швидкого старту для платформи Ring"
locale: "uk"
---
# Приклади швидкого старту

Запустіть платформу Ring за лічені хвилини з цими практичними прикладами.

## Клон і встановлення (v1.6.0)

```bash
git clone https://github.com/connectplatform/ring.git
cd ring
./install.sh
```

**Ring CLI** (`ring`) не в публічному репозиторії. Див. [Community tooling](/docs/development/community-tooling.md).

## 🚀 5-хвилинне налаштування

### Базова інтеграція платформи Ring

// app/page.tsx

{`import { auth } from '@/auth'
import { redirect } from 'next/navigation'

export default async function HomePage() {
  const session = await auth()
  
  if (!session) {
    redirect('/login')
  }

  return (
    
      Ласкаво просимо до платформи Ring
      Привіт, {session.user?.name}!
    
  )
}`}

### Налаштування середовища

.env.local Firebase Configuration OAuth Providers

{`NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret`}

## 📱 Базові компоненти

### Компонент профілю користувача

// components/UserProfile.tsx

{`import { useSession } from 'next-auth/react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export function UserProfile() {
  const { data: session } = useSession()
  
  if (!session) return null

  return (
    
      
        
        
          {session.user?.name?.charAt(0) || 'U'}
        
      
      
        {session.user?.name}
        {session.user?.email}
      
    
  )
}`}

### Компонент списку сутностей

// components/EntityList.tsx

{`'use client'

import { useEffect, useState } from 'react'

interface Entity {
  id: string
  name: string
  type: string
  description: string
}

export function EntityList() {
  const [entities, setEntities] = useState<Entity[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchEntities() {
      try {
        const response = await fetch('/api/entities')
        const data = await response.json()
        setEntities(data.entities || [])
      } catch (error) {
        console.error('Failed to fetch entities:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchEntities()
  }, [])

  if (loading) {
    return Loading entities...
  }

  return (
    
      {entities.map((entity) => (
        
          {entity.name}
          {entity.type}
          {entity.description}
        
      ))}
    
  )
}`}

## 🔐 Приклади автентифікації

### Автентифікація через Magic Link

// app/(public)/[locale]/login/page.tsx

{`'use client'

import { signIn } from 'next-auth/react'
import { useState } from 'react'

export default function SignIn() {
  const [email, setEmail] = useState('')
  const [loading, setLoading] = useState(false)

  const handleMagicLink = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    
    try {
      await signIn('email', { 
        email,
        callbackUrl: '/dashboard'
      })
    } catch (error) {
      console.error('Sign in failed:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    
      
         setEmail(e.target.value)}
          className="w-full p-3 border rounded-lg"
          required
        />
        
          {loading ? 'Sending...' : 'Send Magic Link'}
        
      
    
  )
}`}

## 🌐 Інтеграція API

### Базовий виклик API

// lib/api.ts

{`export async function createEntity(data: {
  name: string
  type: string
  description: string
}) {
  const response = await fetch('/api/entities', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })

  if (!response.ok) {
    throw new Error('Failed to create entity')
  }

  return response.json()
}

// Usage in component
const handleCreateEntity = async () => {
  try {
    const entity = await createEntity({
      name: 'My Company',
      type: 'technology',
      description: 'Building the future'
    })
    console.log('Entity created:', entity)
  } catch (error) {
    console.error('Error:', error)
  }
}`}

## 💰 Інтеграція Web3

### Підключення гаманця

// components/WalletConnect.tsx

{`'use client'

import { useEffect, useState } from 'react'

export function WalletConnect() {
  const [wallet, setWallet] = useState(null)
  const [loading, setLoading] = useState(false)

  const connectWallet = async () => {
    setLoading(true)
    try {
      const response = await fetch('/api/wallet/create', {
        method: 'POST',
      })
      const data = await response.json()
      setWallet(data.address)
    } catch (error) {
      console.error('Failed to connect wallet:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    
      {wallet ? (
        
          Wallet Connected:
          {wallet}
        
      ) : (
        
          {loading ? 'Connecting...' : 'Connect Wallet'}
        
      )}
    
  )
}`}

## 🎯 Наступні кроки

1. **[Приклади автентифікації](/uk/docs/examples/authentication)** - Дослідіть розширені патерни авторизації
2. **[Інтеграція API](/uk/docs/examples/api-integration)** - Поглиблене вивчення використання API
3. **[Інтеграція Web3](/uk/docs/examples/web3-integration)** - Розширені функції блокчейну
4. **[Реальні додатки](/uk/docs/examples/real-world)** - Повноцінні приклади застосунків

---

*Потрібна допомога? Приєднуйтесь до нашої [Discord спільноти](https://discord.gg/ring-platform) або перевірте [Документацію API](/uk/docs/api).*