اگر قرار باشه توی یک پروژه کاربرای بین‌المللی داشته باشیم چطور باید شماره هارو هندل کنیم؟

شاید توی پروژه های بزرگ بین‌المللی براتون سوال بشه که ما چطور میتونیم شماره موبایل ها با کد های کشور های مختلف رو هندل کنیم؟

خوب قسمت راحت کار اینجاست که بگیم کاربر رو مجبور می‌کنیم طبق استاندارد E.164 شماره کامل رو با کد کشور وارد کنه مثلا برای ایران به این صورت
+98901*******

خوب این ساده ترین حالته ولی ux خوبی نداره مخصوصا برای کاربرای ایرانی که معمولا شمارشون رو با 0 وارد میکنن.
پس باید چکار کرد؟ شاید به ذهنتون برسه که یه ولیدیشن ساده مینویسیم و با چند تا شرط هندلش می‌کنیم ولی قراره به چالش های زیادی بخوریم. پس بیاین اول به سوالات زیر جواب بدیم.

آیا کد کشور ها همه تعداد ارقامش یکسانه؟
خیر. مثلا کد ایران 98 و آمریکا 1 هست

آیا طول شماره های موبایل کشور های مختلف بدون کد کشور یکسان هست؟
خیر. طول شماره موبایل در خیلی از کشور ها 10 رقم هست (بدون کد کشور)
ولی استثنا هم داریم برای مثال شماره موبایل توی آلمان میتونه بین 10 تا 13 رقم متغییر باشه.

آیا شماره موبایل همه کشور ها وقتی از کد استفاده نمیکنیم از 0 ابتدای شماره استفاده می‌کنیم؟ و آیا با اضافه کردن کد 0 اول شماره حذف میشه؟
در بیشتر کشور ها شماره های موبایل با صفر شروع میشه و با اضافه شدن کد کشور صفر حذف میشه ولی همیشه اینطوری نیست
ایران:
09123456789 → +989123456789
هند:
09876543210 → +919876543210
آلمان:
015123456789 → +4915123456789
در شماره های بالا دقیقا همینطوره ولی در بعضی موارد مثل موارد زیر اینطوری نیست

استثناها و نکات:
برخی کشورها اصلاً از صفر ابتدایی استفاده نمی‌کنند: مثلاً در ایالات متحده، شماره‌ها مستقیماً با کد منطقه (area code) شروع می‌شوند، و وقتی کد کشور اضافه می‌شود، هیچ تغییری در ساختار داخلی شماره رخ نمی‌دهد:

آمریکا:
1234567890 → +11234567890
صفر ممکن است حفظ شود: در برخی از کشورها، حتی در حالت بین‌المللی، صفر ابتدایی شماره حفظ می‌شود:

ایتالیا: (صفر حفظ می‌شود).
03491234567 → +3903491234567

استاندارد E.164: این استاندارد که در مخابرات جهانی استفاده می‌شود، تأکید می‌کند که شماره‌ها در قالب بین‌المللی باید بدون صفر ابتدایی نوشته شوند، مگر اینکه صفر بخشی از شماره واقعی باشد.

خوب حالا برای ولیدیشن و ux بهتر باید چکار کرد؟ شاید به ذهنتون رسیده باشه که بشینید و از اول یه کلاسی بنویسید که با توجه به کشور انخاب شده یه سری rule هایی در نظر گرفته بشه و بر اساس اونها شماره ولیدیت بشه یا برای ux بهتر در صورت نیاز فرمتش به صورت خودکار عوض بشه و بعد توی دیتابیس ذخیره بشه.

ولی نیاز به این کار نیست چون از قبل پکیج هایی برای این کار نوشتن. مثلا libphonenumber برای جاوااسکریپت و پایتون

همچنین این پکیج برای لاراول
https://github.com/Propaganistas/Laravel-Phone

مثلا به کمک این پکیج وقتی کاربر کشورش رو انتخاب میکنه دیگه توی فیلد شماره موبایل فرقی نمیکنه کاربر شماره رو با 0 وارد کنه یا بدون 0 چون به راحتی شما توی بکند میتونید با توجه به کشورش شماره رو به فرمت استاندارد E.164 در بیارین و بعد توی دیتابیس ذخیره کنید.

دقت کنید حتما وقتی همچین پکیج هایی اضافه می‌کنید به پروژتون برای عملکرد مورد انتظارتون چند تا تست بنویسید.

با استفاده از پکیجی که توی پست قبل معرفی کردم ببینید چه ux خوبی میشه پیاده سازی کرد.

من به عنوان کاربر شماره رو با صفر و بدون صفر زدم حتی با 98 و با استفاده از همین پکیج توی بکند راحت تبدیلش میکنم به شماره استاندارد. و لازم نیست به کاربر بگم شماره رو حتما طبق فرمت مورد نظر من وارد کن.

فقط کافیه کد iso کشور و شماره رو داشته باشیم.

حتی خودش ولیدیشن داره و به راحتی با توجه به کشور و شماره اون رو ولیدیت میکنه و اگر مشکلی داشته باشه خطا بر میگردونه.

آخرین چالشی که داشتم و تونستم با موفقیت انجامش بدم پیاده سازی Single Sign On یا همون SSO بود.

اولین باری که از من خواسته شد این کار رو انجام بدم کمی مخالفت کردم چون هم فکر میکردم کار رو پیچیده کنه و کلی چالش و هزینه اضافه میکنه و هم اینکه ما نهایتا دو سایت داشتیم و نیاز شدیدی به SSO نداشتیم.

اما بعدش بیشتر روی این موضوع فکر کردم و دوست داشتم انجامش بدم، تصور این که یک سرویس SSO مثل Google oAuth پیاده سازی کنم بدجوری من رو هیجان زده کرده بود. همچنین تعداد سایت های شرکت بیشتر شد و توی پلن های آینده قرار بود بیشتر هم بشه. پس کمی در موردش تحقیق کردم و با Chat GPT مشورت کردم و بعدش این رو به عنوان یه طرح دوباره پیشنهاد دادم. وقتی موافقت شد حدود 2 هفته طول کشید که این سرویس جدید با موفقیت دپلوی بشه و در اولین سایت استفاده بشه.

به دلیل این که تا الان فقط از Sanctum توی Laravel استفاده کرده بودم، پیاده سازی یک SSO با پاسپورت کمی برام چالش بر انگیز بود و خوب من عاشق چالش های جدیدم، البته که طبق معمول از chat GPT هم کم کمک نگرفتم.

در ابتدا docker و docker compose با هم دیگه یکی نبودن به عبارتی دیگه docker-compose به عنوان یک ماژول اضافه تر باید در کنار داکر نصب می‌شد و دستوراتش هم به این شکل بود

docker-compose up

دقت کنید که یه dash (-) وجود داره.

اما بعد چند سال داکر کمپوز به هسته داکر اضافه شد و دستورش هم فرق کرد و اون dash دیگه نیاز نیست. به این شکل

docker compose up

حالا من به یه پروژه ای برخوردم که یک سری اسکریپت توش هست قبل از اجرای اسکریپت میاد چک میکنه آیا فایل اجرایی برای docker-compose توی path وجود داره یه خیر؟ به بیان ساده تر چک میکنه ببینه فایلی به اسم docker-compose در مسیر /usr/local/bin/docker-compose وجود داره یا خیر؟

# Ensure docker-compose exists
if hash docker-compose 2>/dev/null; then

خط کد بالا توی بش این کار رو میکنه. درسته که docker compose الان از دستور قدیمی هم پشتیبانی میکنه ولی این خط کد false میشه چون فایل مورد نظر تو مسیر PATH نیست.

برای حل این مشکل چند راه بود ولی بهترین راهی که میشه انجام داد تا به صورت کامل پشتیبانی بشه توسط همچین اسکریپت هایی این هست 👇🏻

یک فایل به نام docker-compose در یکی از مسیرهای موجود در PATH بسازید:

sudo nano /usr/local/bin/docker-compose

محتوای زیر را در فایل بنویسید:

#!/bin/bash
docker compose "$@"

به فایل اجازه اجرا بدهید:

sudo chmod +x /usr/local/bin/docker-compose

درواقع با این کار یه wrapper برای docker compose ایجاد میکنیم که با دستور docker-compose اجرا میشه.

میشه از روش های دیگه هم استفاده کرد مثلا تعریف alias توی bashrc ولی این کار باز هم این مشکل رو حل نمی‌کنه
یا نصب docker compose v2 plugin با دستور زیر

sudo apt-get update
sudo apt-get install docker-compose-plugin

در خیلی مواقع ممکنه شما به عنوان برنامه نویس پروژه ها و ریپو های زیادی روی سیستمتون داشته باشین. حالا فرض کنید میخواین سیستم عاملتون رو عوض کنید و خوب قطعا این ریپو ها رو توی گیت دارین ولی چیزی که توی گیت نیست فایل های env هست. اگر تعداد پروژه ها زیاد باشه (مثلا در مورد خودم شاید حدود ۵۰ تا پروژه داشته باشم) کپی و انتقال فایل های env سخت میشه.

با کمک اسکریپت زیر میتونید دایرکتوری پروژه هاتون رو به صورت تو در تو بررسی کنید و هر فایل env رو با توجه به ساختار دایرکتوری والد کپی کنید.

#!/bin/bash

# دایرکتوری پروژه‌ها
SOURCE_DIR="$HOME/prj" # مسیر دایرکتوری اصلی را اینجا تغییر دهید
# دایرکتوری مقصد
DEST_DIR="$HOME/env_backups"

# بررسی وجود دایرکتوری مقصد
mkdir -p "$DEST_DIR"

# جستجوی فایل‌های .env و کپی با حفظ ساختار دایرکتوری
find "$SOURCE_DIR" -type f -name ".env" | while read -r env_file; do
    # مسیر نسبی فایل .env نسبت به دایرکتوری اصلی
    relative_path="${env_file#$SOURCE_DIR/}"
    # مسیر مقصد با ساختار دایرکتوری
    dest_path="$DEST_DIR/$relative_path"
    # ایجاد دایرکتوری‌های والد
    mkdir -p "$(dirname "$dest_path")"
    # کپی فایل به مقصد
    cp "$env_file" "$dest_path"
    echo "Copied: $env_file -> $dest_path"
done

echo "Backup completed. All .env files are copied to $DEST_DIR."

کافیه یک فایل بش بسازین کدهای بالا رو توش بنویسید، آدرس های مورد نظر رو تنظیم کنید و فایل بش رو اجرا کنید.

5 والپیپر قشنگ و با کیفیت برای دسکتاپ.

اگر دوست داشتین لایک کنین در آینده باز هم میگذارم 😉

۱۳ بدر خود را چگونه گذرندام.

https://rasherburger.ir


امروز ساعت ۱۱ بیدار شدم گفتم جایی که نرفتن بشینم سایت و منو مغازه خواهرمو بسازم. حدودا یه ۵ ساعتی طول کشید همین سایت استاتیک ساده.

با پیشرفت هر روز هوش مصنوعی برنامه نویس های بیشتری هم هر روز دارن از هوش مصنوعی برای نوشتن کد ها و تسک هاشون استفاده می‌کنند. بعضی فقط در حد ساجسشن هایی که میده، بعضی کارهای پیچیده تر و یه عده دیگر هم کلا پروژه رو تعریف میکنن و هوش مصنوعی کامل اون رو انجام میده.

خیلی هم خوبه و هوش مصنوعی سرعت کار رو زیاد میکنه اما افرادی که بیشتر کار رو به هوش مصنوعی میسپرن یا کامل برای هوش مصنوعی پروژه رو تعریف میکنن باید چند تا نکته رو در ذهن داشته باشن.

نکته اول اینکه وقتی کدی رو هوش مصنوعی می‌نویسه باید کامل چک بشه که آیا منطقی که میخوایم رو درست پیاده کرده؟ یعنی اگر توی یک مایگریشنی ما نمیخوایم یه چیزی nullable باشه آیا درست تعریف کرده؟ چون ممکنه ما حواسمون نباشه و کد بره بالا و رکورد null بخوایم ذخیره کنیم و نشه. تازه این فقط یک مثال کوچیک بود. وقتی برنامه نویس خودش کدی رو میزنه هنگام نوشتن به این نکات توجه میکنه. ولی وقتی هوش مصنوعی میزنه دیگه توجهی نمی‌کنه و مشکل درست میکنه.

نکته دوم تکمیل کننده نکته اول هست. کدی که توسط هوش مصنوعی زده میشه باید کامل تست بشه همه حالت هاش و براش تست های اتوماتیک نوشته بشه که تموم جوانب رو در نظر بگیره.

نکته سوم که از هر دو نکته قبلی مهم تر هست اینه که کد بررسی بشه که آیا شبیه به ساختار پروژه هست؟ هر پروژه ای یک ساختاری داره کد هاش. برای مثال لاراول برای ولیدیشن کردن چند حالت داره میتونی مقادیر ولیدیشن رو توی استرینگ یا آرایه قرار بدی. حالا فرض کن کل پروژه از آرایه استفاده شده و کدی که شما با هوش مصنوعی زدی با استرینگ میزنه. یا فرض کن تمام کلاس های کاستوم توی دایرکتوری به اسم services تعریف شده و کدی که با هوش مصنوعی زده شده توی یه دایرکتوری دیگه این کار رو بکنه. یا فرض کنید اسم گذاری کل پروژه یه مبنایی داره یه انسجامی داره و هوش مصنوعی بیاد یه سری اسم متفاوت تعریف بکنه.

یکی از مهمترین پارامتر های یک کد خوب انسجام کد هست. نه این که هر بخشیش رو میبینی با سایر بخش ها متفاوت باشه.

خلاصه کلام اینکه اگر کدی رو میدین هوش مصنوعی می‌نویسه فکر کنید کدی رو یک برنامه نویس زیردستتون نوشته و قراره کامل ریویو کنید و اشکالاتش رو بگیرین.

و یک نکته ای هم بگم اگر در شرکتی کار میکنین به عنوان برنامه نویس و تسک هاتون رو با هوش مصنوعی می‌زنید و بعد مرج می‌کنید باور کنید مینتینر پروژه کاملا متوجه میشه. و زمانی که کلی ایراد توش می‌بینه حس بدی پیدا میکنه به شما و پیش خودش فکر میکنه شما احساس زرنگ بودن کردین تسک را دادین هوش مصنوعی راحت زدین و کسی هم نفهمیده و همه چیز اکیه.

همونطور که گفتم استفاده از هوش مصنوعی نه تنها ایرادی نداره بلکه لازم هم هست ولی خیلی صادقانه بگین که استفاده می‌کنید و موارد بالا رو هم رعایت کنید.

در غیر این صورت مینتینر پروژه میتونه به جای این که تسک رو برای شما تعریف کنه خودش برای هوش مصنوعی تعریف کنه و نیازی به شما نداره

همیشه وقتی یه برنامه ای رو میبینم که خیلی فیچر های خوبی داره و سازنده به جزئیات و نکات دقت زیادی کرده ازش لذت می‌برم.

امشب که داشتم روی داده های json کار میکردم و بررسی خروجی خیلی برام مهم بود هم اینکه راحت بتونم توی دسته بندی های مختلف ببینمش هم تعداد آیتم های هر بخش از json رو ببینم و ... این اکستنشن رو برای کروم پیدا کردم. قبلا هم اکستنشن های دیگه داشتم یا حتی توی vscode ولی این اصلا توی یک لول دیگه هست و حتما پیشنهاد میشه.

https://chromewebstore.google.com/detail/json-beautifier-and-edito/lpopeocbeepakdnipejhlpcmifheolpl?hl=en-US&utm_source=ext_sidebar

مدتی بود دوستم در مورد سردوشی که پدرش تولید کرده بود یه حرفایی میزد ولی از اونجا که این مدت خیلی درگیر بودم فرصت نشده بود قشنگ دل به حرفاش بدم و ببینم چیه داستان.

دیشب یه سر اومد پیشم و دوباره صحبت این سردوش‌ها شد که داره پیگیری میکنه برای فروش تعدادی از این ها که باقی مونده. پرسیدم چیه داستان این سردوش‌ها کجا بوده؟

گفت پدرش قبلا می‌افته توی این فکر که یه سر دوشی درست کنه که فشار آب رو کم نکنه بلکه با فشار آب کم هم خوب کار کنه.

خلاصه پیگیری میکنه برای ساخت قالب و یه قالب ساز پیدا میکنه تا قالب اولیه رو طبق طرحی که داشته بسازه، ولی قالب ساز قالب رو اشتباه میسازه، و کار به شکایت و... میرسه و دادگاه حق رو به پدر رفیقم میده و یه خسارتی هم میگیره.

دوباره میگرده تا یه تراشگار حرفه ای پیدا میکنه تراشکار بهش میگه من قالبو میسازم ولی این تا یه تعدادی جواب میده اگر فروش رفت باید بری یه قالب درست حسابی براش بسازی.

خلاصه تراشکار قالبو میسازه و اولین سری این سردوشی ها تولید میشه. بعدش میره تهران و این سردوش ها رو به چنتا فروشنده معرفی میکنه. و بعد چند وقت یکی از این تهرانیا تماس میگیره و میگه سردوشت رو از اوکراین خواستن.

و این میشه اولین جرقه فروش عمده این سر دوش ها. و کم کم با فروش همین سردوش ها طبق گفته رفیقم زندگیشون از این رو به اون رو میشه. خونه ماشین و ... همه چیز از برکت همین سردوش ها میاد و ...

دوستم تعریف میکرد که همین فروشنده تهرانی مدتی بعد به مشکل میخوره و به یه پول سنگین نیاز پیدا میکنن و پدرش پول رو هر جور شده جور میکنه و قرض میکنه میده به اون فروشنده تا مشکلش حل شه. بعد مدتی هم مشکل حل میشه و پول رو جور میکنه و پس میده.

دوستم یه تیکه از حرفهاش هم اشاره کرد که پدرش قبلا هم یه ظرف مایع دستشویی تولید کرده بوده که فروشش موفق نبوده و جالبه که همه بهش میگفتن اره این ظرف مایع دستشویی ایده خوبیه و فروش موفقی داره و برعکس در مورد این سردوشی همه میگفتن که نه این فروش نمیره و ...

حالا دوستم تعریف میکرد که برای اولین بار مدت ها بعد از فوت پدرش میره تو زیر زمین و میبینه 1000 تا از اینها گوشه زیرزمین هست هنوز.

دوستم میگفت پدرم تو برگه خاطراتش نوشته که من موفقیت زندگیمو مدیون دو نفرم اون تراشکاری که اولین قالب رو خوب ساخت و اون فروشنده تهرانی که این هارو صادر کرد اوکراین.

من خودم داستان های عجیب اینطوری زیاد داشتم تو زندگیم ولی این داستان برام خیلی نکته های جالبی داشت از جهات مختلف

- اول این که پدرش تلاش کرده و ایده خلاقانه ای که داشته رو ساخته.
- دوم این که من همیشه گفتم نتیجه تلاش های ما به صورت یک کلید تحویل ما داده میشه که صندوق گنجش در آینده سر راهمون قرار میگیره و اون صندوق گنج برای پدر دوستم همون فروشنده تهرانی بود
- سوم اینکه آدم های کار بلد از طلا با ارزش‌ترن و اینجا هم اون تراشکار ارزشش از طلا بیشتر بوده. قدر آدم هایی که توی یه کاری بهترین هستن رو بدونید و خودتون هم سعی کنید توی یک مهارت بهترین باشین
- چهارم اینکه وقتی شکست میخوریم زود نا امید نشیم و پیگیر باشیم شاید اگر شخص دیگه‌ای بود با خراب شدن قالب اول نا امید میشد ولی پدر دوستم بعد از اون ناامید نشده و رفته هر جوری بوده قالب اولیه رو ساخته
- پنجم اینکه مهم نیست نظر بقیه چیه گاهی اکثریت میتونن اشتباه کنن همونطور که همه میگفتن این سر دوشی ایده خوبی نیست و فروش نمیره و برعکس در مورد ظرف مایع دستشویی میگفتن خوبه، پس مهم نیست مردم چی میگن کاری که فکر میکنی درسته انجامش بده
- ششم کمک کردن به هم، ما آدمها وقتی به هم کمک کنیم و دست یکی رو بگیریم تا موفق بشه یک روز هم اونها دست ما رو میگیرن نمونه همون فروشنده تهرانی که کمک کرده به پدر دوستم و یک روزی هم به مشکل خورده و پدر دوستم کمکش کرده.
- هفتم اینکه اگر توی کارمون داریم درامدی کسب میکنیم حتما بخشی از اون درامد رو صرف ارتقا و بهتر شدن همون کار بکنیم تا پیشرفت کنیم
و در آخر قدردان بودن، اگر کسی بهمون کمک میکنه وظیفش نیست بلکه لطف هست و باید قدردان باشیم

امیدوارم همتون از این جنس موفقیت ها تجربه کنید...

چند وقت پیش توی شرکت دنبال یه سری کامپوننت input بودیم که نیاز هامون رو جواب بده. استایل قشنگی داشته باشه کامل از RTL پشتیبانی کنه، date picker داشته باشه و ...

یه روز که تقریبا کارم pend یه واحد دیگه شده بود تصمیم گرفتم بشینم و یه سری کامپوننت به این منظور بسازم. چند باری از قبل همچین کامپوننت هایی ساخته بودم ولی این بار چند نکته متفاوت وجود داشت

- تجربه بیشتری داشتم و کمبودهای کامپوننت های قبلی رو دیده بودم
- کمک AI رو داشتم و به لطف مدیرمون که اکانت Copilot رو برام خریده بود

پس اینطوری شد که https://viputy.ir متولد شد.

- کامپوننت هایی که کاملا با RTL سازگاره.
- یه date picker ساده ولی حرفه ای داره که هم تقویم میلادی داره هم شمسی و در آینده چند استایل پیشرفته تر هم بهش اضافه میشه
- رسپانسیو و واکنشگرا هست
- قابلیت اینو داره که بتونید باهاش input های کاستوم درست کنید

فقط این پکیج الان در نسخه بتا هست و ممکنه مشکلاتی با دارک مود داشته باشه. داکیومنتش هم به صورت کامل با ai نوشته شده که یه سری مشکلاتی داره به مرور فیکس میشه.

این پکیج فقط با vue3 و tailwind4 کار میکنه.

خواهرم هر موقع قیمت برگرهاشون رو عوض میکرد من علاوه بر تغییر قیمت توی سایت (چون فعلا استاتیک هست) چون نیمچه دستی هم توی طراحی دارم باید قیمت رو توی منو و همچنین با قیمت برای استوری های اینستا هم عوض می‌کردم.

تازگی تغییرات زیادی داده بودند و من دیدم نمیشه هر بار کلی زمان بذارم. پس اومدم یه صفحه به سایتشون اضافه کردن منو رو به جای اینکه با برنامه COREL طراحی کنم با Vue.js طراحی کردم و بعد هم با کمک پکیج زیر خروجی گرفتم
html-to-image

تازه الان از یه فایل js برای قیمت های سایت و منو و اینستا استفاده میکنم یعنی فقط قیمت رو یه جا تغییر میدم.

دیگه عوض کردن قیمت و خروجی گرفتن منو و استوری اینستا توی 10 دقیقه انجام میشه 😎

اینم چندتا از خروجی ها