با استفاده از جاوا اسکریپت یک پلتفرم تجاری بسازید

ساخت وبلاگ

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

داده های بازار سهام ارزشمندتر می شوند زیرا اساساً فرصتی را برای معامله گرانی که به دنبال تجزیه و تحلیل و آمار هستند ارائه می دهد.

در این آموزش ما یک پلتفرم تجاری خواهیم ساخت که تجربه بازارهای سهام را به تصویر می‌کشد، جایی که معاملات قیمت‌ها را می‌توان در زمان واقعی تجسم کرد. این با استفاده از جاوا اسکریپت، Chart. js و قابلیت های بلادرنگ ارائه شده توسط Pusher ساخته خواهد شد.

Pusher پلتفرمی است که در ساخت زیرساخت های بلادرنگ برای توسعه دهندگان به منظور ساخت برنامه های بلادرنگ تا حد امکان کارآمد تخصص دارد. ما از ویژگی های قدرتمند Pusher برای نشان دادن قیمت های به روز شده در نمودار خود به طور مستقیم از سرور استفاده می کنیم و همچنین یک ویژگی اضافی برای نمایش جدولی که قیمت ها را مطابق شکل زیر نشان می دهد اضافه می کنیم:

شروع شدن

همانطور که قبلاً گفته شد، Pusher برای ارائه آسان عملکرد بلادرنگ لازم برای عملکرد نمودار ما همانطور که مشخص شده است استفاده می شود. اگر حساب کاربری با Pusher ندارید، می توانید به صورت رایگان ثبت نام کنید. پس از اتمام کار، ادامه دهید و یک برنامه جدید از داشبورد خود ایجاد کنید. فراموش نکنید که app_id، key، Secret و Cluster خود را یادداشت کنید، زیرا بعداً در این آموزش از شما خواسته می شود که از آنها استفاده کنید.

realtime-trade-platform-javascript-create-app

برنامه را تنظیم کنید

اکنون که یک حساب کاربری راه اندازی کرده ایم و اعتبار لازم را به دست آورده ایم، باید یک سرور و نمای برنامه خود را راه اندازی کنیم. این برای اطمینان از ارتباط بین برنامه ما و Pusher است. اگر هنوز Node و npm را روی دستگاه خود نصب نکرده اید، لطفاً آنها را از اینجا دانلود کنید تا ادامه دهید. در غیر این صورت، ایجاد یک دایرکتوری جدید با هر نامی را ادامه دهید و دستور زیر را اجرا کنید:

از شما یکسری سوال پرسیده می شود و سپس یک فایل package. json برای شما ایجاد می شود. فایل را با موارد زیر به روز کنید:

اکنون فایل بالا را با اضافه کردن اسکریپت برای راه اندازی سرور محلی خود ویرایش کنید، ما این را در یک بیت تنظیم خواهیم کرد.

ما باید Pusher SDK را نصب کنیم و همچنین به ما کمک می کند تا برنامه مشتری را راه اندازی کنیم:

ما همچنین به برخی از داده های ساختگی موجود نیاز داریم تا بتوانیم شبیه سازی مناسبی از معاملات سهام و تغییرات قیمت ایجاد کنیم. به همین دلیل، من یک نمونه داده از تاریخچه سهام قبلی را دانلود کردم که می توانیم با آن بازی کنیم. در زیر نسخه کوتاه شده stock. json آمده است. فایل کامل را می توانید در اینجا پیدا کنید.

بعد، ما باید فایل های پروژه خود را ایجاد کنیم. در پوشه پروژه فایل های زیر را اضافه کنید و آنها را خالی بگذارید. در حین حرکت مطالب را پر می کنیم:

یک سرور ساده ایجاد کنید

در server. js، فایل stock``. json را وارد کنید و Pusher را با اطلاعات کاربری مورد نیاز که از داشبورد برنامه به دست آمده‌اید، مقداردهی اولیه کنید.

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

هر 2 ثانیه، ما فایل JSON را برای قیمت سهام GOOG پرس و جو می کنیم و این قیمت را در کنار مقداری بار دیگر (مانند نام سهام) به عنوان JSON با استفاده از روش ماشه Pusher منتشر می کنیم. این روش کانال، رویداد و بارگذاری را به عنوان آرگومان می گیرد.

دستور زیر را برای راه اندازی سرور اجرا کنید:

برنامه مشتری را بسازید

اول از همه، index.html خود را با موارد زیر به روز کنید:

شما یک بوم دارید که در آن نمودار را راه اندازی می کنید و همچنین یک جدول ساده برای نشان دادن قیمت های فعلی در زمان به روز رسانی آن ها در آن زمان. ما همچنین شامل Pusher و Chart SDK هستیم که به زودی از آنها استفاده خواهیم کرد.

کلاس برنامه

برای دریافت بار ارسال شده از سرور، باید در رویداد Pusher منتشر شده توسط سرور مشترک شویم. و برای تجسم آن، باید یک نمودار ایجاد کنید و با استفاده از بار دریافتی از سرور، نقاط داده آن را به روز کنید. ما به چند تابع نیاز داریم:

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

ابتدا، اجازه دهید Pusher را مقداردهی اولیه کنیم

فقط برای اهداف اشکال‌زدایی، Pusher. logToConsole را روی true تنظیم می‌کنیم تا فعالیت‌های بیدرنگ ثبت‌شده در کنسول را ببینیم. به یاد داشته باشید که در مرحله تولید آن را حذف کنید تا کنسول کاربر خود را با لاگ های اشکال زدایی پف کرده نگذارید.

در مرحله بعد، یک نمونه از Pusher ایجاد می کنیم. تابع سازنده در فایل pusher-js که قبلاً اضافه کردیم موجود است.

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

روش اشتراک در Pusher کانالی را می گیرد که باید مشترک شویم و اشتراک را برمی گرداند. سپس می‌توانیم با استفاده از bind به این اشتراک متصل شده و نام رویداد و یک تابع تماس را ارسال کنیم.

در این رویداد، ما updateChartData را فراخوانی کردیم و برای ادامه به‌روزرسانی نمودار، داده‌ها را به آن ارسال کردیم. یک متغیر نمونه در سازنده به نام نمودار ایجاد می کنیم. برای تنظیم نمودار در سازنده نیز متد initializeChart را فراخوانی کردیم. قبل از اینکه منطق نمودار به روز رسانی را ببینیم، بیایید ببینیم این نمودار چگونه مقداردهی اولیه می شود:

ممکن است بسیار زیاد به نظر برسد، اما یک نگاه دقیق تر نشان می دهد که ما فقط یک نمودار را تعریف می کنیم و توصیف می کنیم که چه نوع داده ای باید انتظار داشته باشد، چگونه باید داده ها را برچسب گذاری کند، و چگونه باید به نظر برسد.

اکنون ، روش نمودار به روزرسانی از نمونه نمودار برای به روزرسانی نمودار هر بار که داده های یک بار از سرور Pusher وارد می شوند ، استفاده می کند.

می توانید برنامه مشتری را با دستور زیر راه اندازی کنید:

این برنامه وب را در پورت 5200 شروع می کند. مرورگر خود را باز کنید:

تیک تیک در زمان واقعی

در حال حاضر ، به لطف عملکرد Pusher ، ما می توانیم نمودار را در زمان واقعی با بار ارسال شده توسط سرور به روز کنیم. بیایید با اضافه کردن ویژگی دیگری برای نمایش قیمت ها روی یک جدول اقدام کنیم.

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

به یاد داشته باشید که ما جدول زیر را در index.html داشتیم:

برای انجام این کار ، ما روش updatechartdata () را ویرایش می کنیم و همچنین یک مورد جدید به نام flashcolor`` () ایجاد می کنیم. از روش جدید برای تغییر رنگ ها بر اساس تغییرات قیمت استفاده می شود.

فراموش نکنید که قیمت آستانه را در سازنده مانند این قرار دهید:

برای نشانه های بصری ، در اینجا تابعی وجود دارد که هر بار آستانه ضرب و شتم رنگ متن قیمت را تغییر می دهد:

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

نتیجه

از این آموزش ، ما دیده ایم که چگونه می توان یک بورس سهام مانند سکویی را ایجاد کرد که در آن تغییر قیمت ها در زمان واقعی به روز می شود. این می تواند بر روی هر کتابخانه نمودار ساخته و مورد استفاده قرار گیرد. در صورت از دست دادن هر چیزی ، کد کامل را می توان در GitHub یافت. می توانید آن را در اینجا پیدا کنید و لطفاً درخواست کشش را ارسال کنید.

پلن سرمایه گذاری...
ما را در سایت پلن سرمایه گذاری دنبال می کنید

برچسب : نویسنده : لیلا اوتادی بازدید : 58 تاريخ : چهارشنبه 2 فروردين 1402 ساعت: 20:08