ایجاد یک برنامه TODO با Nolang

ek3nk4r 2025-02-12

0 5 خواندن این مطلب 3 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این آموزش ، ما یک برنامه ساده Todo را با استفاده از Nolang ایجاد خواهیم کرد. ما تنظیم پروژه ، تعریف طرحواره ، پیکربندی نقاط پایانی و ایجاد یک قسمت جلویی اساسی برای تعامل با برنامه را پوشش می دهیم.

فهرست مطالب

پیش نیازهای

قبل از شروع ، مطمئن شوید که موارد زیر را روی دستگاه خود نصب کرده اید:

غوغا
یک ویرایشگر کد (به عنوان مثال ، در مقابل کد)

مرحله 1: پروژه را تنظیم کنید

یک دایرکتوری جدید برای پروژه خود ایجاد کنید و به آن بروید:

mkdir todo-app
cd todo-app

مرحله 2: پیکربندی برنامه را تعریف کنید

یک پرونده به نام ایجاد کنید app.json5 و طرح را برای موارد TODO ، پیکربندی ذخیره سازی و نقاط پایانی تعریف کنید:

{
  name: "ToDo sample app",
  schemas: [
    {
      "$id": "todo",
      "type": "object",
      "properties": {
        "who": {
          "type": "string",
          "title": "Doer of Task"
        },
        "what": {
          "type": "string",
          "title": "What to do"
        },
        "done": {
          "type": "boolean",
          "title": "Is done?",
          "default": false
        }
      },
      "required": ["who", "what"]
    }
  ],
  storage: {
    adapter: "json",
    path: "data/todos.json"
  },
  endpoints: [
    {
      type: 'http',
      static: './public',
      port: 1000,
      routes: [
        {
          path: "https://dev.to/",
          method: 'post'
        }
      ]
    }
  ]
}

مرحله 3: فهرست داده ها را ایجاد کنید

دایرکتوری به نام ایجاد کنید data و یک پرونده JSON خالی برای ذخیره موارد TODO:

mkdir data
echo "{\"todo\": []}" > data/todos.json

مرحله 4: قسمت جلویی را ایجاد کنید

دایرکتوری به نام ایجاد کنید public و index.html در داخل آن پرونده کنید. این پرونده به عنوان قسمت جلویی برای تعامل با برنامه TODO عمل می کند:




    </span>ToDo by Nolang<span class="nt"/>
    <span class="nt"><link/> <span class="na">href=</span><span class="s">"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
<span class="nt"/>
<span class="nt"/>
<span class="nt"/>

<span class="nt"><script><![CDATA[<span class="na">type=]]></script></span><span class="s">"text/javascript"</span><span class="nt">></span>
    <span class="kd">function</span> <span class="nf">send</span><span class="p">(</span><span class="nx">command</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span>
            <span class="na">method</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span>
            <span class="na">headers</span><span class="p">:</span> <span class="p">{</span>
                <span class="dl">'</span><span class="s1">Accept</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json, text/plain, */*</span><span class="dl">'</span><span class="p">,</span>
                <span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span>
            <span class="p">},</span>
            <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">(</span><span class="nx">command</span><span class="p">)</span>
        <span class="p">}).</span><span class="nf">then</span><span class="p">(</span><span class="nx">res</span> <span class="o">=></span> <span class="nx">res</span><span class="p">.</span><span class="nf">json</span><span class="p">());</span>
    <span class="p">}</span>

    <span class="kd">const</span> <span class="nx">todolist</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">todolist</span><span class="dl">'</span><span class="p">);</span>

    <span class="kd">function</span> <span class="nf">addToDoToTable</span><span class="p">(</span><span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">newRow</span> <span class="o">=</span> <span class="nx">todolist</span><span class="p">.</span><span class="nf">insertRow</span><span class="p">();</span>
        <span class="nx">newRow</span><span class="p">.</span><span class="nf">insertCell</span><span class="p">().</span><span class="nx">innerText</span> <span class="o">=</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">$$objid</span><span class="p">;</span>
        <span class="nx">newRow</span><span class="p">.</span><span class="nf">insertCell</span><span class="p">().</span><span class="nx">innerText</span> <span class="o">=</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">who</span><span class="p">;</span>
        <span class="nx">newRow</span><span class="p">.</span><span class="nf">insertCell</span><span class="p">().</span><span class="nx">innerText</span> <span class="o">=</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">what</span><span class="p">;</span>
        <span class="nx">newRow</span><span class="p">.</span><span class="nf">insertCell</span><span class="p">().</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`<input type="checkbox"/><span class="p">${</span><span class="nx">todo</span><span class="p">.</span><span class="nx">done</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">checked</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">''</span><span class="p">}</span><span class="s2"> onclick="doneTodo(this, '</span><span class="p">${</span><span class="nx">todo</span><span class="p">.</span><span class="nx">$$objid</span><span class="p">}</span><span class="s2">')">`</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nf">addTodo</span><span class="p">()</span> <span class="p">{</span>
        <span class="nf">send</span><span class="p">({</span>
            <span class="nx">$</span><span class="na">$schema</span><span class="p">:</span> <span class="dl">'</span><span class="s1">todo</span><span class="dl">'</span><span class="p">,</span>
            <span class="nx">$</span><span class="na">$header</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">action</span><span class="p">:</span> <span class="dl">'</span><span class="s1">C</span><span class="dl">'</span>
            <span class="p">},</span>
            <span class="na">who</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">who</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">,</span>
            <span class="na">what</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">what</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span>
        <span class="p">}).</span><span class="nf">then</span><span class="p">(</span><span class="nx">res</span> <span class="o">=></span> <span class="p">{</span>
            <span class="nf">addToDoToTable</span><span class="p">(</span><span class="nx">res</span><span class="p">);</span>
        <span class="p">});</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nf">loadTodos</span><span class="p">()</span> <span class="p">{</span>
        <span class="nf">send</span><span class="p">({</span>
            <span class="nx">$</span><span class="na">$schema</span><span class="p">:</span> <span class="dl">'</span><span class="s1">todo</span><span class="dl">'</span><span class="p">,</span>
            <span class="nx">$</span><span class="na">$header</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">action</span><span class="p">:</span> <span class="dl">'</span><span class="s1">R</span><span class="dl">'</span>
            <span class="p">}</span>
        <span class="p">}).</span><span class="nf">then</span><span class="p">(</span><span class="nx">res</span> <span class="o">=></span> <span class="p">{</span>
            <span class="nx">todolist</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>
            <span class="nx">res</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">todo</span> <span class="o">=></span> <span class="p">{</span>
                <span class="nf">addToDoToTable</span><span class="p">(</span><span class="nx">todo</span><span class="p">);</span>
            <span class="p">});</span>
        <span class="p">});</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nf">doneTodo</span><span class="p">(</span><span class="nx">t</span><span class="p">,</span> <span class="nx">todoid</span><span class="p">)</span> <span class="p">{</span>
        <span class="nf">send</span><span class="p">({</span>
            <span class="nx">$</span><span class="na">$schema</span><span class="p">:</span> <span class="dl">'</span><span class="s1">todo</span><span class="dl">'</span><span class="p">,</span>
            <span class="nx">$</span><span class="na">$header</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">action</span><span class="p">:</span> <span class="dl">'</span><span class="s1">U</span><span class="dl">'</span><span class="p">,</span>
                <span class="na">filter</span><span class="p">:</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="na">$objid</span><span class="p">:</span> <span class="nx">todoid</span>
                <span class="p">}</span>
            <span class="p">},</span>
            <span class="na">done</span><span class="p">:</span> <span class="nx">t</span><span class="p">.</span><span class="nx">checked</span>
        <span class="p">});</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nf">clearTodos</span><span class="p">()</span> <span class="p">{</span>
        <span class="nf">send</span><span class="p">({</span>
            <span class="nx">$</span><span class="na">$schema</span><span class="p">:</span> <span class="dl">'</span><span class="s1">todo</span><span class="dl">'</span><span class="p">,</span>
            <span class="nx">$</span><span class="na">$header</span><span class="p">:</span> <span class="p">{</span>
                <span class="na">action</span><span class="p">:</span> <span class="dl">'</span><span class="s1">D</span><span class="dl">'</span><span class="p">,</span>
                <span class="na">filter</span><span class="p">:</span> <span class="p">{</span>
                    <span class="na">done</span><span class="p">:</span> <span class="kc">true</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}).</span><span class="nf">then</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
            <span class="nf">loadTodos</span><span class="p">();</span>
        <span class="p">});</span>
    <span class="p">}</span>

    <span class="nf">loadTodos</span><span class="p">();</span>
<span class="nt"/>
<span class="nt"/>
<span class="nt"/>
</span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید



  مرحله 5: برنامه را اجرا کنید


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

nolang app.json5



    
    




  مرحله ششم: برنامه را در یک مرورگر باز کنید


به سمت http://localhost:1000 در مرورگر وب شما. شما باید بتوانید با استفاده از رابط ارائه شده در TODOS اضافه ، مشاهده ، بروزرسانی و حذف کنید index.htmlبشر

  توضیح اسکریپت های Nolang و بارهای JSON


پیکربندی برنامه Nolang طرح برنامه ، ذخیره سازی و نقاط پایانی را تعریف می کند.


تعریف شمما:


$id: شناسه برای طرحواره.

type: نوع داده (شیء در این مورد).

properties: زمینه های این طرح.

required: زمینه های اجباری.



پیکربندی ذخیره سازی:


adapter: روش ذخیره سازی (پرونده JSON در این مورد).

path: مسیر پرونده ذخیره سازی.



نقاط پایانی:


type: نوع نقطه پایانی (HTTP در این مورد).

static: فهرست پرونده های استاتیک.

port: شماره پورت سرور.

cors: پیکربندی اشتراک منابع متقاطع.

routes: مسیرهای HTTP.




  بارهای JSON برای عملیات CRUD




ایجاد (ج): یک مورد جدید TODO اضافه کنید.



   {
     "$$schema": "todo",
     "$$header": {
       "action": "C",
       "debug": true
     },
     "who": "John Doe",
     "what": "Finish writing report",
     "done": false
   }



    
    





بخوانید (R): موارد TODO را بازیابی کنید.



   {
     "$$schema": "todo",
     "$$header": {
       "action": "R",
       "debug": true
     }
   }



    
    





بروزرسانی (U): یک مورد TODO را به روز کنید.



   {
     "$$schema": "todo",
     "$$header": {
       "action": "U",
       "debug": true,
       "filter": {
         "$$objid": "12345"
       }
     },
     "done": true
   }



    
    





حذف (D): موارد کامل TODO را حذف کنید.



   {
     "$$schema": "todo",
     "$$header": {
       "action": "D",
       "filter": {
         "done": true
       }
     }
   }



    
    




  پایان


شما اکنون یک برنامه ساده Todo را با استفاده از Nolang ایجاد کرده اید. این آموزش شامل تنظیم پروژه ، تعریف طرحواره ، پیکربندی نقاط پایانی و ایجاد یک جلوی اساسی است. با افزودن ویژگی های بیشتر یا سفارشی کردن آن متناسب با نیازهای خود ، احساس راحتی کنید.
اگر سوالی دارید یا به کمک بیشتری نیاز دارید ، احساس راحتی کنید! 😊
می توانید پرونده های کد را برای این آموزش در مخزن Nolang Github پیدا کنید.
برنامه نویسی مبارک! 🎉