Learn Python Library

⌘K
  2. Home
  4. Learn Python Library
  6. pywebview
  8. first program basic

first program basic

একদম শূন্য থেকে (scratch থেকে) TailwindCSS + Python Desktop App (webview) সেটআপ করার সম্পূর্ণ স্টেপ-বাই-স্টেপ দেখাচ্ছি।

এখন backend লাগবে না।
শুধু UI → TailwindCSS → Python window।

⭐ Step 0 — প্রয়োজনীয় জিনিস

আপনার কম্পিউটারে থাকতে হবে:

✔ Python
✔ pip

Tailwind আলাদা কিছু ইন্সটল করতে হবে না কারণ আমরা CDN ব্যবহার করছি।

⭐ Step 1 — একটি ফোল্ডার বানান

ধরুন:

tailwind_app/

এর ভিতরে থাকবে:

tailwind_app/
 ├── app.py
 ├── login.html
 └── main.html

⭐ Step 2 — pywebview ইন্সটল

Terminal / CMD-তে চালান:

pip install pywebview

⭐ Step 3 — login.html তৈরি করুন

login.html ফাইল তৈরি করে নিচের কোড পেস্ট করুন।

✔ login.html (scratch থেকে Tailwind Login UI)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Login</title>
</head>

<body class="bg-gray-900 flex items-center justify-center h-screen">

  <div class="bg-gray-800 p-8 rounded-lg shadow-lg w-80">
    <h1 class="text-white text-2xl font-bold text-center mb-6">Login</h1>

    <input
      id="username"
      class="w-full px-3 py-2 mb-4 rounded bg-gray-700 text-white focus:outline-none"
      placeholder="Username"
    >

    <input
      id="password"
      type="password"
      class="w-full px-3 py-2 mb-6 rounded bg-gray-700 text-white focus:outline-none"
      placeholder="Password"
    >

    <button
      onclick="window.location.href='main.html'"
      class="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded"
    >
      Login
    </button>
  </div>

</body>
</html>

⚡ এটা pure Tailwind — আপনি যেভাবে চান customize করতে পারবেন।

⭐ Step 4 — main.html তৈরি করুন

main.html ফাইল তৈরি করুন:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Main</title>
</head>

<body class="bg-gray-900 flex items-center justify-center h-screen">
  <h1 class="text-white text-3xl font-bold">Welcome to Main Screen!</h1>
</body>
</html>

⭐ Step 5 — Python Window Driver (Scratch থেকে কোড)

app.py ফাইল তৈরি করুন:

import webview

# শুধু login.html লোড করবে
window = webview.create_window(
    title="My Tailwind App",
    url="login.html",
    width=500,
    height=600
)

webview.start()

⚡ এখানে backend নেই।
⚡ শুধু UI চালান।
⚡ Windows app-এর মতো খুলবে।

⭐ Step 6 — রান করুন

Terminal-এ:

python3  app.py

আপনার TailwindCSS Login UI এখন Windows অ্যাপের মতো খুলে যাবে!
Login চাপলে main.html-এ চলে যাবে।

⭐ Step 7 — পরে Django backend কিভাবে লাগাবেন?

খুব সহজ:

  • login.html এর button-এ onclick function বদলাবেন
  • fetch(“http://127.0.0.1:8000/api/login“) দিয়ে Django POST call করবেন
  • pywebview window-এ django থেকে পাওয়া response দিয়ে next page-এ যাবেন

এগুলো আপনি যখন backend বানাবেন তখন আমি করে দেব।

🎉 আপনি এখন একদম scratch থেকে:

✔ TailwindCSS দিয়ে UI বানাতে পারবেন
✔ Python দিয়ে Desktop App বানাতে পারবেন
✔ Django backend পরে সহজেই add করতে পারবেন

🔥 চাইলে পরের ধাপও দেখাতে পারি:

  • Tailwind Dashboard
  • Sidebar menu
  • Multi page navigation
  • Django authentication connect
  • Dark / Light mode toggle

আপনার পরের টার্গেট কী?
(UI ডিজাইন? Dashboard? Authentication?)

How can we help?