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

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

در مسیر تجربه کاربری و سهولت توسعه اپلیکیشن های هیبریدی هستند – اپلیکیشن هایی که با تکنولوژی هایی ساخته می‌شوند که خیلی از توسعه دهندگان با آن آشنایی دارند (مثل CSS , JS , HTML۵) و در یک قالب قرار می‌گیرد و اجازه می دهد بصورت native بر روی دستگاه اجرا شود.

اپ های هیبریدی راه طولانی ای را طی کرده اند تا فاصله بین کارایی اپ native و راحتی توسعه اپ برپایه وب ر پر کند. در لبه ی این تکنولوژی فریمورک Facebook’s React Native قرار دارد.

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

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

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

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

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

شروع کار با react native

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

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

brew install node

1	brew install node

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

brew install watchman

1	brew install watchman

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

مطالب دیگر : آشنایی با زبان برنامه نویسی اسکالا

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

npm install -g react-native-cli

1	npm install -g react-native-cli

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

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

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

react-native init PropertyFinder

1	react-native init PropertyFinder

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

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

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

brew link --overwrite node

1	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)

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

│ 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 پروژه را بسته و اجرا کنید.

مطالب دیگر : Full stack developer چیست و برای تبدیل شدن به آن چه باید کرد؟

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

فایل index.ios.js رو در ویرایشگر فایل محبوب خود باز کرده و محتوای فعلی آن را پاک کنید چون می خواهیم اپلیکیشن را از اول خودمان بسازیم.

کد زیر را در شروع فایل قرار دهید :

'use strict';

1	'use strict';

این کد Strick Mode را فعال می کند که کنترل کننده خطاها را بهبود داده و یک سری ویزگی های بلا استفاده جاوا اسکریپت را حذف می کند.

نکته : برای مطالعه بیشتر در مورد Strick Mode شما را به مقاله‌ای از Jon Resig ارجاع می دهم : ECMAScript ۵ Strict Mode, JSON, and More.

حالا خط‌های زیر رو اضافه کنید :

import React from 'react';

import { StyleSheet  , Text , AppRegistry } from "react-native";

import React from 'react';

import { StyleSheet , Text , AppRegistry } from "react-native";

این کد ماژول های react و react native را اضافه می کند و آنها را به متغیرهای React و ReactNative الحاق می کند. React Native از تکنولوژی بارگذاری ماژول در Node.js توسط تابع require استفاده می کند که تقریباً معادل وارد کردن کتابخانه‌ها در Swift هست.

نکته : برای کسب اطلاعات بیشتر در مورد ماژول های جاوا اسکریپت این مقاله رو مطالعه کنید.

زیر بخش require این کد را اضافه کنید :

var styles = StyleSheet.create({

  text: {

    color: 'black',

    backgroundColor: 'white',

    fontSize: 30,

    margin: 80

  }

});

var styles = StyleSheet.create({

text: {

color: 'black',

backgroundColor: 'white',

fontSize: 30,

margin: 80

}

});

این یک style که شما به متن ‘Hello World’ خود اعمال می‌کنید را تعریف می کند. اگر شما قبلاً در زمینه توسعه وب کار کرده باشید قطعاً با این کد آشنایی دارید. کلاس استایل StyleSheet برای استایل دهی به UI اپلیکیشن شبیه CSS در وب می باشد.

مطالب دیگر : ۵۰ قالب رایگان و فوق العاده کاربردی برای بوت استرپ ۳

حالا کد زیر را که استایل تعریف شده در بالا را مورد استفاده قرار می دهد را وارد نمایید :

class PropertyFinderApp extends React.Component {

    render() {
        return (
            <Text style={styles.text}>"Hello World!"</Text>
        )
    }

}

class PropertyFinderApp extends React.Component {

render() {

return (

<Text style={styles.text}>"Hello World!"</Text>

)

}

این یک کلاس جاوا اسکریپت است. کلاس‌ها در ES۶ معرفی شدند. از اونجا که جاوا اسکریپت دائماً در حال تغییر هست, توسعه دهندگان محدودیتی دارند که باید کدهای خود را با مرورگرها و سیستم عامل های قدیمی هم سازگار کنند. از اونجایی که IOS ۹ بطور کامل از ES۶ پشتیبانی نمی کند، React Native از ابزاری به اسم Babel برای انتقال خودکار جاوا اسکریپت مدرن به جاوا اسکریپت سازگار مورد نیاز استفاده می کند.

نکته : اگر شما یک توسعه‌دهنده وب هستید, می توانید از Babel در مروگر به خوبی استفاده کنید! دیگر هیچ دلیلی برای استفاده از ورژن های قبلی جاوا اسکریپت نیز وجود ندارد.

کلاس PropertyFinderApp همینطور که مشاهده کردید React.Component را توسعه میده (extends) که این بلاک پایه React UI هست. کامپوننت ها شامل خواص غیرقابل تغییر, متغیرهای قابل تغییر و ارائه یک تابع برای رندر کردن هستند. برای اپلیکیشن فعلی کار ساده است و فقط یک متد رندر نیاز دارد.

در نهایت کد زیر را در انتهای فایل وارد کنید :

AppRegistry.registerComponent('PropertyFinder', () => PropertyFinderApp );

1	AppRegistry.registerComponent('PropertyFinder', () => PropertyFinderApp );

AppRegistry نقطه ورود به اپلیکیشن را تعریف می کند و کامپوننت های اصلی را فراهم می کند.

تغییرات را در فایل index.ios.js ذخیره کنید و به Xcode بازگردید. مطمئن شوید که طرح PropertyFinder با یکی از شبیه سازهای آیفون انتخاب شده و سپس پروژه را build و run کنید. بعد از چند ثانیه شما اپلیکیشن Hello World را بصورت اجرا شده مشاهده می‌کنید :

این یک اپلیکیشن جاوا اسکریپت است که در شبیه ساز اجرا شده و بدون هیچ نشانی از مرورگرها، یک UI بصورت Native رندر می‌کند!

اگر هنوز به این یقین پیدا نکردید داخل Xcode به مسیر Debug\View Debugging\Capture View Hierarchy برید و نگاهی به native view hierarchy بیاندازید. شما هیچ موجودی از UIWebView نمی‌بینید ! متن شما روی یک view به نام RCTText نمایش داده شده است. اما دلیل این اتفاق چیست ؟ به Xcode بازگردید و به مسیر File\Open Quickly… بروید و RCTView.h را تایپ کنید. متوجه می شوید که RCTView مستقیم از UIView ارث بری می کند!

اگر توسط Safari به آدرس http://localhost:۸۰۸۱/index.ios.bundle بروید کد جاوا اسکریپت را برای اپلیکیشن خود می بینید, همچنین شما می توانید کد Hello World را در ساختار React Native مشاهده کنید!

دوباره اجرا کردن یک اپلیکیشن React Native به سادگی رفرش کردن یک مرورگر وب هست. نکته اینجاست که این کار تغییرات کد جاوا اسکریپت را اعمال می کند – کد Native یا تغییرات resource نیازمند rebuild در Xcode می باشد.

منبع : Roocket.ir