Forem: Mehedi Hasan

WakaTime: কোডিং ট্র্যাকিং টুল – প্রতিদিনের কোডিং সময় কিভাবে হিসাব করবেন? শিখুন WakaTime দিয়ে

Mehedi Hasan — Sun, 27 Apr 2025 00:50:58 +0000

WakaTime কী?
WakaTime একটি অটোমেটেড টাইম ট্র্যাকিং টুল, যেটি আপনার কোডিং করার সময় ও কোন প্রজেক্টে কত সময় ব্যয় করেছেন – সেই ডেটা বিশ্লেষণ করে। এটি ডেভেলপারদের জন্য দারুণ একটি Productivity টুল। বিশেষ করে যারা প্রতিদিন অনেকগুলো প্রজেক্ট নিয়ে কাজ করেন, তাদের জন্য এটি খুবই সহায়ক।

WakaTime কেন ব্যবহার করবেন?
✅ কোন প্রজেক্টে আপনি কত সময় দিচ্ছেন – সেই রিপোর্ট পাওয়া যায়।

কোন ফাইল বা কোন প্রজেক্টে কাজ করেছেন, কত ঘন্টা লেগেছে – সব অটোমেটিক রিপোর্ট করে।

✅ প্রতিদিন, সপ্তাহে বা মাসে কোডিং হ্যাবিট দেখা যায়।

দিনের বেলা বেশি কোড করেন নাকি রাতে? সপ্তাহের কোন দিনে বেশি Active থাকেন? WakaTime তা স্পষ্ট করে দেয়।

✅ নিজের Productivity বাড়ানোর জন্য দারুণ সহায়ক।

আপনি কোন কাজে বেশি সময় দিচ্ছেন আর কোন কাজে কম – এটা দেখে নিজের কাজের গতি ম্যানেজ করতে পারবেন।

✅ Freelancer বা অফিসিয়াল রিপোর্টিংয়ে সময় ট্র্যাকিং হিসেবেও ব্যবহার করা যায়।

আপনি চাইলে ক্লায়েন্টকে প্রমাণ হিসেবে দেখাতে পারেন আপনি ঠিক কত সময় কাজ করেছেন, কোন কোন ফাইলে পরিবর্তন করেছেন।

✅ Leaderboard ফিচার দিয়ে অন্য ডেভেলপারদের সাথে তুলনা করতে পারবেন।

WakaTime এর Global বা Private Leaderboard-এ দেখে নিতে পারবেন আপনি কত সময় কোড করেছেন অন্যদের তুলনায়। এটা একধরনের Friendly Competition তৈরি করে।

✅ Project Insights দিয়ে আলাদা করে প্রতিটি প্রজেক্টের জন্য বিশ্লেষণ দেখতে পারবেন।

কোন প্রজেক্টে সময় বেশি লাগছে, কোন প্রজেক্টে কম – তা দেখার জন্য আলাদা ড্যাশবোর্ড থাকে।

✅ Goals সেট করতে পারবেন।

যেমন আপনি টার্গেট করতে পারেন, "প্রতিদিন অন্তত ৩ ঘণ্টা কোড করবো" – WakaTime আপনাকে ট্র্যাক করে দেখাবে আপনি টার্গেট পূরণ করছেন কিনা।

✅ ডিফারেন্ট কোডিং ভাষার রিপোর্ট পাওয়া যায়।

কত সময় Python এ, কত সময় JavaScript এ, কত সময় Dart বা PHP-তে কোড করছেন – সব সুন্দরভাবে আলাদা আলাদা দেখায়।

✅ IDE বা Editor স্যুইচ করলেও সমস্যা নেই।

একবার WakaTime প্লাগইন ইনস্টল করলেই, আপনি যে কোন IDE বা Code Editor (VSCode, JetBrains, Sublime Text, ইত্যাদি) থেকে একসাথে ট্র্যাকিং চালাতে পারবেন।

✅ Privacy কন্ট্রোল আপনার হাতে।

WakaTime-এ চাইলে আপনি কিছু ফাইল বা প্রজেক্টের ট্র্যাকিং বন্ধ করতে পারেন, যেন প্রাইভেট কাজ গোপন থাকে।

📌 সংক্ষেপে বললে, WakaTime আপনাকে—
কোথায় সময় দিচ্ছেন তা জানায়।

Productive হতে সাহায্য করে।

রিপোর্টিং আর টার্গেট সেটিংয়ে দারুণ সুবিধা দেয়।

সবার সাথে Friendly Leaderboard এ যুক্ত হতে দেয়।

কিভাবে শুরু করবেন?
ধাপ ১: সাইন আপ করুন
প্রথমে https://wakatime.com/ ওয়েবসাইটে যান।

GitHub দিয়ে সাইন ইন করা যায়

ইমেইল দিয়েও একাউন্ট খোলা যায়

ধাপ ২: আপনার Code Editor এ WakaTime প্লাগইন ইনস্টল করুন
WakaTime প্রায় সব জনপ্রিয় কোড এডিটর সাপোর্ট করে:

VS Code

Sublime Text

IntelliJ IDEA

Atom

PyCharm

এবং আরও অনেক

যেমন VS Code এর ক্ষেত্রে:

VS Code ওপেন করুন

Extensions-এ গিয়ে “WakaTime” লিখে সার্চ করুন

“WakaTime” এক্সটেনশনটি ইনস্টল করুন

ধাপ ৩: API Key সেটআপ করুন
ইনস্টল করার পর WakaTime আপনাকে একটি API Key চাইবে।

আপনার WakaTime Dashboard থেকে API Key কপি করুন

Editor ইনস্টলেশন উইজার্ডে সেটা পেস্ট করুন

ধাপ ৪: এখন কোড করলেই টাইম ট্র্যাক হবে!
আপনি যখনই কোড করবেন, WakaTime আপনার কাজের সময়, কোন ফাইল বা প্রজেক্টে সময় ব্যয় করছেন – সব ট্র্যাক করবে।

ড্যাশবোর্ড দেখা ও বিশ্লেষণ করা
https://wakatime.com/dashboard এই লিংকে গিয়ে আপনি দেখতে পারবেন:

কোন ভাষায় কত সময় কোড করেছেন

কোন প্রজেক্টে কত সময় লেগেছে

আপনার প্রতিদিনের কোডিং গ্রাফ

Productive টাইম বনাম Idle টাইম

ফ্রিল্যান্সারদের জন্য আলাদা সুবিধা
যারা Fiverr, Upwork বা অন্য মার্কেটপ্লেসে কাজ করেন, তাদের জন্য এটা প্রমাণ দেখানোর মতো কাজ করে। আপনি রিপোর্ট হিসেবে ক্লায়েন্টকে দেখাতে পারেন আপনি কত সময় কাজ করেছেন।

WakaTime আপনার কোডিং লাইফকে আরও গুছিয়ে নিতে সাহায্য করে। আপনি যদি প্রতিদিন কোড করেন, তাহলে এটা আপনার নিত্যদিনের সঙ্গী হতে পারে। নিজে Try করে দেখুন, এক সপ্তাহ পর নিজেই বুঝতে পারবেন কতটা উপকারে আসছে।

ProgrammerHasan

💥 Sentry.io: আপনার অ্যাপ্লিকেশনের ত্রুটি খুঁজে বের করার এক বিশ্বস্ত সমাধান

Mehedi Hasan — Sun, 27 Apr 2025 00:19:11 +0000

🔍 Sentry.io কী?
Sentry.io একটি ওপেন-সোর্স বাগ ট্র্যাকিং টুল যা রিয়েল-টাইমে অ্যাপ্লিকেশনের ত্রুটি (error), ক্র্যাশ, এবং পারফরম্যান্স সমস্যা শনাক্ত ও রিপোর্ট করে। এটি ডেভেলপারদেরকে দ্রুত সমস্যার উৎস খুঁজে বের করতে সাহায্য করে, যাতে করে তারা দ্রুত সমাধান করতে পারে।

মূল বৈশিষ্ট্যগুলো হলো:

রিয়েল-টাইম Error মনিটরিং

Stack trace সহ error details

Issue grouping ও tagging

GitHub, Slack সহ নানা প্ল্যাটফর্মের সাথে integration

Performance monitoring (APM)

🛠 Laravel-এ Sentry সেটআপ করার ধাপসমূহ
Laravel-এ Sentry ইনস্টল করতে আপনাকে নিচের ধাপগুলো অনুসরণ করতে হবে:

১. Composer দিয়ে প্যাকেজ ইনস্টল করুন:

composer require sentry/sentry-laravel

২. .env ফাইলে DSN কনফিগার করুন:

SENTRY_LARAVEL_DSN=https://<your_public_key>@o<org_id>.ingest.sentry.io/<project_id>
SENTRY_TRACES_SAMPLE_RATE=1.0

⚠️ DSN পাওয়া যাবে Sentry.io তে প্রজেক্ট তৈরির পর।

৩. config/app.php বা config/sentry.php (auto-published হলে) কনফিগার চেক করুন

php artisan vendor:publish --tag=sentry-config

৪. Laravel exception বা লগ ক্যাপচার করতে:
Laravel এর Handler.php ফাইল খুলে report() মেথডে যুক্ত করুন:

use Sentry\Laravel\Facade as Sentry;

public function report(Throwable $exception)
{
    if (app()->bound('sentry') && $this->shouldReport($exception)) {
        Sentry::captureException($exception);
    }

    parent::report($exception);
}

নিচে একটি Real Laravel কোড উদাহরণ দেওয়া হলো যেখানে Sentry দিয়ে একটি exception ধরা হচ্ছে এবং তা Sentry dashboard-এ রিপোর্ট করা হচ্ছে:

✅ Laravel কোড (Sentry integration)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Exception;
use function Sentry\captureException;

class TestController extends Controller
{
    public function index()
    {
        try {
            // ধরুন এখানে একটি সমস্যা তৈরি হচ্ছে
            $result = 10 / 0; // Division by zero exception
        } catch (Exception $e) {
            // Sentry তে exception পাঠানো হচ্ছে
            captureException($e);

            // কাস্টম রেসপন্স
            return response()->json([
                'message' => 'Something went wrong!',
                'error' => $e->getMessage(),
            ], 500);
        }

        return response()->json([
            'result' => $result,
        ]);
    }
}

🛠 কাজটি কীভাবে করে?
10 / 0 একটি DivisionByZeroError তৈরি করবে।

captureException($e) এই লাইনে Sentry API-র মাধ্যমে ত্রুটি রিপোর্ট করা হবে।

আপনি আপনার Sentry Dashboard-এ সাথে সাথে এই error লগ দেখতে পাবেন, Stack Trace সহ।

Laravel-এর যেকোনো সার্ভিস, কাস্টম লজিক, অথবা ব্যাকগ্রাউন্ড জবের মধ্যে এই প্যাটার্ন ব্যবহার করা যায়।

এখন Laravel অ্যাপ্লিকেশনে কোনো ত্রুটি হলে তা Sentry dashboard-এ দেখা যাবে।

📱 Flutter-এ Sentry সেটআপ করার ধাপসমূহ
১. pubspec.yaml এ dependency যোগ করুন:

dependencies:
  sentry_flutter: ^7.10.1 # সর্বশেষ ভার্সন চেক করুন

২. main.dart ফাইলে ইনিশিয়ালাইজ করুন:

import 'package:flutter/material.dart';
import 'package:sentry_flutter/sentry_flutter.dart';

Future<void> main() async {
  await SentryFlutter.init(
    (options) {
      options.dsn = 'https://<your_public_key>@o<org_id>.ingest.sentry.io/<project_id>';
      options.tracesSampleRate = 1.0; // পারফরম্যান্স মনিটরিংয়ের জন্য
    },
    appRunner: () => runApp(MyApp()),
  );
}
৩. ত্রুটি রিপোর্ট করার উদাহরণ:
try {
  throw Exception('এইটা একটা টেস্ট এক্সসেপশন');
} catch (exception, stackTrace) {
  await Sentry.captureException(
    exception,
    stackTrace: stackTrace,
  );
}

নিচে আমি Laravel ও Flutter – উভয়ের জন্য একটি করে ডেমো কোড এবং Sentry.io Dashboard-এ কেমন করে error দেখা যায় তার স্ক্রিনশট লুক কেমন হয়, তাও উল্লেখ করলাম।

📌 Laravel ডেমো কোড (Sentry সহ)

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Exception;
use function Sentry\captureException;

class PaymentController extends Controller
{
    public function processPayment(Request $request)
    {
        try {
            // কল্পনা করুন এখানে পেমেন্ট গেটওয়ের মাধ্যমে ট্রানজেকশন হচ্ছে
            if (!$request->has('amount')) {
                throw new Exception("Amount parameter is missing");
            }

            // এখানে আরও পেমেন্ট প্রসেসিং কোড থাকতে পারে...

            return response()->json(['message' => 'Payment processed']);
        } catch (Exception $e) {
            captureException($e); // Sentry তে exception পাঠানো হচ্ছে

            return response()->json([
                'error' => 'Payment failed',
                'message' => $e->getMessage()
            ], 500);
        }
    }
}

এই রকম একটা exception আপনি যখন হিট করবেন /api/payment (amount ছাড়া), তখন Sentry ড্যাশবোর্ডে সেটি এমনভাবে দেখা যাবে:

🖼️ Sentry.io Dashboard-এ কেমন দেখা যায় (Laravel)

Exception: Amount parameter is missing
File: PaymentController.php
Line: 15
User: ID 34 (authenticated)
Tags: environment=production
Sentry Stacktrace এ পূর্ণ কোডের লাইনের breakdown, context ও variable values থাকে।

📱 Flutter ডেমো কোড (Sentry সহ)

import 'package:flutter/material.dart';
import 'package:sentry_flutter/sentry_flutter.dart';

void main() async {
  await SentryFlutter.init(
    (options) {
      options.dsn = 'https://<your_public_key>@o<org>.ingest.sentry.io/<project_id>';
    },
    appRunner: () => runApp(MyApp()),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sentry Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Sentry Example')),
        body: Center(
          child: ElevatedButton(
            child: Text('Generate Error'),
            onPressed: () async {
              try {
                throw Exception("Manual Flutter Exception");
              } catch (error, stackTrace) {
                await Sentry.captureException(error, stackTrace: stackTrace);
              }
            },
          ),
        ),
      ),
    );
  }
}

🖼️ Sentry.io Dashboard-এ কেমন দেখা যায় (Flutter)

Exception: Manual Flutter Exception
Platform: android
User: anonymous
Stack Trace:
MyApp.build.<anonymous closure>
MainActivity.kt -> FlutterMainActivity
এছাড়া Geo, OS version, device info ইত্যাদিও পাওয়া যাবে।

🧪 কেন Sentry ব্যবহার করবেন?
✅ ডেভেলপার হিসেবে আপনি রিয়েল টাইমে সমস্যা জানবেন

✅ ইউজার এক্সপেরিয়েন্স ভালো রাখতে পারবেন

✅ ক্র্যাশ রিপোর্ট বিশ্লেষণ সহজ হবে

✅ টিমে কাজের ফ্লো আরও মসৃণ হবে

✨ উপসংহার
Laravel বা Flutter — আপনি যেটিই ব্যবহার করেন না কেন, Sentry আপনাকে ডেভেলপমেন্ট লাইফ সাইকেল আরও প্রোফেশনাল ও প্রোঅ্যাকটিভ করতে সাহায্য করবে। এতে আপনি শুধু বাগ ফিক্স করতেই পারবেন না, বরং সময়মতো অ্যাকশান নিয়ে ইউজারের ট্রাস্টও অর্জন করতে পারবেন।

ProgrammerHasan

নতুন Flutter ডেভেলপারদের জন্য সেরা স্টেট ম্যানেজমেন্ট: একটি প্রারম্ভিক গাইড উদাহরণসহ

Mehedi Hasan — Mon, 24 Mar 2025 07:30:47 +0000

যখন আপনি প্রথম Flutter-এ অ্যাপ তৈরি করতে শুরু করেন, তখন আপনার অ্যাপের স্টেট কীভাবে ম্যানেজ করবেন, তা বুঝতে কিছুটা বিভ্রান্তিকর হতে পারে। স্টেট ম্যানেজমেন্ট গুরুত্বপূর্ণ কারণ এটি নিশ্চিত করে যে আপনার অ্যাপের UI ডেটাতে পরিবর্তন হওয়ার সাথে সাথে সঠিকভাবে প্রতিক্রিয়া জানায়। কিন্তু একটি নতুন ডেভেলপার হিসেবে, আপনি কোন পদ্ধতি ব্যবহার করবেন তা ঠিক করা কঠিন হতে পারে। আপনি কি Provider ব্যবহার করবেন? Riverpod, GetX বা Bloc সম্পর্কে কী?

এই আর্টিকেলে, আমি আপনাকে বিভিন্ন স্টেট ম্যানেজমেন্ট পদ্ধতি নিয়ে পরিচিত করাবো, সবচেয়ে সহজ পদ্ধতি (যেমন setState) থেকে শুরু করে আরও উন্নত পদ্ধতিগুলি পর্যন্ত। আমি বাস্তব উদাহরণও দেব, যাতে আপনি দেখতে পারেন প্রতিটি পদ্ধতি কীভাবে কাজ করে।

স্টেট ম্যানেজমেন্ট কেন গুরুত্বপূর্ণ?

একটি সাধারণ Flutter অ্যাপে, স্টেট পরিবর্তন প্রতিটি স্থানে ঘটে। একটি শপিং অ্যাপ কল্পনা করুন: যখন আপনি কার্টে আইটেম যোগ করেন, তখন মোট মূল্য আপডেট হওয়া উচিত। যদি আপনি একটি সোশ্যাল মিডিয়া অ্যাপ তৈরি করেন, তাহলে যখন কেউ একটি পোস্টে মন্তব্য করে, তখন মন্তব্যটি অবিলম্বে অ্যাপ রিফ্রেশ না করেই দেখা উচিত।

যদি সঠিকভাবে স্টেট ম্যানেজমেন্ট না করা হয়, তবে আপনার অ্যাপ পরিবর্তনগুলির প্রতি সঠিকভাবে প্রতিক্রিয়া জানাবে না এবং ব্যবহারকারীর অভিজ্ঞতা হতাশাজনক হতে পারে।

নতুনদের জন্য স্টেট ম্যানেজমেন্ট অপশনগুলির পর্যালোচনা

Flutter অনেকগুলি উপায়ে স্টেট ম্যানেজ করতে দেয়, তবে এখানে কিছু জনপ্রিয় পদ্ধতির তালিকা দেওয়া হলো:

setState (বিল্ট-ইন, ছোট অ্যাপের জন্য)
Provider (নতুন ডেভেলপারদের জন্য আদর্শ, স্কেলযোগ্য)
Riverpod (Provider এর একটি উন্নত সংস্করণ)
GetX (সরল, ন্যূনতম বয়লারপ্লেট)
Bloc (বড় এবং জটিল অ্যাপের জন্য)

1. setState – Flutter এর বিল্ট-ইন স্টেট ম্যানেজমেন্ট

setState হল Flutter-এ স্টেট ম্যানেজ করার সবচেয়ে মৌলিক এবং সহজ পদ্ধতি। এটি ছোট অ্যাপস বা উইজেটগুলির জন্য উপযুক্ত, যেখানে স্টেট অনেক অংশে ভাগ করা হয় না।

উদাহরণ: Counter অ্যাপ setState এর মাধ্যমে

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  void _decrement() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count: $_count'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(icon: Icon(Icons.remove), onPressed: _decrement),
                IconButton(icon: Icon(Icons.add), onPressed: _increment),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

setState এর সুবিধা:

সহজে বুঝতে এবং ব্যবহার করতে পারেন।
ছোট, লোকালাইজড স্টেট পরিবর্তনের জন্য সেরা।

সামান্য অসুবিধা:

বড় অ্যাপের জন্য স্কেলযোগ্য নয়।
যদি স্টেট অনেক উইজেটে ভাগ করতে হয়, তবে এটি অপ্রত্যাশিতভাবে জটিল হতে পারে।

2. Provider – নতুনদের জন্য আদর্শ

Provider নতুন ডেভেলপারদের জন্য একটি সহজ এবং জনপ্রিয় পদ্ধতি। এটি Flutter টিমের দ্বারা অফিসিয়ালি সুপারিশ করা হয়েছে এবং অ্যাপের বিভিন্ন অংশে স্টেট শেয়ার করার জন্য কার্যকরী।

উদাহরণ: Counter অ্যাপ Provider দিয়ে

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Provider Example: Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count:'),
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text('${counter.count}');
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () => context.read<Counter>().decrement(),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () => context.read<Counter>().increment(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Provider এর সুবিধা:

শেখা এবং ব্যবহার করা সহজ।
Flutter দ্বারা সুপারিশিত।
অ্যাপ বৃদ্ধি পেলে স্কেলযোগ্য।

সামান্য অসুবিধা:

setState এর তুলনায় কিছুটা বেশি সেটআপ প্রয়োজন।

3. Riverpod – Provider এর পরবর্তী স্তর

যদি আপনি Provider এ অভ্যস্ত হয়ে থাকেন, তবে Riverpod পরবর্তী পদক্ষেপ। এটি Provider এর কিছু সীমাবদ্ধতা ঠিক করে এবং আরও বেশি নমনীয় করে তোলে। Riverpod টেস্টিং সহজ করে এবং কিছু সাধারণ ভুল, যেমন উইজেট ট্রি পুনরায় বিল্ড হওয়ার সময় স্টেট হারানোর সমস্যা প্রতিরোধ করে।

উদাহরণ: Riverpod দিয়ে স্টেট ম্যানেজমেন্ট

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateNotifierProvider<Counter, int>((ref) => Counter());

class Counter extends StateNotifier<int> {
  Counter() : super(0);

  void increment() => state++;
  void decrement() => state--;
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Scaffold(
      appBar: AppBar(title: Text('Riverpod Example: Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count: $count'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () => ref.read(counterProvider.notifier).decrement(),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () => ref.read(counterProvider.notifier).increment(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Riverpod এর সুবিধা:

Provider এর চেয়ে শক্তিশালী।
বড় অ্যাপের জন্য উপযুক্ত।
Provider এর সাধারণ ভুলগুলো দূর করে।

সামান্য অসুবিধা:

Provider এর চেয়ে কিছুটা জটিল।

4. GetX – ন্যূনতম বয়লারপ্লেট

GetX একটি জনপ্রিয় স্টেট ম্যানেজমেন্ট সলিউশন, যা সহজ এবং ন্যূনতম বয়লারপ্লেট প্রয়োজন। এটি স্টেট ম্যানেজমেন্ট, ডিপেন্ডেন্সি ইনজেকশন, এবং রাউটিংকে এক প্যাকেজে একত্রিত করে, যা ছোট থেকে মাঝারি অ্যাপগুলি দ্রুত তৈরি করার জন্য উপযুক্ত।

উদাহরণ: GetX দিয়ে Counter অ্যাপ

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() => count++;
  void decrement() => count--;
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Example: Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Count:'),
            Obx(() => Text('${controller.count}')),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: controller.decrement,
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: controller.increment,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

GetX এর সুবিধা:

ন্যূনতম সেটআপ এবং বয়লারপ্লেট।
এক প্যাকেজে একাধিক কার্যকারিতা একত্রিত করে।

সামান্য অসুবিধা:

বড় অ্যাপগুলিতে জটিল হয়ে উঠতে পারে।
কিছু ডেভেলপার "অল-ইন-ওয়ান" পদ্ধতিটি সীমাবদ্ধ মনে করেন।

5. Bloc – বড়, জটিল অ্যাপসের জন্য

Bloc একটি শক্তিশালী স্টেট ম্যানেজমেন্ট সলিউশন, যা Business Logic Component (BLoC) প্যাটার্ন অনুসরণ করে এবং সেই অ্যাপগুলির জন্য উপযুক্ত যেখানে UI এবং বিজনেস লজিকের মধ্যে স্পষ্ট পৃথকীকরণ প্রয়োজন। এটি শেখা কঠিন হতে পারে, কিন্তু বড় অ্যাপগুলির জন্য খুব শক্তিশালী।

উপসংহার

আপনার অ্যাপের জটিলতা এবং Flutter নিয়ে আপনার অভিজ্ঞতার উপর নির্ভর করে সঠিক স্টেট ম্যানেজমেন্ট পদ্ধতি চয়ন করা গুরুত্বপূর্ণ।

ছোট অ্যাপ বা নতুন ডেভেলপারদের জন্য: setState এবং Provider সেরা প্রারম্ভিক পদ্ধতি।
আরও জটিল অ্যাপসের জন্য: Riverpod, GetX অথবা Bloc যথাযথ পদ্ধতি।

আপনি যত বেশি প্রকল্প তৈরি করবেন, ততই বিভিন্ন সলিউশন পরীক্ষা করে দেখুন, যাতে আপনি বুঝতে পারেন কোনটি আপনার জন্য সবচেয়ে ভালো!

AI দিয়ে কোডিং: সুবিধা নাকি বিপদ?

Mehedi Hasan — Mon, 24 Mar 2025 06:41:52 +0000

প্রযুক্তির অগ্রগতির সাথে সাথে কৃত্রিম বুদ্ধিমত্তা (AI) আমাদের জীবনের নানা ক্ষেত্রে প্রভাব বিস্তার করছে। প্রোগ্রামিং ও সফটওয়্যার ডেভেলপমেন্টেও AI-এর ব্যবহার দিন দিন বাড়ছে। অনেক ডেভেলপার এখন ChatGPT, Copilot, বা অন্যান্য AI টুল ব্যবহার করে দ্রুত কোড লিখতে বা সমস্যার সমাধান করতে চাইছেন। কিন্তু প্রশ্ন হচ্ছে, AI দিয়ে কোডিং কি সত্যিই সুবিধাজনক, নাকি দীর্ঘমেয়াদে এটি আমাদের দক্ষতা কমিয়ে দিচ্ছে?
AI কি সত্যিই সফটওয়্যার ডেভেলপমেন্টের জন্য যথেষ্ট?

AI দিয়ে কোডিং: সুবিধা নাকি বিপদ?

linkedin.com

Vite এবং React অ্যাপ প্রোডাকশনে ডিপ্লয় করা

Mehedi Hasan — Sun, 23 Mar 2025 18:00:00 +0000

React হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ইন্টার‌্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়। অন্যদিকে, Vite হল একটি আধুনিক বিল্ড টুল যা অত্যন্ত দ্রুত এবং কার্যকর অ্যাপ তৈরি করতে সহায়তা করে। Vite এর সাহায্যে React অ্যাপ্লিকেশন ডেভেলপ করা সহজ এবং হালকা। এই নিবন্ধে, আমরা কিভাবে একটি Vite-ভিত্তিক React অ্যাপ প্রোডাকশনে ডিপ্লয় করা যায় তা শিখব। আমরা বিশেষভাবে Netlify, Vercel, এবং DigitalOcean প্ল্যাটফর্মগুলোতে ডিপ্লয় করা নিয়ে আলোচনা করব।

১. React + Vite প্রজেক্ট সেটআপ

আপনার প্রথম পদক্ষেপ হলো একটি React + Vite প্রজেক্ট তৈরি করা। নিচের ধাপগুলো অনুসরণ করুন:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

এখানে Vite একটি দ্রুত ডেভেলপমেন্ট সার্ভার সরবরাহ করে। এখন, প্রজেক্ট তৈরি হয়ে গেলে, আমরা এটিকে প্রোডাকশনে নিয়ে যাব।

২. Vite প্রোডাকশন বিল্ড

প্রোডাকশনে React অ্যাপ ডিপ্লয় করার জন্য প্রথমে আমাদের অ্যাপের প্রোডাকশন বিল্ড তৈরি করতে হবে। এই প্রক্রিয়া Vite ব্যবহার করে খুবই দ্রুত এবং সহজ।

npm run build

এটি dist/ ফোল্ডারে একটি প্রোডাকশন রেডি বিল্ড তৈরি করবে। এরপর আমরা আমাদের পছন্দের হোস্টিং প্ল্যাটফর্মে এটি ডিপ্লয় করবো।

৩. Netlify তে ডিপ্লয় করা

Netlify একটি জনপ্রিয় হোস্টিং প্ল্যাটফর্ম যা স্ট্যাটিক সাইট ওয়েবসাইট হোস্ট করতে ব্যবহৃত হয়।

ধাপ ১: Netlify অ্যাকাউন্ট তৈরি বা লগইন

Netlify তে একটি অ্যাকাউন্ট তৈরি করুন অথবা আপনার GitHub অ্যাকাউন্ট দিয়ে লগইন করুন।

ধাপ ২: প্রজেক্ট ডিপ্লয়

Netlify ড্যাশবোর্ডে গিয়ে "New site from Git" নির্বাচন করুন। এরপর GitHub থেকে আপনার রেপোজিটরি সিলেক্ট করুন।

ধাপ ৩: বিল্ড সেটিংস

Netlify আপনার Vite প্রজেক্ট বিল্ড করতে npm run build কমান্ড ব্যবহার করবে এবং আউটপুট ডিরেক্টরি হিসেবে dist/ নির্ধারণ করুন।

Build Command: npm run build
Publish directory: dist/

ধাপ ৪: ডিপ্লয়

ডিপ্লয় বোতাম চাপুন, এবং কিছুক্ষণের মধ্যেই আপনার সাইট লাইভ হয়ে যাবে।

৪. Vercel তে ডিপ্লয় করা

Vercel React অ্যাপ্লিকেশন হোস্ট করার জন্য একটি দ্রুত ও কার্যকরী প্ল্যাটফর্ম।

ধাপ ১: Vercel অ্যাকাউন্ট তৈরি বা লগইন

Vercel তে একটি অ্যাকাউন্ট তৈরি করুন অথবা GitHub এর মাধ্যমে লগইন করুন।

ধাপ ২: প্রজেক্ট আমদানি

ড্যাশবোর্ড থেকে "New Project" এ ক্লিক করুন এবং আপনার GitHub রেপোজিটরি লিঙ্ক করুন।

ধাপ ৩: বিল্ড সেটিংস কাস্টমাইজ

Vercel স্বয়ংক্রিয়ভাবে বিল্ড এবং ডিপ্লয় করে, তবে আপনি চাইলে বিল্ড সেটিংস চেক করতে পারেন। বিল্ড কমান্ড হিসেবে npm run build এবং আউটপুট ডিরেক্টরি dist/ দিন।

ধাপ ৪: ডিপ্লয়

ডিপ্লয় প্রক্রিয়া সম্পন্ন হলে, আপনার সাইট লাইভ হয়ে যাবে এবং একটি URL এর মাধ্যমে অ্যাক্সেসযোগ্য হবে।

৫. DigitalOcean এ ডিপ্লয় করা

DigitalOcean একটি ক্লাউড ইনফ্রাস্ট্রাকচার প্ল্যাটফর্ম যা ডাইন্যামিক ও স্ট্যাটিক সাইট হোস্টিংয়ের জন্য চমৎকার।

ধাপ ১: DigitalOcean Droplet তৈরি

DigitalOcean এ একটি Droplet তৈরি করুন এবং Node.js পরিবেশ সেটআপ করুন।

ধাপ ২: অ্যাপ বিল্ড

Droplet এ SSH এর মাধ্যমে লগইন করুন এবং আপনার React অ্যাপ রিপোজিটরি ক্লোন করুন। এরপর প্রোডাকশন বিল্ড তৈরি করুন:

npm install
npm run build

ধাপ ৩: Nginx কনফিগার করা

Droplet এ Nginx ইনস্টল করুন এবং এটি কনফিগার করুন যাতে dist/ ফোল্ডার থেকে ফাইলগুলো পরিবেশন করতে পারে।

sudo apt install nginx

তারপর Nginx কনফিগারেশন ফাইলে dist/ ফোল্ডারটি যুক্ত করুন এবং সার্ভার পুনরায় চালু করুন।

৬. CI/CD পাইপলাইন সেটআপ

Netlify এবং Vercel উভয় প্ল্যাটফর্মেই স্বয়ংক্রিয় Continuous Integration / Continuous Deployment (CI/CD) ব্যবস্থাপনা রয়েছে। এর মাধ্যমে আপনি যখনই আপনার কোড GitHub-এ পুশ করবেন, স্বয়ংক্রিয়ভাবে একটি নতুন বিল্ড তৈরি এবং ডিপ্লয় হবে। আপনি চাইলে নিজস্ব GitHub Actions বা DigitalOcean-এর App Platform ব্যবহার করে নিজস্ব CI/CD পাইপলাইন কনফিগার করতে পারেন।

উপসংহার

React এবং Vite ব্যবহার করে অ্যাপ ডিপ্লয় করা একটি সহজ এবং দ্রুত প্রক্রিয়া। Netlify এবং Vercel এর মত প্ল্যাটফর্মগুলো স্ট্যাটিক সাইট হোস্টিংকে খুব সহজ করে দিয়েছে। অন্যদিকে, DigitalOcean একটি উচ্চ কাস্টমাইজড সলিউশন অফার করে। উপযুক্ত প্ল্যাটফর্ম বেছে নিয়ে আপনি সহজেই আপনার অ্যাপ প্রোডাকশনে ডিপ্লয় করতে পারেন এবং আপনার ইউজারদের কাছে পৌঁছে দিতে পারেন।

শুভ ডিপ্লয়মেন্ট!

Vite Plugins to Supercharge Your React Development

Mehedi Hasan — Sat, 22 Mar 2025 09:46:00 +0000

Vite React অ্যাপ ডেভেলপমেন্টকে সহজতর ও দ্রুততর করে তোলে। তবে এর ক্ষমতা বাড়াতে বিভিন্ন প্লাগইন ব্যবহার করা যেতে পারে। এই আর্টিকেলে আমরা কিছু গুরুত্বপূর্ণ Vite প্লাগইন নিয়ে আলোচনা করব, যা আপনার React ডেভেলপমেন্ট অভিজ্ঞতাকে আরও উন্নত করতে সাহায্য করবে।

গুরুত্বপূর্ণ Vite প্লাগইনসমূহ

১. Vite PWA (Progressive Web App)

এই প্লাগইনটি আপনার React অ্যাপকে PWA (Progressive Web App) এ রূপান্তর করতে সাহায্য করে। এটি ক্যাশিং, অফলাইন মোড, এবং ব্যাকগ্রাউন্ড সিঙ্কের মতো ফিচার সরবরাহ করে।

ইনস্টলেশন:

npm install vite-plugin-pwa --save-dev

ব্যবহার:

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My React PWA',
        short_name: 'ReactPWA',
        start_url: '/',
        display: 'standalone',
      },
    }),
  ],
});

২. Vite SSR (Server-Side Rendering)

SSR React অ্যাপগুলোর জন্য গুরুত্বপূর্ণ, কারণ এটি প্রাথমিক লোডিং সময় কমায় এবং SEO উন্নত করে। Vite SSR প্লাগইন এটি সহজে পরিচালনা করতে সাহায্য করে।

ইনস্টলেশন:

npm install vite-plugin-ssr --save-dev

ব্যবহার:

import { defineConfig } from 'vite';
import ssr from 'vite-plugin-ssr/plugin';

export default defineConfig({
  plugins: [ssr()],
});

৩. Vite Tailwind CSS

Tailwind CSS React অ্যাপে সহজেই ইন্টিগ্রেট করতে এই প্লাগইনটি সাহায্য করে। এটি CSS অপ্টিমাইজেশন ও দ্রুত কম্পাইলিং সক্ষম করে।

ইনস্টলেশন:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind CSS কনফিগারেশন (tailwind.config.js):

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

main.jsx এ Tailwind ইমপোর্ট করুন:

import './index.css';

উপসংহার

Vite প্লাগইনগুলো React অ্যাপের ডেভেলপমেন্ট অভিজ্ঞতাকে উন্নত করতে সাহায্য করে। PWA, SSR, এবং Tailwind CSS এর মতো প্লাগইন ব্যবহার করে আপনি সহজেই পারফরম্যান্স, SEO, এবং ডিজাইন অপ্টিমাইজ করতে পারেন। আপনি কোন প্লাগইন সবচেয়ে বেশি ব্যবহার করেন? কমেন্টে জানাতে ভুলবেন না! 🚀

Optimizing React Apps for Production with Vite

Mehedi Hasan — Thu, 20 Mar 2025 18:00:00 +0000

React অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় Vite চমৎকার পারফরম্যান্স দেয়, তবে প্রোডাকশনে একটি অ্যাপ অপ্টিমাইজ করা আরও গুরুত্বপূর্ণ। Vite-এর প্রোডাকশন বিল্ড প্রসেস এবং বিভিন্ন অপ্টিমাইজেশন টেকনিক ব্যবহার করে আমরা আমাদের React অ্যাপকে দ্রুততর ও কার্যকর করতে পারি। এই আর্টিকেলে আমরা আলোচনা করব কিভাবে Vite-এর প্রোডাকশন বিল্ড প্রসেস কাজ করে এবং কীভাবে React অ্যাপের জন্য অপ্টিমাইজ করা যায়।

Vite-এর প্রোডাকশন বিল্ড প্রসেস

Vite উন্নত প্রযুক্তি ব্যবহার করে দ্রুত প্রোডাকশন বিল্ড তৈরি করে। এটি ESBuild এবং Rollup-এর শক্তিশালী ফিচারগুলো ব্যবহার করে কোড মিনিফিকেশন, ট্রি শেকিং এবং কোড স্প্লিটিং করে।

প্রোডাকশন বিল্ড চালানোর কমান্ড

Vite ব্যবহার করে প্রোডাকশন বিল্ড তৈরি করতে নিম্নলিখিত কমান্ড চালাতে হবে:

npm run build

অথবা,

yarn build

এই কমান্ড চালানোর পর dist/ ডিরেক্টরির মধ্যে অপ্টিমাইজড ফাইল তৈরি হবে, যা সরাসরি সার্ভারে ডিপ্লয় করা যায়।

React অ্যাপের জন্য বিল্ড অপ্টিমাইজেশন

Vite স্বয়ংক্রিয়ভাবে বেশ কিছু অপ্টিমাইজেশন করে, তবে অতিরিক্ত কিছু কনফিগারেশন ব্যবহার করে আমরা আরও ভালো পারফরম্যান্স পেতে পারি।

১. মিনিফিকেশন সক্ষম করা

Vite স্বয়ংক্রিয়ভাবে Terser ব্যবহার করে কোড মিনিফাই করে, যা ফাইলের সাইজ কমিয়ে লোড টাইম কমায়।

export default defineConfig({
  build: {
    minify: 'terser',
  }
});

২. কোড স্প্লিটিং

Vite স্বয়ংক্রিয়ভাবে ডায়নামিক ইমপোর্ট এবং কোড স্প্লিটিং করে, যা অ্যাপের লোড টাইম দ্রুত করে।

build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
      }
    }
  }
}

৩. Brotli এবং Gzip কমপ্রেশন ব্যবহার করা

Brotli এবং Gzip কমপ্রেশন ব্যবহার করে আমরা স্ট্যাটিক ফাইলের সাইজ আরও কমাতে পারি। এটি করতে vite-plugin-compression ব্যবহার করা যেতে পারে।

npm install vite-plugin-compression

এরপর vite.config.js ফাইলে এটি কনফিগার করুন:

import compression from 'vite-plugin-compression';

export default defineConfig({
  plugins: [compression()],
});

৪. ইমেজ এবং অ্যাসেট অপ্টিমাইজেশন

Vite অটোমেটিক্যালি অ্যাসেট হ্যান্ডলিং করে, তবে আমরা আরও উন্নত অপ্টিমাইজেশনের জন্য vite-imagemin প্লাগইন ব্যবহার করতে পারি।

npm install vite-plugin-imagemin

import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 75 },
    })
  ]
});

৫. পরিবেশ পরিবর্তনশীল (Environment Variables) কনফিগার করা

Vite mode ব্যবহার করে পরিবেশ পরিবর্তনশীল কনফিগার করতে দেয়। .env ফাইলে আমরা API URL সেট করতে পারি:

VITE_API_URL=https://api.example.com

main.jsx ফাইলে এটি ব্যবহার করা যেতে পারে:

const apiUrl = import.meta.env.VITE_API_URL;

উপসংহার

Vite React অ্যাপগুলোর জন্য দ্রুত ও কার্যকর প্রোডাকশন বিল্ড সরবরাহ করে। উপরের অপ্টিমাইজেশন টেকনিকগুলো অনুসরণ করলে আমরা আরও উন্নত পারফরম্যান্স পেতে পারি। উন্নত স্পিড, ছোট ফাইল সাইজ এবং ভালো ইউজার এক্সপেরিয়েন্সের জন্য Vite-এর অপ্টিমাইজেশন টুলগুলো ব্যবহার করা অবশ্যই গুরুত্বপূর্ণ।

React অ্যাপের পারফরম্যান্স উন্নতকরণ Vite ব্যবহার করে

Mehedi Hasan — Wed, 19 Mar 2025 09:40:00 +0000

React অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় পারফরম্যান্স একটি গুরুত্বপূর্ণ বিষয়। দ্রুত লোডিং টাইম, কম বিল্ড সময় এবং উন্নত ডেভেলপমেন্ট অভিজ্ঞতা পেতে হলে Vite একটি আদর্শ টুল। এটি Webpack-এর মতো পুরনো টুলের তুলনায় অনেক দ্রুত এবং উন্নত ফিচার সরবরাহ করে। এই লেখায়, আমরা দেখব কীভাবে Vite React অ্যাপের পারফরম্যান্স উন্নত করতে সাহায্য করে এবং এর গুরুত্বপূর্ণ ফিচারগুলো কী কী।

Vite কীভাবে পারফরম্যান্স উন্নত করে?

Vite মূলত দুটি বড় কারণে React অ্যাপের পারফরম্যান্স উন্নত করে:

দ্রুত সার্ভার স্টার্টআপ: Vite ব্রাউজারের নেটিভ ES Module (ESM) ব্যবহার করে, যার ফলে এটি সার্ভার দ্রুত চালু করতে পারে। Webpack-এর মতো ভারী বান্ডলিং ছাড়া সরাসরি মডিউল লোড করা হয়, ফলে ডেভেলপমেন্ট সার্ভার অনেক দ্রুত কাজ করে।
Hot Module Replacement (HMR): React কম্পোনেন্টে পরিবর্তন আনার সাথে সাথেই সেই পরিবর্তন ব্রাউজারে প্রতিফলিত হয়, পুরো অ্যাপ পুনরায় লোড করার প্রয়োজন হয় না। এটি উন্নত ডেভেলপমেন্ট অভিজ্ঞতা প্রদান করে এবং সময় বাঁচায়।

Vite-এর প্রধান ফিচারসমূহ

১. ইনস্ট্যান্ট সার্ভার স্টার্টআপ

Webpack-এর তুলনায় Vite কয়েকগুণ দ্রুত স্টার্টআপ প্রদান করে কারণ এটি পুরো অ্যাপ বান্ডল না করেই সরাসরি মডিউল সার্ভ করে।

২. Hot Module Replacement (HMR)

HMR ফিচারের মাধ্যমে শুধুমাত্র পরিবর্তিত অংশ আপডেট হয়, ফলে ডেভেলপমেন্টের সময়কার প্রতিক্রিয়াশীলতা (reactivity) অনেক উন্নত হয়।

৩. ফাস্ট বিল্ড টাইম

Vite ESBuild ব্যবহার করে যা অত্যন্ত দ্রুতগতিতে জাভাস্ক্রিপ্ট ও টাইপস্ক্রিপ্ট কম্পাইল করতে পারে। ফলে প্রোডাকশন বিল্ড Webpack-এর তুলনায় অনেক দ্রুত হয়ে থাকে।

৪. অটোমেটিক কোড স্প্লিটিং

Vite স্বয়ংক্রিয়ভাবে কোড স্প্লিটিং করে, যার ফলে প্রোডাকশন বিল্ড হালকা হয় এবং অ্যাপ দ্রুত লোড হয়।

৫. অপটিমাইজড ডেভেলপমেন্ট এক্সপেরিয়েন্স

ইনস্ট্যান্ট ফাইল সার্ভিং
কম RAM ব্যবহার
সহজ কনফিগারেশন

Vite ব্যবহার করে React অ্যাপ তৈরি করা

নিচের ধাপগুলো অনুসরণ করে আপনি সহজেই একটি React অ্যাপ তৈরি করতে পারেন:

১. নতুন প্রজেক্ট তৈরি করুন

npm create vite@latest my-app --template react

অথবা,

yarn create vite@latest my-app --template react

২. প্রজেক্ট ফোল্ডারে যান

cd my-app

৩. ডিপেনডেন্সি ইনস্টল করুন

npm install

অথবা,

yarn install

৪. ডেভেলপমেন্ট সার্ভার চালু করুন

npm run dev

উপসংহার

Vite React অ্যাপ ডেভেলপমেন্টের জন্য একটি চমৎকার টুল যা দ্রুত স্টার্টআপ, উন্নত HMR, এবং ফাস্ট বিল্ড টাইম প্রদান করে। এটি Webpack-এর তুলনায় অনেক বেশি পারফরম্যান্ট এবং ব্যবহার করা সহজ। আপনি যদি React অ্যাপ তৈরি করেন এবং উন্নত ডেভেলপমেন্ট এক্সপেরিয়েন্স চান, তাহলে Vite ব্যবহার করাই সেরা পছন্দ হবে।

How To Deploy a React + Vite Application with cPanel Shared Hosting

Mehedi Hasan — Mon, 17 Mar 2025 18:00:00 +0000

Deploying a React + Vite application to cPanel shared hosting can seem challenging, but it’s manageable with the right steps. In this guide, you'll learn how to deploy your Vite app to a shared hosting environment using cPanel, which is commonly available on hosting services like Bluehost, HostGator, and others.

✅ Step 1: Build Your Vite App

Before deployment, generate the production build of your React + Vite app. Run the following command:

npm run build

This command creates a dist folder, containing all the optimized static files needed to run your application.

✅ Step 2: Access cPanel and File Manager

Log in to cPanel: Use the credentials provided by your hosting provider to access your cPanel account.
Open File Manager: In cPanel, locate and open the File Manager under the Files section. This is where you will upload your Vite app files.

✅ Step 3: Navigate to the Public Directory

In File Manager, navigate to the directory where your website files are stored. In most shared hosting environments, this is the public_html folder.

If this is the primary domain, use public_html.
If it's an addon domain or subdomain, navigate to the appropriate folder within public_html.

✅ Step 4: Upload the Vite Build Files

Compress the Build Files: In your local machine, navigate to your project’s dist folder and compress the contents into a .zip file.
Upload the Zip File:
- In File Manager, go to the public_html or the appropriate directory.
- Click the Upload button and upload the compressed .zip file.
Extract the Files:
- After uploading, select the .zip file and click Extract to decompress the files.
- Ensure that the extracted files are in the root of the directory (e.g., public_html/).

✅ Step 5: Adjust `index.html` for cPanel

Vite often uses relative paths, but in some shared hosting environments, the paths might break. You may need to adjust the base URL in index.html.

Open index.html: Navigate to the index.html file in your build folder.
Add a <base> tag: In the <head> section of the file, add the following line:

<base href="/">

This ensures that the app can correctly resolve relative URLs.

✅ Step 6: Set Up `.htaccess` (Optional)

If your React app uses client-side routing (e.g., react-router), you need to tell the server to always serve index.html for any route.

Create or edit a .htaccess file in the root of your public_html (or equivalent) folder.
Add the following lines to the .htaccess file:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

This ensures that all requests are redirected to index.html, allowing your React Router to handle the routing.

✅ Step 7: Test Your Application

Once the files are uploaded and the configuration is complete, visit your domain to ensure the React + Vite application is working correctly.

If everything is set up properly, your app should be live and fully functional.
If you encounter issues, double-check the file paths in index.html and ensure that all files were uploaded correctly.

🎯 Conclusion

Deploying a React + Vite app on cPanel shared hosting is fairly straightforward when you follow these steps:

Build your Vite app.
Upload the production files using cPanel File Manager.
Adjust the index.html if needed.
Set up client-side routing with .htaccess.

Once deployed, your React app will be live and ready for users. Let me know if you need further assistance!

React এবং Vite: একটি দ্রুত ডেভেলপমেন্ট কম্বো

Mehedi Hasan — Sun, 16 Mar 2025 18:00:00 +0000

ভূমিকা

React হলো বিশ্বের অন্যতম জনপ্রিয় ফ্রন্টএন্ড লাইব্রেরি, যা ব্যবহার করে দ্রুত ও ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ তৈরি করা যায়। সাধারণত, React অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য Webpack-এর মতো টুল ব্যবহার করা হয়। তবে, সাম্প্রতিক বছরগুলোতে Vite একটি শক্তিশালী ও দ্রুত বিকল্প হিসেবে জনপ্রিয়তা অর্জন করেছে। এই আর্টিকেলে আমরা Vite সম্পর্কে জানব এবং এটি কেন React ডেভেলপমেন্টের জন্য চমৎকার একটি পছন্দ, সেটি বিশ্লেষণ করব।

Vite কী?

Vite (উচ্চারণ: "ভিট") হলো একটি মডার্ন ফ্রন্টএন্ড টুলিং যা বিশেষভাবে দ্রুত ডেভেলপমেন্ট অভিজ্ঞতা দেওয়ার জন্য ডিজাইন করা হয়েছে। এটি মূলত ES Module (ESM) ভিত্তিক এবং Hot Module Replacement (HMR) সহ দ্রুততম বিল্ড ও রিফ্রেশ পারফরম্যান্স প্রদান করে। Evan You (Vue.js-এর নির্মাতা) এটি তৈরি করেছেন এবং বর্তমানে এটি React, Vue, Svelte সহ বিভিন্ন ফ্রেমওয়ার্কের জন্য ব্যবহৃত হয়।

Vite কেন React ডেভেলপমেন্টের জন্য ভালো?

দ্রুত সার্ভার স্টার্টআপ: Vite সরাসরি ESM ব্যবহার করে, ফলে এটি Webpack-এর তুলনায় কয়েক গুণ দ্রুত সার্ভার স্টার্টআপ দেয়।
Hot Module Replacement (HMR): পরিবর্তন করা কোড দ্রুত আপডেট হয়, ফলে ডেভেলপারদের জন্য দ্রুত প্রতিক্রিয়া পাওয়া সম্ভব হয়।
কোনও অতিরিক্ত কনফিগারেশন প্রয়োজন নেই: Webpack-এর মতো জটিল কনফিগারেশন ছাড়া, React + Vite ব্যবহার করলেই দ্রুত একটি প্রজেক্ট শুরু করা যায়।
বিল্ড সময় কম: Vite ESBuild ব্যবহার করে যা জাভাস্ক্রিপ্ট ও টাইপস্ক্রিপ্ট কম্পাইল করতে অত্যন্ত দ্রুত।

Webpack বনাম Vite: তুলনামূলক বিশ্লেষণ

বৈশিষ্ট্য	Webpack	Vite
বিল্ড টাইম	তুলনামূলক ধীর	অত্যন্ত দ্রুত
HMR পারফরম্যান্স	মাঝারি	চমৎকার
কনফিগারেশন	অনেক কাস্টমাইজেশন দরকার	সহজ ও সরল
ESM সাপোর্ট	লিমিটেড	বিল্ট-ইন
ডেভেলপমেন্ট সার্ভার স্টার্টআপ	ধীর	মুহূর্তের মধ্যে

উপসংহার

React ডেভেলপমেন্টের জন্য Vite একটি দুর্দান্ত টুল, বিশেষ করে যখন দ্রুততার প্রয়োজন হয়। Webpack এখনও বড় প্রজেক্টে ব্যবহৃত হয়, তবে ছোট থেকে মাঝারি প্রকল্পের জন্য Vite একটি সহজ, দ্রুত ও উন্নত সমাধান। আপনি যদি React-এ নতুন হন এবং দ্রুত একটি উন্নয়ন পরিবেশ সেটআপ করতে চান, তাহলে Vite ব্যবহার করাই ভালো সিদ্ধান্ত হবে।

React প্রজেক্ট Vite দিয়ে সেটআপ করার পদ্ধতি

Mehedi Hasan — Sun, 16 Mar 2025 09:33:45 +0000

Vite দিয়ে React প্রজেক্ট শুরু করা খুবই সহজ। নিচের ধাপগুলো অনুসরণ করুন:

১. নতুন React প্রজেক্ট তৈরি করুন

npm create vite@latest my-react-app --template react

অথবা, যদি আপনি Yarn ব্যবহার করেন:

yarn create vite@latest my-react-app --template react

২. প্রজেক্ট ফোল্ডারে যান

cd my-react-app

৩. নির্ভরশীলতা (Dependencies) ইনস্টল করুন

npm install

অথবা,

yarn install

৪. ডেভেলপমেন্ট সার্ভার চালু করুন

npm run dev

৫. ব্রাউজারে অ্যাক্সেস করুন

Vite সাধারণত http://localhost:5173/ এ সার্ভার চালু করে। আপনার ব্রাউজারে এই URL ওপেন করলেই React অ্যাপটি দেখতে পারবেন।

Vite প্রজেক্টের স্ট্রাকচার

Vite দিয়ে একটি React অ্যাপ তৈরির পর সাধারণত নিম্নলিখিত ফোল্ডার স্ট্রাকচার থাকে:

my-react-app/
├── node_modules/
├── public/
│   ├── vite.svg
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── assets/
│   ├── components/
├── .gitignore
├── index.html
├── package.json
├── vite.config.js

গুরুত্বপূর্ণ ফাইল ও ফোল্ডার:

src/: সমস্ত React কম্পোনেন্ট ও অ্যাপের মূল কোড এখানে থাকে।
public/: এখানে স্ট্যাটিক ফাইল রাখা হয়।
index.html: মূল HTML ফাইল যা অ্যাপ চালানোর জন্য ব্যবহৃত হয়।
vite.config.js: Vite কনফিগারেশন সংক্রান্ত ফাইল।

উপসংহার

Adding a Splash Screen to Your Flutter App with `flutter_native_splash`

Mehedi Hasan — Sun, 16 Mar 2025 08:50:50 +0000

A splash screen is an important component of mobile apps, as it gives the user a smooth transition while your app is loading. In Flutter, adding a splash screen is made easy with the flutter_native_splash package. This package allows you to customize the splash screen and ensures it looks great on both Android and iOS.

Here’s how you can add a splash screen to your Flutter app using flutter_native_splash.

✅ Step 1: Install `flutter_native_splash`

To get started, add the flutter_native_splash package to your pubspec.yaml file. Run the following command in your terminal:

flutter pub add flutter_native_splash

Alternatively, manually add the package by including it in your pubspec.yaml file under dependencies:

dependencies:
  flutter_native_splash: ^2.0.5  # Check the latest version

Once added, run:

flutter pub get

✅ Step 2: Configure Splash Screen Settings

After adding the package, you need to configure it by providing the necessary customization options. These configurations go in the pubspec.yaml file under the flutter_native_splash section.

Here's an example configuration:

flutter_native_splash:
  color: "#42a5f5"  # Background color of the splash screen
  image: assets/images/splash_logo.png  # Path to your logo or splash image
  android: true  # Enable splash screen for Android
  ios: true  # Enable splash screen for iOS
  android_gravity: center  # Position of the image on Android (center, bottom, etc.)
  ios_content_mode: scaleAspectFit  # Position of the image on iOS (scaleAspectFit, scaleToFill, etc.)
  fullscreen: true  # Enable full-screen mode (removes the status bar)
  web: false  # Disable splash screen for web

  # Optional advanced configuration
  android_12:
    image: assets/images/splash_logo.png
    icon_background_color: "#ffffff"
    icon_gravity: center

In this configuration:

color defines the background color of your splash screen.
image points to the logo or splash image you want to show.
android and ios enable the splash screen on respective platforms.
fullscreen allows your splash screen to cover the entire screen.
You can also specify gravity/content mode to position the splash screen content on both Android and iOS.

Make sure your image path is correct and placed in the appropriate directory. You can adjust the color and image path as per your design needs.

✅ Step 3: Generate the Splash Screen

Once you've configured everything, run the following command to generate the splash screen assets:

flutter pub run flutter_native_splash:create

This command will automatically generate the necessary files for both Android and iOS, updating their respective native folders.

For Android, it modifies AndroidManifest.xml and the res folder with the required assets. For iOS, it updates the LaunchScreen.storyboard.

✅ Step 4: Testing the Splash Screen

Now that your splash screen is set up, you can run your Flutter app to see the result:

flutter run

When your app starts, you should see the custom splash screen before your main app interface loads.

✅ Step 5: Optional: Customizing Splash Screen Duration

If you want to control how long the splash screen stays visible, you can add some extra configuration in your Dart code. However, by default, the splash screen stays visible until Flutter has finished loading the app.

To extend the splash screen duration, you can use WidgetsBinding.instance.ensureInitialized() in the main.dart file:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Future.delayed(const Duration(seconds: 2));  // Delay splash screen for 2 seconds
  runApp(MyApp());
}

This will show the splash screen for an additional 2 seconds before loading the main app.

✅ Step 6: Removing the Splash Screen

In case you no longer need the splash screen and want to remove it, simply run the following command:

flutter pub run flutter_native_splash:remove

This command will remove all splash screen-related configurations and files.

🎯 Conclusion

With the flutter_native_splash package, adding a splash screen to your Flutter app is straightforward and easy. Whether you want a simple splash screen with a logo or a more customized solution, this package offers flexibility for both Android and iOS platforms.

By following the steps outlined above, you can create a professional and visually appealing splash screen that enhances the user experience.

Let me know if you need any further assistance!

Forem: Mehedi Hasan

WakaTime: কোডিং ট্র্যাকিং টুল – প্রতিদিনের কোডিং সময় কিভাবে হিসাব করবেন? শিখুন WakaTime দিয়ে

ProgrammerHasan

💥 Sentry.io: আপনার অ্যাপ্লিকেশনের ত্রুটি খুঁজে বের করার এক বিশ্বস্ত সমাধান

ProgrammerHasan

নতুন Flutter ডেভেলপারদের জন্য সেরা স্টেট ম্যানেজমেন্ট: একটি প্রারম্ভিক গাইড উদাহরণসহ

স্টেট ম্যানেজমেন্ট কেন গুরুত্বপূর্ণ?

নতুনদের জন্য স্টেট ম্যানেজমেন্ট অপশনগুলির পর্যালোচনা

1. setState – Flutter এর বিল্ট-ইন স্টেট ম্যানেজমেন্ট

2. Provider – নতুনদের জন্য আদর্শ

3. Riverpod – Provider এর পরবর্তী স্তর

4. GetX – ন্যূনতম বয়লারপ্লেট

5. Bloc – বড়, জটিল অ্যাপসের জন্য

উপসংহার

AI দিয়ে কোডিং: সুবিধা নাকি বিপদ?

AI দিয়ে কোডিং: সুবিধা নাকি বিপদ?

Vite এবং React অ্যাপ প্রোডাকশনে ডিপ্লয় করা

১. React + Vite প্রজেক্ট সেটআপ

২. Vite প্রোডাকশন বিল্ড

৩. Netlify তে ডিপ্লয় করা

ধাপ ১: Netlify অ্যাকাউন্ট তৈরি বা লগইন

ধাপ ২: প্রজেক্ট ডিপ্লয়

ধাপ ৩: বিল্ড সেটিংস

ধাপ ৪: ডিপ্লয়

৪. Vercel তে ডিপ্লয় করা

ধাপ ১: Vercel অ্যাকাউন্ট তৈরি বা লগইন

ধাপ ২: প্রজেক্ট আমদানি

ধাপ ৩: বিল্ড সেটিংস কাস্টমাইজ

ধাপ ৪: ডিপ্লয়

৫. DigitalOcean এ ডিপ্লয় করা

ধাপ ১: DigitalOcean Droplet তৈরি

ধাপ ২: অ্যাপ বিল্ড

ধাপ ৩: Nginx কনফিগার করা

৬. CI/CD পাইপলাইন সেটআপ

উপসংহার

Vite Plugins to Supercharge Your React Development

গুরুত্বপূর্ণ Vite প্লাগইনসমূহ

১. Vite PWA (Progressive Web App)

২. Vite SSR (Server-Side Rendering)

৩. Vite Tailwind CSS

উপসংহার

Optimizing React Apps for Production with Vite

Vite-এর প্রোডাকশন বিল্ড প্রসেস

প্রোডাকশন বিল্ড চালানোর কমান্ড

React অ্যাপের জন্য বিল্ড অপ্টিমাইজেশন

১. মিনিফিকেশন সক্ষম করা

২. কোড স্প্লিটিং

৩. Brotli এবং Gzip কমপ্রেশন ব্যবহার করা

৪. ইমেজ এবং অ্যাসেট অপ্টিমাইজেশন

৫. পরিবেশ পরিবর্তনশীল (Environment Variables) কনফিগার করা

উপসংহার

React অ্যাপের পারফরম্যান্স উন্নতকরণ Vite ব্যবহার করে

Vite কীভাবে পারফরম্যান্স উন্নত করে?

Vite-এর প্রধান ফিচারসমূহ

১. ইনস্ট্যান্ট সার্ভার স্টার্টআপ

২. Hot Module Replacement (HMR)

৩. ফাস্ট বিল্ড টাইম

৪. অটোমেটিক কোড স্প্লিটিং

৫. অপটিমাইজড ডেভেলপমেন্ট এক্সপেরিয়েন্স

Vite ব্যবহার করে React অ্যাপ তৈরি করা

১. নতুন প্রজেক্ট তৈরি করুন

২. প্রজেক্ট ফোল্ডারে যান

৩. ডিপেনডেন্সি ইনস্টল করুন

৪. ডেভেলপমেন্ট সার্ভার চালু করুন

উপসংহার

How To Deploy a React + Vite Application with cPanel Shared Hosting

✅ Step 1: Build Your Vite App

✅ Step 2: Access cPanel and File Manager

✅ Step 3: Navigate to the Public Directory

✅ Step 4: Upload the Vite Build Files

✅ Step 5: Adjust index.html for cPanel

✅ Step 6: Set Up .htaccess (Optional)

✅ Step 7: Test Your Application

🎯 Conclusion

React এবং Vite: একটি দ্রুত ডেভেলপমেন্ট কম্বো

ভূমিকা

Vite কী?

Vite কেন React ডেভেলপমেন্টের জন্য ভালো?

Webpack বনাম Vite: তুলনামূলক বিশ্লেষণ

উপসংহার

✅ Step 5: Adjust `index.html` for cPanel

✅ Step 6: Set Up `.htaccess` (Optional)

✅ Step 1: Install `flutter_native_splash`