برنامه Microposts: طراحی UI و راه‌اندازی API محلی

Microposts Application: UI Design and Local API Setup

برنامه ی microposts: طراحی UI و راه اندازی API محلی

در قسمت قبل با انواع module ها آشنا شدیم و به شما توضیح دادم که ما قصد استفاده از Module های نسخه ES6 را داریم. تا این قسمت از برنامه هنوز هیچ کدنویسی نکرده ایم و فقط بحث مقدمات را جلو برده ایم اما در این قسمت می خواهیم کدنویسی UI را شروع کنیم. من در جلسه اول یک پروژه آماده به شما دادم. شما باید از همان پروژه برای شروع کار استفاده کنید. ابتدا به index.html بروید تا کدهای UI را بنویسیم. من از bootswatch استفاده می کنم که یکی از طرح های خاص bootstrap است:

  <link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css">

همچنین از font awesome نیز استفاده می کنیم بنابراین CDN آن را در این فایل قرار می دهم:

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

من ابتدا کل کدهای فایل index.html را در اختیار شما قرار می دهم و سپس توضیحی کلی راجع به آن خواهم داد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://bootswatch.com/4/cosmo/bootstrap.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <title>My JavaScript App</title>
</head>
<body>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a href="#" class="navbar-brand">MicroPosts</a>
    </div>
  </nav>

  <div class="container postsContainer">
    <div class="card card-body card-form">
      <h1>Say Something</h1>
      <p class="lead">What's on your mind?</p>
      <div class="form-group">
        <input type="text" id="title" class="form-control" placeholder="Post Title">
      </div>
      <div class="form-group">
        <textarea id="body" class="form-control" placeholder="Post Body"></textarea>
      </div>
      <input type="hidden" id="id" value="">
      <button class="post-submit btn btn-primary btn-block">Post It</button>
      <span class="form-end"></span>
    </div>
    <br>
    <div id="posts"></div>
  </div>

  <footer class="mt-5 p-3 text-center bg-light">
    MicroPosts @copy;
  </footer>
  
  <script src="build/app.bundle.js"></script>
</body>
</html>

در قدم اول یک navbar داریم که همان نوار افقی بالای صفحه است و در آن از یک container استفاده کرده ایم تا نام پروژه (microposts) را درون آن قرار دهیم. در قدم بعد یک div داریم که کلاس postsContainer را دارد. این کلاس برای ما مهم است چرا که می خواهیم بعدا با آن DOM و ظاهر UI را تغییر دهیم. در داخل این div یک div دیگر داریم که کلاس card-form را به آن داده ایم و این کلاس نیز ربطی به bootswatch ندارد بلکه می خواهیم از این کلاس برای تغییر DOM استفاده کنیم. به همین صورت بقیه کدها را نیز بخوانید تا متوجه روند کار بشوید. البته در کد بالا یک input از نوع hidden داریم که به وقتش توضیحاتی در مورد آن خواهم داد.

برنامه ما باید سروری داشته باشد تا پست ها را از آن دریافت کند برای همین از JSON-Server استفاده می کنیم که بخشی از JSONPlaceholder می باشد. این سرور به ما اجازه می دهد که با استفاده از یک فایل JSON یک rest api را شبیه سازی کنیم. برای نصب این برنامه کد زیر را در ترمینال خود اجرا کنید:

npm install json-server --save

شما می توانید با جست و جوی عبارت json-server به documentation این برنامه در گیت هاب بروید و آن را مطالعه کنید اما من خلاصه آن را برایتان توضیح می دهم. شما باید فایلی به نام db.json ایجاد کنید (البته این نام فقط پیشنهادی است و می توانید آن را تغییر دهید) سپس با دستور زیر سرور مجازی شما اجرا خواهد شد:

json-server --watch db.json

با این کار یک آدرس URL محلی نیز به شما داده می شود که همان سرور شما خواهد بود. من دوست ندارم هر بار این دستور را دستی بنویسم بنابراین به فایل package.json می روم تا یک اسکریپت npm را برایش تعریف کنم:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --output-public-path=/build/",
    "json:server": "json-server --watch api/db.json"
  }

اگر برایتان سوال شده است که چرا به db.json آدرس api را اضافه کرده ام باید بگویم که من ترجیح می دهم فایل db.json درون پوشه ای به نام api قرار بگیرد به همین دلیل دستور را به شکل بالا اضافه کرده ام اما شما می توانید این کار را نکنید. با این حساب پوشه ای به نام api را در مسیر اصلی پروژه خود ساخته و درون آن فایلی به نام db.json ایجاد کنید.

فایل db.json در واقع مانند یک پایگاه داده عمل می کند که پست ها و اطلاعات ما را در خود دارد و این اطلاعات را از طریق سرور مجازی json-server به برنامه ما پاس می دهد تا یک سرور واقعی را شبیه سازی کند. ما با استفاده از برنامه خودمان به این فایل اضافه یا از آن کم خواهیم کرد اما فعلا اطلاعات ساده ای را به آن اضافه می کنیم تا بتوانیم کدنویسی را شروع کنیم:

{
  "posts": [
    {
      "id": 1,
      "title": "Post One",
      "body": "This is post one"
    },
    {
      "id": 2,
      "title": "Post Two",
      "body": "This is post two"
    },
    {
      "id": 3,
      "title": "Post Three",
      "body": "This is post three"
    }
  ]
}

همانطور که می بینید من سه شیء را در این آرایه قرار داده ام که هر کدام دارای id و title و body است. به همین سادگی. توجه داشته باشید که در JSON باید کلید های خود را درون double quotes قرار دهید. پس از ذخیره کردن این فایل ترمینال خود را باز کرده و دستور زیر را اجرا کنید:

npm run json:server

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

http://localhost:3000

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