GitHub - ly0/aircontroller-web

English

Introduction

AirController Web is the web version of AirController Desktop, allowing you to wirelessly manage your Android phone from your browser.

Related Projects:

🖥️ Desktop Version: air-controller-desktop
📱 Mobile App: air-controller-mobile

TL;DR

git clone https://github.com/ly0/aircontroller-web.git
cd aircontroller-web
npm install
npm run dev:all
# Open http://localhost:3000 and connect your phone

Screenshot

Features

📸 Images - Browse and manage photos on your phone
🎬 Videos - Watch and organize videos
🎵 Music - Play and manage music files
📁 Files - Browse and manage file system
👥 Contacts - View and manage contacts
📦 Apps - Manage installed applications
🔋 Device Info - View battery, storage, and device information
📄 PDF Viewer - View PDF files directly in browser

Tech Stack

Framework: Next.js 15 (with Turbopack)
UI Library: React 19
Language: TypeScript
Styling: TailwindCSS 4
State Management: Zustand
Communication: WebSocket (ws)
Data Fetching: TanStack Query
Forms: React Hook Form + Zod
Icons: Lucide React

Requirements

Node.js 20+
An Android phone with AirController Mobile installed
Both devices connected to the same network

Quick Start

Clone the repository

git clone https://github.com/ly0/aircontroller-web.git
cd aircontroller-web

Install dependencies

Run development server

# Run both web app and WebSocket server
npm run dev:all

# Or run separately
npm run dev      # Web app only
npm run server   # WebSocket server only

Open in browser
Connect your phone
- Install AirController Mobile on your Android phone
- Make sure your phone and computer are on the same network
- Open the mobile app and connect to the web interface

Development Scripts

npm run dev          # Start Next.js development server
npm run server       # Start WebSocket server
npm run server:dev   # Start WebSocket server with hot reload
npm run dev:all      # Start both web and server concurrently
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

Project Structure

aircontroller-web/
├── app/              # Next.js app router pages
│   ├── apps/        # Apps management page
│   ├── contacts/    # Contacts page
│   ├── files/       # File browser page
│   ├── images/      # Image gallery page
│   └── videos/      # Video player page
├── components/      # React components
│   ├── layout/      # Layout components
│   └── ui/          # UI components
├── server/          # WebSocket server
├── store/           # Zustand state management
└── services/        # Service layer

Contributing

This project is under active development. We welcome contributions!

🐛 Found a bug? Open an issue
💡 Have a feature request? Open an issue
🔧 Want to contribute? Pull requests are welcome!

License

MIT

中文

项目介绍

AirController Web 是 AirController Desktop 的 Web 版本，允许你通过浏览器无线管理你的 Android 手机。

相关项目：

🖥️ 桌面版：air-controller-desktop
📱 手机端：air-controller-mobile

快速上手

git clone https://github.com/ly0/aircontroller-web.git
cd aircontroller-web
npm install
npm run dev:all
# 在浏览器打开 http://localhost:3000 并连接手机

项目截图

功能特性

📸 图片管理 - 浏览和管理手机中的照片
🎬 视频管理 - 观看和整理视频文件
🎵 音乐管理 - 播放和管理音乐文件
📁 文件浏览 - 浏览和管理文件系统
👥 联系人管理 - 查看和管理联系人
📦 应用管理 - 管理已安装的应用程序
🔋 设备信息 - 查看电池、存储和设备信息
📄 PDF 查看器 - 直接在浏览器中查看 PDF 文件

技术栈

框架: Next.js 15 (使用 Turbopack)
UI 库: React 19
开发语言: TypeScript
样式方案: TailwindCSS 4
状态管理: Zustand
通信协议: WebSocket (ws)
数据请求: TanStack Query
表单处理: React Hook Form + Zod
图标库: Lucide React

环境要求

Node.js 20+
安装了 AirController Mobile 的 Android 手机
手机和电脑连接到同一网络

快速开始

克隆仓库

git clone https://github.com/ly0/aircontroller-web.git
cd aircontroller-web

安装依赖

启动开发服务器

# 同时运行 Web 应用和 WebSocket 服务器
npm run dev:all

# 或分别运行
npm run dev      # 仅 Web 应用
npm run server   # 仅 WebSocket 服务器

在浏览器中打开
连接手机
- 在 Android 手机上安装 AirController Mobile
- 确保手机和电脑在同一网络下
- 打开手机应用并连接到 Web 界面

开发命令

npm run dev          # 启动 Next.js 开发服务器
npm run server       # 启动 WebSocket 服务器
npm run server:dev   # 启动 WebSocket 服务器（支持热重载）
npm run dev:all      # 同时启动 Web 和服务器
npm run build        # 构建生产版本
npm run start        # 启动生产服务器
npm run lint         # 运行 ESLint

项目结构

aircontroller-web/
├── app/              # Next.js app router 页面
│   ├── apps/        # 应用管理页面
│   ├── contacts/    # 联系人页面
│   ├── files/       # 文件浏览器页面
│   ├── images/      # 图片库页面
│   └── videos/      # 视频播放器页面
├── components/      # React 组件
│   ├── layout/      # 布局组件
│   └── ui/          # UI 组件
├── server/          # WebSocket 服务器
├── store/           # Zustand 状态管理
└── services/        # 服务层

参与贡献

项目正在积极开发中，欢迎贡献！

🐛 发现 Bug？提交 Issue
💡 有功能建议？提交 Issue
🔧 想要贡献代码？欢迎提交 Pull Request！

开源协议

MIT