https://virgool.io/feed/@Shayan_DRG fa 2026-07-06 16:26:03 https://static.virgool.io/images/default-avatar.jpg https://virgool.io/@Shayan_DRG https://virgool.io/@Shayan_DRG/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-axios-%D8%AF%D8%B1-vuejs-rhmymahiwako گرفتن دیتا از API و نمایش آن‌ها یکی از رایج‌ترین مواردی است که هر برنامه‌نویسی با آن روزانه سرو کار دارد و برای انجام این کار روش‌های زیادی هم وجود دارد که یکی از محبوب‌ترین و پر‌استفاده‌ترین آن‌ها، Axios است.در این مقاله سعی می‌کنم تا Axios را با استفاده از یک تمرین آموزش دهم. قرار است از API وب‌سایت Coindesk برای نمایش قیمت بیت‌کوین که هر ۱ دقیقه یکبار آپدیت می‌شود، استفاده کنیم.نصب کتابخانه Axiosابتدا Axios را از طریق یکی از پکیج منیجر‌های دلخواه‌تان (npm یا yarn) نصب کنید.دستور نصب از yarn:yarn add axiosدستور نصب از npm:npm i vue-axiosگرفتن دیتا از APIروش‌های مختلفی برای ارسال درخواست به API وجود دارد، اما بهتر است که قبل از انجام هرکاری از فرمت یا شکل داده‌هامون مطلع بشیم تا متوجه بشیم که قرار است دقیقا چه چیزهایی را به کاربر نمایش دهیم. برای انجام این کار، یک درخواست به API ارسال می‌کنیم و تمام خروجی آن‌را به‌شکل ساده‌ای در وب‌سایتمون نمایش می‌دهیم.با توجه با داکیومنت‌‌های API سایت CoinDesk، مشاهده می‌کنیم که api urlhttps://api.coindesk.com/v1/bpi/currentprice.jsonاست.پس ابتدا یک پراپرتی data ایجاد می‌کنیم تا داده‌هایمان را در آن ذخیره کنیم و سپس با استفاده از فانکشن mounted به API درخواست گرفتن داده‌ را ارسال می‌کنیم و داده‌های گرفته شده در پراپرتی data ذخیره و در نهایت در template نمایش می‌دهیم:new Vue({ el: '#app', data () { return { info: null } }, mounted () { axios.get('https://api.coindesk.com/v1/bpi/currentprice.json').then(response => (this.info = response)) } })<div id=&quotapp&quot> {{ info }} </div>و خروجی کارمان شبیه به زیر می‌شود:حالا ما داده‌ها را در اختیار داریم اما همانطور که مشاهده می‌کنید بسیار نامرتب و شلوغ پلوغ هستند. بنابر‌این بریم هم نحوه نمایش داده‌ها را مرتب کنیم و هم با اضافه کردن error handling، کاربر را از وقوع مشکلات احتمالی مطلع سازیم.نمایش داده‌های APIما قصد داریم تا در برنامه‌مون قیمت بیت‌کوین را در واحد پول کشورهای مختلف نمایش دهیم و اگر به داده‌های JSON‌ای که دریافت کردیم دقت کنید، مشاهده می‌کنید که مواردی که بهشون نیاز داریم در response.data.bpi قرار دارند. پس حالا اگر به‌جای کل response فقط response.data.bpi را درخواست کنیم، خروجی‌مان بدین شکل خواهد شد:axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response.data.bpi))حالا به شکل زیر HTML‌مون رو آپدیت می‌کنیم تا فقط اطلاعاتی که بهشون نیاز داریم رو نمایش بده. همچنین،‌ با استفاده از یک filter از درست بودن جای اعشار مطمئن میشیم:<div id=&quotapp&quot> <h1>Bitcoin Price Index</h1> <div v-for=&quotcurrency in info&quot class=&quotcurrency&quot > {{ currency.description }}: <span class=&quotlighten&quot> <span v-html=&quotcurrency.symbol&quot></span>{{ currency.rate_float | currencydecimal }} </span> </div> </div>filters: { currencydecimal (value) { return value.toFixed(2) } },خروجی:کنترل خطاهاممکن است گاهی اوقات بنا به دلایلی مانند وجود مشکل در ارتباط اینترنت موفق به دریافت اطلاعات از API نشویم و نیاز که کاربر را از این خطا‌های احتمالی مطلع سازیم که این کار را به شکل زیر با استفاده از catch انجام می‌دهیم:axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response.data.bpi)) .catch(error => console.log(error))بدین شکل می‌توانیم از مشکلات احتمالی در درخواست API مطلع شویم. اما اگر دیتا‌ها خراب باشن و یا API از کار افتاده باشد چی؟ الان کاربر چیزی از این ارورهارا نمی‌تواند ببیند. شاید بهتر باشه که یک loader بسازیم و سپس به کاربر اطلاع بدیم که قادر به دریافت داده‌ها نیستیم:new Vue({ el: '#app', data () { return { info: null, loading: true, errored: false } }, filters: { currencydecimal (value) { return value.toFixed(2) } }, mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => { this.info = response.data.bpi }) .catch(error => { console.log(error) this.errored = true }) .finally(() => this.loading = false) } })<div id=&quotapp&quot> <h1>Bitcoin Price Index</h1> <section v-if=&quoterrored&quot> <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p> </section> <section v-else> <div v-if=&quotloading&quot>Loading...</div> <div v-else v-for=&quotcurrency in info&quot class=&quotcurrency&quot > {{ currency.description }}: <span class=&quotlighten&quot> <span v-html=&quotcurrency.symbol&quot></span>{{ currency.rate_float | currencydecimal }} </span> </div> </section> </div>حالا هربار با اجرای کدمان، هنگام گرفتن دیتا از API، یک لودینگ نمایش داده خواهد شد.در این مقاله سعی کردم تا کلیات لایبری Axios در Vue.js را بطور خلاصه توضیح بدم. امیدوارم که این آموزش براتون مفید بوده باشه. ShayanDRG ShayanDRG Wed, 30 Mar 2022 23:34:28 +0430 https://virgool.io/@Shayan_DRG/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D9%85%D8%AD%D8%A8%D9%88%D8%A8-%D8%AA%D8%B1%DB%8C%D9%86-%D8%B2%D8%A8%D8%A7%D9%86-%D9%87%D8%A7%DB%8C-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A8%D8%A7%D8%B2%DB%8C-%D8%B3%D8%A7%D8%B2%DB%8C-ak3vqlvmb4n6 زبان‌های بسیار زیادی برای توسعه بازی وجود دارد که نداشتن دانش کافی برای انتخاب مناسب‌ترین زبان، برای هر فردی که قصد داره تازه پا به دنیای هیجان انگیز بازی‌سازی بذاره،‌ ممکن است با سرگردانی‌های زیادی همراه باشد.میانگین درآمد توسعه‌دهندگان بازی 101,000 دلار در سال است که از پر در آمدترین حرفه‌ها در دنیا محسوب می‌شود (متاسفانه در ایران چنین نیست). میزان این درآمد تا حد بسیار زیادی بسته به زبانی است که از آن برای توسعه بازی استفاده می‌کنید، چراکه برای توسعه هر بازی بسته به نوع پلتفرمی که قرار است آن بازی روی آن اجرا شود، نیازمند زبان خاصی خواهید بود.1. سی پلاس پلاس - ++Cاصلا جای تعجب نیست که همچنان ++C از محبوب‌ترین زبان‌های بازی‌سازی دنیا است. ++C به دلیل سطح انتزاع بالایش به شما امکان کنترل دقیقی بر نحوه تعامل سخت افزار با کدتان را می‌دهد. همچنین، این زبان کنترل بسیار دقیق‌تری نسبت به بسیاری از زبان‌ها بر نحوه پردازش‌های گرافیکی توسط سیستم را می‌دهد که نقش بسیار مهمی در توسعه بازی دارد.یکی دیگر از مزایای کلیدی سی پلاس پلاس، امکان اپتیمایز کردن پارت‌های خاصی از بازی است. برای مثال می‌توانید برای برخی از المنت‌های بازی، منابع بیشتری در اختیار بذارید. هرچند همین سطح از جزئیات این زبان باعث می‌شود تا بازی‌سازی با ++C نسبت به سایر زبان‌ها کمی دشوار‌تر شود.از این زبان باری ساخت بازی‌هایی محبوب همچون StarCraft، Football Pro و Counterstrike استفاده شده است.2. جاوا - Javaهرچند Java سطح انتزاع بسیاری بالایی را مانند ++C در اختیارمان قرار نمی‌دهد، با این حال بسیاری باور دارند که جاوا بهترین زبان برای بازی‌سازی است. درصد بالایی از محبوبیت این زبان، به دلیل راحتی استفاده آن برای توسعه انواع بازی هاست.همچنین، جامعه Java مملو از ابزارها و منابع رایگان و اپن سورس است. استفاده درست از این منابع باعث می‌شود تا علاوه بر اینکه هزینه ساخت بازی کاهش پیدا می‌کند، بلکه سرعت توسعه آن نیز بطور چشمگیری سریع‌تر شود، چراکه می‌توانید از کدهایی که سایر توسعه‌دهندگان در بازی‌های خود استفاده کردن، شماهم از آن‌ها به‌صورت رایگان در بازی خود استفاده کنید.از این زبان در توسعه بازی‌هایی همچون Asphalt 6، Assassin's Creed و PES استفاده شده است.3. جاوااسکریپت - JavaScriptوقتی صحبت از توسعه بازی‌های آنلاین می‌شود، جاوااسکریپت از اولین گزینه‌های انتخابی است. استفاده از HTML و CSS در کنار JavaScript، روند توسعه بازی‌های مالتی پلتفرم را بسیار آسان‌تر می‌کند.برخی از توسعه‌دهندگان جاوااسکریپت را به عنوان یک راه حل همه جانبه می‌بینند، چراکه می‌توان از آن تقریبا در همه جا، از ایجاد انیمیشن گرفته تا تعامل با المنت‌ها، استفاده کرد. علاوه بر این، جامعه آنلاین پشت JS بسیار بزرگ است و تقریبا می‌توانید برای هر چیزی از المنت‌های از پیش ساخته شده موجود، برای توسعه بازی خودتان استفاده کنید.از این زبان در توسعه بازی‌هایی همچون Gods Will Be Watching، Angry Birds و Aquaria استفاده شده است.4. اچ تی ام ال ۵ - HTML5هرچند HTML زبان برنامه نویسی نیست و یک زبان نشانه‌گذاری است، ولی از محبوبیت بالایی در ساخت بازی برخورد دار است که یکی از دلایل آن این است که می‌توایند از HTML به‌راحتی در کنار JavaScript استفاده کنید.توسعه بازی‌های مالتی پلتفرم که روی مرورگرهای مختلف اجرا می‌شوند توسط HTML5 بسیار آسان است و همین امر موجب می‌شود تا بتوان بازی‌هایی برای جامعه وسیع‌تری از کاربران طراحی کرد.از HTML5 برای توسعه بازی‌هایی همچون World Cup Penalty 2018 و Gods Will Be Watching استفاده شده است.5. سی شارپ - #Cبا اینکه از #C به عنوان جایگزین راحت‌تر ++C یاد می‌شود، اما با این حال هنوز یک زبان فلکسیبل و قدرتمند است که در میان بازی‌ساز‌ها از محبوبیت‌ خاص و بسیاری بالایی برخورد دارد است. یکی از اصلی‌ترین دلایلی که موجب می‌شود #C برای بازی سازی مفید و مناسب باشد این است که مایکروسافت XNA را با همین هدف توسعه داد است.درواقع XNA مجموعه‌ای از ابزارهایی برای راحت‌تر و سریع‌تر کردن روند توسعه بازی توسعه است. همچنین، انعطاف پذیری بالا یکی دیگر از ویژگی‌های مثبت این زبان است. با استفاده از سی شارپ می‌توانید برای پلتفرم‌های زیادی بازی بسازید، مانند:WindowsPlayStationAndroidIOSاز سی شارپ برای توسعه بازی‌هایی همچون Super Mario Run و Pokémon Go استفاده شده است.6. پایتون - Pythonهرچند Python به میزان Java و ++C و یا سایر زبان‌هایی که در این مقاله معرفی کردیم، برای بازی‌سازی محبوب نیست، اما همین زبان به شما دسترسی‌هایی به ابزارهایی می‌دهد که روند توسعه بازی را ساده‌تر می‌کند. به همین خاطر، بسیاری از برنامه‌نویس‌های جدید برای بازی‌سازی سراغ این زبان می‌روند.بخش زیادی از محبوبیت بالای پایتون بخاطر OOP یا شیءگرایی آن است. آبجکت‌های استفاده شده در OOP دارای صفات و ویژگی‌هایی هستند که از آن‌ها می‌توان در بخش‌های زیادی از بازی استفاده کرد که ساخت بازی را سریع‌تر و راحت‌تر می‌کند.تنها کاری که لازم است انجام دهید، Copy و Paste کردن آبجکت‌های در بخش‌های مختلف کد و سپس اعمال تغییرات جزئی‌ روی آن نسبت به جنبه‌های متناسب با بازی است. همچنین، ویرایش کدها در برنامه‌نویسی شیءگرا راحت‌تر است، زیرا در صورت نیاز به اعمال هرگونه تغییری، دیگر نیاز نیست که تمام کدها رو ادیت کنید و فقط با با ایجاد تغییر در یک آبجکت (آبجکت والد)، سایر آبجکت‌ها (آبجکت‌های فرزند) نیز تغییر خواهند کرد.از این زبان برای توسعه بازی‌هایی همچون Battlefield 2، Eve Online و Disney's Toontown Online استفاده شده است.امیدوارم این مقاله براتون مفید بوده باشه و تونسته باشه بهتون برای انتخاب بهترین زبان مناسب بازی سازی، کمک کرده باشه. ShayanDRG ShayanDRG Tue, 29 Mar 2022 22:39:01 +0430