Add Tauri framework development skill
Created comprehensive Tauri skill for building desktop and mobile applications with Rust backend and web frontend. Skill Content: - Complete Tauri 2.0 framework coverage - Cross-platform development (Windows, macOS, Linux, iOS, Android) - IPC communication patterns (commands, events, bridges) - Security best practices (capabilities, permissions, CSP) - Native API integration (system tray, notifications, file system) - Build and distribution guidance (code signing, auto-updater) Files Created: - skill.md - Main skill with 6 slash commands - templates/ - tauri.conf.json - Config template with all options - capabilities/default.json - Basic permissions - capabilities/fs-full.json - File system access - capabilities/network.json - Network permissions - src-tauri/commands/mod.rs - Rust command templates - src-tauri/events.rs - Event emission examples - examples/ - command-invoking.txt - Frontend command patterns - event-listening.txt - Event handling patterns - plugin-usage.txt - 10+ plugin examples (fs, http, dialog, etc.) - mobile-setup.txt - iOS/Android development guide Slash Commands: - /tauri-init - Initialize new Tauri project - /tauri-add-plugin - Add Tauri plugin - /tauri-build - Build for specific platform - /tauri-capability - Create permission capability - /tauri-ipc - Design IPC interface - /tauri-native - Add native feature Integration: - Uses rust-patterns for backend code quality - Integrates with react-dev, vue, svelte for frontend - Leverages architecture skill for system design - Uses test-driven-development for testing Credits: - Proper attribution to Tauri Team and The Commons Conservancy - Links to official documentation and community resources - Credits core dependencies: WRY, TAO, Tauri CLI Planned via /brainstorm with comprehensive Ralph-validated design. Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
uroma
283
skills/tauri/examples/mobile-setup.txt
Normal file
283
skills/tauri/examples/mobile-setup.txt
Normal file
@@ -0,0 +1,283 @@
|
||||
# Mobile Setup Guide (Tauri 2.0)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
### iOS Development
|
||||
- macOS computer
|
||||
- Xcode 15+ installed
|
||||
- iOS Simulator or physical device
|
||||
- Apple Developer Account (for device testing)
|
||||
|
||||
### Android Development
|
||||
- Android Studio installed
|
||||
- Android SDK Platform Tools
|
||||
- Android device or emulator (API level 24+)
|
||||
|
||||
## Project Configuration
|
||||
|
||||
### Add Mobile Targets to tauri.conf.json
|
||||
|
||||
```json
|
||||
{
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"targets": ["all"],
|
||||
"iOS": {
|
||||
"developmentTeam": "YOUR_TEAM_ID",
|
||||
"frameworks": []
|
||||
},
|
||||
"android": {
|
||||
"minSdkVersion": 24
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Install Rust Targets
|
||||
|
||||
```bash
|
||||
# iOS targets
|
||||
rustup target add aarch64-apple-ios
|
||||
rustup target add aarch64-apple-ios-sim
|
||||
|
||||
# Android targets
|
||||
rustup target add aarch64-linux-android
|
||||
rustup target add armv7-linux-androideabi
|
||||
rustup target add i686-linux-android
|
||||
rustup target add x86_64-linux-android
|
||||
```
|
||||
|
||||
## iOS Setup
|
||||
|
||||
### 1. Configure Xcode
|
||||
|
||||
```bash
|
||||
# Open Xcode project
|
||||
open ios/Runner.xcworkspace
|
||||
|
||||
# Or generate Xcode project if needed
|
||||
npm run tauri ios init
|
||||
```
|
||||
|
||||
### 2. Set Development Team
|
||||
|
||||
In Xcode:
|
||||
1. Select the project in the navigator
|
||||
2. Choose "Signing & Capabilities"
|
||||
3. Set "Team" to your development team
|
||||
4. Enable "Automatically manage signing"
|
||||
|
||||
### 3. Run on iOS Simulator
|
||||
|
||||
```bash
|
||||
# Start development
|
||||
npm run tauri ios dev
|
||||
|
||||
# Or build for iOS
|
||||
npm run tauri ios build
|
||||
```
|
||||
|
||||
### 4. Run on Physical Device
|
||||
|
||||
Connect device via USB, then:
|
||||
```bash
|
||||
npm run tauri ios dev
|
||||
```
|
||||
|
||||
Select your device when prompted.
|
||||
|
||||
## Android Setup
|
||||
|
||||
### 1. Install Android SDK
|
||||
|
||||
```bash
|
||||
# Via Android Studio SDK Manager
|
||||
# Or via command line
|
||||
sdkmanager "platform-tools" "platforms;android-33"
|
||||
```
|
||||
|
||||
### 2. Enable USB Debugging
|
||||
|
||||
On Android device:
|
||||
1. Settings → About Phone
|
||||
2. Tap "Build Number" 7 times to enable Developer Options
|
||||
3. Settings → Developer Options
|
||||
4. Enable "USB Debugging"
|
||||
|
||||
### 3. Connect Device
|
||||
|
||||
```bash
|
||||
# Verify device is connected
|
||||
adb devices
|
||||
|
||||
# Run on Android device
|
||||
npm run tauri android dev
|
||||
```
|
||||
|
||||
### 4. Android Studio Configuration
|
||||
|
||||
```bash
|
||||
# Open Android project
|
||||
open android/`
|
||||
|
||||
# Or generate project
|
||||
npm run tauri android init
|
||||
```
|
||||
|
||||
## Mobile-Specific Considerations
|
||||
|
||||
### Permissions
|
||||
|
||||
Add to `android/app/src/main/AndroidManifest.xml`:
|
||||
```xml
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
<uses-permission android:name="android.permission.CAMERA" />
|
||||
```
|
||||
|
||||
Add to `ios/Runner/Info.plist`:
|
||||
```xml
|
||||
<key>NSCameraUsageDescription</key>
|
||||
<string>We need camera access</string>
|
||||
```
|
||||
|
||||
### Platform-Specific Code
|
||||
|
||||
```rust
|
||||
#[cfg(target_os = "android")]
|
||||
fn mobile_only_android() {
|
||||
println!("Android specific code");
|
||||
}
|
||||
|
||||
#[cfg(target_os = "ios")]
|
||||
fn mobile_only_ios() {
|
||||
println!("iOS specific code");
|
||||
}
|
||||
|
||||
#[cfg(not(any(target_os = "android", target_os = "ios")))]
|
||||
fn desktop_only() {
|
||||
println!("Desktop specific code");
|
||||
}
|
||||
```
|
||||
|
||||
### Mobile Plugins
|
||||
|
||||
Tauri 2.0 plugins work on mobile:
|
||||
|
||||
```typescript
|
||||
// Works on all platforms
|
||||
import { readTextFile } from '@tauri-apps/plugin-fs';
|
||||
import { fetch } from '@tauri-apps/plugin-http';
|
||||
import { open } from '@tauri-apps/plugin-shell';
|
||||
|
||||
// Mobile-specific
|
||||
import { vibrate } from '@tauri-apps/plugin-haptics';
|
||||
```
|
||||
|
||||
### Orientation Control
|
||||
|
||||
```rust
|
||||
use tauri::{Manager, AppHandle};
|
||||
|
||||
#[tauri::command]
|
||||
fn set_orientation(app_handle: AppHandle, orientation: &str) {
|
||||
#[cfg(target_os = "android")]
|
||||
{
|
||||
use jni::{JNIEnv, objects::JClass, objects::JObject};
|
||||
|
||||
app_handle.android().run_on_android_thread(
|
||||
|env, activity| {
|
||||
// Set orientation via Android API
|
||||
},
|
||||
|error| {
|
||||
eprintln!("Error setting orientation: {}", error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
#[cfg(target_os = "ios")]
|
||||
{
|
||||
// iOS orientation handling
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Building for Production
|
||||
|
||||
### iOS Production Build
|
||||
|
||||
```bash
|
||||
# Archive and export
|
||||
npm run tauri ios build
|
||||
|
||||
# Sign with distribution certificate
|
||||
# Configure in Xcode → Signing & Capabilities
|
||||
```
|
||||
|
||||
### Android Production Build
|
||||
|
||||
```bash
|
||||
# Generate APK
|
||||
npm run tauri android build
|
||||
|
||||
# Generate AAB for Play Store
|
||||
# Configure in android/app/build.gradle
|
||||
```
|
||||
|
||||
## Testing on Mobile
|
||||
|
||||
### iOS Simulator
|
||||
|
||||
```bash
|
||||
# List available simulators
|
||||
xcrun simctl list devices
|
||||
|
||||
# Boot specific simulator
|
||||
xcrun simctl boot "iPhone 15"
|
||||
|
||||
# Run on simulator
|
||||
npm run tauri ios dev
|
||||
```
|
||||
|
||||
### Android Emulator
|
||||
|
||||
```bash
|
||||
# List emulators
|
||||
emulator -list-avds
|
||||
|
||||
# Start emulator
|
||||
emulator -avd <name>
|
||||
|
||||
# Run on emulator
|
||||
npm run tauri android dev
|
||||
```
|
||||
|
||||
## Common Issues
|
||||
|
||||
**"Team not set" error:**
|
||||
- Set development team in Xcode
|
||||
- Enable automatic signing
|
||||
|
||||
**"Device not found" (Android):**
|
||||
- Enable USB debugging
|
||||
- Install OEM drivers
|
||||
- Try different USB cable/port
|
||||
|
||||
**"Provisioning profile error" (iOS):**
|
||||
- Add device to Apple Developer account
|
||||
- Update provisioning profiles
|
||||
|
||||
**Build fails with linking errors:**
|
||||
- Ensure all Rust targets installed
|
||||
- Clean build: `cargo clean`
|
||||
- Rebuild project
|
||||
|
||||
## Mobile Best Practices
|
||||
|
||||
1. **Test on real devices** - Simulators don't catch all issues
|
||||
2. **Optimize bundle size** - Mobile has more constraints
|
||||
3. **Handle permissions** - Request at appropriate times
|
||||
4. **Test offline** - Mobile devices have intermittent connectivity
|
||||
5. **Consider battery** - Avoid constant background operations
|
||||
6. **Use platform idioms** - Follow iOS/Android design guidelines
|
||||
7. **Test screen sizes** - Various device form factors
|
||||
8. **Handle orientation** - Portrait and landscape
|
||||
Reference in New Issue
Block a user