عنوان مقاله :

آموزش ساخت برنامه موبایل توسط React Native – قسمت اول

گردآوری و تالیف : امیررضا سیستانه ای
تاریخ انتشار : 09 شهریور 1396
دسته بندی ها : جاوا اسکریپت

در مقاله های قبل مزایای React Native رو بررسی کردیم و گفتیم که چرا React Native آینده ی اپلیکیشن های هیبریدی هست. در این مقاله هم بعد از مطرح کردن یک مقدمه کار پروژه رو آغاز می کنیم. 

در این سری آموزش‌ها میخوایم درباره ساخت اپلیکیشن های native برای ios و اندروید یاد بگیریم. اما این کار رو توسط فریمورک محبوب React Native Javascript انجام میدیم. البته دوره آنلاین آموزش React Native در راکت وجود داره که میتونید از این دوره استفاده کنید . 

درطول سالیان پیش فریمورک های زیادی از جاوا اسکریپت استفاده کردند تا اپلیکیشن های ios بسازند (مثل PhoneGap ) اما چه چیزی باعث شده React Native خاص بشه ؟

  1. برخلاف PhoneGap در React Native منطق اپلیکیشن شما در جاوا اسکریپت نوشته و اجرا میشه, درحالی که UI اپلیکیشن شما بصورت کامل native هست. پس شما هیچ کامپوننت مرتبط با HTML 5 ندارید.
  2. برخلاف Titanium, فریمورک React یک رویکرد اصیل و کاربردی برای ساخت رابط کاربری دارد.

نقطه کلیدی در رابطه با React Native اینه که هدف اصلیش آوردن قدرت مدل برنامه نویسی React به توسعه ی اپلیکیشن های موبایلی هست. هدف اون رسیدن به یک فریمورک cross platform و ابزار یک بار بنویس و هر جا اجرا کن, نیست.  بلکه اینه که یک بار یاد بگیرید و هرجا بنویسید, که همین یک تمایز بزرگ محسوب میشه. این سری آموزش پلتفرم IOS رو پوشش میده ولی اگر شما مفاهیم اصلی رو یاد بگیرید میتونید از این‌ اطلاعات برای ساخت راحت و سریع اپلیکیشن اندروید اون استفاده کنید.

اگر شما تابحال اپلیکیشنی با objactive-C یا Swift نوشته باشید, شما ممکنه خیلی درمورد استفاده از جاوا اسکریپت برای این کار هیجان‌زده نشوید. بهرحال بعنوان یک توسعه‌دهنده Swift نکته ی دومی که در بالا مطرح کردیم میتونه نظرتون رو جلب کنه. درواقع React برنامه نویسی کاربردی رو بطور مستقیم به لایه ی UI میاره.

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

شروع کار

React Native از Node.js برای ساخت کد جاوا اسکریپت استفاده می کنه. اگر شما Node.js رو نصب نکردید, الان وقتشه!

ابتدا Homebrew رو با توجه به آموزش موجود در سایتش نصب کنید. سپس Node.js رو با استفاده از دستور زیر در Terminal نصب کنید :

brew install node

حالا با استفاده از homebrew و دستور زیر watchman رو نصب کنید. (watchman یک نمایشگر فایل از فیسبوک هست)

brew install watchman

کاربرد این برای React Native هست و برای آنکه متوجه بشه تغییراتی در کدشما ایجاد شده و بازسازی انجام بشه. مثل این می مونه که کدی داشته باشید تا هروقت فایل رو ذخیره کردید کامپایل انجام بشه.

حالا با استفاده از npm و دستور زیر React Ntive Command Line Interface رو نصب کنید :

npm install -g react-native-cli

این از Node Package Manager برای دریافت ابزار CLI و نصب همگانی اون استفاده می کنه. 

نکته : اگر میخواهید سورس اصلی React Native Framework رو داشته باشید از طریق این لینک بهش دسترسی دارید.

به فولدری که میخواهید اپلیکیشن React Native خودتون رو توسعه بدید رفته و با استفاده از ابزار CLI پروژه رو آغاز کنید :

react-native init PropertyFinder

توجه کنید اینجا PropertyFinder نام اپلیکیشن ماست.

این دستور یک پروژه آغازین می سازه که شامل هرچیزیست که برای ساخت یک اپلیکیشن React Native نیاز دارید.

نکته : اگر شما درمورد ورژن Node مشکل خوردید مطمئن شید که اونی رو استفاده می‌کنید که توسط brew نصبش کردید. دستور زیر رو در terminal بزنید :

brew link --overwrite node

اگر شما نگاهی به فولدرهای ساخته شده بیاندازید شما یک فولدر node_modules پیدا می‌کنید که شامل فریمورک React Native هست. همچنین شما یک فایل index.ios.js پیدا می‌کنید که اسکلت اپلیکیشن ساخته شده توسط ابزار cli هست. همچنین فولدر ios وجود داره که شامل پروژه Xcode هست و کدهایی برای نیاز bootstrap در اپلیکیشن شما. درنهایت فولدرهای همتای اون برای اندروید وجود داره هرچند ما در این آموزش روی IOS تمرکز می کنیم.

فایل پروژه Xcode رو باز کرده و run , build کنید. شبیه ساز شروع به کار کرده و پیام خوش آمدگویی بصورت زیر نمایش داده می‌شود :

همچنین شما ممکنه متوجه یک پیام terminal بصورت زیر شوید :


 ┌──────────────────────────────────────────────┐

 │  Running packager on port 8081.                                            │

 │                                                                            │

 │  Keep this packager running while developing on any JS projects. Feel      │

 │  free to close this tab and run your own packager instance if you          │

 │  prefer.                                                                   │

 │                                                                            │

 │  https://github.com/facebook/react-native                                  │

 │                                                                            │

 └──────────────────────────────────────────────┘

Looking for JS files in

   /Users/tomelliott/Desktop/Scratch/PropertyFinder



[6:15:40 PM]  Building Dependency Graph

[6:15:40 PM]  Crawling File System

[6:15:40 PM]  Loading bundles layout

[6:15:40 PM]    Loading bundles layout (0ms)

[Hot Module Replacement] Server listening on /hot



React packager ready.



[6:15:41 PM]    Crawling File System (747ms)

[6:15:41 PM]  Building in-memory fs for JavaScript

[6:15:42 PM]    Building in-memory fs for JavaScript (653ms)

[6:15:42 PM]  Building in-memory fs for Assets

[6:15:42 PM]    Building in-memory fs for Assets (277ms)

[6:15:42 PM]  Building Haste Map

[6:15:42 PM]  Building (deprecated) Asset Map

[6:15:42 PM]    Building (deprecated) Asset Map (49ms)

[6:15:42 PM]    Building Haste Map (400ms)

[6:15:42 PM]    Building Dependency Graph (2094ms)

درواقع این React Native packager هست که بر پایه node اجرا میشه. پنجره terminal رو نبندید و اجازه بدید در background درحال اجرا باشه و اگر به اشتباه اون رو بستید توسط Xcode پروژه رو بسته و اجرا کنید.

در قسمت بعد از این سری مقالات پروژه رو با HelloWorld آغاز می‌کنیم و سپس سراغ مفاهیم مربوط به React Native میریم و پروژه رو همزمان جلو می بریم.

منبع

مقالات پیشنهادی

۵ فریمورک مفید جاوا اسکریپت برای Front-End و Back-End

جاوا اسکریپت زبان سطح بالا و مفسری است که تمام تقریبا مرورگرهای مدرن و وبسایت ها از آن استفاده می کنند. این زبان یکی از سه تکنولوژی اصلی است که از طرف...

7 دلیل برای اینکه چرا React Native آینده ی اپلیکیشن های هیبریدی است

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

15 کتابخانه جالب javascript و css فروردین ۹۶

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

حس اتوماتیک سازی کارهای front-end با gulp

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

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
majid yavari | 2 ماه پیش

سلام خیلی ممنون بابت مقاله خوبتون

یه سوال داشتم که مزیت برنامه نوسی با جاوا چیه و مزیت برنامه نویسی با react برای موبایل

با تشکر

حسام موسوی | 2 ماه پیش

جاوا زبان پیشفرض کد نویسی اندرویده که باهاش هر کاری میشه کرد هر کاری
react native هم کد هاش در نهایت به جاوا کامپایل میشه در تست های انجام شه react native گاهن در بخش های بهینه تر از خود کد نویسی های جاوایی که انجام میدید هست