Berikut adalah beberapa pilihan **Prompt** yang bisa Anda gunakan, tergantung pada tujuan Anda: apakah Anda ingin **kode program** (untuk langsung dibuat aplikasinya) atau **gambar desain** (untuk inspirasi UI/UX).
### Opsi 1: Prompt untuk Coding (ChatGPT / Claude)
Gunakan prompt ini jika Anda ingin AI membuatkan kode program lengkap. Saya menyarankan menggunakan **Python (Streamlit)** karena sangat cepat untuk membuat dasbor data interaktif.
**Copy & Paste Prompt ini:**
> "Act as a Senior Full Stack Developer and Data Scientist. Please build a comprehensive web application dashboard using **Python and Streamlit**.
>
> **Context:**
> The dashboard analyzes smartphone market prices in **Sidoarjo, East Java, Indonesia** for the year **2023**.
>
> **Requirements:**
> 1. **Data Simulation:** Since you don't have real-time local data, generate a realistic dummy dataset (CSV structure) containing:
> * Date (Jan 1, 2023 - Dec 31, 2023)
> * Brand (Samsung, Apple, Xiaomi, Oppo, Vivo, Realme)
> * Model (High-end, Mid-range, Entry-level)
> * Price (in IDR)
> * Region/Kecamatan in Sidoarjo (e.g., Waru, Sidoarjo Kota, Candi, Taman, Krian, Gedangan)
> * Sales Volume.
>
> 2. **UI/UX Design:**
> * Use a modern, clean layout (Wide mode).
> * Implement a Sidebar for **Slicers/Filters**: Select Brand, Select Region, Date Range Slider.
>
> 3. **Key Metrics (Top Cards):**
> * Average Selling Price (ASP) across Sidoarjo.
> * Total Sales Volume in 2023.
> * Most Popular Brand in Sidoarjo.
> * Highest Price Trend Region.
>
> 4. **Visualizations (Interactive Plotly Charts):**
> * **Line Chart:** Price Trend throughout 2023 (compare Brands).
> * **Bar Chart:** Sales volume per Region (Kecamatan).
> * **Pie/Donut Chart:** Market Share distribution in Sidoarjo.
> * **Heatmap:** Price intensity by Region vs Brand.
>
> 5. **Insights Section:**
> * Use an AI-generated text block explaining specific trends (e.g., 'Samsung prices dropped in Waru during Q3').
>
> Please provide the full Python code including required libraries (pandas, plotly, streamlit)."
---
### Opsi 2: Prompt untuk Front-End Modern (React + Tailwind CSS)
Gunakan prompt ini jika Anda ingin kode *front-end* yang lebih cantik, fleksibel, dan siap dikembangkan oleh developer web.
**Copy & Paste Prompt ini:**
> "Act as a UI/UX Engineer and React Developer. Create a **responsive analytic dashboard** for tracking Mobile Phone Prices in Sidoarjo (2023).
>
> **Tech Stack:** React, Tailwind CSS, Recharts (for charts), Lucide React (for icons).
>
> **Design Style:**
> * Glassmorphism or clean 'Bento Box' grid layout.
> * Color palette: Professional Blue/Slate with vibrant accents for charts.
>
> **Features to Implement:**
> 1. **Sidebar/Header Navigation:** Dashboard, Analytics, Reports, Settings.
> 2. **Control Panel (Slicers):**
> * Dropdown for 'Kecamatan' (Waru, Sidoarjo, etc.).
> * Dropdown for 'Brand' (iPhone, Samsung, etc.).
> * Range slider for Price.
> 3. **Main Dashboard Area:**
> * **KPI Cards:** Show Average Price, MoM Growth, Top District. Include trend indicators (green arrow up/red arrow down).
> * **Main Chart:** Interactive Area Chart showing price fluctuations from Jan-Dec 2023.
> * **Comparison Widget:** A bar chart comparing prices between 'Sidoarjo Kota' vs 'Krian'.
> * **Top Products Table:** List of top 5 phones with sparklines for price trends.
>
> Please write the React components and Tailwind classes to render this dashboard perfectly."
---
### Opsi 3: Prompt untuk Image Generation (Midjourney / DALL-E 3)
Gunakan prompt ini jika Anda hanya butuh **gambar visual** untuk presentasi atau ide desain, bukan kode program.
**Copy & Paste Prompt ini:**
> "High-fidelity UI/UX design of a modern web dashboard analytics platform. The dashboard tracks Smartphone Prices in Sidoarjo Indonesia.
>
> **Visual Elements:**
> * Dark mode sleek interface with neon graph accents (blue and purple).
> * Left sidebar with navigation icons.
> * Top bar with search and profile.
> * **Center:** A large interactive line graph showing price trends for 2023.
> * **Right panel:** A stylized map of Sidoarjo regions with heatmaps showing price density.
> * **Widgets:** Cards showing 'Samsung S23 Price', 'iPhone 14 Trend', 'Market Share in Waru'.
> * Dropdown menus and date pickers visible.
>
> **Style:** Dribbble aesthetic, clean typography (Inter font), futuristic financial data visualization, 4k resolution, highly detailed."
---
### Tips Tambahan untuk Hasil Terbaik:
1. **Data Lokasi:** Karena AI (seperti ChatGPT) tidak memiliki data *real-time* harga pasar di konter HP spesifik (misal: "Konter A di Jalan Majapahit"), prompt di atas meminta AI untuk membuat **Dummy Data** (Data tiruan) yang realistis. Jika Anda punya data asli (Excel), Anda bisa mengunggahnya ke ChatGPT (fitur Code Interpreter) dan meminta visualisasi berdasarkan file tersebut.
2. **Wilayah:** Saya menyertakan nama-nama kecamatan di Sidoarjo (Waru, Candi, Krian, dll) agar hasilnya terasa lokal dan relevan.
3. **Bahasa:** Prompt ditulis dalam Bahasa Inggris karena AI coding cenderung memberikan hasil kode yang lebih akurat dan bebas *bug* jika instruksinya dalam Bahasa Inggris.
OPSI 1
Act as a Senior Full Stack Developer and Data Scientist. Build a complete, production-ready web dashboard using Python and Streamlit.
Context:
- The dashboard analyzes smartphone market prices in Sidoarjo, East Java, Indonesia for the year 2023.
Technical requirements:
1. General:
- Use Python and Streamlit only (single-file app.py).
- Import and use: pandas, numpy, plotly.express, streamlit, and any standard-library modules you need.
- Include st.set_page_config(layout="wide", page_title="Sidoarjo Smartphone Market 2023 Dashboard").
- Make the code fully runnable as-is (no placeholders, no external API calls).
2. Data simulation:
- Since you don't have real local data, generate a realistic dummy dataset directly in the code.
- Use a fixed random seed for reproducibility.
- Simulate at least 5,000 rows covering the period 1 Jan 2023 – 31 Dec 2023.
- Columns:
* date: daily dates between 2023-01-01 and 2023-12-31
* brand: one of ["Samsung", "Apple", "Xiaomi", "Oppo", "Vivo", "Realme"]
* model_segment: one of ["High-end", "Mid-range", "Entry-level"]
* price_idr: numeric, realistic price in Indonesian Rupiah depending on brand and segment (e.g. Entry-level 1–3M, Mid-range 3–7M, High-end 7–25M)
* region: kecamatan in Sidoarjo, e.g. ["Waru", "Sidoarjo Kota", "Candi", "Taman", "Krian", "Gedangan", "Buduran", "Porong"]
* sales_volume: integer units sold.
- Create realistic patterns, e.g.:
* Different typical price levels by brand and segment.
* Seasonal effects over months (e.g. promo spikes).
* Slightly different price and volume behavior per region.
3. UI/UX:
- Use a modern, clean layout in wide mode.
- Sidebar filters ("Slicers"):
* Multiselect Brand.
* Multiselect Region.
* Date range slider (from 2023-01-01 to 2023-12-31).
- All metrics and charts must respond to the current filters.
- Add sections with clear subheaders: "Filters", "Key Metrics", "Visualizations", "Insights", "Raw Data".
4. Key Metrics (Top cards):
Compute and display four KPI cards at the top based on the filtered data:
- Average Selling Price (ASP) in IDR.
- Total Sales Volume in 2023.
- Most Popular Brand (by total sales volume).
- Highest Price Trend Region (region with the strongest positive price trend over time).
Format numbers nicely (thousand separators, etc.).
5. Visualizations (use Plotly, displayed via Streamlit):
- Line chart: price trend throughout 2023 by brand (e.g. average price per brand per month).
- Bar chart: total sales volume per region (kecamatan).
- Pie or donut chart: brand market share (by sales volume).
- Heatmap: average price by region vs brand.
All charts must honor the sidebar filters and be interactive.
6. Insights section:
- Create a dynamically generated text block that explains a few notable trends in the currently filtered data.
- Derive these insights programmatically (no external AI/API calls), for example:
* Identify the brand with the largest price decrease or increase in a period.
* Mention which region shows the highest ASP or volume.
- Present this as a short analytical summary paragraph.
7. Extras:
- Provide an expandable section to show the underlying filtered dataset as a table.
- Optionally add a download button to export the filtered data as CSV.
Output:
- Return the complete Streamlit application code in a single Python code block.
- Include all necessary imports and data-generation code so the app can be run immediately with: `streamlit run app.py`.
{
"messages": [
{
"role": "user",
"content": "Act as a Senior Full Stack Developer and Data Scientist. Build a complete, production-ready web dashboard using Python and Streamlit.\n\nContext:\n- The dashboard analyzes smartphone market prices in Sidoarjo, East Java, Indonesia for the year 2023.\n\nTechnical requirements:\n1. General:\n - Use Python and Streamlit only (single-file app.py).\n - Import and use: pandas, numpy, plotly.express, streamlit, and any standard-library modules you need.\n - Include st.set_page_config(layout=\"wide\", page_title=\"Sidoarjo Smartphone Market 2023 Dashboard\").\n - Make the code fully runnable as-is (no placeholders, no external API calls).\n\n2. Data simulation:\n - Since you don't have real local data, generate a realistic dummy dataset directly in the code.\n - Use a fixed random seed for reproducibility.\n - Simulate at least 5,000 rows covering the period 1 Jan 2023 – 31 Dec 2023.\n - Columns:\n * date: daily dates between 2023-01-01 and 2023-12-31\n * brand: one of [\"Samsung\", \"Apple\", \"Xiaomi\", \"Oppo\", \"Vivo\", \"Realme\"]\n * model_segment: one of [\"High-end\", \"Mid-range\", \"Entry-level\"]\n * price_idr: numeric, realistic price in Indonesian Rupiah depending on brand and segment (e.g. Entry-level 1–3M, Mid-range 3–7M, High-end 7–25M)\n * region: kecamatan in Sidoarjo, e.g. [\"Waru\", \"Sidoarjo Kota\", \"Candi\", \"Taman\", \"Krian\", \"Gedangan\", \"Buduran\", \"Porong\"]\n * sales_volume: integer units sold.\n - Create realistic patterns, e.g.:\n * Different typical price levels by brand and segment.\n * Seasonal effects over months (e.g. promo spikes).\n * Slightly different price and volume behavior per region.\n\n3. UI/UX:\n - Use a modern, clean layout in wide mode.\n - Sidebar filters (\"Slicers\"):\n * Multiselect Brand.\n * Multiselect Region.\n * Date range slider (from 2023-01-01 to 2023-12-31).\n - All metrics and charts must respond to the current filters.\n - Add sections with clear subheaders: \"Filters\", \"Key Metrics\", \"Visualizations\", \"Insights\", \"Raw Data\".\n\n4. Key Metrics (Top cards):\n Compute and display four KPI cards at the top based on the filtered data:\n - Average Selling Price (ASP) in IDR.\n - Total Sales Volume in 2023.\n - Most Popular Brand (by total sales volume).\n - Highest Price Trend Region (region with the strongest positive price trend over time).\n Format numbers nicely (thousand separators, etc.).\n\n5. Visualizations (use Plotly, displayed via Streamlit):\n - Line chart: price trend throughout 2023 by brand (e.g. average price per brand per month).\n - Bar chart: total sales volume per region (kecamatan).\n - Pie or donut chart: brand market share (by sales volume).\n - Heatmap: average price by region vs brand.\n All charts must honor the sidebar filters and be interactive.\n\n6. Insights section:\n - Create a dynamically generated text block that explains a few notable trends in the currently filtered data.\n - Derive these insights programmatically (no external AI/API calls), for example:\n * Identify the brand with the largest price decrease or increase in a period.\n * Mention which region shows the highest ASP or volume.\n - Present this as a short analytical summary paragraph.\n\n7. Extras:\n - Provide an expandable section to show the underlying filtered dataset as a table.\n - Optionally add a download button to export the filtered data as CSV.\n\nOutput:\n- Return the complete Streamlit application code in a single Python code block.\n- Include all necessary imports and data-generation code so the app can be run immediately with: `streamlit run app.py`.\n"
}
]
}
OPSI 2
{
"role": "user",
"content": "Act as a senior UI/UX engineer and React front-end developer.\n\nCreate a fully responsive analytics dashboard UI for tracking mobile phone prices in Sidoarjo, Indonesia, during the year 2023.\n\nRequirements:\n\n1) Tech stack:\n- React 18+ with functional components and hooks (no class components).\n- Tailwind CSS for all styling (no separate CSS files).\n- Recharts for data visualizations (area chart and bar chart).\n- Lucide React for icons.\n\n2) Data and assumptions:\n- Use realistic dummy data for 2023 (Jan–Dec) mobile phone prices in various districts (kecamatan) of Sidoarjo.\n- Include at least these districts: Sidoarjo Kota, Krian, Waru, Taman, Candi.\n- Include at least these brands: iPhone, Samsung, Oppo, Xiaomi, Vivo.\n- All data must be defined locally in the code (no API calls or external data sources).\n\n3) Layout and design:\n- Overall style: modern glassmorphism or clean bento box grid layout.\n- Color palette: professional blue/slate for the main UI, with vibrant accent colors for charts and highlights.\n- Use a 12-column responsive grid where appropriate.\n- The dashboard must look good on mobile, tablet, and desktop using responsive Tailwind classes (sm:, md:, lg:, xl:).\n- On smaller screens, collapse or hide the sidebar into a top menu or icon-only navigation.\n\n4) Features to implement:\n\nA. Navigation (sidebar and header):\n- Sidebar or top navigation with these sections: Dashboard, Analytics, Reports, Settings.\n- Show an app title such as Sidoarjo Phone Price Monitor 2023 and a small user/profile area in the header.\n- Use Lucide icons for navigation items and indicators, for example: LayoutDashboard, BarChart3, FileText, Settings, User, Smartphone.\n\nB. Control panel (filters / slicers):\n- A filter panel near the top of the main content area containing:\n - Dropdown for kecamatan (Waru, Sidoarjo Kota, Krian, Taman, Candi, etc.).\n - Dropdown for brand (iPhone, Samsung, Oppo, Xiaomi, Vivo, etc.).\n - A price range slider (min–max) that filters the data used in charts and tables.\n- Show clear labels and placeholder text.\n- When filters change, update the KPI cards, charts, and table based on the filtered data.\n\nC. Main dashboard content:\n\n1. KPI cards:\n- At least 3–4 KPI cards in a responsive grid.\n- KPIs to show:\n - Average price for the current filter selection.\n - Month-over-month (MoM) price growth percentage.\n - Top district by average price.\n - Optional: number of models or listings in the current selection.\n- Each card should include:\n - A label, main value, and a sub-label (for example: vs last month).\n - A trend indicator: green arrow up for positive change, red arrow down for negative (use Lucide icons such as TrendingUp and TrendingDown).\n - A subtle background or glass effect with hover states.\n\n2. Main chart (area chart):\n- An interactive area chart using Recharts that shows price fluctuations from Jan to Dec 2023.\n- X-axis: months (Jan–Dec).\n- Y-axis: average price.\n- The chart should respond to the active filters (kecamatan, brand, price range).\n- Include tooltip, legend, and smooth animation.\n- Optionally include two series, such as selected brand vs overall market.\n\n3. Comparison widget (bar chart):\n- A comparison section that uses a Recharts bar chart to compare average prices between Sidoarjo Kota and Krian.\n- The chart should respect the active brand and price range filters.\n- Show values clearly in the tooltip and labels.\n\n4. Top products table:\n- A table listing the top 5 phones (by average price or popularity) within the current filter selection.\n- Columns: rank, product name, brand, district, average price, trend.\n- For the trend column, render a tiny sparkline-style chart, approximated with a small Recharts LineChart or AreaChart embedded in each row.\n- Make the table responsive with horizontal scrolling on small screens.\n- Add basic row hover states and clear typography.\n\n5) Implementation details:\n- Use clean, composable React components, for example: DashboardLayout, Sidebar, Header, FilterPanel, KpiCards, MainAreaChart, ComparisonChart, TopProductsTable.\n- Use Tailwind utility classes directly in className attributes; do not use CSS-in-JS libraries.\n- Keep the code self-contained in a single file such as App.jsx or a small set of components shown in the same answer so it can be copied into a new project.\n- Add brief comments explaining key parts of the logic (filtering, calculating KPIs, etc.).\n\n6) Output format:\n- Return the answer as one or more code blocks containing valid React + JSX code (JavaScript, not TypeScript).\n- Ensure the code can run in a standard Vite or Create React App project that already has Tailwind, Recharts, and Lucide React installed and configured.\n- Do not include package.json or Tailwind configuration files; focus only on the React components and their JSX."
}
OPSI 3
{
"prompt": "High-fidelity UI/UX design of a modern desktop web analytics dashboard. The dashboard tracks smartphone prices in Sidoarjo, East Java, Indonesia.\n\nDark-mode, sleek, minimal interface with neon blue and purple graph accents, clean layout, and clear visual hierarchy.\n\nLayout:\n- Left sidebar with simple navigation icons and text labels.\n- Top bar with search field, notification icon, and user profile avatar.\n- Center: a large interactive-style line chart showing smartphone price trends throughout 2023, with multiple colored lines for different brands.\n- Right panel: a stylized simplified map of Sidoarjo districts (Waru, Candi, Krian, Taman, Sidoarjo, etc.) with a heatmap overlay showing price density.\n- Widgets: metric cards labeled Samsung Galaxy S23 price, iPhone 14 price trend, Market share in Waru, Average smartphone price in Sidoarjo.\n- Visible dropdown filters for brand and region, plus a date-range picker component.\n\nUse realistic-looking dummy numbers and data labels; exact real-world prices are not important.\n\nStyle: Dribbble-style product shot, clean modern typography similar to Inter, subtle gradients and glassmorphism, futuristic financial data visualization, ultra-detailed, 4K resolution, 16:9 aspect ratio, no people, no physical devices, focus only on the digital dashboard interface.",
"aspect_ratio": "16:9",
"output_resolution": "4k",
"language": "en"
}