Ур чадварAI
Код бичихгүйгээр дата систем бүтээх: n8n-ээр өгөгдөл цуглуулж, Claude-аар вэб хийлгэх заавар

Код бичихгүйгээр дата систем бүтээх: n8n-ээр өгөгдөл цуглуулж, Claude-аар вэб хийлгэх заавар

Anu Bilegdemberel
Багш
Anu Bilegdemberel

2 Үзсэн


7m


4 цагийн өмнө



Энэ хичээлийн тухай

Мэдээлэл цуглуулах нь ажлын зөвхөн тал хувь юм. Харин тэрхүү мэдээллийг хэрэглэгч харах боломжтой вэб платформ болгох нь жинхэнэ үнэ цэнийг бүтээдэг. Энэхүү хичээлээр бид n8n ашиглан Google Trends, Сошиал медиа эсвэл RSS сувгуудаас тренд мэдээллийг автоматаар шүүж, цуглуулсан датагаа Claude AI-д өгч, хэдхэн минутын дотор иж бүрэн вэб платформ (Frontend) хэрхэн хийлгэхийг үзэх болно.


Ашигласан промт:


Role: Чи бол "Full-stack Web Developer" болон "Data Visualization Expert" юм.

Task: Надад n8n-ээр дамжуулан цуглуулсан дараах тренд дата дээр үндэслэн орчин үеийн, интерактив "Trend Monitoring Dashboard" вэб платформ бүтээж өг.

Input Data (from n8n): [Энд n8n-ээс гарсан JSON өгөгдлийг хуулж тавина]

Requirements:

  1. Visuals: Датаг диаграмм (Charts), карт (Cards) болон шүүлтүүр (Filters) ашиглан маш цэвэрхэн харуул.
  2. Tech Stack: React, Tailwind CSS болон Lucide icons ашиглан "Single Page Application" маягаар код бич.
  3. Interactivity: Хэрэглэгч трендүүдийг салбараар нь шүүх, дэлгэрэнгүй мэдээллийг модал (modal) цонхоор харах боломжтой байх.
  4. Modern UI: "Dark mode" болон "Light mode" дэмждэг, маш "Clean" дизайнтай байна.

Output: Бүх кодыг Claude Artifact-аар харуулж, би шууд "Preview" хийх боломжтой байх ёстой.