۳۰ روز با Node – روز بیست و هشتم: به دست آوردن توییت‌ها در نود جی اس

0 270

بررسی اجمالی

ما به روز 28 ام از آموزش node.js رسیده‌ایم و در اینجا پروژه دوم آموزشی خودمان را ایجاد خواهیم کرد. در این پروژه یک سیستم ایجاد خواهیم کرد به گونه ایی که وقتی به آن یک کلمه کلیدی داده شود در توییتر به دنبال توییت­های مربوط به این کلمه کلیدی می‌گردد و نتایج را برای ما در صفحه خروجی چاپ می‌کند. برای انجام دادن این کار نیز از node.js و API توییتر (twitter’s streaming API) کمک خواهیم گرفت.

ضمناً ما برای ارزیابی بیشتر، توییت­ها را در یک پایگاه داده از نوع MySQL ذخیره می‌کنیم.

فهرست کارهایی که باید صورت گیرد:

  1. ایجاد یک فرم ساده با HTML که وظیفه این فرم گرفتن کلمه کلیدی و سپس انجام جستجو است.
  2. برای backend نیز ما از js و MySQL و socket ها بهره خواهیم گرفت.
  3. افزودن سوکت به frontend برای چاپ live tweets (توییت­های زنده و تازه در واقع توییت­هایی هستند که افراد به تازگی آن‌ها را منتشر کرده‌اند).
  4. طراحی کردن html با CSS3 و bootstrap.
  5. در انتهای کار نیز با نمایش تصاویری از محیط این نرم‌افزار و کاربرد عملی آن، شما را با آن بیشتر آشنا خواهیم کرد.

پیش‌نیازها

  1. باید js نصب شده باشد
  2. باید پایگاه داده MySQL نصب شده باشد
  3. یک حساب کاربری در توییتر داشته باشیم

ساختار دایرکتوری

ساختار پروژه

ساخت Frontend با استفاده از html

اجازه بدهید در همین ابتدا یک فرم ساده با استفاده از HTML5 ایجاد کنیم، همان طور که قبلاً نیز گفته شد، کار این فرم گرفتن کلمه کلیدی و سپس انجام جستجو در میان توییت‌ها است.

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

  • Keyword: این فیلد ورودی یک کلمه کلیدی را به عنوان ورودی می‌گیرد و سپس بر اساس همین کلمه کلیدی در میان توییت‌ها به جستجو می‌پردازد.

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

index.html :

API توییتر(Twitter’s Streaming API)

برای اینکه بتوانیم از طریق برنامه node.js به توییتر دسترسی پیدا کنیم، شما نیاز دارید که یک سری اختیارات را به برنامه node.js بدهید. این اختیارات شامل موارد زیر است.

  1. Consumer Key
  2. Consumer Secret
  3. Access Token Key
  4. Access Token Secret

شما می‌توانید این 4 مورد را از طریق این آدرس به دست آورید.

درست کردن backend با استفاده از node.js و MySQL و socket.io

حالا وقت آن هست که به سراغ مسئله اصلی برنامه خودمان یعنی backend برویم. دقت کنید که برای اینکه داده‌ها را بین frontend و backend جابجا کنیم، از node.js و سوکت­ها استفاده خواهیم کرد.

MySQL نیز برای ذخیره‌سازی داده‌ها به کار می رود. برای اینکه اطلاعات بیشتری در مورد سوکت­ها و MySQL به دست آورید می‌توانید به ترتیب به لینک های زیر مراجعه کنید.

بری اینکه یک مسیر پیش‌فرض نیز داشته باشیم شما می‌توانید از فریم ورک express استفاده کنید. اگر می‌خواهید اطلاعات در مورد کار با این فریمورک داشته باشید بر روی لینک زیر کلیک کنید.

Backend ما در حال انجام عملیات زیر است:

  1. اولین کاری که انجام می‌دهد، دریافت مقادیر از frontend است.
  2. بعد از آن باید یک ارتباط اولیه با پایگاه داده MySQL برقرار می‌کند.
  3. سپس اطلاعات دریافت شده توسط Twitter’s Streaming API را در پایگاه داده MySQL ذخیره می‌کند.
  4. در نهایت اطلاعات دریافت شده را با استفاده از io برای frontend می‌فرستد تا این اطلاعات به درستی در صفحه‌ی index.html به نمایش دربیایند.

حالا به سراغ کد نویسی backendمی­رویم:

گام اول – نصب و راه‌اندازی: باید بسته‌هایی (packages) که در برنامه مورد نیاز هستند را نصب کنیم.

برخی از بسته‌ها نظیر path و http و … بسته‌های داخلی هستند، بنابراین نیازی به نصب آن‌ها نداریم؛ اما بسته‌هایی که در ادامه آمده ­اند، باید نصب شوند (دقت کنید که کدهای مورد نیاز برای نصب هر کدام از آن‌ها نیز آورده شده است):

express

socket.io

Twitter

MySQL

body-parser

گام دوم – حالا باید کد نویسی را شروع کنیم، به همین خاطر فایل server.js را باز کنید و بسته‌های که در ادامه آمده است را در آن required کنید: express، mysql، path، body-parser، twitter، socket.io، request، http و …

در دسترس قرار دادن MySQL و Twitter

سرور را ایجاد کرده و مسیرهای پیش‌فرض را به صورت زیر تنظیم کنید:

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

کار جدیدی که انجام می‌دهیم این است که وقتی یک livetweets به وقوع پیوست باید آن را به frontend هدایت کرده و کمک نماییم که وقتی یک live tweets رخ داد آن را از backend به frontend منتقل کنیم.

افزودن سوکت به قسمت frontend

فایل index.html را باز کنید و کدهای زیر را بعد از بسته شدن تگ body، قرار دهید.

استایل دهی با استفاده از CSS3

برای اینکه به فرم Signup خودمان یک استایل بدهیم، از کدهای ساده ایی از جنس CSS استفاده کردیم. دقت کنید که این کدها به راحتی قابل فهم هستند. کدهای زیر را کپی کنید و در یک فایل جدید با نام style.css پیست کنید.

کد را اجرا کنید

ما می‌توانیم server.js را با استفاده از دستور زیر اجرا کنیم:

127.0.0.1:3000 را در مرورگرتان وارد نمایید. البته قبل از انجام اینکار از مطمئن شوید که MySQL کار می‌کند.

تصاویر از نحوی کارکردن برنامه

آدرس این فایل http://127.0.0.1:3000/public/index.html است، آن را در قسمت url مرورگر خودتان وارد کنید و اینتر بزنید.

index

تصویری از محیط backend (که در حال اجراست) در تصویر زیر دیده می‌شود

backend

آدرس این فایل http://127.0.0.1:3000/public/index.html است، آن را در قسمت url مرورگر خودتان وارد کنید. دقت کنید که تصویر زیر مربوط به زمانی است که live tweets در برگه index.html به نمایش درآمده‌اند.

live tweets

خلاصه

در درس 28ام از سلسله دروس 30 روز با نود جی اس، ما پروژه دوم خودمان را تحت عنوان “چگونه دریافت توییت­ها از توییتر” ایجاد کردیم. برای انجام این کار از twitter's streaming API، node.js و socket.io برای ساخت backend بهره گرفتیم و برای ساخت frontend نیز از HTML5، CSS3، jquery، socket.io و bootstrap استفاده کردیم. همچنین پایگاه داده MySQL را برای ذخیره‌سازی اطلاعات در نظر گرفتیم.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle