# 🚀 Quick Reference Card

## Start Here 👈

```bash
cd "/Applications/XAMPP/xamppfiles/htdocs/Android Photo App"
npm run serve
# → Open http://localhost:8080 in browser
```

---

## Essential Commands

```bash
# Development
npm run serve           # Start dev server (hot reload)

# Building
npm run build           # Build Vue app
npm run cordova-build   # Build Android APK

# Cleaning
npm install             # Install dependencies
rm -rf node_modules dist   # Clean cache
```

---

## File Locations

| File | Path | Purpose |
|------|------|---------|
| **App Code** | `src/App.js` | Main UI & logic |
| **API Utils** | `src/utils.js` | Photo fetch, printing |
| **Config** | `config.xml` | Cordova settings |
| **Styles** | `src/App.js` (styles section) | CSS styling |
| **Logo** | `public/assets/logo.png` | App logo |
| **Build Output** | `dist/` | Production build |
| **APK Output** | `platforms/android/build/outputs/apk/` | Android packages |

---

## Key Features

✅ Photo gallery (2 columns, scrollable)
✅ Photo selection with visual feedback
✅ OS print (native dialog)
✅ IP print (192.168.x.x format)
✅ Error handling (Chinese messages)
✅ Responsive 16:9 layout

---

## API Token

Token: `aGY94sMpQsoWY63AcdUgrqLLVJ83Bm0EctAQDH2AEgxjH715r21f3Q8OG2fl0kOl`
Endpoint: `https://5ml.mmdbfiles.com/list_json.php` (POST)

---

## Common Tasks

### Edit UI
1. Open `src/App.js`
2. Find `template:` section
3. Edit HTML
4. Browser auto-reloads

### Change Colors
Edit `src/App.js`, find:
```javascript
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

### Add Logo
1. Save image as `public/assets/logo.png`
2. In `src/App.js`, change:
   ```javascript
   v-if="false"  →  v-if="true"
   ```

### Build APK
```bash
npm run cordova-build
# Output: platforms/android/build/outputs/apk/debug/app-debug.apk
```

### Install on Device
```bash
adb install -r platforms/android/build/outputs/apk/debug/app-debug.apk
```

---

## Keyboard Shortcuts

| Action | Mac | Windows |
|--------|-----|---------|
| Refresh Browser | Cmd+R | Ctrl+R |
| Hard Refresh | Cmd+Shift+R | Ctrl+Shift+R |
| Dev Tools | Cmd+Option+I | F12 |
| Save File | Cmd+S | Ctrl+S |
| Stop Dev Server | Ctrl+C | Ctrl+C |

---

## Troubleshooting Quick Fixes

```bash
# Port 8080 in use?
lsof -ti:8080 | xargs kill -9

# Dev server not working?
rm -rf node_modules && npm install

# Build failing?
cordova clean && npm run build-cordova

# APK won't install?
adb uninstall com.fivemileslab.photoapp
adb install -r app-debug.apk
```

---

## Documentation

- `README.md` - Full documentation
- `DEVELOPER_GUIDE.md` - Detailed guide
- `QUICKSTART.md` - Quick start
- `TROUBLESHOOTING.md` - Problem solving
- `PROJECT_STATUS.md` - Project info

---

## Important URLs

- Dev Server: http://localhost:8080
- Vue Docs: https://vuejs.org/
- Cordova Docs: https://cordova.apache.org/
- Android: https://developer.android.com/

---

## App Details

| Property | Value |
|----------|-------|
| App Name | 打印測試 |
| Package ID | com.fivemileslab.photoapp |
| Version | 1.0.0 |
| Min Android | 5.0 (API 21) |
| Orientation | Portrait Only |
| Layout | 16:9 Aspect Ratio |

---

**💡 Pro Tip:** Use `npm run serve` during development - changes auto-reload in browser!

**🎉 Happy Coding!**