{"id":273280,"date":"2016-01-31T21:33:02","date_gmt":"2016-01-31T18:33:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=273280"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=273280","title":{"rendered":"\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 To-Do List \u043d\u0430 Polymer \u0438 Cordova"},"content":{"rendered":"<p>       \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u043d\u0438 Android \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0445 UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a HTML5, CSS \u0438 JavaScript.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ac8\/091\/57f\/ac809157f62242ac8889e707c2b9e74f.jpg\"\/><\/p>\n<p>  \u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u043e\u043d\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0438\u0441\u044c \u0438 \u043f\u043b\u043e\u0445\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0435 \u0434\u043d\u0438 \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0448\u043b\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0431\u0435\u0437 \u0443\u0441\u0438\u043b\u0438\u0439 \u0438 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u043c\u044b\u0435 \u043e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0441\u0440\u043e\u043a, \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0443\u0436 \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435, \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 To-Do List (\u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0435\u043b) \u0434\u043b\u044f Android. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 Material Design \u043e\u0442 Google, \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0432\u0438\u0434\u0443 \u043f\u043e\u0434 Android Lollipop \u0438 Marshmallow. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.polymer-project.org\/1.0\/\">Polymer<\/a>, <a href=\"https:\/\/elements.polymer-project.org\/browse?package=paper-elements\">Polymer paper elements<\/a>, \u0438 <a href=\"https:\/\/cordova.apache.org\/\">Apache Cordova<\/a>.<\/p>\n<h2>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430<\/h2>\n<p>  \u0427\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b:  <\/p>\n<ul>\n<li>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"http:\/\/developer.android.com\/sdk\/index.html\">Android SDK<\/a><\/li>\n<li>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u0435\u0440\u0441\u0438\u044f <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a><\/li>\n<li>Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 \u043f\u043e\u0434 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c Android 5.0 \u0438\u043b\u0438 \u0432\u044b\u0448\u0435<\/li>\n<li>\u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f HTML5, CSS, \u0438 JavaScript<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043e\u043a \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Cordova, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e <a href=\"https:\/\/habrahabr.ru\/post\/274609\/\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Cordova: \u041e\u0441\u043d\u043e\u0432\u044b<\/a>.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Polymer?<\/h2>\n<p>  Polymer \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u043c, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443, \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u043c. \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 HTML-\u0442\u0435\u0433\u0430\u043c\u0438 \u0432 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u0435\u0433\u043e <strong>my-element<\/strong>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;my-element&gt;&lt;\/my-element&gt; <\/code><\/pre>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, Polymer \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 JavaScript \u043f\u0440\u043e\u0449\u0435 \u0438 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432 \u043d\u0435\u043c \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Polymer Paper Elements?<\/h2>\n<p>  Polymer Paper Elements, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u0430 Material Design. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043e\u0431\u044b\u0447\u043d\u044b\u043c HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432 \u0441\u0442\u0438\u043b\u0435 Material Design, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>paper-button<\/strong>:<\/p>\n<pre><code class=\"html\">&lt;paper-button&gt; Click Me! &lt;\/paper-button&gt; <\/code><\/pre>\n<p>  \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0438\u043b\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <strong>paper-card<\/strong> \u0438 <strong>paper-fab<\/strong><\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Apache Cordova?<\/h2>\n<p>  \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Polymer \u0438 Polymer elements \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f HTML, CSS \u0438 JavaScript \u0444\u0430\u0439\u043b\u043e\u0432. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u0412 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0431-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 (web-view).<br \/>  Apache Cordova \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0435 \u0432\u0435\u0431-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439. \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Apache Cordova, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f To-Do List (\u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0435\u043b) \u043f\u043e\u0434 Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<h2>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u043f\u0440\u043e\u0449\u0435, \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a\u0436\u0435. \u041d\u0430\u0447\u043d\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u0435\u043b \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<br \/>  \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0451 <strong>todoWebApp<\/strong><\/p>\n<pre><code class=\"bash\">mkdir ~\/todoWebApp <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"http:\/\/bower.io\/\">Bower<\/a>. \u0414\u043b\u044f \u0435\u0433\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f <strong>npm<\/strong> \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:<\/p>\n<pre><code class=\"bash\">sudo npm install -g bower <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Bower, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <strong>bower<\/strong> \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Polymer paper elements:<\/p>\n<pre><code class=\"bash\">cd ~\/todoWebApp bower install PolymerElements\/paper-elements <\/code><\/pre>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h2>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u043c\u0430\u043a\u0435\u0442\u0430 \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f To-Do List. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 <strong>tasks-list.html<\/strong>.<\/p>\n<h3>\u0428\u0430\u0433 1: \u0418\u043c\u043f\u043e\u0440\u0442 Paper Elements<\/h3>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 Paper Elements, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b:  <\/p>\n<ul>\n<li><strong>paper-toolbar<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f toolbar<\/li>\n<li><strong>paper-button<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a<\/li>\n<li><strong>paper-fab<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438<\/li>\n<li><strong>paper-listbox<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447<\/li>\n<li><strong>paper-item<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0432\u043d\u0435 \u0441\u043f\u0438\u0441\u043a\u0430<\/li>\n<li><strong>paper-checkbox<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0447\u0435\u043a\u0431\u043e\u0441\u043a\u0441\u043e\u0432, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u043c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0447\u0430\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u043d\u0438\u044f<\/li>\n<li><strong>paper-icon-button<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439<\/li>\n<li><strong>paper-input<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443<\/li>\n<li><strong>paper-dialog<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430<\/li>\n<li><strong>iron-icons<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043a\u043e\u043d\u043e\u043a<\/li>\n<\/ul>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u0443\u044e Polymer, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Polymer. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 HTML \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"html\">&lt;link rel='import' href='bower_components\/polymer\/polymer.html'\/&gt;   &lt;link rel='import' href='bower_components\/paper-toolbar\/paper-toolbar.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-button\/paper-button.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-fab\/paper-fab.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-listbox\/paper-listbox.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-item\/paper-item.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-checkbox\/paper-checkbox.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-icon-button\/paper-icon-button.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-input\/paper-input.html'\/&gt; &lt;link rel='import' href='bower_components\/paper-dialog\/paper-dialog.html'\/&gt; &lt;link rel='import' href='bower_components\/iron-icons\/iron-icons.html'\/&gt; <\/code><\/pre>\n<h3>\u0428\u0430\u0433 2: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 DOM<\/h3>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0443\u043c\u0430\u0442\u044c \u043e Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u043a\u0430\u043a HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445. \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 DOM \u0434\u0435\u0440\u0435\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043a\u0438 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 UI, \u0442\u0435\u0433\u0438 <strong>style<\/strong> \u0438 <strong>script<\/strong>.<br \/>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f DOM, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0435\u0433 <strong>dom-module<\/strong>, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <strong>id<\/strong> \u0441 \u0438\u043c\u0435\u043d\u0435\u043c <strong>tasks-list<\/strong>. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0438\u043c\u044f \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u0435\u0444\u0438\u0441.<\/p>\n<pre><code class=\"html\">&lt;dom-module id='tasks-list'&gt;   &lt;\/dom-module&gt; <\/code><\/pre>\n<h3>\u0428\u0430\u0433 3: \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430<\/h3>\n<p>  \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u0430\u043a\u0435\u0442\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u0438 \u0441 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0433\u0438. \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 <strong>template<\/strong>.<br \/>  \u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>dom-module<\/strong>:<\/p>\n<pre><code class=\"html\">&lt;template&gt;         &lt;!-- Create a toolbar\/actionbar --&gt;         &lt;paper-toolbar&gt;             &lt;div class=&quot;title&quot;&gt; My Tasks &lt;\/div&gt;         &lt;\/paper-toolbar&gt;           &lt;div&gt;             &lt;!-- Create a list of tasks --&gt;             &lt;paper-listbox&gt;                 &lt;template is='dom-repeat' items='{{ tasks }}'&gt;                     &lt;!-- Create an individual task --&gt;                     &lt;paper-item&gt;                         &lt;paper-checkbox checked='{{ item.isComplete }}'                             class='flex-11 taskBox' on-change='toggleTask'&gt;                                 {{ item.taskName }}                         &lt;\/paper-checkbox&gt;                                                     &lt;paper-icon-button                             icon='delete'                             class='flex-1'                             style='color: gray'                             on-click='deleteTask'&gt;                         &lt;\/paper-icon-button&gt;                                         &lt;\/paper-item&gt;                 &lt;\/template&gt;             &lt;\/paper-listbox&gt;               &lt;!-- Create a floating action button --&gt;             &lt;paper-fab icon='add'                        style='position:absolute; bottom: 30px; right:24px'                        on-click='showAddTaskDialog'&gt;             &lt;\/paper-fab&gt;               &lt;!-- Create a modal dialog --&gt;             &lt;paper-dialog id='addTaskDialog' modal&gt;                 &lt;paper-input label='What do you have to do?' value='{{ latestTaskName }}'&gt;                 &lt;\/paper-input&gt;                 &lt;div class='buttons'&gt;                     &lt;paper-button dialog-dismiss&gt;Cancel&lt;\/paper-button&gt;                     &lt;paper-button on-click='addTask'&gt;Add&lt;\/paper-button&gt;                 &lt;\/div&gt;             &lt;\/paper-dialog&gt;         &lt;\/div&gt; &lt;\/template&gt; <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0442\u0435\u0433\u0438 Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 HTML-\u0442\u0435\u0433\u0430\u043c\u0438.<br \/>  \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u0442\u0435\u0433\u0435 Polymer \u0442\u0435\u0433\u0430, \u0441\u0445\u043e\u0436\u0435 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c HTML \u0442\u0435\u0433\u0430. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, <strong>on-click<\/strong> \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 <strong>on-change<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430.<br \/>  \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 HTML-\u0442\u0435\u0433\u043e\u0432, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <strong>dom-repeat<\/strong> \u0442\u0435\u0433\u0430 <strong>template<\/strong>. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0435\u0440\u0435\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n<h3>\u0428\u0430\u0433 4. \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>Polymer<\/strong>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u0438\u043d JavaScript \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>is<\/strong> \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">Polymer({     is: 'tasks-list',        \/\/ more code goes here }); <\/code><\/pre>\n<h3>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h3>\n<p>  \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong>tasks<\/strong> \u0438 <strong>latestTaskName<\/strong>, \u043d\u043e \u043c\u044b \u0435\u0449\u0435 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <strong>ready<\/strong>. \u0421\u0435\u0439\u0447\u0430\u0441, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 <strong>tasks<\/strong> \u0438 \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 <strong>latestTaskName<\/strong>.<br \/>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043f\u043e\u0441\u043b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <strong>is<\/strong>:<\/p>\n<pre><code class=\"javascript\">ready: function() {     this.tasks = [];     this.latestTaskName = &quot;&quot;; }, <\/code><\/pre>\n<h3>\u0428\u0430\u0433 6: \u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435,= \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/h3>\n<p>  \u0414\u043b\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u0439, \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u0435\u043b, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 <strong>localStorage<\/strong>.<br \/>  \u041c\u0430\u043a\u0435\u0442 \u0443\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <strong>paper-dialog<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0438. \u0414\u043b\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043e\u043a\u043d\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a <strong>on-click<\/strong> \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <strong>open<\/strong>:<\/p>\n<pre><code class=\"javascript\">showAddTaskDialog: function() {     this.$.addTaskDialog.open(); }, <\/code><\/pre>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 Polymer, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0432\u043e\u0434\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u043e\u043b\u0435 <strong>paper-input<\/strong> \u0438 \u043e\u043d\u0438 \u0441\u0440\u0430\u0437\u0443 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 <strong>latestTaskName<\/strong>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abAdd\u00bb \u0432 \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <strong>latestTaskName<\/strong> \u0432 <strong>localStorage<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 <strong>setItem<\/strong>.<br \/>  <strong>localStorage<\/strong> \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0430\u0440\u044b \u043a\u043b\u044e\u0447-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430, \u0430 \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u0443\u0441 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043a\u0430\u043a <strong>localStorage<\/strong> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c <strong>yes<\/strong> \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0438 <strong>no<\/strong> \u2014 \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430.<br \/>  \u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0434\u0438\u0430\u043b\u043e\u0433\u043e\u0432\u043e\u0435 \u043e\u043a\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 <strong>close<\/strong>:  <\/p>\n<pre><code class=\"javascript\">addTask: function() {     \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u043d\u0435\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438     localStorage.setItem(this.latestTaskName, 'no');       \/\/ \u0421\u0431\u0440\u043e\u0441 latestTaskName     this.latestTaskName=&quot;&quot;;       \/\/ \u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u0434\u0438\u0430\u043b\u043e\u0433\u0430     this.$.addTaskDialog.close();       \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447     this.updateTasks(); }, <\/code><\/pre>\n<p>  \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0435\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <strong>localStorage<\/strong> \u043f\u0443\u0442\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <strong>setItem<\/strong>. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>dom-repeat<\/strong> \u0432 \u0442\u0435\u0433\u0435 <strong>template<\/strong> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <strong>paper-listbox<\/strong>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 <strong>model<\/strong> \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f <strong>on-change<\/strong>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u0432 \u0441\u0442\u0440\u043e\u043a\u0438 \u00abyes\u00bb \u0438\u043b\u0438 \u00abno\u00bb, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0432 <strong>localStorage<\/strong>.<\/p>\n<pre><code class=\"javascript\">toggleTask: function(e) {     \/\/ \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u043d\u0438 \u0437\u0430\u0434\u0430\u0447\u0438     var taskName = e.model.item.taskName;       \/\/ \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f     if(e.model.item.isComplete)         localStorage.setItem(taskName, 'yes');     else         localStorage.setItem(taskName, 'no'); }, <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443, \u043e\u043d \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <strong>paper-icon-button<\/strong> \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u0427\u0442\u043e\u0431\u044b \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430\u0432\u0441\u0435\u0433\u0434\u0430, \u0432\u044b\u0437\u043e\u0432\u0438\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 <strong>removeItem<\/strong> \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <strong>localStorage<\/strong> \u0441\u043e\u0431\u044b\u0442\u0438\u044f <strong>on-click<\/strong> \u0432 <strong>paper-icon-button<\/strong>.<\/p>\n<pre><code class=\"javascript\">deleteTask: function(e) {     var taskName = e.model.item.taskName;     localStorage.removeItem(taskName);       \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 \u0437\u0430\u0434\u0430\u0447     this.updateTasks(); }, <\/code><\/pre>\n<h3>\u0428\u0430\u0433 7. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447<\/h3>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432\u044b <strong>updateTasks<\/strong> \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 <strong>addTask<\/strong> \u0438 <strong>deleteTask<\/strong>. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <strong>updateTasks<\/strong>, \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 <strong>tasks<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <strong>ready<\/strong>, \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <strong>localStorage<\/strong>. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0442\u0430\u043a \u043a\u0430\u043a <strong>dom-repeat<\/strong> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c.<br \/>  \u0412 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 <strong>tasks<\/strong>, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c JSON \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447. \u041a\u0430\u0436\u0434\u044b\u0439 JSON \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043c\u0435\u0435\u0442 \u0434\u0432\u0430 \u043f\u043e\u043b\u044f,<strong>taskName<\/strong> \u0438 <strong>isComplete<\/strong>. <strong>taskName<\/strong> \u2014 \u044d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043c\u044f \u0437\u0430\u0434\u0430\u0447\u0438, <strong>isComplete<\/strong> \u2014 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438.<br \/>  \u0427\u0442\u043e\u0431\u044b Polymer \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 <strong>tasks<\/strong>, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <strong>splice<\/strong>, \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434 <strong>push<\/strong>, \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432.<br \/>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <strong>updateTasks<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 <strong>localStorage<\/strong> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 <strong>tasks<\/strong>.<\/p>\n<pre><code class=\"javascript\">updateTasks: function() {     \/\/ \u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430     this.splice('tasks', 0);       \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 localStorage     for(var taskName in localStorage) {         var task = {             taskName: taskName,             isComplete: localStorage.getItem(taskName) == 'yes'         };         this.push('tasks', task);     } }, <\/code><\/pre>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043c\u0430\u0441\u0441\u0438\u0432 <strong>tasks<\/strong> \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 <strong>updateTasks<\/strong> \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 <strong>ready<\/strong>.<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0433\u043e\u0442\u043e\u0432 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e Polymer \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u043d\u0430\u0437\u043e\u0432\u0438\u0442\u0435 \u0435\u0433\u043e <strong>index.html<\/strong>.<br \/>  \u041f\u0435\u0440\u0435\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 <strong>link<\/strong> \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 <strong>tasks-list.html<\/strong>. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 Padding \u0438 Margin, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0438\u0431\u043a\u0438\u0439 \u043c\u0430\u043a\u0435\u0442, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u044b <strong>fullbleed<\/strong>, <strong>layout<\/strong> \u0438 <strong>vertical<\/strong> \u043a \u0442\u0435\u0433\u0443 <strong>body<\/strong>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u0438 CSS \u043a\u043b\u0430\u0441\u0441\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <strong>iron-flex-layout<\/strong>, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 <strong>link<\/strong> \u0434\u043b\u044f \u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430.<br \/>  \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 <strong>tasks-list<\/strong>:<\/p>\n<pre><code class=\"html\">&lt;html&gt;     &lt;head&gt;         &lt;link rel=&quot;import&quot; href=&quot;bower_components\/iron-flex-layout\/iron-flex-layout.html&quot;\/&gt;          &lt;link rel=&quot;import&quot; href=&quot;.\/tasks-list.html&quot;\/&gt;     &lt;\/head&gt;     &lt;body class=&quot;fullbleed layout vertical&quot;&gt;                   &lt;!-- Use the custom Polymer element --&gt;         &lt;tasks-list&gt;&lt;\/tasks-list&gt;       &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<h2>\u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/h2>\n<p>  \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 To-Do List \u2014 \u0433\u043e\u0442\u043e\u0432\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Polymer \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c HTTP-\u0441\u0435\u0440\u0432\u0435\u0440, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Phyton <strong>SimpleHTTPServer<\/strong> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"bash\">python -m SimpleHTTPServer <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 <a href=\"http:\/\/localhost:8000\/\">http:\/\/localhost:8000\/<\/a>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/707\/dc3\/935\/707dc39351df72edbaedcb070c1c3288.png\"\/><\/p>\n<p>  \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Cordova<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f, \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u0432 Android \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Cordova.<br \/>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Cordova CLI (\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <strong>npm<\/strong>:<\/p>\n<pre><code class=\"bash\">sudo npm install -g cordova <\/code><\/pre>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Cordova, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 <strong>cordova create<\/strong>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043c\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u0440\u043e\u0435\u043a\u0442 Cordova, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Reverse_domain_name_notation\">\u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0435 \u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0435 \u0438\u043c\u044f<\/a> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0438 \u0438\u043c\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 Cordova \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <strong>To-do<\/strong> \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 <strong>todo<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432 <strong>todoWebApp<\/strong>:<\/p>\n<pre><code class=\"bash\">cordova create todo com.tutsplus.code.hathi.todoapp &quot;To-do&quot; --copy-from=\/home\/me\/todoWebApp <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 Android \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <strong>todo<\/strong> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <strong>cordova platform<\/strong>.<\/p>\n<pre><code class=\"bash\">cd todo cordova platform add android <\/code><\/pre>\n<h2>\u0417\u0430\u043f\u0443\u0441\u043a \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  \u0411\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043a\u043e\u0434\u0430, \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 Cordova \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <strong>cordova build<\/strong>. \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <strong>ANDROID_HOME<\/strong> \u0437\u0430\u0434\u0430\u043d \u043f\u0443\u0442\u044c \u043a Android SDK.<\/p>\n<pre><code class=\"bash\">export ANDROID_HOME=\/home\/me\/Android\/Sdk\/ cordova build android <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u043d\u0435 \u0443\u0434\u0430\u043b\u0430\u0441\u044c, \u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u2014 \u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b web-animations.min.js.gz \u0432 APK, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0438 \u0441\u043d\u043e\u0432\u0430 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<pre><code class=\"bash\">rm -f .\/www\/bower_components\/web-animations-js\/web-animations.min.js.gz cordova build android <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <strong>cordova run<\/strong>.<\/p>\n<pre><code class=\"bash\">cordova run android <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f30\/18c\/7d9\/f3018c7d9ec7e0549c5e33d9fbd5431f.png\"\/><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Polymer \u0438 Polymer paper elements, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f To-Do List. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u0443\u0437\u043d\u0430\u043b\u0438, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 Cordova, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0435\u0437 \u0442\u0440\u0443\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u043e\u0434 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c iOS \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u0434\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <strong>cordova platform<\/strong> \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 ios \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443.       <\/p>\n<div class=\"clear\"><\/div>\n<p> \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:\/\/habrahabr.ru\/post\/276267\/\"> https:\/\/habrahabr.ru\/post\/276267\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u043d\u0438 Android \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0445 UI \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e Android \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a HTML5, CSS \u0438 JavaScript.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ac8\/091\/57f\/ac809157f62242ac8889e707c2b9e74f.jpg\"\/><\/p>\n<p>  \u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u043e\u043d\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0438\u0441\u044c \u0438 \u043f\u043b\u043e\u0445\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0435 \u0434\u043d\u0438 \u0434\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u0448\u043b\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0431\u0435\u0437 \u0443\u0441\u0438\u043b\u0438\u0439 \u0438 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u043c\u044b\u0435 \u043e\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u0447\u0430, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0441\u0440\u043e\u043a, \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0443\u0436 \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f.  <\/p>\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-273280","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273280","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=273280"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273280\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=273280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=273280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=273280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}