محتوا
توسعه برنامه های تلفن همراه بومی یک محیط دشوار است. سیستم عامل های مختلف ، مجموعه وسیعی از تولیدکنندگان گوشی و طیف وسیعی از وضوح صفحه برای ساخت وجود دارد. خوشبختانه ، فیس بوک React Native را منتشر کرده است - چارچوبی برای گسترش رویکرد React برای توسعه برنامه های تلفن همراه طراحی شده است.
در این آموزش ، ما قصد داریم با استفاده از API رایگان OpenWeatherMap ، یک برنامه آب و هوا در زمان واقعی بسازیم. من کار با اجزای React Native ، تصاویر و سبک ها و بارگیری و تجزیه داده های JSON را پوشش خواهم داد.
شروع شدن
ابتدا فایلهای منبع را از GitHub بارگیری کنید. شما یک پوشه "منبع-تصویر" که شامل تصاویر آموزش است ، یک پوشه "مقاله-مراحل" که شامل کد منبع برای هر مرحله (به علاوه نظرات) و یک پوشه "پروژه کامل شده" است که پروژه نهایی را پیدا می کنید ، پیدا خواهید کرد.
برای کامپایل برنامه های iOS (موجود از App Store) و مدیر بسته Homebrew OSX به Xcode نیاز خواهید داشت. پس از نصب Homebrew ، می توانید پنجره Terminal را باز کرده و دستورات زیر را اجرا کنید (اگر مشکلی دارید ، یک راهنما در اینجا وجود دارد):
- برای نصب Node.js گره نصب کنید
- برای نصب Watchman ، یک سرویس مشاهده فایل ، Watchman را نصب کنید
- جریان نصب ، یک جستجوگر نوع داده استاتیک را دم کنید
- npm برای نصب React Native -g react-native-cli نصب کنید
شما می توانید پروژه را با تایپ reap-native init weatherapp ایجاد کنید. پوشه پروژه را یادداشت کنید و آن را باز کنید تا ساختار پیش فرض پوشه React Native را ببینید. فهرست iOS محلی است که پرونده های پروژه پلتفرم iOS در آن قرار دارد. پرونده ای که در این مرحله به آن علاقه مند هستیم "index.ios.js" است. این مورد را در ویرایشگر موردنظر خود باز کنید.
بیایید نگاهی به ساختار پوشه بیندازیم:
- خطوط 8-11 شامل React مورد نیاز برای این م componentلفه برنامه است
- خطوط 15-32 کلاس پیش فرض را برای برنامه هواشناسی و روشهای ارائه آن اعلام می کند
- خطوط 34-51 سبک های استفاده شده در برنامه را تعریف می کند
- خط 53 نام صادراتی این کامپوننت است
اولین کاری که باید انجام دهیم تهیه بوم خالی است. روش رندر را به:
render: function () {return (View style = {[styles.container، {backgroundColor: this.state.backgroundColor}]}> / View>)؛ }
این یک نمای خالی با استفاده از آرایه ای از سبک ها - سبک کانتینر و یک متغیر حالت به نام backgroundColor - ایجاد می کند. هنگامی که از API آب و هوا برای داده ها پرس و جو می کنیم ، متغیر backgroundColor را بر اساس دمای فعلی تغییر خواهیم داد. همچنین می توانیم سبک کانتینر را طوری تنظیم کنیم که برای استفاده از مرکز از flex: 1 استفاده کند.
ظرف: {flex: 1} ،
حالا ما می خواهیم از روش React’s getInitialState استفاده کنیم. هنگام اجرای برنامه ، این مورد به طور خودکار روی هر جز component فراخوانی می شود. ما از آن برای اعلام متغیرهای حالت استفاده خواهیم کرد. این را بالاتر از روش رندر در کلاس WeatherApp اضافه کنید:
getInitialState: function () {return {weatherData: null، backgroundColor: "#FFFFFF"}؛ } ،
اکنون زمان مناسبی است که می توانید به Xcode بروید و بازی را روی شبیه ساز بزنید تا برنامه خود را ببینید. یکی از ویژگی های خارق العاده React Native سرعت کامپایل آن است. #FFFFFF را به رنگ دیگری ویرایش کرده و cmd + R را بزنید تا بارگیری تقریباً فوری را ببینید - بسیار زیبا!
اعلام ثابت ها
بیایید ثابت های مورد استفاده برای رنگ پس زمینه و دیگری برای URL openweathermap.org که داده های آب و هوا را ارائه می دهد ، اعلام کنیم. موارد زیر را دقیقاً در زیر React Required اضافه کنید:
var BG_HOT = "# fb9f4d"؛ var BG_WARM = "# fbd84d"؛ var BG_COLD = "# 00abe6"؛ var REQUEST_URL = "http://api.openweathermap.org/data/2.5/weather؟units=metric&"؛
همچنین باید از روش های داخلی React دیگر ، componentDidMount استفاده کنیم. وقتی یک م componentلفه با موفقیت بارگیری می شود ، این به طور خودکار فراخوانی می شود. ما از آن برای پرس و جو از ناوبری استفاده خواهیم کرد تا موقعیت جغرافیایی فعلی را بدست آوریم. موارد زیر را بعد از روش getInitialState و قبل از روش رندر اضافه کنید:
componentDidMount: function () {navigator.geolocation.getCurrentPosition (location => {var formattedURL = REQUEST_URL + "lat =" + location.coords.latitude + "& lon =" + location.coords.longitude؛ console.log (formattedURL)؛ }، error => {console.log (خطا)؛})؛ } ،
هنگام کامپایل ، شبیه ساز از شما می خواهد که به برنامه اجازه دهید به مکان شما دسترسی پیدا کند. باید URL کامل شده (متغیر formattedURL) را در پنجره خروجی Xcode مشاهده کنید. React Native برای نمایش محتوایی از این دست از console.log () استفاده می کند - بسیار مفید برای رفع اشکال.
مرحله بعدی ارسال عرض و طول جغرافیایی ما به openweathermap.org API است. کد زیر را در زیر کامپوننتDidMount و بالاتر ارائه دهید:
fetchData: تابع (url) {واکشی (url). سپس ((پاسخ) => پاسخ. json ()). سپس ((پاسخ دیتا) => {var bg؛ var temp = parseInt (پاسخData.main.temp) ؛ اگر (temp 14) {bg = BG_COLD؛} دیگری اگر (temp> = 14 && temp 25) {bg = BG_WARM؛} دیگری اگر (temp> = 25) {bg = BG_HOT؛} this.setState ({weatherData: responseData ، backgroundColor: bg})؛}) .done ()؛ } ،
کد فوق برای دریافت پاسخ JSON به API متصل می شود. سپس دمای مکان را تجزیه کرده و متغیر حالت backgroundColor را به روز می کند. وقتی برنامه بعد ارائه می شود ، از این رنگ جدید استفاده می کند.
در آخر ، باید یک خط اضافه کنید که این روش جدید fetchData را از روش componentDidMount فراخوانی کند. کد زیر مستقیماً در زیر console.log قرار دارد که ما برای نمایش URL استفاده کردیم:
this.fetchData (قالب بندی شده UL) ؛
از آنجا که ممکن است در بارگیری داده های API تأخیر ایجاد شود ، باید نمای جدیدی را نمایش دهیم که به عنوان نگهدارنده متن عمل کند. روش زیر با بارگذاری متن ، نمای جدیدی را برمی گرداند:
renderLoadingView: function () {return (View style = {styles.loading}> Text style = {styles.loadingText}> Loading Weather / Text> / View>)؛ } ،
همانطور که برنامه ارائه می دهد ، باید وضعیت خود را بررسی کند تا ببینید آیا اطلاعات آب و هوا در دسترس است یا نه:
if (! this.state.weatherData) {Return this.renderLoadingView ()؛ }
حالا ، بارگذاری و بارگذاری متن دلخواه خود را به سبک خود اضافه کنید و این بخش انجام می شود.
هنگامی که برنامه را آزمایش می کنید ، باید به طور خلاصه پیام بارگیری و سپس یک رنگ پس زمینه را که دما را منعکس می کند ، ببینید.
اطلاعات آب و هوا
اکنون وقت آن است که مولفه ای ایجاد کنیم که اطلاعات آب و هوا را نمایش دهد. پوشه جدیدی به نام 'App' در ریشه پروژه خود ایجاد کنید. در این قسمت ، پوشه دیگری به نام 'Views' ایجاد کنید ، که در آن الگوی WeatherView را از مراحل مقاله کپی می کنیم.
خواهید دید که تقریباً مشابه کلاس اصلی است. از آنجا که این متن از قبل دارای متن نگهدارنده است ، ما به کلاس اصلی index.ios.js خود باز خواهیم گشت و برای م componentلفه اعلامیه اضافه می کنیم.
var WeatherView = need ('./ App / Views / WeatherView.js')؛
سپس در روش رندر ، ما به سادگی اضافه می کنیم:
WeatherView />
با راه اندازی مجدد شبیه ساز با 'cmd + R' ، باید "TEST" را در مرکز صفحه نمایش دهید. شما اکنون م newلفه جدید خود را بارگیری کرده اید.
افزودن نمادها
اکنون ما می خواهیم برای هر یک از انواع آب و هوا آیکون هایی را به پروژه Xcode خود اضافه کنیم (کدهای اینجا ارائه شده است). در Xcode ، «Images.xcassets» را باز کنید و همه تصاویر را از پوشه «weather_icons» بکشید.
برای صرفه جویی در تایپ کردن زیاد ، وارد repo GitHub شوید و کد "WeatherView.js" فعلی خود را با کد موجود در مرحله 7 جایگزین کنید. کد جدیدی که می توانید ببینید آرایه ای است که توسط کد نماد آب و هوا از API نمایه می شود. قبل از اینکه بتوانیم از آن استفاده کنیم ، باید داده های آب و هوا را به این جز انتقال دهیم.
برای دستیابی به این هدف ، می توانیم دوباره از متغیرهای حالت استفاده کنیم و - به لطف propTypes - می توانیم نوع داده مورد انتظار را اعلام کنیم. موارد زیر را مستقیماً در زیر ایجاد کلاس WeatherView اضافه کنید:
propTypes: {weather: React.PropTypes.string، دما: React.PropTypes.int، شهر: React.PropTypes.string، کشور: React.PropTypes.string}،
اجازه دهید علامت گذاری شده از WeatherView را اصلاح کنیم. کد زیر یک تصویر آب و هوا ، به علاوه متن برای دما و شهر و کشور اضافه می کند. توجه داشته باشید که چگونه برچسب ها به متغیرهای props و برای تصویر ، متغیر کلید آرایه ارجاع می دهند ، بنابراین تصویر صحیح نشان داده می شود.
مشاهده سبک = {styles.centreContainer}> منبع تصویر = {weatherIconArray [this.props.weather]} style = {styles.weatherIcon} /> سبک متن = {styles.weatherText}> {this.props.temperature} ° / Text > سبک متن = {styles.weatherTextLight}> {this.props.city} ، / متن> سبک متن = {styles.weatherTextLight}> {this.props.country} / متن> / نمایش>
سبک هایی که برای این منظور باید اضافه کنیم:
iconIcon: {width: 132، height: 132،}، weatherText: {fontSize: 62، fontWeight: "bold"، color: "#FFFFFF"، textAlign: "center"}، weatherTextLight: {fontSize: 32، fontWeight: " 100 "، color:" #FFFFFF "، textAlign:" center "}
در اینجا عرض و ارتفاع نمادهای آب و هوا را مشخص می کنیم. سبک weatherText یک فونت بزرگ و سنگین برای دما ایجاد می کند ، و weatherTextLight یک قلم سبک برای زمینه های مکان ایجاد می کند.
افزودن داده
تنها چیزی که باقی می ماند افزودن برخی داده ها است. به «index.ios.js» خود بروید و روش رندر را به این روز کنید:
var city = this.state.weatherData.name.toUpperCase ()؛ var country = this.state.weatherData.sys.country.toUpperCase ()؛ var temp = parseInt (this.state.weatherData.main.temp) .toFixed (0)؛ var weather = this.state.weatherData.weather [0] .icon.toString ()؛ Return (مشاهده سبک = {[styles.container، {backgroundColor: this.state.backgroundColor}]}> WeatherView weather = {weather} دما = {temp} شهر = {شهر} کشور = {کشور} /> / نمایش>) ؛
این پاسخ JSON را تجزیه کرده و داده های شهر ، کشور و دما را گرفته و به جز to منتقل می کند. اکنون اگر برای راه اندازی مجدد شبیه ساز cmd + R هستید ، باید برنامه نهایی خود را مشاهده کنید.
این هسته اصلی ساخت یک برنامه React Native است. ساده است! امیدوارم از کار با آن لذت ببرید.
کلمات: آنتون میلز
آنتون میلز یک فن آور خلاق است که در زمینه ساخت بازی نیز تخصص دارد. این مقاله در اصل در شماره 270 مجله نت منتشر شده است.
این را دوست داشتید؟ اینها رو بخون!
- نمونه سازی سریع در طراحی برنامه موبایل
- نحوه ساخت برنامه: این آموزش های عالی را امتحان کنید
- نرم افزار رایگان طراحی گرافیک در حال حاضر در دسترس شماست!
