mobile-snap 1.0.0

package/README.md

@@ -0,0 +1,105 @@
+# MobileSnap 📸
+
+MobileSnap adalah alat CLI (Command Line Interface) berbasis Node.js yang dirancang untuk mengotomatisasi pengambilan tangkapan layar (screenshot) App Store & Google Play Store dengan presisi piksel tinggi langsung dari server pengembangan lokal (seperti Astro, Next.js, React, atau Vue).
+
+---
+
+## 🏗️ Arsitektur Sistem
+
+MobileSnap dirancang dengan fokus pada efisiensi, keandalan, dan kemudahan penggunaan. Berikut adalah diagram alur kerja utama aplikasi:
+
+```mermaid
+graph TD
+    A[Pengguna menjalankan perintah CLI npx] --> B[Commander CLI Parser]
+    B --> C{Validasi Argumen & URL}
+    C -->|URL Valid| D[Inisialisasi Playwright Async]
+    C -->|URL Tidak Valid| E[Console Error & Exit]
+    D --> F[Buka Headless Chromium Browser]
+    F --> G[Looping berdasarkan Pilihan Platform: iOS / Android / Both]
+    G --> H[Konfigurasi Context & Viewport Emulator Perangkat]
+    H --> I[Looping berdasarkan Jalur/Rute URL]
+    I --> J[Navigasi Halaman & Tunggu State Network Idle]
+    J --> K[Ambil Tangkapan Layar & Simpan File]
+    K --> L[Tutup Context Browser]
+    L --> M[Selesai & Tampilkan Ringkasan]
+```
+
+### Komponen Utama
+
+1. **Parser CLI ([bin/cli.js](file:///d:/Deweb/MobileSnap/bin/cli.js))**: Menggunakan library `Commander` untuk memproses input parameter dari pengguna secara intuitif.
+2. **Mesin Otomatisasi Browser**: Berbasis `Playwright` untuk menjalankan proses Chromium tanpa kepala (*headless*).
+3. **Pengaturan Emulator Presisi**:
+   - **Skala Perangkat (DPI)**: Ditetapkan ke `deviceScaleFactor: 3` untuk menghasilkan kualitas tangkapan layar yang sangat tajam (Retina/High DPI) sesuai standar rilis.
+   - **Agen Pengguna (User Agent)**: Dikonfigurasi dinamis sesuai platform target (iOS menggunakan user agent iPhone, Android menggunakan user agent Google Pixel 7).
+4. **Sinkronisasi Hidrasi Web**: Menggunakan `page.waitForLoadState("networkidle")` untuk mendeteksi ketika semua aset selesai dimuat sebelum tangkapan layar diambil. Ini sangat penting untuk framework modern seperti Astro.
+
+---
+
+## 📱 Spesifikasi Dimensi Target
+
+MobileSnap secara otomatis mengambil gambar untuk perangkat berikut berdasarkan platform yang dipilih:
+
+### iOS (Apple App Store)
+| Nama Layar | Resolusi (Piksel) | Rasio Aspek | Output File Contoh |
+| :--- | :--- | :--- | :--- |
+| **6.7" Display** | 1290 x 2796 | 19.5:9 | `6.7_inch_home.png` |
+| **6.5" Display** | 1242 x 2688 | 19.5:9 | `6.5_inch_home.png` |
+
+### Android (Google Play Store)
+| Nama Layar | Resolusi (Piksel) | Rasio Aspek | Output File Contoh |
+| :--- | :--- | :--- | :--- |
+| **Android Phone** | 1080 x 2400 | 20:9 | `android_phone_home.png` |
+| **Android Tablet (10")** | 1600 x 2560 | 16:10 | `android_tablet_home.png` |
+
+---
+
+## 🚀 Cara Penggunaan Instan (NPX)
+
+Anda tidak perlu menginstal apa pun secara permanen. Cukup jalankan perintah menggunakan `npx`:
+
+```powershell
+# 1. Jalankan langsung dari server lokal Anda
+npx mobile-snap --url http://localhost:4321
+```
+
+> [!NOTE]
+> Jika ini adalah pertama kalinya Anda menjalankan Playwright, Anda mungkin perlu mengunduh browser binaries dengan menjalankan perintah:
+> ```powershell
+> npx playwright install chromium
+> ```
+
+Jika Anda ingin menginstalnya secara global di sistem Anda:
+```powershell
+npm install -g mobile-snap
+```
+
+---
+
+## 💻 Panduan Penggunaan CLI
+
+Aplikasi ini menerima 4 opsi utama:
+
+| Parameter | Singkatan | Deskripsi | Standar (Default) | Pilihan |
+| :--- | :--- | :--- | :--- | :--- |
+| `--url` | `-u` | **(Wajib)** URL server lokal. | - | - |
+| `--paths` | `-p` | Jalur/rute halaman yang dipisahkan tanda koma. | `/` | - |
+| `--output`| `-o` | Nama direktori tempat menyimpan gambar. | `mobilesnap_output` | - |
+| `--platform`| `-l`| Platform target tangkapan layar. | `ios` | `ios`, `android`, `both` |
+
+### Contoh Perintah
+
+#### 1. Pengambilan Halaman iOS Saja (Default)
+```powershell
+npx mobile-snap --url http://localhost:4321
+```
+
+#### 2. Pengambilan Halaman Android Saja
+```powershell
+npx mobile-snap --url http://localhost:4321 --platform android
+```
+
+#### 3. Pengambilan 2 Platform Sekaligus (iOS & Android)
+Mengambil gambar halaman utama `/` dan halaman `/scan` untuk kedua platform sekaligus ke folder `hasil_store`:
+```powershell
+npx mobile-snap --url http://localhost:4321 --paths "/, /scan" --platform both --output hasil_store
+```

package/bin/cli.js

@@ -0,0 +1,143 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import { chromium } from 'playwright';
+import pc from 'picocolors';
+import ora from 'ora';
+import fs from 'fs';
+import path from 'path';
+
+// Device configurations grouped by platform
+const DEVICE_CONFIGS = {
+  ios: {
+    devices: {
+      "6.7_inch": { width: 1290, height: 2796 },
+      "6.5_inch": { width: 1242, height: 2688 }
+    },
+    userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1"
+  },
+  android: {
+    devices: {
+      "android_phone": { width: 1080, height: 2400 },
+      "android_tablet": { width: 1600, height: 2560 }
+    },
+    userAgent: "Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
+  }
+};
+
+function safeFilename(route) {
+  const cleanPath = route.replace(/^\/+|\/+$/g, '');
+  if (!cleanPath) return 'home';
+  return cleanPath.replace(/[^a-zA-Z0-9_\-]/g, '_').replace(/_+/g, '_').replace(/^_+|_+$/g, '');
+}
+
+async function captureScreenshots(url, paths, outputDir, platform) {
+  if (!url.startsWith('http://') && !url.startsWith('https://')) {
+    url = 'http://' + url;
+  }
+  url = url.replace(/\/+$/, '');
+
+  let targetPlatforms = [];
+  if (platform === 'both') {
+    targetPlatforms = ['ios', 'android'];
+  } else {
+    targetPlatforms = [platform];
+  }
+
+  console.log(pc.bold(pc.blue('Starting MobileSnap screenshot automation...')));
+  console.log(`Target Server: ${pc.cyan(url)}`);
+  console.log(`Platform(s): ${pc.cyan(targetPlatforms.join(', ').toUpperCase())}`);
+  console.log(`Output Directory: ${pc.cyan(path.resolve(outputDir))}\n`);
+
+  // Ensure directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  let browser;
+  const launchSpinner = ora('Launching Chromium browser...').start();
+  try {
+    browser = await chromium.launch({ headless: true });
+    launchSpinner.succeed('Chromium browser launched successfully');
+  } catch (err) {
+    launchSpinner.fail(pc.red('Failed to launch Chromium browser'));
+    console.error(pc.red(err.message));
+    console.log(pc.yellow('\n💡 Tips: Jalankan "npx playwright install chromium" untuk mengunduh browser binaries.'));
+    process.exit(1);
+  }
+
+  for (const plat of targetPlatforms) {
+    const config = DEVICE_CONFIGS[plat];
+    console.log(pc.bold(pc.blue(`💻 Platform: ${plat.toUpperCase()}`)));
+
+    for (const [deviceName, size] of Object.entries(config.devices)) {
+      console.log(pc.magenta(`  📱 Processing ${deviceName} (${size.width}x${size.height}px)...`));
+
+      const context = await browser.newContext({
+        viewport: { width: size.width, height: size.height },
+        userAgent: config.userAgent,
+        deviceScaleFactor: 3, // High DPI for crisp screenshots
+        isMobile: true,
+        hasTouch: true
+      });
+
+      const page = await context.newPage();
+
+      for (const route of paths) {
+        const normalizedPath = '/' + route.replace(/^\/+/, '');
+        const targetUrl = `${url}${normalizedPath}`;
+        const nameSnippet = safeFilename(normalizedPath);
+        const filename = `${deviceName}_${nameSnippet}.png`;
+        const outputPath = path.join(outputDir, filename);
+
+        const pageSpinner = ora(`    Navigating to ${normalizedPath}...`).start();
+
+        try {
+          await page.goto(targetUrl, { timeout: 30000 });
+          pageSpinner.text = `    Waiting for network idle on ${normalizedPath}...`;
+          await page.waitForLoadState('networkidle', { timeout: 15000 });
+          
+          // Wait a brief moment for layout/dynamic scripts to settle
+          await new Promise(resolve => setTimeout(resolve, 500));
+
+          pageSpinner.text = `    Saving screenshot ${filename}...`;
+          await page.screenshot({ path: outputPath, fullPage: false });
+          pageSpinner.succeed(pc.green(`   ✔ Saved ${filename}`));
+        } catch (err) {
+          pageSpinner.fail(pc.red(`   ✘ Failed to capture ${normalizedPath}: ${err.message}`));
+        }
+      }
+
+      await context.close();
+    }
+  }
+
+  await browser.close();
+  console.log(pc.bold(pc.green(`\n🎉 Selesai! Semua tangkapan layar disimpan di '${outputDir}'.`)));
+}
+
+program
+  .name('mobile-snap')
+  .description('⚡ MobileSnap CLI: Automate App Store & Google Play Store screenshots')
+  .version('1.0.0')
+  .requiredOption('-u, --url <url>', 'Base URL of the local development server (e.g. localhost:3000)')
+  .option('-p, --paths <paths>', 'Comma-separated list of routes to capture', '/')
+  .option('-o, --output <output>', 'Output directory to save screenshots', 'mobilesnap_output')
+  .option('-l, --platform <platform>', 'Target platform: "ios", "android", or "both"', 'ios')
+  .action((options) => {
+    const pathList = options.paths.split(',').map(p => p.trim()).filter(Boolean);
+    const finalPaths = pathList.length ? pathList : ['/'];
+    
+    const platformVal = options.platform.toLowerCase();
+    if (!['ios', 'android', 'both'].includes(platformVal)) {
+      console.error(pc.red(`Error: Platform '${options.platform}' tidak valid. Pilih antara 'ios', 'android', atau 'both'.`));
+      process.exit(1);
+    }
+
+    captureScreenshots(options.url, finalPaths, options.output, platformVal).catch(err => {
+      console.error(pc.red(`Terjadi kesalahan tidak terduga: ${err.message}`));
+      process.exit(1);
+    });
+  });
+
+program.parse(process.argv);

package/mobilesnap/__init__.py

@@ -0,0 +1 @@
+# MobileSnap package

package/mobilesnap/main.py

@@ -0,0 +1,192 @@
+import asyncio
+import os
+import re
+from enum import Enum
+from pathlib import Path
+from typing import List, Optional
+import typer
+from playwright.async_api import async_playwright, Error as PlaywrightError
+from rich.console import Console
+
+# Initialize Typer app and Rich Console
+app = typer.Typer(
+    name="mobilesnap",
+    help="⚡ MobileSnap: Automate pixel-precise App Store & Google Play screenshots from local web servers.",
+    add_completion=False,
+)
+console = Console()
+
+
+# Enum for Platform choices
+class Platform(str, Enum):
+    ios = "ios"
+    android = "android"
+    both = "both"
+
+
+# Device configurations grouped by platform
+DEVICE_CONFIGS = {
+    "ios": {
+        "devices": {
+            "6.7_inch": {"width": 1290, "height": 2796},
+            "6.5_inch": {"width": 1242, "height": 2688},
+        },
+        "user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1",
+    },
+    "android": {
+        "devices": {
+            "android_phone": {"width": 1080, "height": 2400},
+            "android_tablet": {"width": 1600, "height": 2560},
+        },
+        "user_agent": "Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36",
+    },
+}
+
+
+def safe_filename(path: str) -> str:
+    """Converts a URL path into a safe, descriptive file name snippet."""
+    # Strip leading/trailing slashes
+    clean_path = path.strip("/")
+    if not clean_path:
+        return "home"
+    # Replace non-alphanumeric characters with underscores
+    clean_path = re.sub(r"[^a-zA-Z0-9_\-]", "_", clean_path)
+    # Replace multiple consecutive underscores with a single one
+    clean_path = re.sub(r"_+", "_", clean_path)
+    return clean_path.strip("_")
+
+
+async def capture_screenshots(url: str, paths: List[str], output_dir: Path, platform: Platform):
+    """Core async capture logic using Playwright."""
+    output_dir.mkdir(parents=True, exist_ok=True)
+
+    # Normalize url (ensure it has a scheme)
+    if not url.startswith(("http://", "https://")):
+        url = "http://" + url
+    url = url.rstrip("/")
+
+    # Determine which platforms to target
+    if platform == Platform.both:
+        target_platforms = ["ios", "android"]
+    else:
+        target_platforms = [platform.value]
+
+    console.print(f"[bold blue]Starting MobileSnap screenshot automation...[/bold blue]")
+    console.print(f"Target Server: [cyan]{url}[/cyan]")
+    console.print(f"Platform(s): [cyan]{', '.join(target_platforms).upper()}[/cyan]")
+    console.print(f"Output Directory: [cyan]{output_dir.resolve()}[/cyan]\n")
+
+    async with async_playwright() as p:
+        # Launch headless Chromium
+        with console.status("[yellow]Launching Chromium browser...[/yellow]") as status:
+            try:
+                browser = await p.chromium.launch(headless=True)
+            except Exception as e:
+                console.print(f"[bold red]Failed to launch Chromium browser: {e}[/bold red]")
+                raise typer.Exit(code=1)
+
+        # Loop through each target platform
+        for plat in target_platforms:
+            config = DEVICE_CONFIGS[plat]
+            user_agent = config["user_agent"]
+            devices = config["devices"]
+
+            console.print(f"[bold blue]💻 Platform: {plat.upper()}[/bold blue]")
+
+            for device_name, size in devices.items():
+                width, height = size["width"], size["height"]
+                console.print(f"  [bold magenta]📱 Processing {device_name} ({width}x{height}px)...[/bold magenta]")
+
+                # Set up context
+                context = await browser.new_context(
+                    viewport={"width": width, "height": height},
+                    user_agent=user_agent,
+                    device_scale_factor=3,  # High DPI for crisp screenshots
+                    is_mobile=True,
+                    has_touch=True,
+                )
+
+                page = await context.new_page()
+
+                for path in paths:
+                    normalized_path = "/" + path.lstrip("/")
+                    target_url = f"{url}{normalized_path}"
+                    name_snippet = safe_filename(normalized_path)
+                    filename = f"{device_name}_{name_snippet}.png"
+                    output_path = output_dir / filename
+
+                    with console.status(f"    Navigating to {normalized_path}...") as status:
+                        try:
+                            await page.goto(target_url, timeout=30000)
+                            status.update(f"    Waiting for network idle on {normalized_path}...")
+                            await page.wait_for_load_state("networkidle", timeout=15000)
+                            await asyncio.sleep(0.5)
+
+                            status.update(f"    Saving screenshot {filename}...")
+                            await page.screenshot(path=str(output_path), full_page=False)
+
+                            console.print(
+                                f"    [green]✔[/green] Saved [bold green]{filename}[/bold green]"
+                            )
+                        except PlaywrightError as err:
+                            console.print(
+                                f"    [red]✘[/red] Failed to capture [cyan]{normalized_path}[/cyan]: {err.message}"
+                            )
+                        except Exception as err:
+                            console.print(
+                                f"    [red]✘[/red] Error on [cyan]{normalized_path}[/cyan]: {err}"
+                            )
+
+                await context.close()
+
+        await browser.close()
+    
+    console.print(f"\n[bold green]🎉 Selesai! Semua tangkapan layar disimpan di '{output_dir}'.[/bold green]")
+
+
+@app.command()
+def main(
+    url: str = typer.Option(
+        ...,
+        "--url",
+        "-u",
+        help="Base URL of the local development server (e.g., localhost:3000 or http://127.0.0.1:4321)",
+    ),
+    paths: str = typer.Option(
+        "/",
+        "--paths",
+        "-p",
+        help="Comma-separated list of paths/routes to capture (e.g., '/, /scan, /profile')",
+    ),
+    output: Path = typer.Option(
+        Path("mobilesnap_output"),
+        "--output",
+        "-o",
+        help="Output directory to save the screenshots",
+    ),
+    platform: Platform = typer.Option(
+        Platform.ios,
+        "--platform",
+        "-l",
+        help="Target platform: 'ios', 'android', or 'both'",
+    ),
+):
+    """
+    ⚡ MobileSnap CLI: Generate pixel-precise App Store & Google Play screenshots from a local web server automatically.
+    """
+    # Parse paths from comma-separated string
+    path_list = [p.strip() for p in paths.split(",") if p.strip()]
+    if not path_list:
+        path_list = ["/"]
+
+    try:
+        # Run the async core loop
+        asyncio.run(capture_screenshots(url=url, paths=path_list, output_dir=output, platform=platform))
+    except Exception as e:
+        console.print(f"[bold red]An unexpected error occurred during execution: {e}[/bold red]")
+        raise typer.Exit(code=1)
+
+
+if __name__ == "__main__":
+    app()
+

package/mobilesnap.egg-info/PKG-INFO

@@ -0,0 +1,9 @@
+Metadata-Version: 2.4
+Name: mobilesnap
+Version: 0.1.0
+Requires-Python: >=3.8
+Requires-Dist: typer>=0.9.0
+Requires-Dist: playwright>=1.40.0
+Requires-Dist: rich>=13.0.0
+Dynamic: requires-dist
+Dynamic: requires-python

package/mobilesnap.egg-info/SOURCES.txt

@@ -0,0 +1,10 @@
+README.md
+setup.py
+mobilesnap/__init__.py
+mobilesnap/main.py
+mobilesnap.egg-info/PKG-INFO
+mobilesnap.egg-info/SOURCES.txt
+mobilesnap.egg-info/dependency_links.txt
+mobilesnap.egg-info/entry_points.txt
+mobilesnap.egg-info/requires.txt
+mobilesnap.egg-info/top_level.txt

package/mobilesnap.egg-info/dependency_links.txt

@@ -0,0 +1 @@
+

package/mobilesnap.egg-info/entry_points.txt

@@ -0,0 +1,2 @@
+[console_scripts]
+mobilesnap = mobilesnap.main:app

package/mobilesnap.egg-info/requires.txt

@@ -0,0 +1,3 @@
+typer>=0.9.0
+playwright>=1.40.0
+rich>=13.0.0

package/mobilesnap.egg-info/top_level.txt

@@ -0,0 +1 @@
+mobilesnap

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "mobile-snap",
+  "version": "1.0.0",
+  "description": "Automate pixel-precise App Store & Google Play screenshots from a local web server",
+  "type": "module",
+  "main": "bin/cli.js",
+  "bin": {
+    "mobile-snap": "./bin/cli.js"
+  },
+  "keywords": [
+    "screenshot",
+    "app store",
+    "play store",
+    "playwright",
+    "cli",
+    "automation"
+  ],
+  "author": "First Ryan",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^11.1.0",
+    "ora": "^7.0.1",
+    "picocolors": "^1.0.0",
+    "playwright": "^1.40.0"
+  }
+}

package/requirements.txt

@@ -0,0 +1,3 @@
+typer>=0.9.0
+playwright>=1.40.0
+rich>=13.0.0

package/setup.py

@@ -0,0 +1,18 @@
+from setuptools import setup, find_packages
+
+setup(
+    name="mobilesnap",
+    version="0.1.0",
+    packages=find_packages(),
+    install_requires=[
+        "typer>=0.9.0",
+        "playwright>=1.40.0",
+        "rich>=13.0.0",
+    ],
+    entry_points={
+        "console_scripts": [
+            "mobilesnap=mobilesnap.main:app",
+        ],
+    },
+    python_requires=">=3.8",
+)