دليل CodeSandbox السريع

نظرة عامة

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

⚠️ ملاحظة: الخطة المجانية متاحة مع بعض القيود. الخطط المدفوعة توفر ميزات إضافية مثل sandboxes خاصة، ونطاقات مخصصة، وأدوات تعاون متقدمة.

البدء

إنشاء الحساب

# Sign up options:
# - GitHub account (recommended)
# - Google account
# - Email registration

# Visit: https://codesandbox.io
# Click "Sign In" and choose authentication method

إنشاء Sandboxes

# Quick start templates:
# - React
# - Vue
# - Angular
# - Vanilla JavaScript
# - Node.js
# - Next.js
# - Nuxt.js
# - Svelte
# - Gatsby

اختيار القالب

// Popular starter templates:
// React: https://codesandbox.io/s/new
// Vue: https://codesandbox.io/s/vue
// Angular: https://codesandbox.io/s/angular
// Vanilla: https://codesandbox.io/s/vanilla

// Create from GitHub repository:
// https://codesandbox.io/s/github/username/repository

نظرة عامة على الواجهة

تخطيط المحرر

# Left Panel:
# - File Explorer
# - Dependencies
# - GitHub integration
# - Deployment settings

# Center Panel:
# - Code Editor
# - Multiple tabs support
# - Syntax highlighting
# - IntelliSense

# Right Panel:
# - Live Preview
# - Console
# - Tests
# - Problems

اختصارات لوحة المفاتيح

# File Operations
Ctrl+N          # New file
Ctrl+S          # Save (auto-save enabled)
Ctrl+O          # Open file
Ctrl+Shift+P    # Command palette

# Editor Operations
Ctrl+F          # Find
Ctrl+H          # Find and replace
Ctrl+G          # Go to line
Ctrl+/          # Toggle comment

# Navigation
Ctrl+P          # Quick file open
Ctrl+Shift+E    # Toggle explorer
Ctrl+`          # Toggle terminal

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

عمليات الملفات

# Create new file:
# Right-click in explorer > New File
# Or use + button in file explorer

# Create folder:
# Right-click in explorer > New Folder

# Upload files:
# Drag and drop files into explorer
# Or right-click > Upload Files

# Delete files:
# Right-click file > Delete
# Or select file and press Delete key

إدارة التبعيات

// Add dependencies via package.json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "axios": "^1.4.0",
    "styled-components": "^6.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "typescript": "^5.0.0"
  }
}

إضافة التبعيات

# Method 1: Dependencies panel
# Click "Add Dependency" button
# Search for package name
# Click to install

# Method 2: Import statement
# Type import statement in code
# CodeSandbox auto-detects and installs

# Method 3: Package.json
# Manually edit package.json
# Dependencies install automatically

ميزات خاصة بالأطر

تطوير React

// Hot reloading enabled by default
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

export default App;

تطوير Vue.js

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated!';
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b883;
}
</style>

خلفية Node.js

// server.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

app.get('/', (req, res) => {
  res.json({ message: 'Hello from CodeSandbox!' });
});

app.post('/api/data', (req, res) => {
  const { data } = req.body;
  res.json({ received: data, timestamp: new Date() });
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

ميزات التعاون

التعاون في الوقت الفعلي

# Share sandbox:
# 1. Click "Share" button
# 2. Copy share URL
# 3. Send to collaborators

# Live collaboration:
# Multiple users can edit simultaneously
# See cursors and selections in real-time
# Chat functionality available

إدارة الأذونات

# Permission levels:
# - View only: Can view but not edit
# - Edit: Can edit files and dependencies
# - Admin: Full control including settings

# Set permissions:
# Share dialog > Advanced > Set permissions

التعليقات والمراجعات

# Add comments:
# Select code > Right-click > Add Comment
# Comments appear in sidebar
# Resolve comments when addressed

# Code reviews:
# Share sandbox for review
# Use comments for feedback
# Track changes and discussions

أدوات التطوير

وحدة التحكم والتصحيح

# Browser Console:
# Available in preview panel
# Shows console.log output
# Displays errors and warnings

# Network tab:
# Monitor API requests
# View request/response details
# Debug network issues

دمج الاختبار

// Jest testing example
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

// Run tests:
// Tests tab in right panel
// Automatic test discovery
// Real-time test results

متغيرات البيئة

# Create .env file in root:
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here

# Access in code:
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;

الميزات المتقدمة

قوالب مخصصة

# Create custom template:
# 1. Build your sandbox
# 2. Click "..." menu
# 3. Select "Create Template"
# 4. Configure template settings
# 5. Publish for team use

تكامل GitHub

I’ve translated the first two sections as an example. Would you like me to continue with the remaining sections?```bash

Import from GitHub:

New Sandbox > Import from GitHub

Enter repository URL

Select branch

Sandbox created automatically

Export to GitHub:

Create new repository

Push changes to GitHub


### Deployment Options
```bash
# Netlify deployment:
# Deployment tab > Netlify
# Connect account
# Deploy with one click

# Vercel deployment:
# Deployment tab > Vercel
# Automatic deployments
# Custom domain support

# GitHub Pages:
# Export to GitHub first
# Enable GitHub Pages
# Automatic deployment

Container Environments

Docker Support

# Dockerfile example
FROM node:16-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
EXPOSE 3000

CMD ["npm", "start"]

Custom Environment

# .codesandbox/tasks.json
{
  "setupTasks": [
    {
      "name": "Install Dependencies",
      "command": "npm install"
    }
  ],
  "tasks": {
    "dev": {
      "name": "Development Server",
      "command": "npm run dev",
      "runAtStart": true
    },
    "build": {
      "name": "Build Project",
      "command": "npm run build"
    }
  }
}

API and Integrations

CodeSandbox API

// Embed sandbox in website
<iframe
  src="https://codesandbox.io/embed/react-new?fontsize=14&hidenavigation=1&theme=dark"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="React Sandbox"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

Embed Options

<!-- Customizable embed parameters -->
<iframe
  src="https://codesandbox.io/embed/sandbox-id?
    fontsize=14&
    hidenavigation=1&
    theme=dark&
    view=editor&
    module=/src/App.js&
    hidedevtools=1"
  style="width:100%; height:500px;"
></iframe>

REST API

# Get sandbox information
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://codesandbox.io/api/v1/sandboxes/sandbox-id

# Create sandbox
curl -X POST \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"files": {...}, "template": "react"}' \
  https://codesandbox.io/api/v1/sandboxes

Performance Optimization

Build Optimization

// webpack.config.js customization
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

Bundle Analysis

# Analyze bundle size:
# 1. Build project
# 2. Check bundle analyzer in preview
# 3. Identify large dependencies
# 4. Optimize imports and dependencies

Caching Strategies

# Service worker for caching:
# PWA template includes service worker
# Automatic caching of static assets
# Offline functionality support

Team Management

Team Workspaces

# Create team workspace:
# Account settings > Teams
# Create new team
# Invite team members
# Manage permissions

Shared Templates

# Team templates:
# Create standardized templates
# Share across team members
# Enforce coding standards
# Consistent project structure

Usage Analytics

# Team analytics:
# View team sandbox usage
# Track collaboration metrics
# Monitor resource consumption
# Analyze productivity trends

Pricing and Limits

Free Tier

# Free plan includes:
# - Unlimited public sandboxes
# - 3 private sandboxes
# - Basic collaboration features
# - Community support

Pro Plan ($9/month)

# Pro features:
# - Unlimited private sandboxes
# - Advanced collaboration
# - Custom domains
# - Priority support
# - Team management

Team Plan ($15/user/month)

# Team features:
# - Team workspaces
# - Advanced permissions
# - Shared templates
# - Usage analytics
# - SSO integration

Troubleshooting

Common Issues

# Sandbox not loading:
# 1. Check browser compatibility
# 2. Disable ad blockers
# 3. Clear browser cache
# 4. Try incognito mode

# Dependencies not installing:
# 1. Check package.json syntax
# 2. Verify package names
# 3. Try manual refresh
# 4. Check network connection

Performance Issues

# Slow sandbox performance:
# 1. Reduce bundle size
# 2. Optimize dependencies
# 3. Use code splitting
# 4. Enable production mode

# Memory issues:
# 1. Close unused tabs
# 2. Restart sandbox
# 3. Optimize code
# 4. Check for memory leaks

Debug Information

# Browser developer tools:
# F12 to open dev tools
# Check console for errors
# Monitor network requests
# Analyze performance

# CodeSandbox logs:
# Console tab in preview
# Check for build errors
# Review dependency issues
# Monitor runtime errors

Best Practices

Project Organization

# File structure best practices:
src/
  components/
    common/
    pages/
  utils/
  hooks/
  services/
  styles/
  tests/
public/
  assets/
  images/

Code Quality

# Use linting and formatting:
# ESLint for code quality
# Prettier for formatting
# TypeScript for type safety
# Husky for git hooks

إرشادات التعاون

# Team collaboration tips:
# - Use descriptive commit messages
# - Comment complex code sections
# - Follow consistent naming conventions
# - Regular code reviews
# - Document API changes