آموزش React Native: نوشتن برنامههای اندرویدی با استفاده از جاوا

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

تفاوت اصلی React Native با سایر فریم ورک‌ها:

تفاوت اصلی React Native با سایر فریمورک‌ها، مانندِ (PhoneGap)(Apache cordova) یا تیتانیوم شرکت (Appcelerator Titanium) که از جاوااسکریپت برای توسعه برنامه‌های iOSای استفاده میکنند، چیست؟

(برخلافِ فونگپ) با استفاده از React Native کد شما به زبانِ جاوااسکریپت نوشته می‌شود، اما UI برنامه کاملاً نیتیو است. این برنامه مشکلاتی را، که برنامه‌های هیبریدی HTML5 اغلب با آن مواجه‌اند، ندارد.
به‌علاوه (برخلافِ تیتانیوم)، ریاکت رویکردی تازه، اساسی و بسیار کارامد را برای ساخت واسط‌های کاربری معرفی میکند. UIتان متدی از حالت کنونی برنامه (current app state) است.

آموزش PhoneGap و Cordova (ششمین دوره از مجموعه صد روز تا دولوپری)

React Native ،ری ‌اکت را وارد حوزه برنامه‌های موبایلی می‌کند. هدفش این نیست که یکبار برنامه‌ای را بنویسیم و بعد بتوانیم آن را روی هر پلتفرمی اجرا کنیم. هدف یادگیری یکباره (به شیوهی ریاکت) و کدنویسی در هرجایی است. تصمیمی مهم که باید گرفته شود.

انجمن حتی ابزارهایی مانندِ Expo و Create React Native App را برای کمک بهتان اضافه کرده است تا بدون نیاز به Xcode یا اندروید استودیو بتوانید برنامه‌های React Native را بنویسید.

می‌توانید برنامه‌های React Native را هم برای اندروید و هم برای iOS بنویسید، اما در این آموزش تنها به اندروید میپردازیم.

در این مقاله آموزشی مراحلِ نوشتن یک برنامه اندرویدی را برای جستوجوی املاک در بریتانیا خواهید دید.

نگران این موضوع نباشید که هرگز قبلاً کدِ جاوا اسکریپت ننوشتهاید یا از ویژگیهایی مانند CSS که در ادامه میبینید، استفاده نکرده‌اید. در این آموزش گام به گام پیش خواهیم رفت و برای یادگیری بیشتر شما منابعی را معرفی خواهیم کرد.

آمادهاید؟ به خواندن ادامه دهید.

فهرست محتوای این مقاله

شروع به کار

Node و JDK

React Native از Node.js، که یک محیط اجرایی جاوااسکریپت است، برای ساختِ کد جاوااسکریپت شما استفاده می‌کند. React Native همچنین از یک نسخه‌ی به‌روزِ JDK برای اجرای برنامه‌ی اندروید استفاده می‌کند. دستورالعمل‌های زیر را برای سیستم خودتان اجرا کنید تا از نصبِ ورژن‌های لازم مطمئن شویم.

آموزش Node.js رایگان – راهنمای جامع مبتدیان پروژه محور

سیستم عامل مک (MacOs)

در ابتدا با استفاده از راهنمایی‌های موجود در سایت Homebrew ، Homebrew را نصب کنید. سپس با اجرای کد زیر در ترمینال Node.js را نصب کنید.

brew install node

سپس، از homebrew برای نصبِ Watchman استفاده کنید. واچمن یک فایلواچر (File Watcher) از شرکت فیسبوک است.

brew install watchman

ریاکت نیتیو از واچمن استفاده میکند تا تغییراتِ انجام شده روی کد را بفهمد و مطابق با آن برنامه را ریبیلد (rebuild) کند. این کار دقیقاً شبیه اندروید استودیو است که در هر بار ذخیره فایل برنامه را بیلد (build) میکند.

در پایان نیز اگر لازم بود، JDK8 یا ورژن جدیدتر آن را دانلود و نصب کنید.

سیستم عامل ویندوز (Windows)

در ابتدا با استفاده از راهنمایی‌های موجود در سایت Chocolatey، Chocolatey را نصب کنید.

اگر Node.js ندارید یا نسخه آن قدیمی‌تر از 4 است، آن را نصب کنید. کد زیر را در حالت Administrator اجرا کنید. (روی برنامه command prompt راست کلیک کنید و “Run as Administrator” را انتخاب کنید.)

choco install -y nodejs.install

برای اجرای بیلد اسکریپتهای (Build Scripts) ریاکت نیتیو، پایتون لازم داریم. اگر پایتون2 را نصب ندارید، کد زیر را در حالت Administrator اجرا کنید:

اگر JDK را نصب ندارید یا نسخهی آن قدیمیتر از 8 است، کد زیر را در حالت Administrator اجرا کنید:

choco install -y python2

لینوکس (Linux)

با استفاده از “دستورالعملهای نصبِ موجود برای توزیع لینوکس” Node.js را نصب کنید. به ورژن 6 یا جدیدتر از آن نیاز خواهید داشت.

در آخر و در صورت نیاز، JDK 8 یا ورژن جدیدتر آن را دانلود و نصب کنید.

React Native CLI

از Node Package Manager (یا nmp) برای نصبِ واسط دستوری ریاکت نیتیو (CLI) استفاده کنید. در ترمینال (ترمینال، command prompt یا shell) تایپ کنید:

npm install -g react-native-cli

دستور npm به طور کلی ابزار CLI را دانلود و نصب می‌کند. عملکرد nmp مشابه JCenter (لینک موجود در مقالهی اصلی اضافه گردد) است و در پکیج Node.js قرار گرفته است.

در ادامه، با استفاده از راهنمایی‌های موجود در سایت Yarn ، Yarn را نصب کنید. یارن کلاینتی پرسرعت برای nmp است.

محیط توسعه اندروید (Android development Environment)

اگر قبلا محیط توسعه اندروید خود را برپا نکردهاید، این کار را انجام دهید. مطمئن شوید که یک برنامه اندرویدی به خوبی در امولاتور (emulator) اجرا می‌شود.

React Native به Android 6.0 (Marshmallow) نیاز دارد. در اندروید استودیو مسیر روبه‌رو را دنبال کنید: Tools/Android/SDK Manager. SDK Platforms و سپس Show Package Details را انتخاب کنید. مطمئن شوید که همه آیتم‌های زیر انتخاب شده‌اند:

Google APIs, Android 23
Android SDK Platform 23
Intel x86 Atom_64 system Image
Google APIs Intel x86 Atom_64 System Image

آموزش React Native

در ادامه SDK Tools و سپس Show Package Details را انتخاب کنید. با کلیک روی فلش،Android SDK Build Tools را باز کنید و بررسی کنید که 23.0.1 انتخاب شده باشد.

در آخر برای نصب آنها روی Apply کلیک کنید.

پس از اینکه اندروید کامپوننت‌های انتخابی را نصب کرد، با اجرای SDK Platform 23 امولاتوری بسازید.

برنامه اولیه را بسازید

به پوشه‌ای بروید که میخواهید برنامه را در آن ذخیره کنید و کد زیر را در ترمینال اجرا کنید:

react-native init PropertyFinder

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

در ترمینال کد زیر را اجرا کنید:

cd PropertyFinder

در پوشه‌ها و فایل‌های ایجاد شده برخی آیتم‌های قابل توجه را پیدا خواهید کرد:

node_modules پوشهای است که فریمورک React Native در آن هستند.
js نقطه اجرای برنامه (Entry point) است که CLI آن را ساخته است.
js برنامه اصلی است که CLI آن را ایجاد کرده است.
android پوشه‌ای است که پروژه اندروید و کدی که برای bootstrap کردن برنامه به آن احتیاج دارید، در آن هستند.
iOS پوشه‌ای است که کدهای مربوط به iOS در آن است و در این آموزش به آن کاری نخواهید داشت.

اگر امولاتور اندروید در حال اجرا نیست، آن را با اجرای SKD 23 اجرا کنید.

کد زیر را در ترمینال اجرا کنید:

react-native run-android

امولاتور تصویر زیر را نشان خواهد داد.

آموزش React Native

اگر پیغام خطایی به صورت “SDK location not found!” دریافت کردید، کارهای زیر را به ترتیب انجام دهید:

به پوشه android/ پروژهی react-native خود بروید.
با استفاده از کد زیر، فایلی با نام local.properties ایجاد کنید.

sdk.dir = {PATH TO ANDROID SDK}

برای مثال، در سیستم عامل مک، مسیر SDK چیزی شبیه این است:

پیشنهاد فرانش به شما

یادگیری وردپرس در یک هفته

/Users/USERNAME/Library/Android/sdk.

حتماٌ متوجه شدید که پنجره ترمینالی باز شده است و چیزی شبیه تصویر زیر را نشان میدهد:

آموزش React Native

این Metro Bundler است، یک باندلر جاوااسکریپت برای React Native که در Node.js اجرا میشود. کمی بعد به‌خوبی درباره وظیفه آن توضیح خواهم داد.

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

react-native start

توجه: در این آموزش React Native، کد جاوااسکریپت مینویسید و نیازی به اندروید استودیو برای ویرایش کدهای خود ندارید. من ازSublime Text استفاده میکنم که برنامه‌ای ارزان و همه‌کاره است، اما می‌توانید از برنامه‌هایی مثل Atom ، Brackets یا هر برنامه ویرایش متن سبک دیگری برای کد نویسی استفاده کنید.

موضوعات پایه React Native

در این بخش، با کار کردن روی PropertyFinder با موضوعات پایه React Native آشنا خواهید شد.

را با برنامه ویرایش فایل انتخابی خود، فایل App.js باز کنید و نگاهی به ساختار کد بیندازید:

import React, { Component } from "react"; // 1
import {Platform, StyleSheet, Text, View} from "react-native";
const instructions = Platform.select({ ... }); // 2
type Props = {};
export default class App extends Component<Props> { ... } // 3
const styles = StyleSheet.create({ ... }); // 4

بیایید با هم گام به گام کد را بررسی کنیم:

ماژول‌های لازم را ایمپورت (import) می‌کند.
یک پیغام متناسب با پلتفرم را تنظیم می‌کند.
کامپوننتی (component) را، که مسئول UI است، تعریف میکند.
شئای با نام styles ایجاد میکند که layout و ظاهر کامپوننت را کنترل میکند.

نگاهی دقیق‌تر به این کد ایمپورت بیندازید:

import React, { Component } from "react";

این کد از سینتکس ایمپورت ECMAScript 6 ES6 برای لود کردن ماژول react و اختصاص آن به متغیری به نام React استفاده می‌کند. این کار تقریبا مشابه ایمپورت کردن کتابخانه‌ها در اندروید است. همچنین از چیزی به نام destructuring assignment برای آوردن شئ Component به برنامه استفاده می‌کند. Destructuring به شما این امکان را میدهد که چندین property شئ را برداشته و با استفاده از تنها یک خط کد آنها را به چندین متغیر اختصاص دهید.

استفاده از ES6 روشی بهتر برای نوشتن جاوااسکریپت است، چون از ویژگی‌هایی مانند پارامترهای دیفالت، کلاس‌ها، توابع فلش (استفاده از علائم برای کوتاه کردن سینتکس توابع) (arrow functions) و Destructuring assignment پشتیبانی میکند. تمامی مرورگرها از ES6 پشتیبانی نمی‌کنند. ریاکت نیتیو از ابزاری به نام Babel استفاده میکند تا در صورت لزوم به صورت خودکار کد جاوااسکریپت مدرن را به کد جاوااسکریپت قدیمیِ سازگار با مرورگر ترجمه کند.

برگردیم سراغ App.js، به تعریف کلاس نگاهی بیندازید:

export default class App extends Component<Props>

این کد، کلاسی را تعریف می‌کند که از یک Component ریاکت ارثبری (Extend) دارد. Modifier کلاس export default کلاس را پابلیک (Public) می‌کند و اجازه استفاده از این کلاس را در سایر فایل‌ها می‌دهد.

فایل index.js را باز کنید و نگاهی به فایل نقطهی شروع اجرای برنامه (entry point) بیندازید:

import {AppRegistry} from "react-native";
import App from "./App";
import {name as appName} from "./app.json";
AppRegistry.registerComponent(appName, () => App);

این کد کامپوننت ایمپورت شده را به عنوان نقطه شروع اجرای برنامه تعیین می‌کند.

حالا زمانِ نوشتن برنامه رسیده است.

در فایل App.js، کد زیر را در بالای برنامه و قبل از کدهای مربوط به ایمپورت وارد کنید:

"use strict";

این کد حالت Strict Mode, را فعال میکند. در این حالت راحت‌تر می‌شود خطاها را مدیریت کرد و برخی از ویژگی‌های نامناسب زبان جاوااسکریپت غیرفعال می‌شوند. به زبانی ساده، این کد جاوااسکریپت را بهتر میکند!

در کلاس App، به جای render() کد زیر را قرار دهید:

render(){
return React.createElement(Text, {style: styles.description}, "Search for houses to buy!");
}

کلاس App از React.Component ارث میبرد، که ابتداییترین قسمت UI ریاکت است. کامپوننت‌ها شامل immutable properties (خصیصه‌های تغییرناپذیر) و Mutable state variables (متغیرهای استیت تغییرپذیر) هستند و تابعی را برای رندر گرفتن عرضه می‌کنند. برنامه موردنظر بسیار ساده است و تنها به یک متد رندر نیاز دارد.

کامپوننت‌های React Native شبیه کلاس‌های view اندروید نیستند، بلکه معادل سب‌کتر آنها هستند. فریمورک، درخت کامپوننت‌های ریاکت را به UI نیتیو موردنیاز تبدیل میکند.

درادامه، به جای const styles کد زیر را بنویسید:

const styles = StyleSheet.create({
description: {
fontSize: 18,
textAlign: "center",
color: "#656565",
marginTop: 65,
},
});

این کد استایلی ساده به متنِ توضیحات شما می‌دهد. اگر قبلاٌ کد نویسی تحت وب کار کرده باشید، احتمالاٌ برخی از اسامی propertyهای بالا برایتان آشناست. کلاسِ StyleSheet ریاکت نیتیوی که برای تنظیم استایلِ UI برنامه استفاده شده، مشابه با Cascading Style Sheets CSS است که در برنامه‌نویسی تحت وب از آن استفاده می‌شود.

سپس تکه کد instructions را حذف کنید چون دیگر به آن نیازی ندارید.

تغییرات را در App.js ذخیره کنید و امولاتور را باز کنید. دو بار دکمه R کیبورد را بزنید و میبینید که برنامه جستوجوی ملک نوپای شما کمکم روی صفحه شکل میگیرد:

آموزش React Native

چیزی

منبع: فرانش

برنامه نویسی - طراحی وب