خانه / بایگانی برچسب: اپلیکیشن

بایگانی برچسب: اپلیکیشن

راستی آزمایی ایمیل (Email Confirmation) با React — راهنمای کاربردی

در این نوشته به بررسی روش تأیید ایمیل یا همان راستی آزمایی ایمیل در React می‌پردازیم. روش تأیید ایمیل شاید تأیید ایمیل و راستی آزمایی آن موضوع ساده‌ای به نظر برسد. تأیید ایمیل دست‌کم از زمانی که خود ایمیل متولد شده، وجود داشته است و ما گردش کاری آن را به خوبی می‌دانیم. یک ایمیل را برای تأیید از کاربر دریافت می‌کنیم و یک لینک به آن آدرس ارسال می‌کنیم. سپس پایگاه داده را به‌روزرسانی می‌کنیم تا زمانی که کاربر روی لینک کلیک کرد، ایمیل وی را تأیید کند. همان طور که می‌بینید همه کار در سه گام ساده اجرا می‌شود. اما برای این که بتوان این کار را انجام داد به یک اپلیکیشن کامل نیاز داریم و از این رو فرصت مناسبی برای یادگیری طرز کار Mongo ،Express ،React و Node و همکاری آن‌ها با هم به نظر می‌آید. کلاینت React کلاینت خود را به وسیله Create React App (+) بوت‌استرپ می‌کنیم. ما فرض می‌کنیم که شما از قبل تجربیاتی در این زمینه دارید. برای این که بتوانید مطالب مطرح شده در این راهنما را دنبال کنید تنها به سه چیز نیاز دارید: یک اپلیکیشن که پیش از آن که بتواند کاری انجام دهد در وضعیت قابل کارکرد باشد. ..

توضیحات بیشتر »

طراحی تقویم کاملاً ساده با استفاده از CSS، Moment و Vue — راهنمای مقدماتی

در برخی موارد به دلایلی مانند نوع طراحی یک وب‌سایت و یا دلایل دیگر، نیاز هست که یک کامپوننت با طراحی کاملاً ساده داشته باشیم. طراحی چنین کامپوننتی با استفاده از grid در CSS کاملاً سرراست است. ما در این مقاله به توضیح این فرایند می‌پردازیم و آن را به صورت دینامیک درمی‌آوریم تا بتوان تاریخ‌های مختلف را در آن انتخاب کرد. قبل از هر کار باید اطمینان یابیم عنصری داریم که می‌توانیم اپلیکیشن Vue را روی آن راه‌اندازی کنیم. به این منظور از یک عنصر با id به صورت «calendar» استفاده می‌کنیم. اسکریپت Vue.js (+) را به پروژه اضافه کرده و یک اپلیکیشن ساده راه‌اندازی می‌کنیم: const app = new Vue({ el: '#calendar', data() { return { days: [] } }, mounted() { // load days } }) اینک moment (+) را در پروژه خود می‌گنجانیم و کد ()mounted مورد نیاز برای پر کردن روزهای ماه را می‌نویسیم. به این منظور از چند تابع moment همراه با منطق ES6 استفاده می‌کنیم. تابع ()mounted چنین است: let monthDate = moment().startOf('month') this.days = [...Array(monthDate.daysInMonth())].map((_, i) => { ret..

توضیحات بیشتر »

ساخت یک رابط کاربری واکنش گرا در اندروید — از صفر تا صد

چیزی آزاردهنده‌تر از این نیست که متوجه شویم تصاویر بسیار زیبایی از رابط کاربری اپلیکیشن‌ها که در فروشگاه گوگل پلی مشاهده می‌کنیم را نمی‌توانیم در دستگاه خود داشته باشیم. البته بدیهی است که نمی‌توان انتظار داشت همه اپلیکیشن‌ها رابط کاربری خود را روی بیش از 11،000 دستگاه اندرویدی موجود در بازار تست کنند و خوشبختانه در صورتی که یک رابط کاربری واکنش گرا در اندروید بسازید به این کار نیازی هم نخواهد بود. ساخت یک رابط کاربری واکنش‌گرا بیشتر از هر بخش دیگر از کار توسعه اندروید، یک عمل چند رشته‌ای محسوب می‌شود. همه افراد باید با هم کار کنند تا مشخص شود چه هنگام و چگونه باید رابط کاربری تغییر یابد. انتخاب زمان تغییر رابط کاربری اپلیکیشن یک رابط کاربری واکنش‌گرا صرفاً یک UI است که به مقدار فضای موجود در صفحه واکنش نشان می‌دهد. با این که اغلب ما وسوسه می‌شویم صرفاً در مورد دستگاهی که استفاده می‌کنیم یا یک تلفن خاص فکر کنیم، اما اندروید عمیقاً به شعار خود باور دارد: «همه کنار هم و نه یک شکل» و از این رو طیف متنوعی از دستگاه‌ها با اندازه‌های مختلف وجود دارند. این نکته‌ای است که توسعه‌دهندگان وب و ..

توضیحات بیشتر »

نکاتی برای بهبود جریان کار در Xcode — به زبان ساده

Xcode یک ابزار جالب برای ایجاد اپلیکیشن‌های iOS محسوب می‌شود؛ اما در برخی موارد ممکن است پیچیده به نظر بیاید و موجب کند شدن جریان کاری شما بشود. در این مقاله برخی نکات که برای بهبود جریان کاری Xcode مورد نیاز هستند را ارائه کرده‌ایم که امیدواریم موجب صرفه‌جویی در زمان و انرژی شما بشوند. 1. ردگیری زمان‌های مورد نیاز Xcode برای Build زمان‌های Build یکی از منفی‌ترین نکات در مورد Xcode هستند. برای بهبود همه چیز نخست باید روشی برای اندازه‌گیری آن داشته باشیم. برای اندازه‌گیری زمان‌های build در Xcode برحسب ثانیه باید ترمینال را باز کنید و دستور زیر را در آن وارد کنید: defaults write com.apple.dt.Xcode ShowBuildOperationDuration -bool YES پس از آن، باید Xcode را ری‌استارت کنید تا تغییر را مشاهده کنید. در این صورت می‌بینید که زمان‌های Build پس از هر بار build کردن کد، در نوارابزار فوقانی نمایش می‌یابند: اینک می‌دانیم که زمان مورد نیاز برای build کردن پروژه چه مقدار است و می‌توانیم از روش‌های مختلف که برای کاهش این زمان وجود دارند، استفاده کنیم. 2. ردگیری زمان‌های آغاز اپلیکیشن سرعت باز شد..

توضیحات بیشتر »

یازده کتابخانه کامپوننت کاربردی React Native برای سال ۲۰۱۹ — راهنمای جامع

با رشد محبوبیت React و افزایش توسعه اپلیکیشن‌های موبایل native، جای شگفتی نیست که React-native (+) هر روز بیشتر از سوی این جامعه پذیرفته می‌شود. React Native نیز همچون خود React توسعه‌دهنده را تشویق می‌کند تا رابط کاربری اپلیکیشن را با استفاده از کامپوننت‌های مجزا بسازد. کتابخانه کامپوننت‌ها و کیت ابزارهای رابط کاربری به صرفه‌جویی در زمان کمک می‌کنند و با آن‌ها می‌توان اپلیکیشن‌ها را با سرعت بیشتری ساخت و از مجموعه پیش‌ساخته‌ای از کامپوننت‌ها کمک گرفت. در همین راستا در این نوشته قصد داریم فهرستی از کتابخانه‌های رابط کاربری مفید React Native ارائه کنیم که نقطه خوبی برای شروع به کار با آن به حساب می‌آیند. می‌توان کتابخانه‌های رابط کاربری React را با Bit (+) ترکیب کرد تا امکان اشتراک، جستجو و سازماندهی آسان کامپوننت‌ها در مجموعه‌ای از گالری‌ها و مجموعه‌های بصری فراهم آید. 1. NativeBase NativeBase (+) با بیش از 10 هزار ستاره و هزار فورک در گیت‌هاب، یکی از کتابخانه‌های کامپوننت رابط کاربری است که محبوبیت بالایی کسب کرده است و ده‌ها کامپوننت چند پلتفرمی را برای React Native عرضه می‌کند...

توضیحات بیشتر »

ساخت یک اپلیکیشن چت ساده با Node.js و Socket.io — از صفر تا صد

برای توسعه یک اپلیکیشن چت باید یک سیستم ارسال و دریافت همزمان داده‌ها را طراحی کنیم. انجام این کار به وسیله پایگاه‌های داده رابطه‌ای و فراخوانی‌های ای‌جکس (Ajax) ممکن نخواهد بود. البته به لطف فناوری WebSocket و کتابخانه socket.io این کار به آسانی ممکن می‌شود. فناوری‌های مورد نیاز در ادامه مجموعه فناوری‌هایی که در این اپلیکیشن استفاده می‌شوند را معرفی کرده‌ایم. WebSockets و socket.io WebSockets یک پروتکل است که امکان مبادله همگام دوسویه بین کلاینت و سرور را فراهم می‌سازد. در وب کلاسیک، یک کلاینت درخواستی به سرور ارسال می‌کند و سرور با بازگرداندن داده‌هایی به آن پاسخ می‌دهد. این سیستم مسئول یک اپلیکیشن چت است. در WebSockets سرور همچنان می‌تواند داده‌ها را به کلاینت ارسال کند؛ اما کلاینت نیز می‌تواند چنین کاری را انجام دهد. یک WebSocket نوعی لوله ارتباطی است که از دو طرف باز است. socket.io یک کتابخانه مبتنی بر این پروتکل است که امکان بهره‌برداری آسان از WebSockets را فراهم ساخته است. مافیای جاوا اسکریپت Node.js یک فناوری پشتیبانی شده از سوی جاوا اسکریپت است که از سوی سرور به وسیله PHP..

توضیحات بیشتر »

آموزش پایتون: ساخت اپلیکیشن نقشه وب — به زبان ساده

در این مقاله اقدام به ساخت یک نقشه وب با استفاده از داده‌های مکان‌های جغرافیایی می‌کنیم. در این مسیر، روش استفاده از Folium برای ساخت نقشه‌های وب چندمنظوره را خواهیم آموخت. در این راهنما کار ساخت اپلیکیشن را به چند حوزه تقسیم می‌کنیم و اقدامات خود را به صورت گام به گام اجرا می‌کنیم و هر خط کدی را که می‌نویسیم توضیح می‌دهیم. با ما در مراحل ساخت این اپلیکیشن جذاب همراه باشید. گام 0 – نخستین کارها ما اپلیکیشن نقشه وب خود را با استفاده از پایتون و Folium خواهیم ساخت. پیش‌فرض ما این است که همه شما با پایتون آشنا هستید و از این رو در مورد Folium توضیحاتی ارائه می‌کنیم. Folium اساساً یک کتابخانه بصری‌سازی داده است که برای بصری‌سازی داده‌های مکان‌های جغرافیایی یا داده‌هایی که شامل مختصات و مکان‌ها هستند استفاده می‌شود. اگر به تازگی با پایتون آشنا شده‌اید و روش نصب کتابخانه‌های خارجی را نمی‌دانید، توصیه می‌کنیم به این منظور از pip استفاده کنید که یک سیستم مدیریت بسته/کتابخانه است که اغلب استفاده می‌شود. برای نصب pip باید دستور زیرا در ترمینال اجرا کنید: #Python 3.x sudo apt install python3-..

توضیحات بیشتر »

۱۰ ویژگی کاربردی گیت هاب (GitHub) که باید آنها را بدانید — راهنمای کاربردی

گیت‌هاب اینک به جایی تبدیل شده است که برنامه نویسان و طراحان با یکدیگر همکاری می‌کنند. این دو دسته با همکاری هم اقدام به توسعه اپلیکیشن‌ها کرده و باگ‌ها را رفع می‌کنند. گیت‌هاب همچنین میزبان بسیاری از پروژه‌های اوپن‌سورس و کدهای زبان‌های برنامه‌نویسی مختلف است. به علاوه گیت‌هاب اپلیکیشن دسکتاپی نیز برای دو پلتفرم ویندوز و OS X منتشر ساخته است که به همه افراد امکان می‌دهد آن را درون گردش کاری‌شان به صورت بی‌واسطه ادغام کنند. اما گیت‌هاب امکاناتی بیشتر از آن چه به نظر می‌آید ارائه می‌کند. می‌توان گفت برخی از ویژگی‌های گیت‌هاب در پس رابط کاربری جذاب آن پنهان هستند و از این رو بسیاری از افراد متوجه آن‌ها نمی‌شوند. در این نوشته 10 مورد از ویژگی‌های گیت‌هاب که احتمالاً نمی‌دانید را معرفی کرده‌ایم. 1. کشیدن و رها کردن کد Gist Gist یکی از ابتدایی‌ترین امکانات گیت‌هاب است که امکان میزبانی قطعه کدهای مختلف را به کاربران می‌دهد. همچنین می‌توان در این پلتفرم در میان حجم عظیمی از کدها و زبان‌های مختلف جستجو کرد. استفاده از Gist کاملاً آسان و شهودی است. اما آیا می‌دانید که می‌توانید کدهای خود را م..

توضیحات بیشتر »

رندر کادرهای Modal در React — به زبان ساده

کادرهای Modal می‌توانند موضوعات پیچیده‌ای باشند، زیرا روش ری‌اکت برای سازماندهی DOM چنین است. اگر با مبانی ری‌اکت آشنا باشید، می‌دانید که کل اپلیکیشن یک کامپوننت است که معمولاً نامیده می‌شود و به عنوان یک فرزند به یک

به نام root# الحاق می‌شود. فایل index.html چیزی مانند زیر است: فایل public/index.html برای ایجاد ری‌اکت زمانی که کامپوننت در DOM رندر شد، عنصر واقعی
در HTML با id #root کل اپلیکیشن React را درون خود رندر می‌کند. در نتیجه، این وضعیت که کامپوننت‌های اپلیکیشن React کاملاً تو در تو باشند، امری رایج محسوب می‌شود. منظور ما از تو در تو، ده‌ها سطح و یا بیشتر است. بنابراین اگر یکی از این سطوح کاملاً عمیق در لایه‌های تو در تو بخواهد یک modal را نمایش دهد، با برخی مشکلات جدی CSS مواجه می‌شود. Modal-ها یک لایه روی صفحه قرار می‌دهند و از این رو اولویت نمایشی بالاتری نسبت به همه عناصر دیگر دارند. اگر بخواهید آن را برحسب z-index تعیین کنید، باز هم کاملاً تو در تو خواهد بود و عناصر والد در سطوح بالاتر CSS تقدم خواهند داشت. بنابراین به جای این که با CSS سر و..

توضیحات بیشتر »

راهنمای جامع React (بخش اول) — از صفر تا صد

مقاله‌ای که پیش رو دارید مروری جامع در مورد React است که گرچه ادعا ندارد همه موارد مربوط به این فریمورک را در خود گنجانده، اما مبانی مقدماتی مورد نیاز برای این که به یک توسعه‌دهنده خبره React تبدیل شوید را در اختیار شما قرار خواهد داد. این مجموعه مطلب در 8 فصل ارائه شده است که فصل نخست آن شامل مباحث زیر می‌شود: فصل اول: مفاهیم اساسی جاوا اسکریپت مدرن برای استفاده از React متغیرها تابع‌های Arrow Rest و spread تخریب شیء و آرایه الفاظ قالبی (template literals) کلاس‌ها Callback-ها promise-ها Async/Await ماژول‌های ES توجه داشته باشید که آنچه در ادامه آمده است تنها فصل اول این مجموعه مطلب را شامل می‌شود و برای مطالعه فصول بعدی باید به بخش‌های آتی این سری مقالات مراجعه کنید. مقدمه‌ای بر یک کتابخانه View به نام React در این بخش React و ماهیت آن را توضیح می‌دهیم. React چیست؟ React یک کتابخانه جاوا اسکریپت است که هدف آن ساده‌سازی مراحل توسعه رابط‌های بصری است. React از سوی فیسبوک توسعه یافته است و در سال 2013 انتشاریافته است. در واقع React زیرساخت تشکیل دهنده بسیاری اپلیکیشن‌های پر استفاده از..

توضیحات بیشتر »