{"id":924,"date":"2021-08-08T05:40:04","date_gmt":"2021-08-08T05:40:04","guid":{"rendered":"https:\/\/egany.com\/blogs\/?p=924"},"modified":"2021-09-08T08:19:19","modified_gmt":"2021-09-08T08:19:19","slug":"frontend-du-ky-s1e3-egany-apps-phan-3-thua-thang-xong-len","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/frontend-du-ky-s1e3-egany-apps-phan-3-thua-thang-xong-len\/","title":{"rendered":"Frontend Du K\u00fd S1E3 | EGANY Apps (ph\u1ea7n 3): Th\u1eeba th\u1eafng x\u00f4ng l\u00ean"},"content":{"rendered":"<p>Ti\u1ebfp n\u1ed1i ph\u1ea7n tr\u01b0\u1edbc, <strong>Frontend Du K\u00fd S1E3 | EGANY Apps<\/strong> s\u1ebd k\u1ec3 v\u1ec1 qu\u00e1 tr\u00ecnh c\u1ea3i thi\u1ec7n c\u0169ng nh\u01b0 th\u00eam m\u1edbi d\u1ef1 \u00e1n \u0111\u00e3 c\u00f3 sau khi c\u00f3 \u0111\u01b0\u1ee3c m\u1ed9t n\u1ec1n t\u1ea3ng \u0111\u1ee7 v\u1eefng ch\u1eafc v\u1ec1 quy tr\u00ecnh c\u0169ng nh\u01b0 k\u1ef9 thu\u1eadt.<\/p>\n<p>N\u1ebfu b\u1ea1n ch\u01b0a \u0111\u1ecdc c\u00e1c ph\u1ea7n tr\u01b0\u1edbc:<\/p>\n<ul>\n<li><a href=\"https:\/\/egany.com\/blogs\/frontend-du-ky-s1e1-egany-apps-phan-1-van-su-khoi-dau-nan\/\">Ph\u1ea7n 1: V\u1ea1n s\u1ef1 kh\u1edfi \u0111\u1ea7u nan<\/a><\/li>\n<li><a href=\"https:\/\/egany.com\/blogs\/frontend-du-ky-s1e2-egany-apps-phan-2-noi-de-hon-lam\/\">Ph\u1ea7n 2: N\u00f3i d\u1ec5 h\u01a1n l\u00e0m<\/a><\/li>\n<\/ul>\n<h2>Gi\u1edbi thi\u1ec7u<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/egany-apps-sign-in-screen-700x338.png\" alt=\"egany-apps-sign-in-screen\" \/><\/p>\n<p>Do h\u1ea7u h\u1ebft c\u00e1c v\u01b0\u1edbng m\u1eafc l\u1edbn \u0111\u00e3 \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft \u1edf giai \u0111o\u1ea1n tr\u01b0\u1edbc \u0111\u00f3, giai \u0111o\u1ea1n n\u00e0y team ch\u1ec9 t\u1eadp trung c\u1ea3i thi\u1ec7n nh\u1eefng ch\u1ed7 ch\u01b0a t\u1ed1t v\u00e0 ph\u00e1t tri\u1ec3n th\u00eam c\u00e1c t\u00ednh n\u0103ng m\u1edbi, c\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>Ph\u00e1t tri\u1ec3n c\u00e1c \u1ee9ng d\u1ee5ng d\u1ea1ng subscription thay v\u00ec one-time payment<\/li>\n<li>Chuy\u1ec3n \u0111\u1ed5i c\u00e1c \u1ee9ng d\u1ee5ng hi\u1ec7n t\u1ea1i qua platform th\u1ee9 hai<\/li>\n<li>C\u1ea3i thi\u1ec7n code base v\u00e0 quy tr\u00ecnh<\/li>\n<\/ul>\n<h2>Thay \u0111\u1ed5i c\u1ea5u tr\u00fac \u1ee9ng d\u1ee5ng<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/change-app-structure-600x450.jpg\" alt=\"change-app-structure\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/6101200-Time-to-Refactoring-your-Code\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/6101200-Time-to-Refactoring-your-Code<\/a><\/p>\n<p>\u1ee8ng d\u1ee5ng \u1edf \u0111\u00e2y \u00e1m ch\u1ec9 c\u00e1c \u1ee9ng d\u1ee5ng \u0111\u01b0\u1ee3c b\u00e1n tr\u00ean platform (nh\u01b0 apps.haravan.com, apps.sapo.vn hay apps.shopify.com) kh\u00f4ng ph\u1ea3i EGANY Apps.<br \/>\nEGANY Apps ch\u1ec9 \u0111\u00f3ng vai tr\u00f2 qu\u1ea3n l\u00fd v\u00e0 thi\u1ebft l\u1eadp \u1ee9ng d\u1ee5ng cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n<\/blockquote>\n<p>\u1ee8ng d\u1ee5ng c\u0169 \u1edf EGANY c\u00f3 c\u1ea5u tr\u00fac nh\u01b0 sau:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/old-app-files.jpg\" alt=\"old-app-files\" \/><\/p>\n<ul>\n<li><strong>Core.<\/strong> Ch\u1ecbu tr\u00e1ch nhi\u1ec7m render v\u00e0 x\u1eed l\u00fd c\u00e1c business c\u1ee7a \u1ee9ng d\u1ee5ng<\/li>\n<li><strong>Settings.<\/strong> Thi\u1ebft l\u1eadp c\u1ee7a \u1ee9ng d\u1ee5ng l\u01b0u theo format (\u0111\u1ecbnh d\u1ea1ng) c\u1ee7a platform<\/li>\n<li><strong>Assets.<\/strong> H\u00ecnh \u1ea3nh, icon, font, CSS, &#8230; b\u1ed5 tr\u1ee3 cho ph\u1ea7n core<\/li>\n<\/ul>\n<p>Qu\u00e1 tr\u00ecnh c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng s\u1ebd nh\u01b0 h\u00ecnh d\u01b0\u1edbi:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/app-flow-700x172.jpg\" alt=\"app-flow\" \/><\/p>\n<ol>\n<li>Kh\u00e1ch h\u00e0ng mua v\u00e0 thanh to\u00e1n \u0111\u01a1n h\u00e0ng<\/li>\n<li>Platform th\u00f4ng b\u00e1o th\u00f4ng tin \u0111\u01a1n h\u00e0ng th\u00f4ng qua web hook<\/li>\n<li>EGANY nh\u1eadn v\u00e0 x\u1eed l\u00fd c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng cho kh\u00e1ch<\/li>\n<li>Th\u00f4ng tin \u1ee9ng d\u1ee5ng \u0111\u01b0\u1ee3c tr\u1ea3 v\u1ec1<\/li>\n<li>EGANY \u0111\u0103ng k\u00fd \u1ee9ng d\u1ee5ng v\u1edbi ph\u00eda platform k\u00e8m theo danh s\u00e1ch file c\u1ea7n push qua website kh\u00e1ch h\u00e0ng<\/li>\n<li>Platform \u0111\u1ea9y c\u00e1c file \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u0103ng k\u00fd qua website c\u1ee7a kh\u00e1ch h\u00e0ng<\/li>\n<\/ol>\n<p><strong>L\u01b0u \u00fd:<\/strong> Website c\u1ee7a kh\u00e1ch l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a platform. M\u00ecnh t\u00e1ch ri\u00eang platform (API) v\u00e0 website c\u1ee7a kh\u00e1ch \u0111\u1ec3 c\u00e1c b\u1ea1n d\u1ec5 h\u00ecnh dung vi\u1ec7c s\u1eed d\u1ee5ng API \u0111\u1ec3 \u0111\u1ea9y file v\u00e0o website.<\/p>\n<p>C\u1ea5u tr\u00fac tr\u00ean \u00e1p d\u1ee5ng t\u1ed1t cho nh\u1eefng \u1ee9ng d\u1ee5ng c\u01a1 b\u1ea3n, kh\u00f4ng c\u00f3 qu\u00e1 nhi\u1ec1u thi\u1ebft l\u1eadp ph\u1ee9c t\u1ea1p. M\u1ecdi thi\u1ebft l\u1eadp \u0111\u1ec1u th\u1ef1c hi\u1ec7n qua b\u1ed9 c\u00f4ng c\u1ee5 c\u00f3 s\u1eb5n c\u1ee7a platform.<\/p>\n<p>Tuy nhi\u00ean v\u1edbi c\u1ea5u tr\u00fac tr\u00ean, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y ngo\u00e0i vi\u1ec7c \u0111\u1ea9y file qua API th\u00ec \u1ee9ng d\u1ee5ng \u0111ang ph\u1ee5 thu\u1ed9c kh\u00e1 nhi\u1ec1u v\u00e0o platform. \u0110\u1ec3 d\u1ec5 d\u00e0ng ph\u00e1t tri\u1ec3n ra nhi\u1ec1u platform kh\u00e1c, team quy\u1ebft \u0111\u1ecbnh \u0111i\u1ec1u ch\u1ec9nh c\u1ea5u tr\u00fac v\u1edbi c\u00e1c ti\u00eau ch\u00ed sau:<\/p>\n<ul>\n<li><strong>Gi\u1ea3m m\u1ee9c \u0111\u1ed9 ph\u1ee5 thu\u1ed9c v\u00e0o platform c\u00e0ng nhi\u1ec1u c\u00e0ng t\u1ed1t.<\/strong> Lo\u1ea1i b\u1ecf t\u1ed1i \u0111a c\u00e1c th\u00e0nh ph\u1ea7n li\u00ean quan t\u1edbi platform trong source code. T\u00e1ch bi\u1ec7t ph\u1ea7n l\u00f5i (core) c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 thi\u1ebft l\u1eadp \u1ee9ng d\u1ee5ng \u0111\u1ec3 c\u00f3 th\u1ec3 ch\u1ea1y \u0111\u1ed9c l\u1eadp platform<\/li>\n<li><strong>D\u1ec5 d\u00e0ng ki\u1ec3m so\u00e1t \u0111\u01b0\u1ee3c subscription c\u1ee7a kh\u00e1ch.<\/strong> V\u1edbi c\u1ea5u tr\u00fac c\u0169 th\u00ec khi h\u1ebft h\u1ea1n, \u1ee9ng d\u1ee5ng v\u1eabn ho\u1ea1t \u0111\u1ed9ng do c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a \u1ee9ng d\u1ee5ng \u0111\u00e3 c\u00f3 s\u1eb5n \u1edf website kh\u00e1ch. C\u1ea7n m\u1ed9t c\u01a1 ch\u1ebf m\u1edbi \u0111\u1ec3 ki\u1ec3m so\u00e1t vi\u1ec7c n\u00e0y<\/li>\n<\/ul>\n<p>Sau nhi\u1ec1u gi\u1edd th\u1eed nghi\u1ec7m, v\u00f2 \u0111\u1ea7u b\u1ee9t t\u00f3c v\u00e0 th\u1ea3o lu\u1eadn th\u00ec team \u0111\u1ec1 xu\u1ea5t c\u1ea5u tr\u00fac sau:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/new-app-files.jpg\" alt=\"new-app-files\" \/><\/p>\n<blockquote>\n<p>C\u1ea5u tr\u00fac \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u01a1n gi\u1ea3n h\u00f3a h\u1ebft m\u1ee9c c\u00f3 th\u1ec3 v\u00ec l\u00fd do b\u1ea3o m\u1eadt<\/p>\n<\/blockquote>\n<p>V\u1ec1 m\u1eb7t ch\u1ee9c n\u0103ng th\u00ec c\u00e1c th\u00e0nh ph\u1ea7n v\u1eabn nh\u01b0 c\u0169. Tuy nhi\u00ean, m\u1ed9t s\u1ed1 thay \u0111\u1ed5i m\u1edbi bao g\u1ed3m:<\/p>\n<ul>\n<li><strong>Core.<\/strong> Ph\u1ea7n core c\u1ee7a \u1ee9ng d\u1ee5ng thay v\u00ec l\u00e0 file n\u1eb1m s\u1eb5n trong website c\u1ee7a kh\u00e1ch th\u00ec b\u00e2y gi\u1edd n\u00f3 s\u1ebd l\u00e0 d\u1ea1ng script URL. Script s\u1ebd \u0111\u01b0\u1ee3c inject v\u00e0o website d\u01b0\u1edbi c\u01a1 ch\u1ebf ri\u00eang bi\u1ec7t c\u1ee7a platform. C\u00f3 th\u1ec3 xem \u0111\u00e2y l\u00e0 m\u1ed9t d\u1ea1ng kh\u00f3a \u0111\u1ec3 m\u1edf &quot;r\u01b0\u01a1ng \u1ee9ng d\u1ee5ng&quot; do ph\u00eda EGANY ki\u1ec3m so\u00e1t theo h\u1ea1n s\u1eed d\u1ee5ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng<\/li>\n<li><strong>Settings.<\/strong> Thi\u1ebft l\u1eadp b\u00e2y gi\u1edd s\u1ebd l\u01b0u theo d\u1ea1ng file thay v\u00ec s\u1eed d\u1ee5ng \u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 c\u1ee7a platform. \u0110i\u1ec1u n\u00e0y gi\u00fap dev d\u1ec5 d\u00e0ng truy xu\u1ea5t thi\u1ebft l\u1eadp h\u01a1n v\u00e0 c\u0169ng t\u1ef1 do h\u01a1n khi thi\u1ebft k\u1ebf c\u1ea5u tr\u00fac thi\u1ebft l\u1eadp. V\u00ed d\u1ee5:<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">  \/\/ Platform&#039;s format (flat)\n  const platformSettings = {\n    app__title: &#039;Title&#039;,\n    app__description: &#039;Description here&#039;,\n  }\n\n  \/\/ EGANY&#039;s format (nested)\n  const eganySettings = {\n    app: {\n      title: &#039;Title&#039;,\n      description: &#039;Description here&#039;,\n    },\n  }<\/code><\/pre>\n<ul>\n<li><strong>Assets.<\/strong> Ph\u1ea7n n\u00e0y kh\u00f4ng c\u00f3 thay \u0111\u1ed5i do ch\u1ee7 y\u1ebfu l\u00e0 c\u00e1c file t\u0129nh<\/li>\n<\/ul>\n<p>Thi\u1ebft l\u1eadp c\u1ee7a \u1ee9ng d\u1ee5ng c\u0169ng nh\u01b0 c\u00e1c assets (h\u00ecnh \u1ea3nh, icon, font, &#8230;) v\u1eabn s\u1ebd \u0111\u01b0\u1ee3c l\u01b0u \u1edf ph\u00eda platform \u0111\u1ec3 t\u1eadn d\u1ee5ng CDN c\u00f3 s\u1eb5n. Ngo\u00e0i ra, n\u1ebfu kh\u00e1ch h\u00e0ng quy\u1ebft \u0111\u1ecbnh gia h\u1ea1n l\u1ea1i \u1ee9ng d\u1ee5ng, v\u00ec thi\u1ebft l\u1eadp c\u0169ng nh\u01b0 c\u00e1c assets c\u1ea7n thi\u1ebft \u0111\u00e3 c\u00f3 s\u1eb5n n\u00ean qu\u00e1 tr\u00ecnh c\u00e0i \u0111\u1eb7t l\u1ea1i s\u1ebd r\u1ea5t nhanh v\u00e0 ti\u1ec7n l\u1ee3i.<\/p>\n<h2>Addon<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/addon-600x450.jpg\" alt=\"addon\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/2817029-Addon-Icons\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/2817029-Addon-Icons<\/a><\/p>\n<\/blockquote>\n<p>Addon l\u00e0 m\u1ed9t h\u01b0\u1edbng \u0111i m\u1edbi m\u00e0 team quy\u1ebft \u0111\u1ecbnh l\u1ef1a ch\u1ecdn trong giai \u0111o\u1ea1n n\u00e0y.<\/p>\n<p>Quay v\u1ec1 m\u1ed9t ch\u00fat v\u1ec1 \u1ee9ng d\u1ee5ng. M\u1ecdi \u1ee9ng d\u1ee5ng tr\u00ean platform \u0111\u1ec1u ph\u1ea3i \u0111\u01b0\u1ee3c \u0111\u0103ng k\u00fd tr\u01b0\u1edbc v\u1edbi ph\u00eda \u0111\u1ed1i t\u00e1c v\u00e0 ph\u1ea3i ch\u1edd \u0111\u1ed1i t\u00e1c duy\u1ec7t th\u00ec m\u1edbi \u0111\u01b0\u1ee3c \u0111\u0103ng l\u00ean s\u00e0n c\u1ee7a platform. \u0110\u00e2y l\u00e0 m\u1ed9t c\u1ea3n tr\u1edf l\u1edbn n\u1ebfu team mu\u1ed1n ph\u00e1t tri\u1ec3n c\u00f9ng l\u00fac nhi\u1ec1u \u1ee9ng d\u1ee5ng t\u01b0\u01a1ng t\u1ef1 nhau.<\/p>\n<p>\u0110\u1ec3 gi\u1ea3i quy\u1ebft v\u1ea5n \u0111\u1ec1 tr\u00ean th\u00ec team n\u1ea3y sinh \u00fd t\u01b0\u1edfng l\u00e0m \u1ee9ng d\u1ee5ng theo d\u1ea1ng addon. C\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>S\u1ebd ch\u1ec9 c\u00f3 m\u1ed9t \u1ee9ng d\u1ee5ng \u1ea3o \u0111\u01b0\u1ee3c \u0111\u0103ng k\u00fd v\u1edbi platform. \u1ee8ng d\u1ee5ng n\u00e0y s\u1ebd l\u00e0 mi\u1ec5n ph\u00ed v\u00e0 m\u1ee5c \u0111\u00edch duy nh\u1ea5t l\u00e0 \u0111\u1ec3 t\u01b0\u01a1ng t\u00e1c \u0111\u01b0\u1ee3c v\u1edbi API<\/li>\n<li>Addon s\u1ebd \u0111\u01b0\u1ee3c b\u00e1n d\u01b0\u1edbi d\u1ea1ng <em>in-app purchase<\/em> b\u00ean trong \u1ee9ng d\u1ee5ng<\/li>\n<li>C\u00e1c giao d\u1ecbch s\u1ebd \u0111i tr\u1ef1c ti\u1ebfp qua ph\u00eda EGANY thay v\u00ec th\u00f4ng qua platform. V\u1ec1 m\u1eb7t l\u00fd thuy\u1ebft th\u00ec backend v\u1eabn x\u1eed l\u00fd d\u1ef1a tr\u00ean order (\u0111\u01a1n h\u00e0ng) tuy nhi\u00ean v\u1ec1 m\u1eb7t k\u0129 thu\u1eadt s\u1ebd kh\u00e1c \u0111i m\u1ed9t ch\u00fat<\/li>\n<\/ul>\n<p>V\u1edbi h\u01b0\u1edbng \u0111i tr\u00ean, team lo\u1ea1i b\u1ecf \u0111\u01b0\u1ee3c c\u00e1c b\u01b0\u1edbc ki\u1ec3m duy\u1ec7t \u1ee9ng d\u1ee5ng v\u00e0 ch\u1ee7 \u0111\u1ed9ng h\u01a1n khi mu\u1ed1n th\u00eam, s\u1eeda ho\u1eb7c th\u00e1o g\u1ee1 addon.<\/p>\n<h2>Thay \u0111\u1ed5i theo API m\u1edbi<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/api-600x450.jpg\" alt=\"api\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/12915609-Icons\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/12915609-Icons<\/a><\/p>\n<\/blockquote>\n<p>\u0110\u1ec3 ph\u1ee5c v\u1ee5 cho c\u1ea5u tr\u00fac m\u1edbi th\u00ec vi\u1ec7c c\u1eadp nh\u1eadt API l\u00e0 \u0111i\u1ec1u kh\u00f4ng th\u1ec3 tr\u00e1nh kh\u1ecfi. Do API b\u00e2y gi\u1edd ph\u1ee5 thu\u1ed9c v\u00e0o platform c\u0169ng nh\u01b0 m\u00f4i tr\u01b0\u1eddng tri\u1ec3n khai (develop, staging, production, &#8230;) n\u00ean team c\u0169ng quy\u1ebft \u0111\u1ecbnh refactor l\u1ea1i theo <em>factory<\/em> pattern.<\/p>\n<p>Qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i c\u0169ng kh\u00f4ng qu\u00e1 ph\u1ee9c t\u1ea1p, m\u1ecdi th\u1ee9 di\u1ec5n ra t\u01b0\u01a1ng \u0111\u1ed1i su\u00f4n s\u1ebb. \u0110i\u1ec3m tr\u1eeb duy nh\u1ea5t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y c\u00f3 l\u1ebd l\u00e0 th\u1eddi gian &quot;ch\u1ebft&quot; khi ch\u1edd ph\u00eda backend deploy l\u1ea1i service sau khi \u0111i\u1ec1u ch\u1ec9nh, \u0111\u1eb7c bi\u1ec7t l\u00e0 core service (user, authentication, &#8230;).<\/p>\n<p>Ngo\u00e0i API service th\u00ec team c\u0169ng refactor l\u1ea1i m\u1ed9t s\u1ed1 ch\u1ed7 ch\u01b0a h\u00e0i l\u00f2ng ph\u00e1t hi\u1ec7n \u0111\u01b0\u1ee3c trong qu\u00e1 tr\u00ecnh ch\u1ec9nh s\u1eeda. \u0110i\u1ec3n h\u00ecnh nh\u01b0 ph\u1ea7n x\u1eed l\u00fd x\u00e1c th\u1ef1c ng\u01b0\u1eddi d\u00f9ng l\u1ed3ng gh\u00e9p <code>if else<\/code> t\u01b0\u01a1ng \u0111\u1ed1i nhi\u1ec1u. Team s\u1eeda l\u1ea1i theo d\u1ea1ng <em>early return<\/em> \u0111\u1ec3 d\u1ec5 \u0111\u1ecdc v\u00e0 d\u1ec5 ki\u1ec3m so\u00e1t h\u01a1n \u0111\u1ed3ng th\u1eddi th\u00eam comment \u0111\u1ec3 sau n\u00e0y kh\u00f4ng b\u1ecb b\u1ee1 ng\u1ee1. Th\u1eadt s\u1ef1 sau m\u1ed9t th\u1eddi gian kh\u00f4ng \u0111\u1ee5ng t\u1edbi th\u1ea5y nh\u1eefng d\u00f2ng code ch\u00ednh tay m\u00ecnh vi\u1ebft kh\u00f3 hi\u1ec3u \u0111\u1ebfn l\u1ea1 th\u01b0\u1eddng.<\/p>\n<h2>UI\/UX<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/component-600x450.png\" alt=\"ui ux\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/12531701-Design-system-elements\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/12531701-Design-system-elements<\/a><\/p>\n<\/blockquote>\n<p>S\u1eb5n ti\u1ec7n trong qu\u00e1 tr\u00ecnh \u0111i\u1ec1u ch\u1ec9nh l\u1ea1i API th\u00ec team c\u0169ng tranh th\u1ee7 xem l\u1ea1i (review) nh\u1eefng ch\u1ed7 c\u00f2n ch\u01b0a h\u1ee3p l\u00fd ho\u1eb7c ch\u01b0a \u0111\u1ed3ng nh\u1ea5t trong x\u1eed l\u00fd giao di\u1ec7n.<\/p>\n<p>Vi\u1ec7c \u0111\u1ea7u ti\u00ean c\u00f3 l\u1ebd l\u00e0 \u0111i\u1ec1u ch\u1ec9nh l\u1ea1i component \u0111\u1ed3ng th\u1eddi b\u1ed5 sung t\u00e0i li\u1ec7u cho ch\u00ednh component \u0111\u00f3. Component l\u00e0 t\u1eeb m\u00ecnh s\u1eed d\u1ee5ng chung, bao g\u1ed3m <em>layout<\/em>, <em>higher-order-component (HOC)<\/em> c\u0169ng nh\u01b0 <em>form inputs<\/em>.<\/p>\n<p>B\u01b0\u1edbc ti\u1ebfp theo l\u00e0 b\u00f3c t\u00e1ch c\u00e1c <code>function<\/code> chung \u0111\u1ec3 s\u1eed d\u1ee5ng xuy\u00ean su\u1ed1t c\u00e1c dashboard, \u0111\u01a1n c\u1eed nh\u01b0 <code>formatMoney<\/code> ho\u1eb7c <code>normalizeUrl<\/code>.<\/p>\n<p>B\u01b0\u1edbc cu\u1ed1i c\u00f9ng l\u00e0 b\u1ed5 sung <em>loading state<\/em>, <em>empty state<\/em> c\u0169ng nh\u01b0 <em>error state<\/em> cho nh\u1eefng dashboard c\u00f2n thi\u1ebfu \u0111\u1ec3 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng \u0111\u01b0\u1ee3c su\u00f4n s\u1ebb h\u01a1n. B\u00ean c\u1ea1nh \u0111\u00f3 l\u00e0 b\u1ed5 sung c\u00e1c k\u00eanh h\u1ed7 tr\u1ee3 nh\u01b0 h\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng, chat, email, s\u1ed1 \u0111i\u1ec7n tho\u1ea1i, &#8230; \u0111\u1ec3 ng\u01b0\u1eddi d\u00f9ng d\u1ec5 d\u00e0ng li\u00ean l\u1ea1c khi c\u00f3 v\u01b0\u1edbng m\u1eafc.<\/p>\n<h2>Tool h\u1ed7 tr\u1ee3<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/start-from-scratch-600x450.png\" alt=\"tools\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/2797795-Start-from-Scratch-Illustration\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/2797795-Start-from-Scratch-Illustration<\/a><\/p>\n<\/blockquote>\n<p>Song song v\u1edbi vi\u1ec7c ph\u00e1t tri\u1ec3n EGANY Apps th\u00ec c\u00e1c \u1ee9ng d\u1ee5ng kh\u00e1c c\u0169ng \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o \u0111\u1ec3 b\u1ed5 tr\u1ee3.<\/p>\n<ul>\n<li><strong>EGANY Tools:<\/strong> b\u1ed5 sung t\u00ednh n\u0103ng thi\u1ebft l\u1eadp v\u1ecb tr\u00ed addon cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn v\u1ecb tr\u00ed tr\u1ef1c quan ngay tr\u00ean website c\u1ee7a m\u00ecnh thay v\u00ec ph\u1ea3i s\u1eed d\u1ee5ng <em>CSS selector<\/em> nh\u01b0 tr\u01b0\u1edbc.<\/li>\n<li><strong>EGANY Admin:<\/strong> ph\u00e1t tri\u1ec3n dashboard cho admin \u0111\u1ec3 qu\u1ea3n l\u00fd g\u00f3i c\u01b0\u1edbc c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u0169ng nh\u01b0 c\u00e1c t\u00ednh n\u0103ng c\u1ea7n thi\u1ebft kh\u00e1c ph\u1ee5c v\u1ee5 cho qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng<\/li>\n<\/ul>\n<h2>T\u1ea1m k\u1ebft<\/h2>\n<p>Nh\u01b0 \u0111\u00e3 \u0111\u1ec1 c\u1eadp \u1edf \u0111\u1ea7u b\u00e0i, giai \u0111o\u1ea1n n\u00e0y team ch\u1ee7 y\u1ebfu t\u1eadp trung ph\u00e1t tri\u1ec3n tr\u00ean n\u1ec1n t\u1ea3ng s\u1eb5n c\u00f3 n\u00ean kh\u00f4ng g\u1eb7p qu\u00e1 nhi\u1ec1u kh\u00f3 kh\u0103n. Th\u00e0nh qu\u1ea3 c\u1ee7a giai \u0111o\u1ea1n n\u00e0y:<\/p>\n<ul>\n<li>H\u1ed7 tr\u1ee3 th\u00eam \u0111\u01b0\u1ee3c m\u1ed9t platform<\/li>\n<li>Thay \u0111\u1ed5i to\u00e0n b\u1ed9 c\u1ea5u tr\u00fac \u1ee9ng d\u1ee5ng hi\u1ec7n c\u00f3 v\u00e0 chu\u1ea9n b\u1ecb ph\u00e1t tri\u1ec3n<\/li>\n<li>Tri\u1ec3n khai h\u01b0\u1edbng l\u00e0m addon<\/li>\n<li>C\u1ea3i thi\u1ec7n UI\/UX<\/li>\n<li>B\u1ed5 sung t\u00e0i li\u1ec7u c\u00f2n thi\u1ebfu<\/li>\n<\/ul>\n<p>T\u01b0\u1edfng ch\u1eebng nh\u01b0 m\u1ecdi th\u1ee9 \u0111\u00e3 \u0111\u00e2u v\u00e0o \u0111\u1ea5y, ch\u1ec9 c\u1ea7n ch\u1edd ng\u00e0y release l\u00e0 tri\u1ec3n khai th\u00f4i. \u0110\u00e2u ai ng\u1edd r\u1eb1ng c\u1ea3 hai platform \u0111ang \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 quy\u1ebft \u0111\u1ecbnh \u0111i\u1ec1u ch\u1ec9nh khi\u1ebfn cho c\u00e1c \u1ee9ng d\u1ee5ng \u0111ang ch\u1ea1y t\u1ed1t gi\u1edd l\u1ea1i l\u0103n ra ch\u1ebft. Chi ti\u1ebft nh\u01b0 th\u1ebf n\u00e0o m\u00ecnh s\u1ebd k\u1ec3 cho c\u00e1c b\u1ea1n v\u00e0o t\u1eadp sau.<\/p>\n<p>C\u00e1m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 \u0111\u1ecdc. Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ti\u1ebfp n\u1ed1i ph\u1ea7n tr\u01b0\u1edbc, Frontend Du K\u00fd S1E3 | EGANY Apps s\u1ebd k\u1ec3 v\u1ec1 qu\u00e1 tr\u00ecnh c\u1ea3i thi\u1ec7n c\u0169ng nh\u01b0 th\u00eam m\u1edbi d\u1ef1 \u00e1n \u0111\u00e3 c\u00f3 sau khi c\u00f3 \u0111\u01b0\u1ee3c m\u1ed9t n\u1ec1n t\u1ea3ng \u0111\u1ee7 v\u1eefng ch\u1eafc v\u1ec1 quy tr\u00ecnh c\u0169ng nh\u01b0 k\u1ef9 thu\u1eadt. N\u1ebfu b\u1ea1n ch\u01b0a \u0111\u1ecdc c\u00e1c ph\u1ea7n tr\u01b0\u1edbc: Ph\u1ea7n 1: V\u1ea1n s\u1ef1 kh\u1edfi \u0111\u1ea7u nan Ph\u1ea7n 2: N\u00f3i d\u1ec5 h\u01a1n l\u00e0m Gi\u1edbi thi\u1ec7u Do h\u1ea7u h\u1ebft c\u00e1c v\u01b0\u1edbng m\u1eafc l\u1edbn \u0111\u00e3 \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft \u1edf giai \u0111o\u1ea1n tr\u01b0\u1edbc \u0111\u00f3, giai \u0111o\u1ea1n n\u00e0y team ch\u1ec9 t\u1eadp trung c\u1ea3i thi\u1ec7n nh\u1eefng ch\u1ed7 ch\u01b0a t\u1ed1t v\u00e0 ph\u00e1t tri\u1ec3n th\u00eam c\u00e1c t\u00ednh<\/p>\n","protected":false},"author":2,"featured_media":927,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,1],"tags":[104,103,68,99,102,91,113,90,101,100],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/924"}],"collection":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/comments?post=924"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/924\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/927"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}