آموزش ساخت اپلیکیشن های موبایل با ری اکت نیتیو React Native

آموزش ساخت اپلیکیشن های موبایل با ری اکت نیتیو React Native یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته ی آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه ی فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته ی آموزشی ساخت برنامه های موبایل با React Native است که با نام اصلی React Native Building Mobile Apps از شرکت Lynda منتشر شده است.

React چیست؟

React که تحت عناوین React.js و یا ReactJS نیز شناخته می شود یک کتابخانه جاوااسکریپت برای ساختن واسط کاربری برنامه و یا UI می باشد. این کتابخانه توسط فیس‌ بوک نگهداری می شود و جامعه‌ای از برنامه نویسان و کمپانی های مختلف بر روی توسعه آن کار می کنند. با استفاده از کتابخانه React به سادگی می توانیم برنامه های موبایل و همچنین برنامه های تک صفحه ای و یا SPA بسازیم.

کاربرد اصلی کتابخانه React در رندر کردن داده ها به درون DOM می باشد. به همین دلیل است که استفاده از کتابخانه React اغلب نیازمند استفاده از دیگر کتابخانه ها برای انجام عملیات state management و routing می‌باشد. Redux و React Router مثالهایی از اینگونه ابزارها می باشند. برای اطلاعات بیشتر توصیه می کنیم که از آموزش شروع به کار با ری اکت جی اس React.js استفاده کنید.

React Native چیست؟

React Native یک فریم ورک open-source برای ساخت برنامه های موبایل است که توسط فیسبوک توسعه داده شده است. این فریم ورک برای ساختن اپلیکیشن های موبایل برای پلتفرم های اندروید و iOS و وب و UWP مورد استفاده قرار می‌گیرد. با استفاده از این فریم ورک به سادگی می توانید از قابلیت های موجود در این پلتفرم ها برای ساخت برنامه های موبایل به صورت native استفاده کرد. علاوه بر این، در فریم ورک React Native یک‌ قسمت ناکامل برای QT نیز وجود دارد.

روند کار کردن و اصول فریم ورک React Native تقریباً شبیه به کتابخانه React می‌باشد. تفاوت اصلی بین React Native و کتابخانه React در این است که فریم ورک React Native بر خلاف React اقدامی برای تغییر دادن DOM از طریق Virtual DOM نمی کند. در عوض فریم ورک React Native در یک background process اجرا شده و کدهای جاوا اسکریپت نوشته شده توسط برنامه نویس را تفسیر می کند. این موضوع به طور مستقیم بر روی دستگاه موبایل کاربر اتفاق می‌افتد و از طریق یک پل ارتباطی و یا Bridge که به صورت asynchronous کار میکند از قابلیت های native مربوط به دستگاه کاربر استفاده می شود.

طراحی جریان ورود و ناوبری در اپلیکیشن موبایل با React Native

در آموزش React Native Building Mobile Apps، توسعه اپلیکیشن از راه‌اندازی محیط برنامه‌نویسی با Node.js و NPM شروع می‌شود و سپس به ساخت بخش‌های اصلی رابط کاربری می‌رسد. یکی از مراحل اولیه، ایجاد Login Component است که پایه صفحه ورود کاربر را شکل می‌دهد. در ادامه، ساخت App Container و راه‌اندازی Navigation ساده بررسی می‌شود تا بخش‌های مختلف برنامه بتوانند به شکل منظم در دسترس قرار بگیرند. این ترتیب به توسعه‌دهنده کمک می‌کند ساختار اپلیکیشن را پیش از اضافه کردن قابلیت‌های پیچیده‌تر طراحی کند و مسئولیت هر قسمت را بهتر تشخیص دهد.

در کنار ناوبری اصلی، آموزش ساخت Drawer و Side Menu Class و اضافه کردن منوی کناری به برنامه را پوشش می‌دهد. این نوع منو می‌تواند مسیر دسترسی به بخش‌های مختلف اپلیکیشن را در یک فضای مشخص جمع کند. همچنین راه‌اندازی Settings Store و پیکربندی Babelrc در سرفصل‌ها قرار دارند؛ موضوعاتی که به ساختاردهی تنظیمات برنامه و آماده‌سازی محیط توسعه مربوط می‌شوند. با دنبال کردن این مراحل، می‌توانید ارتباط میان اجزای رابط کاربری، مسیرهای ناوبری و تنظیمات پروژه را در یک اپلیکیشن React Native بهتر درک کنید.

از صفحه ورود تا قابلیت‌های Match و Post در برنامه

ساخت Login Screen تنها مرحله آغازین این آموزش است؛ ادامه آموزش به اضافه کردن قابلیت‌های Match و Post می‌پردازد تا اپلیکیشن از مجموعه‌ای از صفحه‌های اولیه به برنامه‌ای با بخش‌های کاربردی‌تر تبدیل شود. این ترتیب آموزشی کمک می‌کند ابتدا جریان ورود و ساختار کلی رابط کاربری شکل بگیرد و سپس قابلیت‌های تازه به همان ساختار اضافه شوند. با توجه به اینکه آموزش در سطح متوسط قرار دارد، تمرکز آن بر کنار هم قرار دادن اجزای مختلف برنامه و توسعه تدریجی امکانات است، نه صرفاً آشنایی مقدماتی با فناوری‌های مورد استفاده.

در این مسیر، تنظیم محیط توسعه و راه‌اندازی حساب Firebase نیز مطرح می‌شود. Firebase در این پروژه به‌عنوان بخشی از فناوری‌های مورد استفاده معرفی می‌شود و آماده‌سازی حساب آن یکی از مراحل آموزشی است. آشنایی با این بخش در کنار ساخت Component ها و Navigation، دید گسترده‌تری نسبت به نیازهای یک اپلیکیشن موبایل ایجاد می‌کند. اگر پیش‌تر با مفاهیم پایه React Native آشنا شده‌اید، بررسی مراحل ساخت Login Screen و افزودن Match و Post می‌تواند به شما کمک کند رابطه میان اجزای رابط کاربری و قابلیت‌های یک برنامه موبایل را در قالب یک روند توسعه منسجم دنبال کنید.