Skip to content
Mile Shi edited this page May 26, 2025 · 2 revisions

Development Setup Guide

This guide will help you set up a complete development environment for contributing to Intelligent IDE.

Prerequisites

Required Software

Essential Tools

  • Git: Version control system
  • VS Code: Primary development environment
  • Node.js: 16.0.0+ (for frontend development)
  • Python: 3.11+ (for backend development)
  • Docker: Latest version (for services)

Optional but Recommended

  • GitHub CLI: For easier repository management
  • Postman: For API testing
  • PostgreSQL Client: For database management

Repository Setup

Cloning the Repository

git clone https://github.com/[organization]/team-project-25spring-36.git
cd team-project-25spring-36

Project Structure

team-project-25spring-36/
├── frontend/
│   └── intelligent-ide/          # VS Code extension
├── backend/
│   ├── intellide/                # FastAPI application
│   ├── deploy/                   # Deployment scripts
│   └── docs/                     # Backend documentation
├── images/                       # Project diagrams
└── docs/                         # Additional documentation

Frontend Development Setup

Environment Setup

  1. Navigate to Frontend Directory

    cd frontend/intelligent-ide
  2. Install Dependencies

    npm install
  3. Verify Installation

    npm run compile

Development Workflow

Running the Extension

  1. Open VS Code in the frontend/intelligent-ide directory
  2. Press F5 to launch Extension Development Host
  3. Test extension commands in the new window

Key Files and Directories

frontend/intelligent-ide/
├── package.json              # Extension manifest
├── tsconfig.json            # TypeScript configuration
├── esbuild.js              # Build configuration
└── src/
    ├── extension.ts        # Main extension entry point
    ├── commands/           # Command implementations
    ├── services/          # Backend API integration
    ├── utils/             # Utility functions
    └── resources/         # Configuration files

Available Commands

  • npm run compile: Compile TypeScript
  • npm run watch: Compile in watch mode
  • npm run test: Run tests
  • npm run package: Package extension

Backend Development Setup

Python Environment

  1. Navigate to Backend Directory

    cd backend/deploy
  2. Create Virtual Environment (Recommended)

    python -m venv venv
    source venv/bin/activate  # On macOS/Linux
    # venv\Scripts\activate  # On Windows
  3. Install Dependencies

    pip install -r requirements.txt

Docker Configuration

Enable Docker Remote API

  1. Open Docker Desktop
  2. Go to Settings → General
  3. Enable "Expose daemon on tcp://localhost:2375 without TLS"
  4. Apply & Restart

Start Backend Services

macOS/Linux:

cd backend/deploy
sh backend.sh

Windows:

cd backend/deploy
backend.bat

Backend Architecture

backend/intellide/
├── main.py                 # FastAPI application entry
├── config.py              # Configuration management
├── routers/               # API route handlers
│   ├── user.py           # User management
│   ├── course.py         # Course management
│   ├── course_directory.py  # File management
│   └── course_chat.py    # Chat functionality
├── database/             # Database models and connections
├── cache/               # Redis cache implementation
├── storage/             # File storage management
├── utils/               # Utility functions
└── tests/               # Test suite

Database Setup

The backend uses PostgreSQL running in Docker. The database schema is automatically created on first startup.

Key Models

  • User: Authentication and user management
  • Course: Course information and metadata
  • CourseStudent: Student enrollment relationships
  • CourseDirectory: File and folder structure
  • CourseHomeworkAssignment: Assignment management

Development Tools

VS Code Extensions

Recommended extensions for development:

{
  "recommendations": [
    "ms-python.python",
    "ms-vscode.vscode-typescript-next",
    "ms-vscode.extension-test-runner",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "ms-python.flake8"
  ]
}

Code Quality Tools

Frontend (TypeScript)

  • ESLint: Code linting
  • Prettier: Code formatting
  • TypeScript: Type checking

Backend (Python)

  • Flake8: Code linting
  • Black: Code formatting
  • MyPy: Type checking
  • Pytest: Testing framework

Testing Setup

Frontend Testing

cd frontend/intelligent-ide
npm test

Test Structure

  • Unit tests for individual functions
  • Integration tests for VS Code API interaction
  • Extension activation tests

Backend Testing

cd backend
python -m pytest intellide/tests/

Test Coverage

  • API endpoint testing
  • Database model testing
  • Authentication flow testing
  • File operations testing

API Development

FastAPI Documentation

Once the backend is running, access:

API Testing with Postman

Import the API collection:

  1. Export OpenAPI spec from http://localhost:8080/openapi.json
  2. Import into Postman
  3. Set up environment variables for testing

Debugging

Frontend Debugging

  1. VS Code Extension Host: Use F5 to launch with debugger attached
  2. Browser DevTools: For webview debugging
  3. Output Panel: Check extension logs

Backend Debugging

  1. FastAPI Debug Mode: Set DEBUG=True in configuration
  2. Python Debugger: Use VS Code Python debugger
  3. API Logs: Monitor FastAPI request/response logs

Environment Configuration

Environment Variables

Create .env files for local development:

Frontend (frontend/intelligent-ide/.env)

API_BASE_URL=http://localhost:8080
DEBUG_MODE=true

Backend (backend/.env)

DATABASE_URL=postgresql://user:password@localhost:5432/intellide
REDIS_URL=redis://localhost:6379
SECRET_KEY=your-secret-key
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587

Common Development Tasks

Adding New API Endpoints

  1. Create Route Handler in backend/intellide/routers/
  2. Add Database Models if needed
  3. Update API Documentation
  4. Write Tests
  5. Update Frontend Service to consume API

Adding New VS Code Commands

  1. Register Command in package.json
  2. Implement Handler in src/commands/
  3. Register in Extension (src/extension.ts)
  4. Add Tests
  5. Update Documentation

Database Migrations

# Create migration
alembic revision --autogenerate -m "Description"

# Apply migration
alembic upgrade head

Troubleshooting Development Issues

Common Problems

Extension Not Loading

  • Check TypeScript compilation errors
  • Verify package.json configuration
  • Ensure proper directory structure

Backend Connection Issues

  • Verify Docker is running
  • Check port availability (8080)
  • Review backend startup logs

Database Connection Problems

  • Ensure PostgreSQL container is running
  • Check connection string configuration
  • Verify network connectivity

Getting Help

  • Check Troubleshooting Guide
  • Review GitHub Issues
  • Contact development team
  • Join development Discord/Slack (if available)

Contributing Guidelines

Before contributing:

  1. Read Contributing Guide
  2. Set up development environment
  3. Create feature branch
  4. Write tests for new features
  5. Submit pull request

Next Steps


### ProjectOverview.md
```markdown
<!-- filepath: /Users/shimile/projects/team-project-25spring-36.wiki/ProjectOverview.md -->
# Project Overview

The team-project-25spring-36 is aimed at creating an intelligent IDE for educational environments. This project is designed to provide interactive notebook capabilities within VS Code and facilitate collaborative learning experiences.

## Objectives
- Objective 1
- Objective 2
- Objective 3

## Technologies Used
- Technology 1
- Technology 2
- Technology 3

GettingStarted.md

<!-- filepath: /Users/shimile/projects/team-project-25spring-36.wiki/GettingStarted.md -->
# Getting Started

To get started with the team-project-25spring-36, follow these steps:

1. **Clone the repository**: 
   ```bash
   git clone https://github.com/SUSTech-CS304/team-project-25spring-36.git
  1. Install dependencies:

    cd team-project-25spring-36
    npm install
  2. Run the project:

    npm start

Prerequisites

  • VS Code 1.60.0 or higher for extension development
  • Node.js 16.0.0 or higher for frontend build tools
  • Python 3.11+ for backend API services

### TeamMembers.md
```markdown
<!-- filepath: /Users/shimile/projects/team-project-25spring-36.wiki/TeamMembers.md -->
# Team Members

| Name          | Role                | Contact Information   |
|---------------|---------------------|-----------------------|
| Member 1      | Project Manager      | contact@intelligent-ide.project     |
| Member 2      | Developer            | contact@intelligent-ide.project     |
| Member 3      | Designer             | contact@intelligent-ide.project     |

MeetingNotes.md

<!-- filepath: /Users/shimile/projects/team-project-25spring-36.wiki/MeetingNotes.md -->
# Meeting Notes

## Development Meeting Template
- **Attendees**: Development team members
- **Agenda**:
  - Technical architecture discussions
  - Development progress updates
- **Notes**:
  - Project progress discussion and technical implementation updates

Resources.md

<!-- filepath: /Users/shimile/projects/team-project-25spring-36.wiki/Resources.md -->
# Resources

- [Project Documentation](../../)
- [API Reference](api-reference)
- [Architecture Guide](architecture)

FAQs.md

<!-- filepath: /Users/shimile/projects/team-project-25spring-36.wiki/FAQs.md -->
# Frequently Asked Questions

## Q1: How do I contribute to the project?
A1: To contribute, please fork the repository, make your changes, and submit a pull request.

## Q2: What is the project's timeline?
A2: The project is expected to be completed by the end of Spring 2025 semester.

Conclusion

This structure provides a comprehensive overview of the project and serves as a guide for team members. You can expand each section with more detailed information as needed. Make sure to keep the wiki updated as the project progresses!

Clone this wiki locally