{"id":363488,"date":"2024-05-21T01:56:57","date_gmt":"2024-05-21T01:56:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=363488"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=363488","title":{"rendered":"<span>Fullstack \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430: \u0441\u043e\u0437\u0434\u0430\u0451\u043c MVP \u2013 \u043f\u0443\u0442\u044c \u043e\u0442 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0434\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0437\u0430\u043a\u0430\u0437. \u0414\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u0437\u044f\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Ruby on Rails 7 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Hotwire \u0438 \u0421\u0423\u0411\u0414 PostgreSQL. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u043d\u043e\u0439 \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 web \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Agile. \u0414\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0442\u0443\u043f\u043e\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 Ruby \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0412 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u0445\u043e\u0434\u0438\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u043b\u0443\u0447\u0448\u0438\u0435 \u043e\u0431\u0440\u0430\u0437\u0446\u044b \u043c\u0435\u0442\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b RoR 7.1 + Hotwire.<\/p>\n<p>\u041b\u044e\u0431\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0440\u044f\u0434\u043e\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438, \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430\u043c\u0438, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430\u043c\u0438 \u0438 DevOps. \u0412 \u0437\u0430\u043a\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u0445 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0451 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a. \u0412\u043e\u0442 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0432\u0441\u0451 \u0437\u043d\u0430\u0442\u044c, \u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f fullstack \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e Rest API, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0434\u043e\u043a\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f GitHub Actions \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Continuous Integration.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043f\u044b\u0442\u043a\u0443 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u042d\u0442\u043e \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0438\u043c\u0431\u0438\u043e\u0437 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u043f\u0440\u043e\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0439 \u0432 \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0434\u0443\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0435\u0447\u0442\u043e \u043d\u043e\u0432\u043e\u0435, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0435 \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u0445 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u0447\u0435 \u0431\u044b\u043b\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0445\u043e\u0434\u043e\u043c \u0441\u044e\u0436\u0435\u0442\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043c\u043d\u043e\u0433\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0441\u043a\u0440\u044b\u0442\u044b \u0437\u0430 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u0439 \u0440\u0435\u0448\u0430\u0435\u043c\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435. \u0417\u0430 \u0445\u043e\u0434\u043e\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u0430\u043c \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/commits\/master?after=ccff06cbcb9212165d59d26a59c3d5014c152b05+34&amp;branch=master&amp;qualified_name=refs%2Fheads%2Fmaster\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a>.<\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/h2>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0442 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 <strong>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 (\u0422\u0417)<\/strong> \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0432\u0443\u0445\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0447\u0430\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u043e\u043f\u0438\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u043e\u0432 \u043a\u0430\u043a \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0442\u0430\u043a \u0438 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u043e REST API. \u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u043a\u0440\u0443\u0433\u043e\u043c \u0434\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u043b\u0438\u0446 \u043f\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 ip-\u0430\u0434\u0440\u0435\u0441\u0443. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2013 \u0441\u0431\u043e\u0440 \u0441\u044b\u0440\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e \u0434\u0430\u0442\u0435-\u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0422\u043e\u043f\u0438\u043a\u0438 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0443\u043f\u044f\u0442 \u043f\u043e \u043c\u0435\u0440\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/939\/347\/f47\/939347f47d5c0e9fc4c13e37517ad542.png\" width=\"1640\" height=\"786\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/939\/347\/f47\/939347f47d5c0e9fc4c13e37517ad542.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4f6\/52e\/9c2\/4f652e9c2eb698cd51c4cc75eee0ff54.png\" alt=\"\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\" title=\"\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\" width=\"1664\" height=\"672\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4f6\/52e\/9c2\/4f652e9c2eb698cd51c4cc75eee0ff54.png\"\/><\/p>\n<div><figcaption>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438<em> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<h2>I. \u0412 \u0434\u043e\u0431\u0440\u044b\u0439 \u043f\u0443\u0442\u044c. \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>\u0423 Ruby \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438. \u041f\u0435\u0440\u0432\u044b\u0439, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u043e\u0433\u043e fullstack \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a  Ruby on Rails. \u0412\u0442\u043e\u0440\u043e\u0439, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e frontend \u0438 backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e <a href=\"https:\/\/habr.com\/ru\/companies\/productstar\/articles\/508892\" rel=\"noopener noreferrer nofollow\">Minimum Viable Product<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 <a href=\"https:\/\/edgeguides.rubyonrails.org\/getting_started.html#crudit-where-crudit-is-due\" rel=\"noopener noreferrer nofollow\">Ruby on Rails \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a> \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e Rspec-\u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <a href=\"https:\/\/medium.com\/@oliver.seq\/creating-a-rest-api-with-rails-2a07f548e5dc\" rel=\"noopener noreferrer nofollow\">REST API<\/a> \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e Rspec-\u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0430\u043a \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u044b \u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/www.betterspecs.org\" rel=\"noopener noreferrer nofollow\">\u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a<\/a> \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e Rspec<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u044b\u043c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u043a\u043e\u0434\u0430 \u0442\u0435\u0441\u0442\u0430\u043c\u0438. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Ruby on Rails \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u043e\u0434\u0435 \u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u0442\u0440\u043e\u043a \u0432 \u0442\u0435\u0441\u0442\u0430\u0445.<\/p>\n<pre><code class=\"bash\">bin\/rails stats ... Code LOC: 671     Test LOC: 647     Code to Test Ratio: 1:1.0<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u041c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u0435\u043c\u043e\u043c <a href=\"https:\/\/github.com\/simplecov-ruby\/simplecov\" rel=\"noopener noreferrer nofollow\">simplecov<\/a>.<\/p>\n<ol start=\"3\">\n<li>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0438 \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u0435\u043c\u043e\u043c <a href=\"https:\/\/matchers.shoulda.io\/docs\/v5.3.0\/\" rel=\"noopener noreferrer nofollow\">shoulda-matchers<\/a>. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u0430\u0436\u043d\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <strong>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0451 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0435\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f. \u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e?<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u0437\u0430 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0438 \u043e\u043d \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b <strong>\u0430\u043a\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Agile \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044e<\/strong> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0432\u043e\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u043e\u043b\u0438 \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430<\/strong> \u043c\u044b \u043d\u0430\u0447\u043d\u0451\u043c \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u0435\u0441\u044c \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0437\u0430\u0434\u0430\u0447, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u0441\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0435\u0451 \u0441\u0434\u0430\u0447\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c <strong>\u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u0431\u0443\u0434\u0435\u0442<\/strong> \u0447\u0451\u0442\u043a\u043e <strong>\u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c<\/strong>, <strong>\u0437\u0430 \u0447\u0442\u043e<\/strong> \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c <strong>\u043f\u043b\u0430\u0442\u0438\u0442\u044c<\/strong> \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0434\u0435\u043d\u044c\u0433\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u043d\u0435 \u0434\u0430\u0451\u0442\u0435 \u0441\u0435\u0431\u0435 \u0437\u0430\u0431\u044b\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 legacy, \u0438, \u043a\u0430\u043a \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0444\u043e\u0440\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0437\u044f\u0442\u044c\u0441\u044f \u0437\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 legacy. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f Junior \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u0437 \u0441\u0432\u043e\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u043c\u044b <strong>\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c<\/strong> <strong>\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0441\u043d\u043e\u0432\u0443 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d\u043d\u043e-\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u044f\u0437\u0435\u0439, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u0445 &#171;\u043c\u0430\u0433\u0438\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439&#187;.<\/strong><\/p>\n<\/li>\n<\/ul>\n<h2>II. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<ol start=\"4\">\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 css \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\" rel=\"noopener noreferrer nofollow\">Bootstrap<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 Rails, \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e CSS:<\/p>\n<pre><code class=\"bash\">rails -T ... bin\/rails css:build                          # Build your CSS bundle bin\/rails css:clobber                        # Remove CSS builds bin\/rails css:install                        # Install JavaScript de... bin\/rails css:install:bootstrap              # Install Bootstrap bin\/rails css:install:bulma                  # Install Bulma bin\/rails css:install:postcss                # Install PostCSS bin\/rails css:install:sass                   # Install Sass bin\/rails css:install:shared                 # Install shared elemen... bin\/rails css:install:tailwind               # Install Tailwind ...<\/code><\/pre>\n<p>\u0411\u0435\u0440\u0451\u043c \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443 \u043d\u0430\u0431\u0438\u0440\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a <a href=\"https:\/\/www.simplethread.com\/how-to-create-a-new-rails-7-app-with-tailwind\/\" rel=\"noopener noreferrer nofollow\">Tailwind<\/a>, \u043d\u043e \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <code>bin\/rails css:install:bootstrap<\/code><\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0437 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\" rel=\"noopener noreferrer nofollow\">Bootstrap<\/a> \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c:  <\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438<a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/containers\/#how-they-work\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/getbootstrap.com\/docs\/5.3\/layout\/containers\/#how-they-work<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u043b\u043e\u043a\u043e\u0432 \u0434\u0440\u0443\u0433 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/flex\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/flex\/<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/text\/#word-break\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/text\/#word-break;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u00abToast\u00bb <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/toasts\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/components\/toasts\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 <a href=\"https:\/\/icons.getbootstrap.com\" rel=\"noopener noreferrer nofollow\">https:\/\/icons.getbootstrap.com\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446 \u0431\u043b\u043e\u043a\u043e\u0432 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/borders\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/borders\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u00ab\u043b\u0438\u043f\u043a\u0438\u043c\u0438\u00bb \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043a \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u043e\u043a\u043d\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/helpers\/position\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/helpers\/position\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/customize\/color\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/customize\/color\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/columns\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/layout\/columns\/;<\/a><\/p>\n<\/li>\n<\/ul>\n<ol start=\"5\">\n<li>\n<p>\u041f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Single-Page Application (SPA) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Turbo-Frames \u0438 Stimulus.<\/p>\n<\/li>\n<\/ol>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Hotwire Turbo \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/hotwired\/turbo-rails#installation\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/hotwired\/turbo-rails#installation<\/u><\/a> . \u041d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0435\u0449\u0451 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a Javascript. \u041d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 <a href=\"https:\/\/medium.com\/@technoblogueur\/using-esbuild-with-rails-7-in-a-simple-way-908e2ef328fe\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f <\/a>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ESBuild \u041d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0435\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f <a href=\"https:\/\/www.youtube.com\/watch?v=qOptalp8zUY\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a>. \u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0438 \u0443 \u0432\u0430\u0441 \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n<pre><code class=\"bash\">\u2718 [ERROR] Could not resolve \"@hotwired\/turbo-rails\"<\/code><\/pre>\n<p>\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0434\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"yaml\">\"dependencies\": {   \"@hotwired\/stimulus\": \"^3.2.2\",   \"@hotwired\/turbo-rails\": \"^7.3.0\",   ...<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0430\u044f \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0432 Ruby on Rails \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 Hotwire \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0448\u044c \u043f\u043e \u0440\u043e\u0434\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/hotwired.dev\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/hotwired.dev<\/u><\/a> \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439, \u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0435\u0448\u0451\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0442\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Hotwire \u0432 Rails  \u0435\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"https:\/\/www.youtube.com\/playlist?list=PLWlFXymvoaJ-uWJFOmWLJDbsZ8WYs6C_e\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e\u043a\u0443\u0440\u0441 <\/a>\u043e\u0442 \u0418\u043b\u044c\u0438 \u041a\u0440\u044e\u043a\u043e\u0432\u0441\u043a\u043e\u0433\u043e. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c \u0432\u0437\u044f\u0442\u043e\u0439 \u043d\u0430\u043c\u0438 \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a4b\/88b\/ee7\/a4b88bee7a2344c6ffebfb8ca7469f34.png\" alt=\"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Turbo-Frames \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\" title=\"\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Turbo-Frames \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\" width=\"1642\" height=\"958\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a4b\/88b\/ee7\/a4b88bee7a2344c6ffebfb8ca7469f34.png\"\/><\/p>\n<div><figcaption>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Turbo-Frames \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0443 Akshay Khot \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u00ab<a href=\"https:\/\/dev.to\/software_writer\/building-a-to-do-list-using-hotwire-and-stimulus-120i\" rel=\"noopener noreferrer nofollow\">Building a To-Do List Using Hotwire and Stimulus<\/a>\u00bb \u0441 <a href=\"https:\/\/www.youtube.com\/watch?v=ayKxD1LDoe4\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 <\/a>\u0438 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 <a href=\"https:\/\/github.com\/akshayKhot\/taskify\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434\u0430\u043c\u0438<\/a>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4c1\/8a9\/6cf\/4c18a96cf0d1d6f388e17846f5667f3f.png\" alt=\"Flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430\" title=\"Flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430\" width=\"1632\" height=\"872\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4c1\/8a9\/6cf\/4c18a96cf0d1d6f388e17846f5667f3f.png\"\/><\/p>\n<div><figcaption>Flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043c\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u0438\u0440\u0430\u0436\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0440\u0435\u0436\u043d\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438\u0437 Turbo-Streams \u0432 <code>app\/helpers\/application_helper.rb<\/code><\/p>\n<pre><code class=\"ruby\">turbo_stream.replace 'flash', partial: 'shared\/flash' <\/code><\/pre>\n<p>\u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443 \u0438\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 Stimulus. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u043b\u044d\u0448-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438\u0437 <code>app\/views\/shared\/_flash.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;div  id=\"flash\">   &lt;div data-controller=\"autohide\">     &lt;% flash.each do |k, v| %>       &lt;%= tag.div v, class: \"alert alert-#{k}\", role: 'alert' %>     &lt;% end %>   &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 <code>app\/javascript\/controllers\/autohide_controller.js<\/code><\/p>\n<pre><code class=\"javascript\">import { Controller } from \"@hotwired\/stimulus\";  export default class extends Controller {   connect() {     setTimeout(() => { this.dismiss() }, 10000)   }    dismiss() {     this.element.remove()   } }<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0443 \u042f\u0440\u043e\u0441\u043b\u0430\u0432\u0430 \u0428\u043c\u0430\u0440\u043e\u0432\u0430 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u00ab<a href=\"https:\/\/blog.corsego.com\/turbo-hotwire-flash-messages\" rel=\"noopener noreferrer nofollow\">Turbo Streams &#8212; Create and stream records. Flash messages. Reusable Streams<\/a>\u00bb.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0448\u0430\u0433\u0443.<\/p>\n<ol start=\"6\">\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Turbo-Streams \u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c web-socket \u043a\u0430\u043d\u0430\u043b\u044b \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0441\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043f\u043e\u0434 \u0442\u043e\u043f\u0438\u043a\u043e\u043c, \u0438 \u0432\u0441\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0442\u043e\u043f\u0438\u043a\u0438 \u0432 \u0441\u0432\u043e\u0451\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0415\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u043a\u0443\u0440\u0441 \u043f\u043e frontend \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 Hotwire \u043e\u0442 Alexandre Ruban \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0435 <a href=\"https:\/\/hotrails.dev\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/hotrails.dev<\/u><\/a>. \u041c\u044b \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0430 \u043d\u0451\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0451\u0442\u0435\u0441\u044c \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/p>\n<pre><code class=\"bash\">[Turbo] There was an exception - Gem::LoadError(Error loading the 'redis' Action Cable pubsub adapter. Missing a gem it depends on? redis is not part of the bundle. Add it to your Gemfile.)<\/code><\/pre>\n<p>\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>Gemfile<\/code> \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 <code>gem 'redis'<\/code>. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0435\u0433\u043e.<\/p>\n<ol start=\"7\">\n<li>\n<p>C \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0435\u043c\u0430 Capybara \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0432\u043e\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 (<a href=\"https:\/\/github.com\/teamcapybara\/capybara\" rel=\"noopener noreferrer nofollow\">features<\/a>).<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0438 \u0443 \u043d\u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0422\u0417. \u041e\u043d \u0445\u043e\u0447\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043f\u0438\u0441\u043e\u043a \u0447\u0430\u0442\u043e\u0432 \u0438 \u043f\u043e\u0441\u0442\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e (\u043d\u0430\u0432\u0435\u0440\u0445\u0443) \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e (\u0432\u043d\u0438\u0437\u0443);<\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043f\u0438\u0441\u043a\u0438 \u0447\u0430\u0442\u043e\u0432 \u0438 \u043f\u043e\u0441\u0442\u043e\u0432 \u043d\u0435 \u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u0441\u0440\u0430\u0437\u0443, \u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u043b\u0438 \u043f\u043e\u0440\u0446\u0438\u043e\u043d\u043d\u043e, \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432\u043d\u0438\u0437 \u043f\u043e \u0441\u043f\u0438\u0441\u043a\u0443;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u044c flash-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0441\u043e \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u043c \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435\u043c, \u043e \u043f\u043e\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0432\u043e\u0439 \u0447\u0430\u0442, \u043d\u043e \u0438 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0418\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u0430\u0436\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0447\u0430\u0442\u043e\u0432. (<em>\u041c\u044b \u0443\u0436\u0435 \u0438\u043c\u0435\u043b\u0438 \u044d\u0442\u043e\u0442 \u043f\u0443\u043d\u043a\u0442 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0422\u0417, \u043d\u043e \u043c\u044b \u0435\u0449\u0451 \u043d\u0435 \u0434\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0434\u043e \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/em>);<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0447\u0430\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u041f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0447\u0430\u0442\u0430 \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h2>III. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0420\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043c, \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<ol start=\"8\">\n<li>\n<p>\u041f\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f\u043c \u043b\u043e\u0433\u043e\u0432 \u0431\u044d\u043a\u0435\u043d\u0434\u0430 \u043c\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0437\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u044c\u044e \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043d\u0430\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 &#171;N+1&#187;. \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c ActiveRecord \u043c\u0435\u0442\u043e\u0434\u0430 .<a href=\"https:\/\/rusrails.ru\/active-record-querying#includes\" rel=\"noopener noreferrer nofollow\">includes<\/a>.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b CRUD \u0438\u0437 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0422\u0417 \u043f\u043e \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044e \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0447\u0430\u0442\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0447\u0430\u0442\u043e\u0432 <a href=\"https:\/\/www.hotrails.dev\/turbo-rails\/turbo-frames-and-turbo-streams\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/www.hotrails.dev\/turbo-rails\/turbo-frames-and-turbo-streams<\/u><\/a>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Turbo-Frames \u0438 Turbo-Streams \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u0435\u043c \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043e \u0432\u043d\u043e\u0441\u0438\u043c\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0432 \u0447\u0430\u0442\u0430\u0445 <a href=\"https:\/\/www.hotrails.dev\/turbo-rails\/turbo-streams\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/www.hotrails.dev\/turbo-rails\/turbo-streams<\/u><\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>9.1. \u041d\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u0430\u0445 Capybara \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0432\u0441\u0451 \u0442\u0430\u043a \u0433\u043b\u0430\u0434\u043a\u043e \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0447\u0430\u0442\u0430. \u0422\u0430\u043c, \u0433\u0434\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u00ab\u043f\u043e \u043c\u0430\u0441\u043b\u0443\u00bb, \u0442\u0435\u0441\u0442\u044b \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u043c\u0438 \u043d\u0430 \u043d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"bash\">ActionController::UnknownFormat in ChatsController#update ChatsController#update is missing a template for this request format and variant.<\/code><\/pre>\n<p>\u041c\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u0443 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043a\u0440\u044b\u0442\u044b\u0445 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u044f\u0432\u043d\u044b\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432 &lt;input> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 <code>app\/views\/chats\/_edit_form.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;input type=\"hidden\" name=\"format\" value=\"turbo_stream\"><\/code><\/pre>\n<p>9.2. \u0423 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u043c\u0435\u043d\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0447\u0430\u0442\u0430 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 Turbo-Frames. \u041c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0447\u0430\u0442\u0430. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432 \u0440\u043e\u0443\u0442\u0435\u0440 <code>config\/routes.rb<\/code> HTML-\u043c\u0435\u0442\u043e\u0434\u0430 POST \u043d\u0430 action show \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 ChatsController.<\/p>\n<pre><code class=\"ruby\">post 'chats\/:id', controller: :chats, action: :show<\/code><\/pre>\n<p><code>app\/controllers\/chats_controller.rb<\/code><\/p>\n<pre><code class=\"ruby\">def show   if request.method == 'GET'     @cursor = (params[:cursor] || ((@chat.posts.last&amp;.id || 0) + 1)).to_i     @posts = @chat.posts                   .where('posts.id &lt; ?', @cursor)                   .includes(:highlight)                   .order(id: :desc)                   .take(POSTS_PER_PAGE)     @next_cursor = @posts.last&amp;.id     @more_pages = @next_cursor.present? &amp;&amp; @posts.count == POSTS_PER_PAGE      render 'show_scrollable_list' if params[:cursor]   else     render turbo_stream: turbo_stream.update(@chat)   end end<\/code><\/pre>\n<ol start=\"10\">\n<li>\n<p>\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432\u0430\u0436\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u041f\u0435\u0440\u0432\u044b\u0439 \u2013 \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u0443\u043b\u0435\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043a \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043f\u043e\u0441\u0442\u043e\u0432. \u0412\u0442\u043e\u0440\u043e\u0439 \u2013 \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u043e \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0440\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u0430\u0445 \u043d\u0430 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 \u0411\u0414. \u042d\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 Highlights.<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u043b\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f action highlight \u0443 PostsController, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430 &#171;\u0412\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439&#187;\/&#187;\u041d\u0435\u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439&#187;, \u0430 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 Highlights, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u042d\u0434\u0435\u043c\u043e\u043c \u0422\u043e\u043f\u0443\u0437\u043e\u0432\u044b\u043c \u0432 \u0432\u0438\u0434\u0435\u043e \u0440\u043e\u043b\u0438\u043a\u0435  \u00ab<a href=\"https:\/\/www.youtube.com\/watch?v=Ji567_hkgg0\" rel=\"noopener noreferrer nofollow\">\u041e\u043d\u043b\u0430\u0439\u043d-\u0447\u0430\u0442 \u043d\u0430 Ruby on Rails 7 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Hotwire<\/a>\u00bb  \u0441 <a href=\"https:\/\/github.com\/mechnicov\/turbochat\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.  \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0448\u0438\u0440\u043e\u043a\u043e\u0432\u0435\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0441\u043e \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u043c \u043f\u043e\u0441\u0442\u0430 \u0442\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 Turbo-Streams.<\/p>\n<ol start=\"11\">\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0445\u0435\u043b\u043f\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u044e \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 Highlights \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c HTML-\u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0432\u044b\u0434\u0435\u043b\u044f\u0435\u043c\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043e \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u0430\u0445 \u043a \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0432\u044b\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434. \u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u043b\u0438 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0430\u043c\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u044e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 <a href=\"https:\/\/mkdev.me\/ru\/posts\/ne-vsya-pravda-o-dekoratorah\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440<\/a> \u0438\u043b\u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 <a href=\"https:\/\/medium.com\/@croatech\/%D0%BF%D1%80%D0%B5%D0%B7%D0%B5%D0%BD%D1%82%D0%B5%D1%80%D1%8B-%D0%B2-rails-7b23eaef9195\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0435\u0440<\/a>.. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435, \u043f\u043e\u0434\u043b\u0435\u0436\u0430\u0449\u0435\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u0430\u0432\u0442\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u0441\u043b\u043e\u0432 \u0432 \u0434\u043b\u0438\u043d\u043d\u044b\u0445 \u0442\u0435\u043a\u0441\u0442\u0430\u0445 \u043e\u0442 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/blog.appsignal.com\/2023\/02\/01\/a-guide-to-rails-view-helpers.html\" rel=\"noopener noreferrer nofollow\">\u0425\u0435\u043b\u043f\u0435\u0440\u043e\u043c<\/a>. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439:<\/p>\n<pre><code class=\"xml\">&lt;%= html_line_wrapping(@chat.topic) %><\/code><\/pre>\n<pre><code class=\"xml\">&lt;%= html_line_wrapping(post.body) %><\/code><\/pre>\n<pre><code class=\"xml\">&lt;%= link_to html_line_wrapping(resource.topic), chat_path(resource.id),     class:\"text-decoration-none link-secondary\", data: { turbo_frame: \"_top\" } %><\/code><\/pre>\n<p>\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 <code>app\/helpers\/application_helper.rb<\/code><\/p>\n<pre><code class=\"ruby\">def html_line_wrapping(text, style = :br)   text = h(text)   text = case style          when :br            text.gsub(\"\\n\", '&lt;br>')          when :pre            \"&lt;pre style=\\\"white-space: pre-wrap;\\\">#{text}&lt;\/pre>\"          when :p            text.split(\"\\n\").inject('') { |res, el| res + \"&lt;p>#{el}&lt;\/p>\" }          else            text          end   \"&lt;div class=\\\"text-break col\\\">#{text}&lt;\/div>\".html_safe end<\/code><\/pre>\n<ol start=\"12\">\n<li>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0439 \u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f\u0445 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Bootstrap-\u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c &#171;Toast&#187;. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0435\u0449\u0430\u043d\u0438\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Turbo-Streams. \u0417\u0432\u0443\u043a\u043e\u0432\u0443\u044e \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u043c js-\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435, \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u043d\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Stimulus \u0432. <code>app\/javascript\/controllers\/toast_controller.js<\/code><\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"javascript\">import { Controller } from \"@hotwired\/stimulus\" import { Toast } from 'bootstrap'  export default class extends Controller {   static targets = ['toast']   static values = {     id: String   }    initialize() {     this.audio = new Audio(       window.location.origin + '\/513269__zhr__tl-light-on-e.mp3'     )     this.toast = new Toast(       document.getElementById('receiveToast')     )   }    idValueChanged(value, previousValue) {     if (!(value === '')) {       this.toast.show()       this.audio.play()     }   } }<\/code><\/pre>\n<p>\u0412\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u0430\u043a \u0443 Alexandre Ruban \u00ab<a href=\"https:\/\/www.hotrails.dev\/turbo-rails\/flash-messages-hotwire\" rel=\"noopener noreferrer nofollow\">Flash messages with Hotwire<\/a>\u00bb  \u041d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0440\u0430\u0437\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0432 <a href=\"https:\/\/youtu.be\/VuR0jASu-Wc?list=PLWlFXymvoaJ-uWJFOmWLJDbsZ8WYs6C_e&amp;t=925\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e \u0440\u043e\u043b\u0438\u043a\u0435<\/a> \u043e\u0442 \u0418\u043b\u044c\u0438 \u041a\u0440\u044e\u043a\u043e\u0432\u0441\u043a\u043e\u0433\u043e.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0435 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u0435, \u043d\u0430\u0434\u043e \u0438\u043c\u0435\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0440\u0435\u0441\u0443\u0440\u0441. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0444\u0430\u0439\u043b \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043f\u043e \u043f\u0440\u044f\u043c\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 <code>http:\/\/localhost:3322\/513269__zhr__tl-light-on-e.mp3<\/code> \u0438\u0437 <code>public\/513269__zhr__tl-light-on-e.mp3<\/code>.<\/p>\n<ol start=\"13\">\n<li>\n<p>\u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u044b\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0435\u043c\u043e\u043c &#8216;pagy&#8217;. \u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c <a href=\"https:\/\/www.bearer.com\/blog\/infinite-scrolling-pagination-hotwire\" rel=\"noopener noreferrer nofollow\">\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/a> \u043f\u0440\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u044d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0430\u0448 \u0441\u043b\u0443\u0447\u0430\u0439), \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043e\u043c \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0438\u0437 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0434\u043e\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c &#171;\u043a\u0443\u0440\u0441\u043e\u0440\u0430&#187;. \u042d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u0438\u0431\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u0438\u0437 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 &#8216;cursor&#8217;, \u043b\u0438\u0431\u043e \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 URL-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 &#8216;cursor&#8217;, &#8216;opened&#8217;, &#8216;newly_created_at&#8217;. \u0423 \u043d\u0430\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u043e\u0431\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (<code>@chats<\/code>), \u0430 \u0443 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (<code>@posts<\/code>).<\/p>\n<\/li>\n<\/ol>\n<p><code>app\/controllers\/chats_controller.rb<\/code><\/p>\n<pre><code class=\"ruby\">POSTS_PER_PAGE = 10 CHATS_PER_PAGE = 10  def index   @cursor = params[:cursor].to_i   @used = params[:opened].to_a   # define @created_at To exclude newly created chats   @created_at = (params[:newly_created_at] || Time.now).to_time   @chats = Chat.all                .where.not(id: @used)                .where('created_at &lt; ?', @created_at)                .order(updated_at: :desc)                .take(CHATS_PER_PAGE)   @next_cursor = @cursor + 1   @more_pages = @next_cursor.present? &amp;&amp; @chats.count == CHATS_PER_PAGE   # define @used To show updated but not presented chats   @used += @chats.map(&amp;:id)    render 'index_scrollable_list' if params[:cursor] end  def show   if request.method == 'GET'     @cursor = (params[:cursor] || ((@chat.posts.last&amp;.id || 0) + 1)).to_i     @posts = @chat.posts                   .where('posts.id &lt; ?', @cursor)                   .includes(:highlight)                   .order(id: :desc)                   .take(POSTS_PER_PAGE)     @next_cursor = @posts.last&amp;.id     @more_pages = @next_cursor.present? &amp;&amp; @posts.count == POSTS_PER_PAGE      render 'show_scrollable_list' if params[:cursor]   else     render turbo_stream: turbo_stream.update(@chat)   end end<\/code><\/pre>\n<p><code>app\/views\/chats\/show_scrollable_list.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;%= turbo_frame_tag \"posts-page-#{@cursor}\" do %>   &lt;%= render partial: \"posts\/post\", collection: @posts %>   &lt;%= render partial: \"chats\/next_show_page\" %> &lt;% end %><\/code><\/pre>\n<p><code>app\/views\/chats\/_next_show_page.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;% if @more_pages %>   &lt;%= turbo_frame_tag(         \"posts-page-#{@next_cursor}\",         autoscroll: true,         loading: :lazy,         src: chat_path(id: @chat.id, cursor: @next_cursor),         target: \"_top\"       ) do %>     Loading...   &lt;% end %> &lt;% end %><\/code><\/pre>\n<p><code>app\/views\/chats\/index_scrollable_list.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;%= turbo_frame_tag \"chats-page-#{@cursor}\" do %>   &lt;%= render partial: 'chats\/chat', collection: @chats %>   &lt;%= render partial: 'chats\/next_index_page' %> &lt;% end %><\/code><\/pre>\n<p><code>app\/views\/chats\/_next_index_page.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;% if @more_pages %>   &lt;%= turbo_frame_tag(         \"chats-page-#{@next_cursor}\",         autoscroll: true,         loading: :lazy,         src: chats_path(cursor: @next_cursor,                         opened: @used,                         newly_created_at: @created_at),         target: \"_top\"       ) do %>     Loading...   &lt;% end %> &lt;% end %><\/code><\/pre>\n<p>\u041f\u0440\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0442\u0435\u0441\u0442\u0430\u0445 \u0438\u0437 Capybara \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0451\u043d \u043e\u0441\u043e\u0431\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043f\u0440\u043e\u0433\u043e\u043d\u0430 RSpec \u0442\u0435\u0441\u0442\u043e\u0432, \u0447\u0435\u0440\u0435\u0437 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f js-\u0442\u0435\u0433\u0430:<\/p>\n<pre><code class=\"ruby\">describe '...', js: true do <\/code><\/pre>\n<p>\u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f Ruby \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 <code>sleep<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u043a\u0438 JavaScript \u043f\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <code>spec\/features\/chats\/show.html.erb_spec.rb<\/code><\/p>\n<pre><code class=\"ruby\">context 'when scrolling the chat page' do   it 'autoloads the entire list of posts' do     expect(page).to have_css(\"#post_#{posts[-1].id}\")     page.execute_script 'window.scrollBy(0,document.documentElement.scrollHeight)'     sleep 0.5     page.execute_script 'window.scrollTo(0,document.documentElement.scrollHeight)'     sleep 0.5     # the next expectation is interrupted periodically. No idea :(     expect(page).to have_css(\"#post_#{posts[0].id}\")   end end<\/code><\/pre>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0442\u0435\u0441\u0442\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a JavaScript, \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u0440\u0430\u0439\u0432\u0435\u0440 \u0434\u043b\u044f \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0444\u0430\u0439\u043b <code>spec\/rails_helper.rb<\/code> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e:<\/p>\n<pre><code class=\"ruby\">require 'capybara\/rspec' RSpec.configure do |config|   Capybara.javascript_driver = case ENV['HEADLESS']                                when 'true', '1'                                  :selenium_chrome_headless                                else                                  :selenium_chrome                                end end<\/code><\/pre>\n<p>\u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u0441 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0438 \u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443 \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"bash\">bundle exec rspec .\/spec HEADLESS=true bundle exec rspec .\/spec<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432, \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043a\u043e\u0434\u0430 \u0441 \u0442\u0435\u0441\u0442\u043e\u043c. \u0412\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0436\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u0441 &#171;\u0431\u0435\u0437\u0433\u043e\u043b\u043e\u0432\u044b\u043c&#187; \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u044d\u0442\u0430\u043f\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u043c \u0438 \u043f\u0440\u0438 \u0434\u0435\u043f\u043b\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c \u0442\u0435\u0441\u0442\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432 \u043e\u043a\u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u043e\u043a\u043d\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u043a\u043d\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u0430, \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0441\u0435\u0441\u0441\u0438\u0438 Capybara &#8212; <a href=\"https:\/\/www.rubydoc.info\/gems\/capybara\/Capybara\/Session:save_and_open_page\" rel=\"noopener noreferrer nofollow\">save_and_open_page<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0432 \u043f\u0430\u043f\u043a\u0443 <code>tmp\/capybara<\/code> \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043d\u0438\u043c\u043a\u043e\u043c html \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<ol start=\"14\">\n<li>\n<p>\u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0438\u0437 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0447\u0430\u0442\u0430 \u0432 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f Turbo-Frames \u0438 Stimulus. \u0412 Stimulus \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043b\u0430\u0432\u0438\u0448\u0438 Escape \u043a\u0430\u043a \u0443 \u042f\u0440\u043e\u0441\u043b\u0430\u0432\u0430 \u0428\u043c\u0430\u0440\u043e\u0432\u0430 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435  \u00ab<a href=\"https:\/\/www.bearer.com\/blog\/how-to-build-modals-with-hotwire-turbo-frames-stimulusjs\" rel=\"noopener noreferrer nofollow\">How to build modals with Hotwire (Turbo Frames + StimulusJS)<\/a>\u00bb.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438 \u0440\u0443\u0447\u043d\u043e\u043c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 <a href=\"https:\/\/discuss.hotwired.dev\/t\/controller-initialized-twice-when-visiting-from-a-turbolinks-page\/17\/4\" rel=\"noopener noreferrer nofollow\">\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0437\u0430\u0434\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f<\/a> \u043b\u044e\u0431\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Hotwire. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0430 \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043a\u043b\u0438\u043a\u0435 \u0441 \u0446\u0435\u043b\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0433\u0434\u0430 Bootstrap \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435  \u0432 \u0434\u0432\u0443\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430\u0445 \u043d\u0435\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"modal-backdrop fade show\">&lt;\/div><\/code><\/pre>\n<p>\u041e\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 Escape \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438\u0437 fade-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u00ab\u043a\u043e\u0441\u0442\u044b\u043b\u044c\u00bb \u0434\u043b\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0432  <code>app\/javascript\/controllers\/remote_modal_controller.js<\/code>.<\/p>\n<pre><code class=\"javascript\">hideBeforeRender(event) {   if (this.isOpen()) {     console.log('hideBeforeRender.isOpen')     event.preventDefault()     this.element.addEventListener('hidden.bs.modal', event.detail.resume)     this.modal.hide()     \/\/ eliminate the consequences of double clicks after closeWithKeyboard     let elements = document.getElementsByClassName('modal-backdrop');     while(elements.length > 0){         elements[0].parentNode.removeChild(elements[0]);     }   } }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u043e\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448\u0438 Escape \u0432 <code>spec\/features\/chats\/new.html.erb_spec.rb<\/code><\/p>\n<pre><code class=\"ruby\">it 'cancels a new chat with the Escape pressed', js: true do   click_link 'Add new topic'    within '#modal_content' do     el = find(:css, '#chat_topic')     el.fill_in with: 'Canceled Chat'     sleep 1     el.send_keys(:escape)   end   sleep 1   expect(page).to have_no_selector('#modal_content')    within '#chats' do     expect(page).not_to have_content('Canceled Chat')   end   # puts page.html # check out how it works end<\/code><\/pre>\n<ol start=\"15\">\n<li>\n<p>\u0414\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0447\u0438\u0441\u0442\u043e\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0432 \u043d\u0451\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 html-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430 \u0438\u043b\u0438 \u0447\u0430\u0442\u0430. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0432\u044b\u043d\u0435\u0441\u043b\u0438 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 <code>response_format: turbo_stream<\/code>, \u0442\u043e \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 ApplicationController. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"ruby\"># app\/controllers\/application_controller.rb class ApplicationController &lt; ActionController::Base   protect_from_forgery with: :null_session    private    def ensure_frame_response     redirect_to root_path unless turbo_frame_request?   end end<\/code><\/pre>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438\u0437<\/p>\n<pre><code class=\"ruby\"># app\/controllers\/chats_controller.rb class ChatsController &lt; ApplicationController   before_action :ensure_frame_response, only: %i[new edit]<\/code><\/pre>\n<pre><code class=\"ruby\"># app\/controllers\/posts_controller.rb class PostsController &lt; ApplicationController   before_action :ensure_frame_response, only: [:new]<\/code><\/pre>\n<p>\u041c\u044b \u043f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0441\u0434\u0430\u0447\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430. \u041d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u0451\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c:<\/p>\n<ul>\n<li>\n<p>\u041e\u043f\u0438\u0441\u0430\u0442\u044c REST API;<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 docker \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0435\u0433\u043e \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Continuous Integration.<\/p>\n<\/li>\n<\/ul>\n<h2> IV. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c REST API. \u041f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f.<\/h2>\n<p>\u0425\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 REST API. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f OpenAPI, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0443 Swagger, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0435\u043c\u0443 \u044f\u0437\u044b\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 <a href=\"https:\/\/swagger.io\/resources\/open-api\/\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/swagger.io\/resources\/open-api\/<\/u><\/a>.  \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0437\u0438\u0438 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.  \u041e\u0431 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0438\u043d\u0430 \u041c\u0430\u043b\u044b\u0448\u0435\u0432\u0430 \u00ab<a href=\"https:\/\/levelup.gitconnected.com\/whats-wrong-with-openapi-771e67e2bf6f\" rel=\"noopener noreferrer nofollow\">What\u2019s Wrong With OpenAPI?<\/a>\u00bb. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u0438 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/jsight.io\/docs\/jsight-api-0-3-quick-tutorial\/\" rel=\"noopener noreferrer nofollow\">JSight<\/a>. \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0443 \u0441\u0435\u0431\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e <a href=\"https:\/\/editor.jsight.io\/r\/gjoyG6J\/1\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435 <\/a>\u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u0432\u0430 \u0435\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430:<\/p>\n<pre><code class=\"bash\">$ http -f get \":3000\/api\/v1\/chats\" $ http -f post \":3000\/api\/v1\/chats\/1\/posts\" \"post[body]=New message\" \"highlight=\"<\/code><\/pre>\n<h2>V. \u0417\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Docker. \u041f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f.<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b <code>Dockerfile<\/code>, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0432 Rails7 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0412 \u043d\u0451\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 node \u0438 yarn \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f JavaScript \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"bash\"># Install JavaScript dependencies ARG NODE_VERSION=14.20.1 ARG YARN_VERSION=1.22.19  ENV PATH=\/usr\/local\/node\/bin:$PATH RUN curl -sL https:\/\/github.com\/nodenv\/node-build\/archive\/master.tar.gz | tar xz -C \/tmp\/ &amp;&amp; \\ \/tmp\/node-build-master\/bin\/node-build \"${NODE_VERSION}\" \/usr\/local\/node &amp;&amp; \\ npm install -g yarn@$YARN_VERSION &amp;&amp; \\ rm -rf \/tmp\/node-build-master  # Install node modules COPY --link package.json yarn.lock .\/ RUN yarn install --frozen-lockfile<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 &#8216;production&#8217;, \u0433\u0434\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f `<strong>secret_key_base<\/strong>`. \u0412 Rails \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0435\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">EDITOR=\"subl --wait\" bin\/rails credentials:edit --environment production<\/code><\/pre>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0444\u0430\u0439\u043b <code>config\/credentials\/production.key<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u0430\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f SECRET_KEY_BASE.  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439:<\/p>\n<pre><code class=\"bash\">ArgumentError: Missing `secret_key_base` for 'production' environment, set this string with `bin\/rails credentials:edit` (ArgumentError)<\/code><\/pre>\n<p>\u0423\u0447\u0451\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (credentials) \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u0412 \u0446\u0435\u043b\u044f\u0445 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0440\u0435\u0434\u0435 &#8216;production&#8217; \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 \u0444\u0430\u0439\u043b <code>.env<\/code>. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0435\u043c\u043e \u0444\u0430\u0439\u043b <code>env-example<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 <code>Dockerfile<\/code> \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u0435\u0433\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e:<\/p>\n<pre><code class=\"bash\">COPY env-example .env<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\">docker build . -t blah-blah-chat:1.0<\/code><\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043d\u0430\u043c \u0432\u043d\u043e\u0432\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435:<\/p>\n<pre><code class=\"bash\">docker image ls                                                 REPOSITORY     TAG      IMAGE ID       CREATED          SIZE blah-blah-chat 1.0      cdfc31ac1a19   35 minutes ago   508MB &lt;none>         &lt;none>   b47fb5763107   45 minutes ago   508MB<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0442\u043e \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0437\u0430\u0431\u0440\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u043e \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043c\u0443\u0441\u043e\u0440 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 REPOSITORY \u0441 \u0438\u043c\u0435\u043d\u0435\u043c, \u0440\u0430\u0432\u043d\u044b\u043c &lt;none>. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">docker rmi -f b47fb5763107<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b <code>docker-compose.yml<\/code>. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e <a href=\"https:\/\/docs.docker.com\/compose\/compose-file\/03-compose-file\/\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 <\/a>\u0438\u043b\u0438 \u043f\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0437 \u0441\u0435\u0442\u0438 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c healthcheck \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 postgres, redis \u0438 app.<\/p>\n<pre><code class=\"yaml\">services:   postgres:     healthcheck:       test: [\"CMD\", \"pg_isready\", \"-U\", \"bbc\", \"-p\", \"5432\", \"-d\", \"blah_blah_chat_production\"]       interval: 5s    redis:     healthcheck:       test: [ \"CMD\", \"redis-cli\", \"--raw\", \"incr\", \"ping\" ]       interval: 5s    app:     healthcheck:       test: [\"CMD\", \"curl\", \"-i\", \"-f\", \"http:\/\/localhost:3000\/up\"]       interval: 10s       timeout: 10s       retries: 3<\/code><\/pre>\n<p>Redis \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0443 \u043d\u0430\u0441 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0430 \u043d\u0451\u043c \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f Turbo-Streams \u0438\u0437 Hotwire. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">docker compose up<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043d\u0435 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043e\u0448\u0438\u0431\u043e\u043a, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u043b\u0443\u0436\u0431\u0443 \u043f\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044e \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0437\u0434\u043e\u0440\u043e\u0432\u044c\u044f \u043d\u0430\u0448\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432:<\/p>\n<pre><code class=\"bash\">watch -n1 docker ps<\/code><\/pre>\n<p>\u0423\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0435\u0449\u0451 \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432\u044b\u0441\u043a\u043e\u0447\u0438\u0442 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435:<\/p>\n<pre><code class=\"bash\">HTTP parse error, malformed request: #&lt;Puma::HttpParserError: Invalid HTTP format, parsing fails. Are you trying to open an SSL connection to a non-SSL Puma?><\/code><\/pre>\n<p>\u0418\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>config\/environments\/production.rb<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>config.force_ssl = true<\/code> \u043d\u0430  <code>config.force_ssl = false<\/code><\/p>\n<p>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 Redis \u0438 PostgreSql \u0441 \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u0445 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0445 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0432 \u043e\u0434\u043d\u0443 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0435\u0442\u044c <a href=\"https:\/\/docs.docker.com\/engine\/reference\/run\/#network-settings\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/docs.docker.com\/engine\/reference\/run\/#network-settings<\/u><\/a>. \u042d\u0442\u0430 \u0441\u0435\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <code>docker-compose.yml<\/code><\/p>\n<pre><code class=\"yaml\">services:   postgresql:     networks:       - postgres   redis:     networks:       - redis   app:     networks:       - postgres       - redis  networks:   postgres:     driver: bridge   redis:     driver: bridge<\/code><\/pre>\n<p>\u0421 \u043d\u0430\u0448\u0435\u0439 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>docker-compose.yml<\/code> \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/docker-compose.yml\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>. \u041e\u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0430 \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0445\u0432\u0430\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0434\u043e\u043a\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043a\u0430\u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Puma, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 Assets, \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 Rails \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0442 Nick Janetakis \u00ab<a href=\"https:\/\/nickjanetakis.com\/blog\/a-guide-for-running-rails-in-docker\" rel=\"noopener noreferrer nofollow\">A Guide for Running Rails in Docker<\/a>\u00bb. \u041a \u043d\u0435\u0439 \u043f\u0440\u0438\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 <a href=\"https:\/\/github.com\/nickjj\/docker-rails-example\/tree\/main\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434\u044b <\/a>\u0438\u0437 GitHub \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0438 <a href=\"https:\/\/www.youtube.com\/watch?v=nKiZz8TNHuU\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e \u0440\u043e\u043b\u0438\u043a<\/a> \u043d\u0430 Youtube.  <\/p>\n<p>\u041a \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043e\u043a\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f Rails \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u044e\u0442 \u0432 \u0441\u0440\u0435\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u0432 development environment \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0412\u043b\u0430\u0434\u0438\u043c\u0438\u0440\u0430 \u0414\u0435\u043c\u0435\u043d\u0442\u044c\u0435\u0432\u0430 \u00ab<a href=\"https:\/\/evilmartians.com\/chronicles\/ruby-on-whales-docker-for-ruby-rails-development\" rel=\"noopener noreferrer nofollow\">Ruby on Whales: Dockerizing Ruby and Rails development<\/a>\u00bb.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0444\u0438\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0430\u0431\u043e\u0442 \u043f\u043e \u043e\u0441\u0432\u0435\u0449\u0451\u043d\u043d\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043e\u0434\u0438\u043d \u0432\u043e\u043f\u0440\u043e\u0441, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u0432\u0430\u0436\u043d\u0443\u044e \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043a\u043e\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044e, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0440\u043e\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0443 \u043d\u0430\u0441 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434 \u0440\u0443\u043a\u0430\u043c\u0438 \u0436\u0438\u0432\u043e\u0439 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0430 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c \u0435\u0433\u043e \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f. \u041f\u0440\u0438\u0447\u0438\u043d\u0430\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448\u0438 \u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u043a\u043b\u0430\u0434\u044b \u043a\u0430\u043a \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u0443\u0435\u043c \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u042d\u0442\u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0435 \u043c\u0438\u043a\u0440\u043e\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043a\u0430\u0442\u0430\u0441\u0442\u0440\u043e\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0432 \u043e\u0431\u043e\u0437\u0440\u0438\u043c\u043e\u0439 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435.\u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 production (\u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u043c \u043d\u0430\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 use cases. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043d\u043e\u0441\u0438\u0442 \u043b\u0438\u0448\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440. \u0418\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u0447\u0442\u043e \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u043d\u0435\u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442\u043a\u0430\u0442\u0430 \u0434\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0431\u043e\u0447\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0437\u0430\u0434. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f. \u0410\u043d\u0430\u043b\u0438\u0437 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043d\u0430\u0439\u0442\u0438 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u041f\u043e \u044d\u0442\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0438\u0442\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0447\u0430\u0449\u0435, \u0430 \u0438\u0445 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0434\u0435, \u0437\u0430\u043c\u0435\u043d\u044f\u044f \u0441\u043e\u0431\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u044e\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u0447\u0442\u043e \u043e\u0442\u043a\u0430\u0442 \u043d\u0435 \u0434\u0430\u0451\u0442 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u00ab\u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e\u00bb. \u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u043f\u0440\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u0438 \u0432\u0441\u0435\u0445 gems, \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0445 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u043f\u043e <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/Gemfile\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435<\/a>.  \u0418 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f \u043f\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0432\u0435\u0440\u0441\u0438\u0439 \u0432\u0441\u0435\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u2013 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435 \u044d\u0442\u0443 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u043c \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u043c. \u0422\u0430\u043a \u0432\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n<p>\u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435. \u041d\u0430 web \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0432\u044b \u043d\u0435\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u041e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u043e \u0438\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u0422\u0430\u043a\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u041d\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u044f\u0441\u044c \u0432 \u0434\u0435\u0442\u0430\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043e\u0442\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u0435\u0434\u043a\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u044f\u0442\u044c \u0431\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043a\u0430\u043a\u0438\u0445-\u043d\u0438\u0431\u0443\u0434\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0420\u0435\u0434\u043a\u043e, \u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0432 \u043d\u0435\u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0442\u0430\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0443 \u0432\u0430\u0441 \u0441\u043b\u043e\u043c\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0440\u0435\u0434\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0418 \u0432\u0430\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0432\u044b\u043f\u0443\u0441\u043a\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u0430, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u0438 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0434 \u0442\u043e, \u043a\u0430\u043a \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 DevOps \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f Docker-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0443\u0434\u0435\u043b\u0435\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u0443. \u0427\u0442\u043e\u0431\u044b \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u043e \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u0443, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u043a\u0443\u0440\u0441 \u00ab<a href=\"https:\/\/www.youtube.com\/playlist?list=PLozcbFx8FoPH30kYPbPuPsvxASWoLo9XB\" rel=\"noopener noreferrer nofollow\">Dockerless: Deep Dive Into What Containers Really are About<\/a>\u00bb  \u043e\u0442 \u041a\u0438\u0440\u0438\u043b\u043b\u0430 \u0428\u0438\u0440\u0438\u043d\u043a\u0438\u043d\u0430  <\/p>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u044b\u0439 \u0438\u0437 <code>Dockerfile<\/code>, \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 <a href=\"https:\/\/ghcr.io\/\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/ghcr.io<\/u><\/a>. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c <a href=\"https:\/\/github.com\/docker\/build-push-action\" rel=\"noopener noreferrer nofollow\">\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 Github Actions<\/a> . \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441 \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/.github\/workflows\/ci.yml\" rel=\"noopener noreferrer nofollow\"> \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/a>. \u041f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0443\u0447\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432<\/p>\n<pre><code class=\"yaml\">- name: Extract metadata (tags, labels) for Docker   id: meta   uses: docker\/metadata-action@v5   with:     images: ${{ env.REGISTRY }}\/${{ env.IMAGE_NAME }}     tags: |       type=semver,pattern={{major}}.{{minor}},value=v1.1.0 <\/code><\/pre>\n<p>\u0422\u0430\u043a \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/pkgs\/container\/blah_blah_chat\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0432\u0435\u0440\u0441\u0438\u0439<\/a> web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0430\u043f\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>\u0415\u0449\u0451 \u0440\u0430\u0437 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 <code>.github\/workflows\/ci.yml<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0430 <a href=\"https:\/\/ghcr.io\/\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/ghcr.io<\/u><\/a>. \u041d\u043e \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u0430\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0430 GitHub. \u0411\u0435\u0437 <a href=\"https:\/\/docs.github.com\/en\/packages\/learn-github-packages\/about-permissions-for-github-packages#about-scopes-and-permissions-for-package-registries\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u0430\u0432<\/a> \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430 GitHub \u0443 \u0432\u0430\u0441 \u0432\u044b\u043b\u0435\u0442\u0438\u0442 \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n<pre><code class=\"bash\">ERROR: denied: installation not allowed to Write organization package Error: buildx failed with: ERROR: denied: installation not allowed to Write organization package <\/code><\/pre>\n<p>\u041f\u0440\u0438\u0447\u0438\u043d\u0443 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b3c\/a32\/b77\/b3ca32b7718bad61fd702c56a0568f99.png\" alt=\"\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435  \u043f\u0440\u0430\u0432 \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c packages\" title=\"\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435  \u043f\u0440\u0430\u0432 \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c packages\" width=\"1200\" height=\"611\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b3c\/a32\/b77\/b3ca32b7718bad61fd702c56a0568f99.png\"\/><\/p>\n<div><figcaption>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435  \u043f\u0440\u0430\u0432 \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c packages<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0430\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u0435\u043d\u0430 \u0438\u0437 \u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u0430 \u0432 <a href=\"https:\/\/docs.github.com\/en\/authentication\/keeping-your-account-and-data-secure\/managing-your-personal-access-tokens\" rel=\"noopener noreferrer nofollow\">\u0441\u0435\u043a\u0446\u0438\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0442\u043e\u043a\u0435\u043d\u043e\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/a>  \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 &#8216;workflow&#8217; \u0438 &#8216;write:packages&#8217; (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b).   <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/848\/0ac\/f4a\/8480acf4af733b07c4d1ff15114681c9.png\" alt=\"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 workflow\" title=\"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 workflow\" width=\"1280\" height=\"831\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/848\/0ac\/f4a\/8480acf4af733b07c4d1ff15114681c9.png\"\/><\/p>\n<div><figcaption>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u0434\u043b\u044f workflow<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043f\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 docker-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"yaml\">jobs:   push_to_registry:     name: Push Docker image to Docker Hub     runs-on: ubuntu-latest     permissions:       contents: read       packages: write<\/code><\/pre>\n<p>\u0412 \u0437\u0430\u043a\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043d\u0430 \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0431\u0440\u0430\u0442\u044c \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u043f\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0434\u0430\u0447\u0438 \u0440\u0430\u0431\u043e\u0442 \u0441 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0432 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>\u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437 docker \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:<\/p>\n<ul>\n<li>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 <a href=\"https:\/\/docs.docker.com\/compose\/install\" rel=\"noopener noreferrer nofollow\">Docker Desktop<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0430\u043f\u043a\u0443 \u043f\u043e\u0434 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0437 <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/docker-compose.yml\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/a> \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0444\u0430\u0439\u043b <code>docker-compose.yml<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0437 <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/env-example\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/a> \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0444\u0430\u0439\u043b <code>env-example<\/code><a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/env-example\" rel=\"noopener noreferrer nofollow\"> <\/a>\u0438 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 <code>.env<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 <code>docker-compose.yml<\/code> \u0438 <code>.env<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"bash\">sudo docker compose up<\/code><\/pre>\n<ul>\n<li>\n<p>\u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430\u0431\u0440\u0430\u0442\u044c \u0430\u0434\u0440\u0435\u0441 <code>localhost:3322<\/code>  <\/p>\n<\/li>\n<\/ul>\n<p>\u0412 production \u0442\u0430\u043a\u0430\u044f \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u043d\u043e \u044d\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u043b\u044f DevOps, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u043d\u044f\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u043e\u0433\u043e \u0438\u0437 \u0434\u043e\u043a\u0435\u0440\u043e\u0432, \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u043b \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435.  <\/p>\n<h2>VI. \u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f. \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Continuous Integration<\/h2>\n<p>\u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0440\u0435\u0435\u0441\u0442\u0440\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432 GitHub. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0437\u0430\u0449\u0438\u0442\u0443 \u043e\u0442 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044f CI\/CD, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432 \u0447\u0430\u0441\u0442\u0438 \u041d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 (Continuous Integration) \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <code>.github\/workflows<\/code> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c GitHub Actions <a href=\"https:\/\/docs.github.com\/en\/actions\/automating-builds-and-tests\/building-and-testing-ruby\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/docs.github.com\/en\/actions\/automating-builds-and-tests\/building-and-testing-ruby<\/u><\/a> .  \u0427\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c \u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0442\u0435\u0437\u0438\u0441\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f Ruby \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e GitHub Actions, \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 <a href=\"https:\/\/github.com\/parterburn\/dabble.me\/blob\/main\/.github\/workflows\/test.yml\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438<\/a>  \u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e \u00ab<a href=\"https:\/\/habr.com\/ru\/articles\/711278\/\" rel=\"noopener noreferrer nofollow\">Github Actions. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430<\/a>\u00bb.  \u0422\u0430\u043c \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435 \u0434\u043b\u044f \u043d\u0430\u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044e \u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 PostgreSQL \u0432 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438  GitHub Actions.<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043f\u0440\u0438\u0432\u044b\u043a\u0448\u0438\u0445 \u0432 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0430\u0432\u0430\u043c\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 <code>`POSTGRES_HOST_AUTH_METHOD: trust`<\/code>, \u0447\u0442\u043e \u0432 \u0442\u0435\u0441\u0442\u0430\u0445 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043f\u0430\u0440\u043e\u043b\u044c, \u043a\u0430\u043a \u0434\u043b\u044f GitHub:\u0432 <code>.github\/workflows\/ci.yml<\/code><\/p>\n<pre><code class=\"yaml\">jobs:   tests:     steps:       - name: Build and Create PostgreSQL Database         env:           POSTGRES_USER: postgres           POSTGRES_PASSWORD: postgres           RAILS_ENV: test         run: |           bin\/rails db:create           bin\/rails db:migrate<\/code><\/pre>\n<p>\u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u0438 \u0432  <code>config\/database.yml<\/code><\/p>\n<pre><code class=\"yaml\">test:   &lt;&lt;: *default   host: localhost   username: &lt;%= ENV[\"POSTGRES_USER\"]  'postgres' %>   password: &lt;%= ENV[\"POSTGRES_PASSWORD\"]  'postgres' %>   database: blah_blah_chat_test<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043a\u043e\u0434\u0430 \u0438\u0437 \u043b\u0438\u043d\u0442\u0435\u0440\u0430 rubocop, \u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u044e \u00ab<a href=\"https:\/\/github.com\/rubocop\/rubocop\/issues\/9832\" rel=\"noopener noreferrer nofollow\">RuboCop pulls in .rubocop.yml files from vendor directories<\/a>\u00bb. \u0412 \u043d\u0435\u0439 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439:<\/p>\n<pre><code class=\"bash\">Unable to find gem panolint; is the gem installed? Gem::MissingSpecError<\/code><\/pre>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432 \u0444\u0430\u0439\u043b <code>.rubocop.yml<\/code> \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443:<\/p>\n<pre><code class=\"yaml\">inherit_mode:   merge:     - Exclude<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432 \u043d\u0430 GitHub.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 GitHub workflow. \u041e\u0434\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0434\u0440\u0443\u0433\u0430\u044f \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 (\u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u0430 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438). \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430 Github Actions \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0447\u0438 \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043d\u0430\u0434\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <a href=\"https:\/\/docs.github.com\/en\/actions\/learn-github-actions\/contexts#needs-context\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 workflow<\/a>.<\/p>\n<pre><code class=\"yaml\">jobs:   tests:     ...   push_to_registry:     needs: tests     \u2026<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3df\/3b6\/aa5\/3df3b6aa54b4250ee37198e656de42ba.png\" alt=\"\u0423\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 workflow\" title=\"\u0423\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 workflow\" width=\"1155\" height=\"467\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3df\/3b6\/aa5\/3df3b6aa54b4250ee37198e656de42ba.png\"\/><\/p>\n<div><figcaption>\u0423\u0441\u043f\u0435\u0448\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432 workflow<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u043e\u0431\u0440\u0430\u0437 docker \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0432\u0430\u043b\u044f\u0442\u0441\u044f \u0442\u0435\u0441\u0442\u044b.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u0418\u0442\u043e\u0433\u0438 \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0443<\/h2>\n<p>\u0420\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0441\u0442\u0435\u043a\u0435 <strong>Ruby on Rails 7 + Hotwire + PostgreSql + Docker<\/strong>. \u0421 <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c<\/a> \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 <strong>GitHub<\/strong>.<\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u0438\u043c\u0435\u0435\u043c:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/commits\/master?after=ccff06cbcb9212165d59d26a59c3d5014c152b05+34&amp;branch=master&amp;qualified_name=refs%2Fheads%2Fmaster\" rel=\"noopener noreferrer nofollow\">\u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/a> \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 GitHub;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0434, \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u043c <a href=\"https:\/\/rubocop.org\" rel=\"noopener noreferrer nofollow\">rubocop<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 <a href=\"https:\/\/rspec.info\/documentation\/\" rel=\"noopener noreferrer nofollow\">Rspec <\/a>\u0442\u0435\u0441\u0442\u0430\u0445;<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/simplecov-ruby\/simplecov\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 <\/a>\u043a\u043e\u0434\u0430 \u0442\u0435\u0441\u0442\u0430\u043c\u0438 (\u043d\u0430 99%);<\/p>\n<\/li>\n<li>\n<p>\u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/blob\/master\/README.md\" rel=\"noopener noreferrer nofollow\">README.md<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 <a href=\"https:\/\/github.com\/features\/packages\" rel=\"noopener noreferrer nofollow\">ghcr.io<\/a> <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/pkgs\/container\/blah_blah_chat\" rel=\"noopener noreferrer nofollow\">docker-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/a> \u0441 web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e Application Programming Interface \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 <a href=\"https:\/\/jsight.io\" rel=\"noopener noreferrer nofollow\">JSight<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043d\u0430\u0434 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0438 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0448\u0430\u0433\u0438 \u0432 \u0446\u0435\u043b\u044f\u0445 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 ORM ActiveRecord. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0438\u0437\u0430\u0439\u043d \u043e\u043a\u043e\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\" rel=\"noopener noreferrer nofollow\">Bootstrap<\/a>. \u0418 \u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Continuous Integration.<\/p>\n<p><strong>P.S.<\/strong> \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0442\u043d\u0451\u0440\u0430, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u2013 \u0437\u0430\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438 \u043e\u0431\u0440\u0435\u0442\u0435\u043d\u0438\u0435 \u043d\u0430\u0432\u044b\u043a\u0430 \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432. \u0415\u0441\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u0434\u0430, \u0447\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0448\u0451\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043f\u043e\u0437\u043d\u0430\u043d\u0438\u044f \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u0438 \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441 \u0446\u0435\u043b\u044c\u044e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0431\u043e\u0440\u044c\u0431\u044b \u0441 \u0441\u043e\u0431\u043b\u0430\u0437\u043d\u0430\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0441\u0430\u043c\u044b\u0445 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0440\u0430\u0434\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0443\u0433\u043b\u0443\u0431\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u043d\u0438\u0439 \u043f\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/781940\/\"> https:\/\/habr.com\/ru\/articles\/781940\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0441\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0437\u0430\u043a\u0430\u0437. \u0414\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u0437\u044f\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Ruby on Rails 7 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Hotwire \u0438 \u0421\u0423\u0411\u0414 PostgreSQL. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u043d\u043e\u0439 \u043a \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 web \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Agile. \u0414\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u0432 \u0441\u0442\u0443\u043f\u043e\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 Ruby \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0412 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u0445\u043e\u0434\u0438\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u043b\u0443\u0447\u0448\u0438\u0435 \u043e\u0431\u0440\u0430\u0437\u0446\u044b \u043c\u0435\u0442\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b RoR 7.1 + Hotwire.<\/p>\n<p>\u041b\u044e\u0431\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0440\u044f\u0434\u043e\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438, \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430\u043c\u0438, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430\u043c\u0438 \u0438 DevOps. \u0412 \u0437\u0430\u043a\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u0445 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0451 \u0434\u0435\u043b\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a. \u0412\u043e\u0442 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0432\u0441\u0451 \u0437\u043d\u0430\u0442\u044c, \u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f fullstack \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e Rest API, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0434\u043e\u043a\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f GitHub Actions \u043f\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u0438 Continuous Integration.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043f\u044b\u0442\u043a\u0443 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0446\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0443 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0434\u0435\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u042d\u0442\u043e \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0438\u043c\u0431\u0438\u043e\u0437 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u043f\u0440\u043e\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0439 \u0432 \u0441\u043e\u0432\u043e\u043a\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0434\u0443\u0446\u0438\u0440\u0443\u044e\u0449\u0438\u043c\u0438 \u043d\u0435\u0447\u0442\u043e \u043d\u043e\u0432\u043e\u0435, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0435 \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u0445 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u043b\u0435\u0433\u0447\u0435 \u0431\u044b\u043b\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0445\u043e\u0434\u043e\u043c \u0441\u044e\u0436\u0435\u0442\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043c\u043d\u043e\u0433\u0438\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0441\u043a\u0440\u044b\u0442\u044b \u0437\u0430 \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u0439 \u0440\u0435\u0448\u0430\u0435\u043c\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435. \u0417\u0430 \u0445\u043e\u0434\u043e\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u0430\u043c \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e <a href=\"https:\/\/github.com\/rubygitflow\/blah_blah_chat\/commits\/master?after=ccff06cbcb9212165d59d26a59c3d5014c152b05+34&amp;branch=master&amp;qualified_name=refs%2Fheads%2Fmaster\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a>.<\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435<\/h2>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0442 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 <strong>\u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 (\u0422\u0417)<\/strong> \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u0432\u0443\u0445\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0447\u0430\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u043e\u043f\u0438\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u043e\u0432 \u043a\u0430\u043a \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0442\u0430\u043a \u0438 \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u043f\u043e REST API. \u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c \u043a\u0440\u0443\u0433\u043e\u043c \u0434\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0445 \u043b\u0438\u0446 \u043f\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 ip-\u0430\u0434\u0440\u0435\u0441\u0443. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2013 \u0441\u0431\u043e\u0440 \u0441\u044b\u0440\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e \u0434\u0430\u0442\u0435-\u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0422\u043e\u043f\u0438\u043a\u0438 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0443\u043f\u044f\u0442 \u043f\u043e \u043c\u0435\u0440\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438<em> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/em><\/figcaption><\/div>\n<\/figure>\n<h2>I. \u0412 \u0434\u043e\u0431\u0440\u044b\u0439 \u043f\u0443\u0442\u044c. \u041f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>\u0423 Ruby \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438. \u041f\u0435\u0440\u0432\u044b\u0439, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u043e\u0433\u043e fullstack \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a  Ruby on Rails. \u0412\u0442\u043e\u0440\u043e\u0439, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e frontend \u0438 backend \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e <a href=\"https:\/\/habr.com\/ru\/companies\/productstar\/articles\/508892\" rel=\"noopener noreferrer nofollow\">Minimum Viable Product<\/a> \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 <a href=\"https:\/\/edgeguides.rubyonrails.org\/getting_started.html#crudit-where-crudit-is-due\" rel=\"noopener noreferrer nofollow\">Ruby on Rails \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a> \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e Rspec-\u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <a href=\"https:\/\/medium.com\/@oliver.seq\/creating-a-rest-api-with-rails-2a07f548e5dc\" rel=\"noopener noreferrer nofollow\">REST API<\/a> \u0438 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e Rspec-\u0442\u0435\u0441\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0430\u043a \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u044b \u0441\u0442\u0430\u0440\u0430\u0435\u043c\u0441\u044f \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f <a href=\"https:\/\/www.betterspecs.org\" rel=\"noopener noreferrer nofollow\">\u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a<\/a> \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e Rspec<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u044b\u043c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u044f \u043a\u043e\u0434\u0430 \u0442\u0435\u0441\u0442\u0430\u043c\u0438. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Ruby on Rails \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u0432 \u043a\u043e\u0434\u0435 \u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u0442\u0440\u043e\u043a \u0432 \u0442\u0435\u0441\u0442\u0430\u0445.<\/p>\n<pre><code class=\"bash\">bin\/rails stats ... Code LOC: 671     Test LOC: 647     Code to Test Ratio: 1:1.0<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043a\u043e\u0434\u0430 \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0442\u043e\u0438\u0442 \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043a \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c. \u041c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u0435\u043c\u043e\u043c <a href=\"https:\/\/github.com\/simplecov-ruby\/simplecov\" rel=\"noopener noreferrer nofollow\">simplecov<\/a>.<\/p>\n<ol start=\"3\">\n<li>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0438 \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0433\u0435\u043c\u043e\u043c <a href=\"https:\/\/matchers.shoulda.io\/docs\/v5.3.0\/\" rel=\"noopener noreferrer nofollow\">shoulda-matchers<\/a>. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0439 \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u0430\u0436\u043d\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 <strong>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0451 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0435\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f. \u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e?<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u0437\u0430 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0438 \u043e\u043d \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b <strong>\u0430\u043a\u0442\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c Agile \u043c\u0435\u0442\u043e\u0434\u043e\u043b\u043e\u0433\u0438\u044e<\/strong> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0432\u043e\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u043e\u043b\u0438 \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u0410\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430<\/strong> \u043c\u044b \u043d\u0430\u0447\u043d\u0451\u043c \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u0435\u0441\u044c \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0437\u0430\u0434\u0430\u0447, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u0441\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0435\u0451 \u0441\u0434\u0430\u0447\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c <strong>\u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u0431\u0443\u0434\u0435\u0442<\/strong> \u0447\u0451\u0442\u043a\u043e <strong>\u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c<\/strong>, <strong>\u0437\u0430 \u0447\u0442\u043e<\/strong> \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c <strong>\u043f\u043b\u0430\u0442\u0438\u0442\u044c<\/strong> \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0434\u0435\u043d\u044c\u0433\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b \u043d\u0435 \u0434\u0430\u0451\u0442\u0435 \u0441\u0435\u0431\u0435 \u0437\u0430\u0431\u044b\u0442\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 legacy, \u0438, \u043a\u0430\u043a \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0444\u043e\u0440\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0437\u044f\u0442\u044c\u0441\u044f \u0437\u0430 \u043b\u044e\u0431\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 legacy. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f Junior \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u0437 \u0441\u0432\u043e\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043a \u043c\u044b <strong>\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c<\/strong> <strong>\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0441\u043d\u043e\u0432\u0443 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d\u043d\u043e-\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0441\u0432\u044f\u0437\u0435\u0439, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u044e\u0449\u0438\u0445 &#171;\u043c\u0430\u0433\u0438\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0441\u043e\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439&#187;.<\/strong><\/p>\n<\/li>\n<\/ul>\n<h2>II. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u041f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<ol start=\"4\">\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043b\u044e\u0431\u0438\u043c\u044b\u0439 css \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\" rel=\"noopener noreferrer nofollow\">Bootstrap<\/a>.<\/p>\n<\/li>\n<\/ol>\n<p>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 Rails, \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e CSS:<\/p>\n<pre><code class=\"bash\">rails -T ... bin\/rails css:build                          # Build your CSS bundle bin\/rails css:clobber                        # Remove CSS builds bin\/rails css:install                        # Install JavaScript de... bin\/rails css:install:bootstrap              # Install Bootstrap bin\/rails css:install:bulma                  # Install Bulma bin\/rails css:install:postcss                # Install PostCSS bin\/rails css:install:sass                   # Install Sass bin\/rails css:install:shared                 # Install shared elemen... bin\/rails css:install:tailwind               # Install Tailwind ...<\/code><\/pre>\n<p>\u0411\u0435\u0440\u0451\u043c \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443 \u043d\u0430\u0431\u0438\u0440\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a <a href=\"https:\/\/www.simplethread.com\/how-to-create-a-new-rails-7-app-with-tailwind\/\" rel=\"noopener noreferrer nofollow\">Tailwind<\/a>, \u043d\u043e \u043d\u0435 \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 <code>bin\/rails css:install:bootstrap<\/code><\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0437 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\" rel=\"noopener noreferrer nofollow\">Bootstrap<\/a> \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c:  <\/p>\n<ul>\n<li>\n<p>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u043c\u0438<a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/containers\/#how-they-work\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/getbootstrap.com\/docs\/5.3\/layout\/containers\/#how-they-work<\/u><\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0431\u043b\u043e\u043a\u043e\u0432 \u0434\u0440\u0443\u0433 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/flex\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/flex\/<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0445 \u0441\u043b\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043b\u043e\u043a\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/text\/#word-break\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/text\/#word-break;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435\u043c \u00abToast\u00bb <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/toasts\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/components\/toasts\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 <a href=\"https:\/\/icons.getbootstrap.com\" rel=\"noopener noreferrer nofollow\">https:\/\/icons.getbootstrap.com\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446 \u0431\u043b\u043e\u043a\u043e\u0432 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/borders\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/utilities\/borders\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u00ab\u043b\u0438\u043f\u043a\u0438\u043c\u0438\u00bb \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u043a \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u043e\u043a\u043d\u0430 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/helpers\/position\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/helpers\/position\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/customize\/color\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/customize\/color\/;<\/a><\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u043c \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 <a href=\"https:\/\/getbootstrap.com\/docs\/5.3\/layout\/columns\" rel=\"noopener noreferrer nofollow\">https:\/\/getbootstrap.com\/docs\/5.3\/layout\/columns\/;<\/a><\/p>\n<\/li>\n<\/ul>\n<ol start=\"5\">\n<li>\n<p>\u041f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 Single-Page Application (SPA) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Turbo-Frames \u0438 Stimulus.<\/p>\n<\/li>\n<\/ol>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Hotwire Turbo \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/hotwired\/turbo-rails#installation\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/github.com\/hotwired\/turbo-rails#installation<\/u><\/a> . \u041d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0435\u0449\u0451 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a Javascript. \u041d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 <a href=\"https:\/\/medium.com\/@technoblogueur\/using-esbuild-with-rails-7-in-a-simple-way-908e2ef328fe\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f <\/a>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ESBuild \u041d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0435\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f <a href=\"https:\/\/www.youtube.com\/watch?v=qOptalp8zUY\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/a>. \u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u043d\u0441\u0442\u0430\u043b\u043b\u044f\u0446\u0438\u0438 \u0443 \u0432\u0430\u0441 \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n<pre><code class=\"bash\">\u2718 [ERROR] Could not resolve \"@hotwired\/turbo-rails\"<\/code><\/pre>\n<p>\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432 \u0444\u0430\u0439\u043b <code>package.json<\/code> \u0434\u0432\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"yaml\">\"dependencies\": {   \"@hotwired\/stimulus\": \"^3.2.2\",   \"@hotwired\/turbo-rails\": \"^7.3.0\",   ...<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0430\u044f \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0432 Ruby on Rails \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 Hotwire \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0448\u044c \u043f\u043e \u0440\u043e\u0434\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 <a href=\"https:\/\/hotwired.dev\" rel=\"noopener noreferrer nofollow\"><u>https:\/\/hotwired.dev<\/u><\/a> \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439, \u0442\u043e \u043d\u0430\u0448\u0435 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0435\u0448\u0451\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0442\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Hotwire \u0432 Rails  \u0435\u0441\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 <a href=\"https:\/\/www.youtube.com\/playlist?list=PLWlFXymvoaJ-uWJFOmWLJDbsZ8WYs6C_e\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e\u043a\u0443\u0440\u0441 <\/a>\u043e\u0442 \u0418\u043b\u044c\u0438 \u041a\u0440\u044e\u043a\u043e\u0432\u0441\u043a\u043e\u0433\u043e. \u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0439\u0434\u0451\u043c\u0441\u044f \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c \u0432\u0437\u044f\u0442\u043e\u0439 \u043d\u0430\u043c\u0438 \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Turbo-Frames \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0438\u0437 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0443 Akshay Khot \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u00ab<a href=\"https:\/\/dev.to\/software_writer\/building-a-to-do-list-using-hotwire-and-stimulus-120i\" rel=\"noopener noreferrer nofollow\">Building a To-Do List Using Hotwire and Stimulus<\/a>\u00bb \u0441 <a href=\"https:\/\/www.youtube.com\/watch?v=ayKxD1LDoe4\" rel=\"noopener noreferrer nofollow\">\u0432\u0438\u0434\u0435\u043e\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 <\/a>\u0438 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 <a href=\"https:\/\/github.com\/akshayKhot\/taskify\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u0434\u0430\u043c\u0438<\/a>.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>Flash \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u043e\u0431 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u044f\u0442\u044c \u043c\u0435\u0440\u044b, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u0442\u0438\u0440\u0430\u0436\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0440\u0435\u0436\u043d\u0435\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438\u0437 Turbo-Streams \u0432 <code>app\/helpers\/application_helper.rb<\/code><\/p>\n<pre><code class=\"ruby\">turbo_stream.replace 'flash', partial: 'shared\/flash' <\/code><\/pre>\n<p>\u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0435\u0433\u043e \u043f\u043e \u0442\u0430\u0439\u043c\u0435\u0440\u0443 \u0438\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 Stimulus. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u043b\u044d\u0448-\u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0438\u0437 <code>app\/views\/shared\/_flash.html.erb<\/code><\/p>\n<pre><code class=\"xml\">&lt;div  id=\"flash\">   &lt;div data-controller=\"autohide\">     &lt;% flash.each do |k, v| %>       &lt;%= tag.div v, class: \"alert alert-#{k}\", role: 'alert' %>     &lt;% end %>   &lt;\/div> &lt;\/div><\/code><\/pre>\n<p>\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432 <code>app\/javascript\/controllers\/autohide_controller.js<\/code><\/p>\n<pre><code class=\"javascript\">import { Controller } from \"@hotwired\/stimulus\";  export default class extends Controller {   connect() {     setTimeout(() => { this.dismiss() }, 10000)   }    dismiss() {     this.element.remove()   } }<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0443 \u042f\u0440\u043e\u0441\u043b\u0430\u0432\u0430 \u0428\u043c\u0430\u0440\u043e\u0432\u0430 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u00ab<a href=\"https:\/\/blog.corsego.com\/turbo-hotwire-flash-messages\" rel=\"noopener noreferrer nofollow\">Turbo Streams &#8212; Create and stream records. Flash messages. Reusable Streams<\/a>\u00bb.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435. \u0422\u043e \u0435\u0441\u0442\u044c<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-363488","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/363488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=363488"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/363488\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=363488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=363488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=363488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}