{"id":400005,"date":"2024-06-29T15:00:10","date_gmt":"2024-06-29T15:00:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=400005"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-06-29T15:00:10","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=400005","title":{"rendered":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043d\u0430 HappyX<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430 Nim? \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HappyX \u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043e\u043a? \u041e\u0431\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u043e\u043c \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435 \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n

\"\u041e\u0431\u043b\u043e\u0436\u043a\u0430<\/p>\n
\u041e\u0431\u043b\u043e\u0436\u043a\u0430 \u0441\u0442\u0430\u0442\u044c\u0438<\/figcaption><\/div>\n<\/figure>\n

\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041d\u0438\u043a\u0438\u0442\u0430, \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Nim.<\/p>\n

\u041a\u043e\u0440\u043e\u0442\u043a\u043e \u043e Nim<\/h2>\n

\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e. Nim<\/a> — \u044d\u0442\u043e \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 C, C++, Objective C \u0438 \u0432 JavaScript. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435.<\/p>\n

\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d Nim, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e, \u0441\u043b\u0435\u0434\u0443\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438<\/a> \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435.<\/p>\n

\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HappyX?<\/h2>\n

HappyX<\/a> — \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u0430\u043c\u043e\u043c Nim. \u0418 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0432\u044b\u0448\u0435\u0441\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e, \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u043d \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 C, \u0430 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0432 JavaScript.<\/p>\n

\n

\u0425\u043e\u0440\u043e\u0448\u043e, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0447\u0442\u043e?<\/em><\/p>\n<\/blockquote>\n

\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/h2>\n

\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043c\u044b \u0435\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u0441\u0435 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 HappyX \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0439 sqlite, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043d\u0430\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439<\/a> Nim.<\/p>\n

\u0421\u043f\u0435\u0440\u0432\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 happyx<\/strong> \u0438 db_connector<\/strong>. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 nimble<\/strong>:<\/p>\n

nimble install happyx@#head nimble install db_connector<\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e happyx cli<\/strong>:<\/p>\n
hpx create --name server --kind SSR --language Nim<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c don’t use templates<\/strong> \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n
hpx create --name client --kind SPA --language Nim -u<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \/server\/src\/main.nim<\/code> \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n
import   happyx,   db_connector\/db_sqlite<\/code><\/pre>\n
\u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f<\/strong> \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/strong> \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a:<\/p>\n
# \u041c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 # \u041d\u0438\u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0435\u0435 \u0432 \u0432\u0438\u0434\u0435 JSON model CreateNote:   # \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 string   name: string  model EditNote:   completed: bool<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n
# \u0417\u0430\u0434\u0430\u0435\u043c \u0445\u043e\u0441\u0442 \u0438 \u043f\u043e\u0440\u0442 serve \"127.0.0.1\", 5000:   # \u041f\u0440\u0435\u0434\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 gcsafe (garbage collector safe) \u043e\u0431\u043b\u0430\u0441\u0442\u0438   setup:     # \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445     var db = open(\"notes.db\", \"\", \"\", \"\")      # \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442     db.exec(sql\"\"\"     CREATE TABLE IF NOT EXISTS notes(       id INTEGER PRIMARY KEY AUTOINCREMENT,       name VARCHAR(50) NOT NULL,       completed INTEGER NOT NULL DEFAULT 0     );     \"\"\")<\/code><\/pre>\n
\n
\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e, \u0432\u0435\u0440\u043d\u043e?<\/p>\n<\/blockquote>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c POST<\/code> \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438:<\/p>\n
serve \"127.0.0.1\", 5000:   setup:     ...    # \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c POST \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0438   post \"\/note[note:CreateNote]\":     # \u0412\u044b\u0432\u0435\u0434\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438     echo note.name     # \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u043a\u0443 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0435 ID     let id = db.insertId(sql\"INSERT INTO notes (name) VALUES (?)\", note.name)     # \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c ID \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0432 \u043e\u0442\u0432\u0435\u0442\u0435     return {\"response\": id}<\/code><\/pre>\n
\u0418 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n
nim c -r server\/src\/main<\/code><\/pre>\n
\u041f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n
\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 POST<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n
\u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u043d\u0430\u0448\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443:<\/p>\n
\"\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435<\/p>\n
\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b notes<\/figcaption><\/div>\n<\/figure>\n
\n
\u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/p>\n<\/blockquote>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c GET<\/code> \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a:<\/p>\n
  post \"\/note[note:Note]\":     ...    # GET \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a   get \"\/notes\":     # \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a:     var notes = %*[]     # \u041f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u0441\u0442\u0440\u043e\u0447\u043a\u0430\u043c:     for row in db.rows(sql\"SELECT * FROM notes\"):       # \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a       notes.add %*{\"id\": row[0].parseInt, \"name\": row[1], \"completed\": row[2] != \"0\"}     return {\"response\": {       \"items\": notes,       \"size\": notes.len     }}<\/code><\/pre>\n
\u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 Postman:<\/p>\n
\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/p>\n
\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f GET<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c PATCH<\/code> \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n
  get \"\/notes\":     ...    # PATCH \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u043f\u043e \u0435\u0435 ID   patch \"\/note\/{noteId:int}[note:EditNote]\":     # \u0421\u043c\u043e\u0442\u0440\u0438\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0442\u0430\u043a\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u0432\u043e\u043e\u0431\u0449\u0435     var row = db.getRow(sql\"SELECT * FROM notes WHERE id = ?\", noteId)     # \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430 - \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443     if row[0] == \"\":       statusCode = 404       return {\"error\": \"\u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u0441 \u0442\u0430\u043a\u0438\u043c ID \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430\"}     # \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448\u0443 \u0437\u0430\u043c\u0435\u0442\u043a\u0443     db.exec(sql\"UPDATE notes SET completed = ? WHERE id = ?\", note.completed, noteId)     # \u0418 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0441\u0442\u0430\u0442\u0443\u0441     return {\"response\": \"success\"}<\/code><\/pre>\n
\u0418 \u0441\u043d\u043e\u0432\u0430 \u0441\u043c\u043e\u0442\u0440\u0438\u043c Postman:<\/p>\n
\"\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439<\/p>\n
\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f PATCH<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/figcaption><\/div>\n<\/figure>\n
\"\u041e\u0448\u0438\u0431\u043e\u0447\u043d\u044b\u0439<\/p>\n
\u041e\u0448\u0438\u0431\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f PATCH<\/code> \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/figcaption><\/div>\n<\/figure>\n
\n
\u041a\u0440\u0443\u0442\u043e! \u0427\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c?<\/p>\n<\/blockquote>\n
\u041d\u0430 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043e\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n
\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/h2>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 client\/src\/main.nim<\/code> \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c:<\/p>\n
import   happyx,   std\/strformat,  # \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u043e\u043a   std\/jsfetch,  # fetch   std\/asyncjs,  # async   std\/sugar,  # \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440   std\/httpcore,  # HTTP \u043c\u0435\u0442\u043e\u0434\u044b   std\/json  # \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 JSON<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0430\u0448\u0435 API:<\/p>\n
# \u0431\u0430\u0437\u043e\u0432\u044b\u0439 URL \u0434\u043b\u044f API const BASE = \"http:\/\/localhost:5000\"<\/code><\/pre>\n
\u0418 \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0442\u0438\u043f \u0437\u0430\u043c\u0435\u0442\u043a\u0438 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n
# \u0442\u0438\u043f \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438 type Note = object   id: cint   name: cstring   completed: bool<\/code><\/pre>\n
\u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n
var   # \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a   notes = remember newSeq[Note]()   # \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0438   newName = remember \"\"<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0442\u0430\u043c \u043f\u0438\u0441\u0430\u043b\u0438. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0440\u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u044b \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 API:<\/p>\n
proc updateNotes() {.async.} =   # \u0414\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u0430\u043c\u0435\u0442\u043e\u043a   await fetch(fmt\"{BASE}\/notes\".cstring)     # \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c JSON     .then((response: Response) => response.json())     .then(proc(data: JsObject) =       # \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c JSON \u0432 \u0441\u043f\u0438\u0441\u043e\u043a Note       var tmpNotes: seq[Note] = collect:         for i in data[\"response\"][\"items\"]:           i.to(Note)       # \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f - \u043f\u0440\u043e\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b       if notes.len == tmpNotes.len:         for i in 0..<tmpNotes.len:           notes[i] = tmpNotes[i]       else:         # \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f - \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a         notes.set(tmpNotes)     )   proc toggleNote(note: Note) {.async.} =   # \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c PATCH \u0437\u0430\u043f\u0440\u043e\u0441   discard await fetch(fmt\"{BASE}\/note\/{note.id}\".cstring, newfetchOptions(     HttpPatch, $(%*{\"completed\": not note.completed})   ))   proc addNote(name: string) {.async.} =   # \u041e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c POST \u0437\u0430\u043f\u0440\u043e\u0441   discard await fetch(fmt\"{BASE}\/note\".cstring, newfetchOptions(     HttpPost, $(%*{\"name\": name})   ))<\/code><\/pre>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n
# \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a discard updateNotes()<\/code><\/pre>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0440\u0435\u043c\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0438!<\/p>\n
# \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441 ID app appRoutes \"app\":   # \u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442   \"\/\":     tDiv(class = \"flex flex-col gap-2 w-fit p-8\"):       tDiv(class = \"flex\"):         # input \u0434\u043b\u044f          tInput(id = \"newNameChanger\", class = \"rounded-l-full px-6 py-2 border-2 outline-none\", value = $newName):           @input:             # \u041c\u0435\u043d\u044f\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u0442\u043a\u0438             newName.set($ev.target.InputElement.value)         tButton(class = \"bg-green-400 hover:bg-green-500 active:bg-green-600 rounded-r-full px-4 py-2 transition-all duration-300\"):           \"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\"           @click:             # \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u043c\u0435\u0442\u043a\u0443             discard addNote(newName).then(() => (discard updateNotes()))             newName.set(\"\")       tDiv(class = \"flex flex-col gap-2\"):         # \u041f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u043c\u0441\u044f \u043f\u043e \u0437\u0430\u043c\u0435\u0442\u043a\u0430\u043c         for i in 0..<notes.len:           tDiv(             class =               # \u041c\u0435\u043d\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u043c\u0435\u0442\u043a\u0438               if notes[i].completed:                 \"rounded-full select-none px-6 py-2 cursor-pointer hover:scale-110 translation-all duration-300 bg-green-300\"               else:                 \"rounded-full select-none px-6 py-2 cursor-pointer hover:scale-110 translation-all duration-300 bg-red-300\"           ):             # \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441 \u044d\u043c\u043e\u0434\u0436\u0438             if notes[i].completed:               \"\u2705 \"             else:               \"\u274c \"             {notes[i].name}             @click:               # \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0448\u043b\u0435\u043c PATCH \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u043c\u0435\u0442\u043e\u043a               discard toggleNote(notes[i]).then(() => (discard updateNotes()))<\/code><\/pre>\n
\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446-\u0442\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c?<\/p>\n<\/blockquote>\n
\u0412\u0441\u0435 \u0432\u0435\u0440\u043d\u043e! \u0421\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435! \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0431\u044d\u043a\u0435\u043d\u0434:<\/p>\n
nim c -r server\/src\/main<\/code><\/pre>\n
\u0418 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434:<\/p>\n
cd client hpx dev --reload --port 8000<\/code><\/pre>\n
\"\u0418\u0442\u043e\u0433\u043e\u0432\u043e\u0435<\/p>\n
\u0418\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c<\/figcaption><\/div>\n<\/figure>\n
\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435! \u041c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Nim \u0438 \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a HappyX.<\/p>\n
\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h2>\n