PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 1 1 PANDUAN MASTER CLONING APLIKASI PC & ANDROID Panduan Lengkap · Detail · Mendalam · Siap Pakai Membangun Aplikasi Terinspirasi Software Populer dari Nol dengan Bantuan Claude Opus AI sebagai Coding Partner Utama nn APLIKASI PC Python + Qt6 Electron + React Linux/Mac/Windows n ANDROID APP Kotlin + Compose Clean Architecture Google Play Ready n PROMPT CLAUDE 60+ Prompt Siap Step-by-step Guides Studi Kasus Nyata Studi Kasus Utama: PhotoCraft (Alternatif Photoshop) Versi 2.0 · 2024 · Bahasa Indonesia PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 2 2 BAB TOC DAFTAR ISI LENGKAP nn PENDAHULUAN 1. Tentang Panduan & Cara Penggunaannya 2. Filosofi Cloning: Legal, Etis, Menguntungkan 3. Mengenal PhotoCraft — Studi Kasus Utama 4. Cara Kerja Kolaborasi Developer + Claude Opus 5. Alur Kerja 7 Fase Pembuat PhotoCraft nn BAGIAN I — APLIKASI PC 6. Analisis & Dekomposisi Fitur Target 7. Pemilihan Stack Teknologi (Python vs Electron) 8. Arsitektur Proyek PC — Struktur & Design Patterns 9. Membangun Main Window & Layout UI 10. Layer System: Model, Rendering, Compositing 11. Blend Modes — 27 Implementasi Matematis 12. Canvas Engine & Rendering Pipeline 13. Brush Engine — Dab, Pressure, Dynamics 14. Selection System — Marquee, Lasso, Magic Wand 15. Filter Pipeline — Blur, Sharpen, Distort, Artistic 16. Adjustment Layers — Curves, Levels, Color 17. Text Tool & Typography Engine 18. Format File: Native, PSD Import, Export Multi-format 19. Sistem Plugin & Extensibility 20. Undo/Redo dengan Command Pattern 21. Pengujian, Profiling & Optimasi 22. Packaging & Distribusi Lintas Platform n BAGIAN II — APLIKASI ANDROID 23. Analisis & Adaptasi dari Desktop ke Mobile 24. Stack Teknologi Android 2024 25. Arsitektur MVVM + Clean Architecture 26. Setup Proyek & Dependency Management 27. Navigasi & Screen Management 28. Editor Screen — Layout Portrait/Landscape 29. DrawingCanvas — Custom Composable 30. Touch Engine & Gesture Handling 31. Stylus & S-Pen Support 32. Layer Compositor Android 33. Brush Engine Mobile 34. Selection Tools Touch-native 35. Filter Gallery & Real-time Preview 36. Color Picker — Wheel, Slider, Swatches PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 3 3 37. Scoped Storage & File Management 38. Performa: Memory, Bitmap Pool, Tile Rendering 39. Testing Android: Unit, UI, Integration 40. Build, Sign & Publish ke Google Play n MASTER PROMPT COLLECTION A. Prompt Analisis Kompetitor & Riset Pasar B. Prompt Arsitektur & Database Design C. Prompt UI/UX — Screen, Component, Animation D. Prompt Core Engine & Algoritma E. Prompt Testing, Debug & Code Review F. Prompt Optimasi, ASO & Monetisasi G. Prompt Khusus Android H. Template Percakapan Nyata Developer × Claude PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 4 4 BAB 1 TENTANG PANDUAN INI & CARA PENGGUNAANNYA Untuk Siapa Panduan Ini? Panduan ini ditulis untuk developer indie, entrepreneur digital, dan mahasiswa IT yang ingin membangun aplikasi terinspirasi dari software populer. Kamu tidak perlu ahli 10 tahun — dengan strategi yang tepat dan Claude Opus sebagai partner coding, bahkan developer junior bisa menciptakan aplikasi sekelas produk komersial. u Developer Indie: Ingin buat produk tanpa tim besar u Mahasiswa IT: Proyek capstone atau portofolio yang impressive u Entrepreneur Digital: Ingin validasi produk dengan MVP cepat u Programmer Berpengalaman: Mau ekspansi ke domain baru (misal: PC ke mobile) Cara Membaca Panduan Ini Panduan ini berstruktur dari konsep ke implementasi. Bab 1–5 membangun mindset yang benar. Bagian I (Bab 6–22) fokus ke PC, Bagian II (Bab 23–40) fokus ke Android. Master Prompt Collection di akhir bisa langsung dipakai kapan saja tanpa harus baca berurutan. n TIP: Baca Bab 1–5 dulu sebelum melompat ke implementasi. Mindset yang salah di awal akan menyebabkan frustasi yang tidak perlu di tengah jalan. Yang Tidak Akan Kamu Temukan di Sini u Cara membajak atau menyalin kode aplikasi orang lain u Tutorial decompile APK untuk mencuri kode u Cara bypass lisensi atau DRM software berbayar u Konten yang melanggar hukum hak cipta apapun nn Semua yang diajarkan di panduan ini adalah praktik LEGAL: membuat implementasi baru dari fitur yang terinspirasi dari aplikasi lain. Ini sama persis seperti cara Google Docs terinspirasi dari Microsoft Word — fitur serupa, kode 100% berbeda. PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 5 5 BAB 2 FILOSOFI CLONING: LEGAL, ETIS, MENGUNTUNGKAN Sejarah "Cloning" dalam Industri Software Industri software dibangun di atas saling menginspirasi. Hampir tidak ada produk major yang benar-benar lahir dari kevakuman tanpa inspirasi dari yang sebelumnya. Yang membedakan cloning legal dari pembajakan hanya satu: apakah kode ditulis sendiri dari awal atau dicuri? PRODUK ASLI PRODUK TERINSPIRASI TAHUN Lotus 1-2-3 Microsoft Excel 1985 WordPerfect Microsoft Word 1983 AutoCAD LibreCAD / FreeCAD 2009 Photoshop GIMP, Affinity, Pixelmator, Photopea 1995–2019 Final Cut Pro DaVinci Resolve, Kdenlive 2008 iPhone iOS Android 2008 Gmail ProtonMail, FastMail, Hey 2014 Slack Discord, Teams, Mattermost 2013 Trello Notion, Asana, Linear 2016 Instagram TikTok (Stories), Snapchat 2013 Garis Tegas: Legal vs Ilegal TINDAKAN STATUS PENJELASAN Menganalisa fitur & UX aplikasi n LEGAL Siapapun boleh menggunakan & menganalisis produk Membuat aplikasi dengan fitur serupa n LEGAL Ide, konsep, fungsi tidak bisa di-copyright Membuat UI yang terinspirasi n LEGAL Layout umum tidak dilindungi hak cipta Nulis ulang algoritma yang sama n LEGAL Algoritma tidak bisa dipaten di banyak negara Decompile APK/EXE untuk baca kode n ILEGAL Reverse engineering binary melanggar DMCA/EULA Copy-paste kode dari aplikasi lain n ILEGAL Pelanggaran copyright kode sumber Gunakan aset grafis tanpa izin n ILEGAL Icon, image, font dilindungi copyright Nama merek yang membingungkan publik n ILEGAL Pelanggaran trademark, bisa dituntut Klaim sebagai produk resmi n ILEGAL Fraud, penipuan konsumen PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 6 6 BAB 3 MENGENAL PHOTOCRAFT — STUDI KASUS UTAMA Apa itu PhotoCraft? PhotoCraft adalah editor foto profesional yang dibangun oleh seorang developer indie (sebut saja Rafi, 26 tahun, Jakarta) dengan bantuan Claude Opus sebagai coding partner. PhotoCraft terinspirasi secara visual dan fungsional dari Adobe Photoshop — dengan 80% fitur esensial Photoshop tersedia, tapi dengan harga yang 95% lebih murah. Nama Produk PhotoCraft Professional Terinspirasi dari Adobe Photoshop CC 2024 Developer Satu orang (Rafi) + Claude Opus AI Waktu Development 4 bulan (PC) + 3 bulan (Android) = 7 bulan total Tech Stack PC Python 3.11 + PySide6 + NumPy + OpenCV Tech Stack Android Kotlin 1.9 + Jetpack Compose + Hilt AI Partner Claude Opus (utama), GitHub Copilot (sekunder) Harga Gratis (basic) / Rp 49.000/bulan (Pro) Platforms Windows 10/11, macOS 12+, Ubuntu 20+ / Android 8+ Downloads (6bln) 73.000 desktop + 124.000 Android Revenue (6bln) ± Rp 180 juta / bulan (steady state) Fitur yang Berhasil Direplikasi <b>Layer System</b> 3 Layer Raster 3 Layer Adjustment (12 jenis) 3 Layer Group/Folder 3 Layer Mask 3 Vector Mask 3 Blend Modes (27) 3 Opacity & Fill % 3 Layer Linking 3 Layer Alignment Tools <b>Brush Engine</b> 3 Round & Soft Brush 3 Custom Brush Shape 3 Opacity / Flow 3 Hardness Control 3 Spacing Setting 3 Brush Dynamics 3 Pressure Sensitivity 3 Wet Edges Mode 3 Pen Tablet Support <b>Selection</b> 3 Rectangular Marquee 3 Elliptical Marquee 3 Freehand Lasso 3 Polygonal Lasso 3 Magic Wand 3 Select by Color Range 3 Refine Edge (basic) 3 Feathering 3 Selection Math (union/subtract) <b>Filter & FX</b> 3 Gaussian Blur 3 Motion Blur (7 axis) 3 Radial Blur 3 Unsharp Mask 3 Smart Sharpen 3 Gaussian Noise 3 Reduce Noise 3 Lens Distortion 3 12 Artistic Filters PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 7 7 BAB 4 CARA KERJA KOLABORASI DEVELOPER + CLAUDE OPUS Memahami cara Claude Opus bekerja paling baik akan menghemat puluhan jam debugging dan iterasi. Claude bukan mesin search — dia adalah junior developer yang sangat pintar dengan pengetahuan luas, tapi butuh konteks yang kamu berikan. Model Mental yang Tepat u Claude = Senior Developer yang Kamu Hire: Dia pintar tapi tidak tahu konteks proyekmu. Berikan dia konteks = hasil yang jauh lebih baik. u Iterasi adalah Normal: Jarang kode dari Claude langsung sempurna. Berikan feedback, tunjukkan error, minta perbaikan — ini bukan kegagalan, ini proses. u Spesifikasi > Permintaan Umum: "Buat brush tool" jauh lebih buruk dari "Buat BrushEngine class di Python dengan dab-based rendering, mendukung opacity 0-100%, hardness 0-100%, dan menggunakan scipy.ndimage.gaussian_filter untuk soft dab". u Beri Contoh Code yang Ada: Selalu paste kode yang sudah ada agar Claude bisa integrate daripada create dari scratch yang tidak compatible. Pola Prompt yang Efektif n PROMPT CLAUDE OPUS — POLA DASAR: KONTEKS + SPESIFIKASI + FORMAT KONTEKS (SELALU dimulai dengan ini): "Aku sedang membangun [NAMA_APP], editor foto yang terinspirasi dari [APP_TARGET]. Ini dibangun dengan [TECH_STACK]. Berikut struktur proyek yang sudah ada: [PASTE STRUKTUR] Berikut kode yang relevan dengan apa yang mau kita kerjakan: [PASTE KODE]" SPESIFIKASI (Detailkan apa yang diinginkan): "Buat [KOMPONEN] yang melakukan [FUNGSI SPESIFIK]. Requirements: - [REQUIREMENT 1 yang terukur] - [REQUIREMENT 2 yang terukur] - Performa: harus selesai dalam [X ms/sec] untuk input [Y] - Error handling: harus handle [CASE 1], [CASE 2]" FORMAT OUTPUT (Tentukan format yang diinginkan): "Berikan: 1. Kode lengkap yang bisa langsung dijalankan 2. Penjelasan singkat setiap keputusan arsitektur 3. Unit test untuk case utama 4. Potensi bottleneck dan cara mengatasinya" Siklus Developer-Claude yang Optimal LANGKAH 1 PLAN Definisikan apa yang ingin dibangun. Buat list requirements yang jelas dan terukur sebelum buka Claude. LANGKAH 2 PROMPT Tulis prompt dengan konteks lengkap + spesifikasi detail + format output yang diinginkan. PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 8 8 LANGKAH 3 REVIEW Baca kode yang dihasilkan, pahami strukturnya, identifikasi bagian yang mencurigakan. LANGKAH 4 TEST Jalankan kode. Jika ada error, paste error message lengkap + stack trace ke Claude. LANGKAH 5 REFINE Jika ada yang perlu diubah, berikan feedback spesifik: "Bagian X tidak benar karena Y, tolong perbaiki de LANGKAH 6 COMMIT Kode yang sudah bekerja: tambahkan komentar, tulis test, commit ke git. Lanjut ke fitur berikutnya. PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 9 9 BAB 5 ALUR KERJA 7 FASE PEMBUAT PHOTOCRAFT Berikut adalah timeline nyata yang dijalani Rafi (developer PhotoCraft) dari ide awal hingga versi yang sudah menghasilkan revenue: FASE 0 Research & Analisis (Minggu 1–2) Gunakan Photoshop setiap hari selama 2 minggu. Dokumentasikan SEMUA fitur, shortcut, panel, dialog, dan FASE 1 Arsitektur & Setup (Minggu 3) Duduk dengan Claude Opus, share semua hasil research. Minta Claude rancang arsitektur sistem lengkap: c FASE 2 Core Engine (Minggu 4–6) Bangun canvas rendering engine dulu — ini fondasi segalanya. Kemudian layer system dan compositing. Ba FASE 3 UI/UX Desktop (Minggu 7–9) Implementasi antarmuka terinspirasi Photoshop: toolbar kiri, panel kanan, menu bar atas, options bar. Visual FASE 4 Fitur Lanjutan (Minggu 10–14) Adjustment layers, filter gallery, plugin system, text tool, pen tool. Setiap fitur melalui siklus 6 langkah. Bug re FASE 5 Android Port (Minggu 15–26) Dimulai dari NOL dengan Kotlin + Compose. Tidak ada port langsung — desain ulang untuk touch. Logika bis FASE 6 Polish, Beta, Launch (Minggu 27–28) Bug fixing intensif, optimasi performa, crash analytics, onboarding tutorial. Siapkan semua aset Play Store da PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 10 10 BAGIAN I APLIKASI PC Membangun PhotoCraft Desktop dari Nol PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 11 11 BAB 6 ANALISIS & DEKOMPOSISI FITUR TARGET Framework Analisis Kompetitor (FAK) Sebelum menulis satu baris kode, wajib melakukan analisis mendalam terhadap aplikasi target. Ini adalah investasi waktu 2 minggu yang menghemat 2 bulan development di kemudian hari. 1. Install & Gunakan: Pakai aplikasi target setiap hari minimal 2 minggu. Coba setiap fitur, baca dokumentasinya. 2. Feature Inventory: Buat spreadsheet dengan SEMUA fitur yang ada. 3. Priority Matrix: Tandai P0 (wajib), P1 (penting), P2 (nice-to-have) untuk setiap fitur. 4. Technical Estimation: Perkirakan kompleksitas implementasi setiap fitur (Low/Medium/High/Very High). 5. Interaction Mapping: Dokumentasikan user flow untuk setiap fitur utama. 6. Data Model Guess: Perkirakan struktur data yang digunakan. 7. Competitive Gap: Identifikasi kelemahan aplikasi target yang bisa kamu perbaiki. n PROMPT CLAUDE OPUS — FEATURE AUDIT PHOTOSHOP KOMPREHENSIF Aku sedang membangun PhotoCraft, editor foto yang terinspirasi dari Adobe Photoshop. Bantu aku melakukan feature audit komprehensif. Untuk setiap kategori fitur berikut, berikan: 1. Daftar semua sub-fitur yang ada 2. Cara kerja teknis (estimasi implementasi) 3. Prioritas untuk MVP (P0/P1/P2) 4. Estimasi kompleksitas (Low/Medium/High/Very High) 5. Library Python yang paling cocok untuk implementasi KATEGORI YANG HARUS DIANALISIS: A. LAYER SYSTEM - Jenis layer (raster, adjustment, text, group, vector, smart object) - Layer properties (opacity, fill, blend mode, lock, visibility) - Layer operations (duplicate, merge, flatten, rasterize) - Layer masks (pixel mask, vector mask, clipping mask) - Layer linking & alignment B. BRUSH ENGINE - Parameter brush (size, hardness, opacity, flow, spacing) - Brush dynamics (size/opacity/angle pressure sensitivity) - Brush modes (normal, behind, clear, dissolve) - Custom brush creation C. SELECTION SYSTEM - Jenis selection (marquee, lasso, wand, color range) - Selection operations (add, subtract, intersect, inverse) - Selection refinement (feather, expand, contract, smooth) - Select & Mask (refine edge) D. ADJUSTMENT TOOLS - Brightness/Contrast, Levels, Curves - Hue/Saturation, Color Balance, Vibrance - Shadows/Highlights, Exposure - Gradient Map, Selective Color E. FILTER PIPELINE PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 12 12 - Blur filters (Gaussian, Motion, Radial, Surface, Lens) - Sharpen filters (Unsharp Mask, Smart Sharpen) - Distort filters (Warp, Liquify, Lens Correction) - Noise (Add, Reduce, Despeckle, Median) - Artistic filters (Dry Brush, Watercolor, Oil Paint) Berikan output sebagai tabel terstruktur untuk setiap kategori. Spreadsheet Analisis Fitur — Template FITUR KATEGORI DESKRIPSI TEKNIS P KOMPLEKS LIBRARY Layer Raster Layer Bitmap numpy RGBA P0 Med NumPy Layer Group Layer Container layer lain P0 Med Custom Adj. Brightness Adjustment Pergeseran linear RGB P0 Low NumPy Adj. Curves Adjustment LUT spline interpolasi P0 High SciPy Adj. Levels Adjustment Black/mid/white point P0 Med NumPy Blend Modes Compositing 27 mode matematis P0 High NumPy Layer Mask Masking Grayscale alpha mask P0 Med NumPy Brush Tool Drawing Dab-based stroke P0 High SciPy/NumPy Eraser Tool Drawing Brush ke alpha=0 P0 Low NumPy Move Tool Transform Translate layer pixels P0 Low NumPy Crop Tool Transform Clip canvas bounds P0 Low Pillow Rect Marquee Selection Rectangle selection P0 Low Custom Magic Wand Selection Flood fill tolerance P0 High OpenCV Lasso Tool Selection Freehand polygon P1 Med Custom Gaussian Blur Filter Gaussian convolution P0 Low SciPy Motion Blur Filter Directional kernel P1 Med OpenCV Unsharp Mask Filter High-pass sharpening P1 Low SciPy Text Tool Drawing FreeType text engine P1 High Pillow/FT Clone Stamp Retouching Copy pixel dari sumber P1 Med NumPy Healing Brush Retouching Patch + blend texture P2 VHigh OpenCV Pen Tool Vector Bezier path editor P2 VHigh Qt6 PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 13 13 BAB 7 PEMILIHAN STACK TEKNOLOGI PC Dua stack paling viable untuk editor foto desktop di 2024. Pilihan antara keduanya tergantung trade-off performa vs kecepatan development. OPSI A: Python + PySide6 (Direkomendasikan) UI Framework PySide6 (Qt6) — Qt untuk Python, official binding, LGPL license Image Processing NumPy — operasi pixel vectorized ultra-cepat Computer Vision OpenCV — filter, morphology, feature detection Image I/O Pillow (PIL) — read/write semua format populer Math/Science SciPy — Gaussian filter, spline interpolation, convolution GPU Acceleration PyOpenGL atau CuPy (CUDA) untuk operasi berat Color Management littlecms2 via python-lcms untuk profil ICC PSD Support psd-tools — read/write PSD file format Packaging PyInstaller + Inno Setup (Win) / dmgbuild (Mac) / AppImage (Linux) Testing pytest + pytest-qt + numpy.testing OPSI B: Electron + React (Alternatif) Runtime Electron 28+ — Node.js + Chromium wrapper UI Framework React 18 + TypeScript — declarative UI Canvas Rendering HTML5 Canvas + OffscreenCanvas + Web Workers Image Processing Sharp (server-side) + Konva.js (canvas management) GPU WebGL2 / Three.js untuk GPU compositing State Management Zustand atau Redux Toolkit Styling Tailwind CSS atau styled-components PSD Support ag-psd (pure JS PSD reader/writer) Packaging electron-builder untuk Windows/Mac/Linux Testing Jest + Testing Library + Playwright ASPEK Python + PySide6 Electron + React PEMENANG Raw Performance HHHHH (native numpy) HHHnn (JS overhead) Python Dev Speed (if JS dev) HHHnn HHHHH Electron Dev Speed (if Py dev) HHHHH HHHnn Python UI Flexibility HHHnn (Qt styling) HHHHH (CSS unlimited) Electron PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 14 14 Memory Efficiency HHHHH HHnnn (Chromium overhead) Python Plugin Ecosystem HHHnn (PyPI) HHHHH (npm) Electron Installer Size HHHHn (~80MB) HHnnn (~200-400MB) Python GPU Access HHHHn (OpenGL/CUDA) HHHnn (WebGL) Python Cross-platform UI HHHnn (Qt native look) HHHHH (identical) Electron Learning Curve Medium (Qt concepts) Easy (web tech) Electron n REKOMENDASI: Untuk editor foto dengan manipulasi pixel intensif, pilih Python + PySide6. Performa 5-10x lebih baik untuk operasi NumPy vs JavaScript sangat signifikan saat user edit gambar 50MP. Jika background kamu web developer dan target market lebih penting dari performa raw, Electron tetap viable. PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 15 15 BAB 8 ARSITEKTUR PROYEK PC — STRUKTUR & DESIGN PATTERNS Prinsip Arsitektur yang Dipakai u Separation of Concerns: Core logic (image processing) TIDAK boleh bergantung ke UI u Observer Pattern: UI subscribe ke perubahan data, bukan polling u Command Pattern: Setiap operasi adalah Command object — memungkinkan undo/redo u Strategy Pattern: Tools (Brush, Eraser, dll) adalah strategy yang bisa ditukar u Composite Pattern: Layer Group berisi Layer lain — struktur tree u Factory Pattern: LayerFactory untuk create layer berdasarkan tipe n STRUKTUR FOLDER PHOTOCRAFT PC LENGKAP photocraft/ nnn main.py # Entry point — init app, load config nnn requirements.txt nnn pyproject.toml # Build config (PEP 517) n nnn core/ # ← NO UI DEPENDENCIES ALLOWED HERE n nnn __init__.py n nnn document.py # Document model — pusat segalanya n nnn canvas.py # Canvas state & coordinate transforms n nnn color.py # Color model (RGB, HSL, CMYK, Lab) n nnn history.py # Command pattern undo/redo n nnn events.py # EventBus (Observer pattern) n n n nnn layers/ n n nnn base.py # Layer ABC + common interface n n nnn raster.py # RasterLayer — numpy pixel data n n nnn adjustment.py # AdjustmentLayer — non-destructive n n nnn group.py # LayerGroup — composite n n nnn text.py # TextLayer — FreeType n n nnn vector.py # VectorLayer — paths & shapes n n nnn mask.py # LayerMask + VectorMask n n nnn smart_object.py # SmartObject (embedded document) n n n nnn tools/ n n nnn base.py # Tool ABC — enter/exit/events n n nnn manager.py # ToolManager — state machine n n nnn brush.py # BrushTool + BrushEngine n n nnn eraser.py # EraserTool n n nnn move.py # MoveTool n n nnn crop.py # CropTool n n nnn text.py # TextTool n n nnn eyedropper.py # EyedropperTool n n nnn selection/ n n nnn marquee.py # RectangleTool + EllipseTool n n nnn lasso.py # LassoTool + PolygonLasso n n nnn magic_wand.py # MagicWandTool n n nnn color_range.py # ColorRangeTool n n n nnn compositing/ PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 16 16 n n nnn blend_modes.py # BlendModes — semua 27 mode n n nnn compositor.py # LayerCompositor — tree flatten n n nnn renderer.py # ScreenRenderer — diff rendering n n n nnn filters/ n n nnn base.py # Filter ABC — apply(image, **params) n n nnn registry.py # FilterRegistry — plugin discovery n n nnn blur/ n n n nnn gaussian.py n n n nnn motion.py n n n nnn radial.py n n n nnn surface.py # bilateral filter n n n nnn box.py n n nnn sharpen/ n n n nnn unsharp_mask.py n n n nnn smart_sharpen.py n n nnn distort/ n n n nnn warp.py n n n nnn lens_distort.py n n n nnn liquify.py n n nnn noise/ n n n nnn add_noise.py n n n nnn reduce_noise.py n n nnn artistic/ n n nnn oil_paint.py n n nnn watercolor.py n n n nnn adjustments/ n n nnn brightness_contrast.py n n nnn levels.py n n nnn curves.py n n nnn hue_saturation.py n n nnn color_balance.py n n nnn selective_color.py n n nnn gradient_map.py n n nnn exposure.py n n n nnn io/ n nnn psd.py # psd-tools wrapper n nnn native.py # .pcraft format (HDF5/ZIP+numpy) n nnn png.py n nnn jpeg.py n nnn exporter.py # Multi-format export n nnn ui/ # ← Qt6 UI ONLY n nnn app.py # QApplication setup + dark theme n nnn main_window.py # QMainWindow — orchestrator n nnn canvas_view.py # QGraphicsView — viewport n n n nnn panels/ n n nnn layers.py # Layers panel dock n n nnn properties.py # Context properties dock n n nnn color.py # Color picker dock n n nnn brushes.py # Brush presets dock n n nnn history.py # Undo history dock PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 17 17 n n nnn channels.py # RGB/A channel view n n n nnn toolbar/ n n nnn tool_bar.py # Left vertical toolbar n n nnn options_bar.py # Top context options bar n n n nnn dialogs/ n n nnn new_document.py n n nnn image_size.py n n nnn canvas_size.py n n nnn export.py n n nnn filter_gallery.py n n nnn preferences.py n n n nnn widgets/ n nnn canvas_widget.py # Custom paint canvas n nnn color_wheel.py # HSL wheel + triangle n nnn gradient_editor.py n nnn histogram.py n nnn curve_editor.py # Bezier curve widget n nnn plugins/ # Plugin system n nnn __init__.py n nnn api.py # Public API for plugins n nnn manager.py # Discovery + sandboxed loading n nnn builtin/ # Built-in plugins n nnn watermark/ n nnn batch_export/ n nnn resources/ n nnn icons/ # SVG icons (Material Design Icons) n nnn brushes/ # .abr compatible brush packs n nnn patterns/ # Tiling patterns n nnn gradients/ # .grd compatible gradients n nnn themes/ # QSS stylesheets n nnn tests/ nnn conftest.py nnn test_blend_modes.py nnn test_layers.py nnn test_compositing.py nnn test_tools.py nnn test_filters.py nnn test_io.py n PROMPT CLAUDE OPUS — GENERATE DOCUMENT MODEL LENGKAP Aku membangun PhotoCraft, editor foto Python + PySide6. Buat Document class yang menjadi pusat seluruh state aplikasi. Document harus merepresentasikan satu file proyek editor foto. Isi Document: - Dimensi: width, height, dpi, color_mode (RGB/CMYK/Grayscale/Lab) - LayerStack: list Layer dengan hierarki group - ActiveLayer: referensi ke layer yang sedang aktif - Selection: SelectionMask (numpy bool array H x W) PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 18 18 - History: deque dari DocumentSnapshot untuk undo/redo - Metadata: nama, path, created_at, modified_at, author - Guides: list GuideLineH dan GuideLineV - GridSettings: spacing, color, visible - SavedState: apakah ada perubahan belum disimpan Method yang WAJIB ada (dengan type hints lengkap): 1. add_layer(layer: Layer, index: int = -1) -> Layer 2. remove_layer(layer_id: UUID) -> bool 3. move_layer(layer_id: UUID, new_index: int) -> None 4. duplicate_layer(layer_id: UUID) -> Layer 5. merge_down(layer_id: UUID) -> RasterLayer 6. merge_visible() -> RasterLayer 7. flatten() -> RasterLayer 8. composite() -> np.ndarray # RGBA float32, semua layer 9. get_layer(layer_id: UUID) -> Optional[Layer] 10. get_layer_at_point(x: int, y: int) -> Optional[Layer] 11. resize(width: int, height: int, resample: str) -> None 12. crop(rect: Rect) -> None 13. rotate(degrees: float, expand: bool) -> None 14. flip(horizontal: bool) -> None 15. push_history(action_name: str) -> None 16. undo() -> bool 17. redo() -> bool 18. serialize() -> bytes 19. deserialize(data: bytes) -> "Document" Event yang di-emit setiap perubahan state: - layer_added, layer_removed, layer_reordered - selection_changed, active_layer_changed - document_modified, history_pushed Gunakan dataclass untuk model, UUID untuk IDs, emit events via EventBus. Sertakan kode skeleton lengkap dengan docstrings. PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 19 19 BAB 9 MEMBANGUN MAIN WINDOW & LAYOUT UI Antarmuka PhotoCraft mengadaptasi layout Photoshop yang sudah familiar: menu bar atas, toolbar kiri, panel kanan, canvas tengah, status bar bawah. Ini bukan kebetulan — layout ini adalah hasil evolusi bertahun-tahun UX. Anatomi UI yang Diadaptasi Menu Bar File, Edit, Image, Layer, Type, Select, Filter, View, Window, Help Options Bar Pengaturan tool yang aktif — berubah setiap ganti tool Tools Panel 2 kolom icon tool vertikal di sisi kiri Canvas View QGraphicsView dengan zoom, pan, ruler, guides, grid Layers Panel List layer dengan thumbnail, blend mode, opacity Properties Panel kontekstual — berubah sesuai layer/tool aktif Color Panel Color picker + swatches + recent colors Brush Panel Preset brush + parameter brush aktif History Panel List 50 langkah terakhir, bisa click untuk jump ke state Status Bar Zoom level, ukuran dokumen, mode warna, tool hint n PROMPT CLAUDE OPUS — MAIN WINDOW PYSIDE6 LENGKAP Buat MainWindow PySide6 lengkap untuk PhotoCraft editor foto. LAYOUT: - QMenuBar dengan semua menu standar Photoshop (File/Edit/Image/Layer/Select/Filter/View/Window/Help) - QToolBar vertikal di kiri untuk tool (ikon 32x32, 2 kolom, dengan tooltips) - QDockWidget kanan: Layers, Properties, Color, Brush, History - Central: QGraphicsView untuk canvas - Status bar bawah: zoom%, document size, color mode, tool hint DARK THEME: Buat QSS stylesheet yang menyerupai Photoshop dark theme: - Background utama: #2D2D2D - Panel background: #1E1E1E - Toolbar bg: #3C3C3C - Text: #CCCCCC - Accent: #4D9FFF - Hover: #505050 - Selected: #4D9FFF 30% TOOLBAR TOOLS (kiri): Buat ikon placeholder pakai QPainter untuk: V=Move, M=Rect Marquee, L=Lasso, W=Magic Wand, C=Crop, I=Eyedropper, B=Brush, E=Eraser, G=Gradient, T=Text, U=Rectangle Shape, H=Hand/Pan, Z=Zoom OPTIONS BAR (atas): Widget yang berubah sesuai tool aktif: - Brush: size slider, hardness slider, opacity spinner, flow spinner - Selection: feather, anti-alias, style (normal/fixed ratio/fixed size) PANDUAN CLONING APLIKASI PC & ANDROID Studi Kasus: PhotoCraft × Claude Opus © 2024 App Cloning Masterclass — Untuk Tujuan Pembelajaran Halaman 20 20 - Move: auto-select, show transform controls Keyboard shortcuts wajib berfungsi: B=Brush, E=Eraser, V=Move, M=Marquee, L=Lasso, W=MagicWand, C=Crop, I=Eyedropper, T=Text, H=Hand, Z=Zoom, D=Default colors, X=Swap colors Ctrl+Z=Undo, Ctrl+Shift+Z=Redo, Ctrl+N=New, Ctrl+O=Open, Ctrl+S=Save Welcome Screen saat tidak ada dokumen terbuka: - Logo PhotoCraft besar di tengah - Tombol "New Document", "Open File", "Open Recent" - List proyek terbaru (5 terakhir) Kode Python lengkap, bisa langsung dijalankan, dengan semua import. n PROMPT CLAUDE OPUS — LAYERS PANEL LENGKAP Buat LayersPanel QDockWidget untuk PhotoCraft. TAMPILAN setiap baris layer: [VISIBILITY EYE] [THUMBNAIL 32x32] [LAYER TYPE ICON] [LAYER NAME] [LOCK ICON] Di bawah nama: blend mode dropdown + opacity slider (kompak) HEADER PANEL: - Dropdown blend mode (Normal, Multiply, Screen, Overlay, dll — 27 mode) - Opacity: label + QSpinBox (0-100) + QSlider - Fill: label + QSpinBox (0-100) + QSlider (collapsible) - 4 lock icons: lock position, lock pixels, lock transparency, lock all FOOTER PANEL: Icons: [Filter type] [Link layers] [Add mask] [Add adj layer] [New Group] [New Layer] [Delete] LAYER LIST (QListWidget custom): - Custom QStyledItemDelegate untuk render setiap row - Thumbnail dirender dari layer.get_thumbnail(32, 32) - Double-click nama: inline rename (QLineEdit muncul) - Click eye: toggle visibility - Click lock: toggle lock - Drag & drop reorder antar layer - Drag ke Group: masukkan ke group - Multi-select: Shift+click, Ctrl+click - Layer group: expand/collapse dengan triangle toggle - Indentasi layer dalam group CONTEXT MENU (klik kanan): - Duplicate Layer - Delete Layer - Merge Layer Down - Merge Visible - Flatten Image - Layer Properties... - Rasterize Layer - New Group from Layers - Clipping Mask (Alt+Ctrl+G) - Enable/Disable Layer Mask SIGNALS yang di-emit: layer_selected(layer_id), layers_reordered(new_order), layer_visibility_changed(layer_id, visible), layer_opacity_changed(layer_id, opacity), layer_blend_mode_changed(layer_id, mode) Kode Python lengkap dengan PySide6.