{"id":968,"date":"2021-09-08T08:17:46","date_gmt":"2021-09-08T08:17:46","guid":{"rendered":"https:\/\/egany.com\/blogs\/?p=968"},"modified":"2021-09-08T08:24:31","modified_gmt":"2021-09-08T08:24:31","slug":"frontend-du-ky-s2e1-cross-platform-apps-phan-1-binh-moi-ruou-cu","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/frontend-du-ky-s2e1-cross-platform-apps-phan-1-binh-moi-ruou-cu\/","title":{"rendered":"Frontend Du K\u00fd S2E1 | Cross-platform Apps (ph\u1ea7n 1): B\u00ecnh m\u1edbi, r\u01b0\u1ee3u c\u0169"},"content":{"rendered":"<p><strong>Frontend Du K\u00fd<\/strong> m\u00f9a \u0111\u1ea7u ti\u00ean k\u1ebft th\u00fac v\u1edbi s\u1ef1 \u1ed5n \u0111\u1ecbnh c\u1ee7a EGANY Apps. \u1ede m\u00f9a m\u1edbi, m\u00ecnh s\u1ebd c\u00f9ng c\u00e1c b\u1ea1n kh\u00e1m ph\u00e1 qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n Cross-platform Apps &#8211; m\u1ed9t d\u1ef1 \u00e1n b\u1eaft \u0111\u1ea7u t\u1eeb v\u1ea1ch \u0111\u00edch c\u1ee7a EGANY.<\/p>\n<blockquote>\n<p>N\u1ebfu b\u1ea1n ch\u01b0a \u0111\u1ecdc m\u00f9a 1, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc <a href=\"https:\/\/egany.com\/blogs\/tag\/fedk-season-1\/\">t\u1ea1i \u0111\u00e2y<\/a>.<\/p>\n<\/blockquote>\n<h2>Gi\u1edbi thi\u1ec7u<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/09\/egany-app.jpg\" alt=\"Cross-platform apps\" \/><\/p>\n<blockquote>\n<p>Cross-platform Apps s\u1ebd \u0111\u01b0\u1ee3c vi\u1ebft t\u1eaft b\u1eb1ng CPA \u0111\u1ec3 thu\u1eadn ti\u1ec7n cho ng\u01b0\u1eddi vi\u1ebft b\u00e0i<\/p>\n<\/blockquote>\n<p>M\u1ed9t ng\u00e0y \u0111\u1eb9p tr\u1eddi, khi \u0111ang ph\u01a1i \u0111\u1ed3 tr\u00ean s\u00e2n th\u01b0\u1ee3ng th\u00ec b\u1ed7ng d\u01b0ng c\u00f3 s\u00e0o qu\u1ea7n \u00e1o r\u01a1i v\u00e0o \u0111\u1ea7u s\u1ebfp. S\u1ebfp \u0111\u1eb7t c\u00e2u h\u1ecfi t\u1ea1i sao s\u00e0o qu\u1ea7n \u00e1o l\u1ea1i r\u01a1i v\u00e0o \u0111\u1ea7u m\u00ecnh? Ph\u1ea3i ch\u0103ng do ch\u1ec9 c\u00f3 m\u1ed9t s\u00e0o, qu\u1ea7n \u00e1o qu\u00e1 n\u1eb7ng khi\u1ebfn cho s\u00e0o qu\u1ea7n \u00e1o s\u1eadp xu\u1ed1ng?<\/p>\n<p>B\u1ed7ng nhi\u00ean s\u1ebfp nh\u1eadn ra r\u1eb1ng c\u00e1c \u1ee9ng d\u1ee5ng c\u1ee7a EGANY c\u0169ng gi\u1ed1ng nh\u01b0 v\u1eady. C\u00e1c platform s\u1ebd l\u00e0 s\u00e0o qu\u1ea7n \u00e1o v\u00e0 \u1ee9ng d\u1ee5ng ch\u00ednh l\u00e0 c\u00e1c b\u1ed9 qu\u1ea7n \u00e1o \u0111ang \u0111\u01b0\u1ee3c ph\u01a1i. N\u1ebfu m\u1ed9t ng\u00e0y n\u00e0o \u0111\u00f3 s\u00e0o qu\u1ea7n \u00e1o (platform) s\u1eadp xu\u1ed1ng th\u00ec qu\u1ea7n \u00e1o c\u0169ng s\u1ebd r\u01a1i r\u1edbt theo. \u1ea4y v\u1eady, s\u1ebfp b\u1eaft \u0111\u1ea7u \u00fd t\u01b0\u1edfng tri\u1ec3n khai CPA &#8211; m\u1ed9t &quot;s\u00e0n \u1ee9ng d\u1ee5ng nh\u00e0 l\u00e0m&quot; c\u1ee7a ri\u00eang EGANY.<\/p>\n<p>CPA s\u1ebd cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng qu\u1ea3n l\u00fd c\u00e1c \u1ee9ng d\u1ee5ng ch\u1ea1y \u0111\u1ed9c l\u1eadp ho\u00e0n to\u00e0n tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c platform (Haravan, Sapo, Shopify, WordPress, LadiPage, &#8230;). \u1ee8ng d\u1ee5ng \u0111\u1ea7u ti\u00ean \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n l\u00e0 <a href=\"https:\/\/docs.egany.com\/cross-platform\/ega-shop\">egaShop<\/a>.<\/p>\n<p>CPA \u1edf th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i v\u1eabn l\u00e0 m\u1ed9t d\u1ef1 \u00e1n th\u1eed nghi\u1ec7m v\u1edbi c\u00e1c ti\u00eau ch\u00ed sau:<\/p>\n<ol>\n<li><strong>\u0110\u1ed9c l\u1eadp n\u1ec1n t\u1ea3ng<\/strong>. Kh\u00f4ng ph\u1ee5 thu\u1ed9c ho\u1eb7c \u00edt b\u1ecb ph\u1ee5 thu\u1ed9c v\u00e0o API c\u1ee7a platform<\/li>\n<li><strong>Hi\u1ec7u n\u0103ng cao<\/strong>. T\u0103ng t\u1ed1c tr\u1ea3i nghi\u1ec7m c\u1ee7a kh\u00e1ch h\u00e0ng b\u1eb1ng c\u00e1c c\u00f4ng ngh\u1ec7 CDN, cache c\u0169ng nh\u01b0 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u n\u0103ng c\u1ee7a \u1ee9ng d\u1ee5ng<\/li>\n<li><strong>D\u1ec5 d\u00e0ng ph\u00e1t tri\u1ec3n<\/strong>. Gi\u1ea3i quy\u1ebft c\u00e1c v\u1ea5n \u0111\u1ec1 li\u00ean quan t\u1edbi UI component, t\u1ed5 ch\u1ee9c file t\u1ed1t h\u01a1n<\/li>\n<\/ol>\n<h2>B\u00ecnh m\u1edbi<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/09\/binh-moi.jpg\" alt=\"B\u00ecnh m\u1edbi\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/14903323-Cheers-to-2021\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/14903323-Cheers-to-2021<\/a><\/p>\n<\/blockquote>\n<p>Khi team b\u1eaft \u0111\u1ea7u qu\u00e1 tr\u00ecnh nghi\u00ean c\u1ee9u c\u00e1ch th\u1ee9c ho\u1ea1t \u0111\u1ed9ng c\u1ee7a c\u00e1c \u1ee9ng d\u1ee5ng t\u01b0\u01a1ng t\u1ef1 tr\u00ean th\u1ecb tr\u01b0\u1eddng, HoverSignal l\u00e0 m\u1ed9t trong nh\u1eefng \u0111\u1ed1i t\u01b0\u1ee3ng team h\u01b0\u1edbng t\u1edbi. Qua t\u00ecm hi\u1ec3u, HoverSignal ho\u1ea1t \u0111\u1ed9ng nh\u01b0 sau:<\/p>\n<ol>\n<li>Kh\u00e1ch h\u00e0ng \u0111\u0103ng k\u00fd website v\u1edbi HoverSignal<\/li>\n<li>Kh\u00e1ch h\u00e0ng c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng cho website \u0111\u00e3 \u0111\u0103ng k\u00fd<\/li>\n<li>Kh\u00e1ch h\u00e0ng copy script \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi HoverSignal v\u00e0o website c\u1ee7a m\u00ecnh<\/li>\n<li>\u1ee8ng d\u1ee5ng \u0111\u01b0\u1ee3c ch\u1ea1y theo thi\u1ebft l\u1eadp<\/li>\n<\/ol>\n<p>R\u1ea5t \u0111\u01a1n gi\u1ea3n ph\u1ea3i kh\u00f4ng n\u00e0o? \u0110i\u1ec1u \u0111\u1eb7c bi\u1ec7t c\u1ee7a HoverSignal l\u00e0 d\u00f9 m\u00ecnh c\u00f3 c\u00e0i m\u1ed9t, hai hay nhi\u1ec1u \u1ee9ng d\u1ee5ng th\u00ec website c\u1ee7a m\u00ecnh c\u0169ng ch\u1ec9 c\u00f3 m\u1ed9t script duy nh\u1ea5t \u0111\u1ec3 ch\u1ea1y. M\u00ecnh \u0111\u1eb7c bi\u1ec7t th\u00edch \u0111i\u1ec1u n\u00e0y v\u00ec kh\u00e1ch h\u00e0ng c\u00e0ng \u00edt ph\u1ea3i thao t\u00e1c th\u00ec s\u1ed1 l\u01b0\u1ee3ng l\u1ed7i ph\u00e1t sinh c\u00e0ng th\u1ea5p. Tuy nhi\u00ean, nh\u01b0\u1ee3c \u0111i\u1ec3m c\u1ee7a HoverSignal l\u00e0 khi m\u00ecnh copy script qua m\u1ed9t trang kh\u00e1c, c\u00e1c \u1ee9ng d\u1ee5ng m\u00ecnh c\u00e0i \u0111\u1eb7t v\u1eabn ch\u1ea1y. Ngo\u00e0i ra, do ch\u1ec9 c\u00f3 m\u1ed9t script \u0111\u1ec3 ch\u1ea1y to\u00e0n b\u1ed9 c\u00e1c \u1ee9ng d\u1ee5ng n\u00ean khi c\u00e0i \u0111\u1eb7t t\u1eeb ba \u1ee9ng d\u1ee5ng tr\u1edf l\u00ean th\u00ec hi\u1ec7u n\u0103ng c\u1ee7a trang gi\u1ea3m \u0111\u00e1ng k\u1ec3.<\/p>\n<p>Team ho\u00e0n to\u00e0n c\u00f3 th\u1ec3 &quot;tham kh\u1ea3o&quot; c\u1ea5u tr\u00fac c\u1ee7a HoverSignal. M\u1ed9t v\u1ea5n \u0111\u1ec1 \u0111ang l\u00e0m kh\u00f3 team l\u00e0 c\u00e1c \u1ee9ng d\u1ee5ng c\u1ee7a HoverSignal \u0111a s\u1ed1 s\u1ebd ch\u1ea1y tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c trang c\u1ee7a website nh\u01b0ng \u1ee9ng d\u1ee5ng c\u1ee7a EGANY th\u00ec kh\u00f4ng nh\u01b0 v\u1eady. \u1ee8ng d\u1ee5ng c\u1ee7a EGANY ch\u1ec9 ch\u1ea1y tr\u00ean m\u1ed9t trang duy nh\u1ea5t v\u00e0 n\u1ebfu l\u00e0m theo m\u00f4 h\u00ecnh c\u1ee7a HoverSignal th\u00ec s\u1ebd kh\u00f4ng ph\u00f9 h\u1ee3p v\u00e0 l\u00e0m gi\u1ea3m hi\u1ec7u n\u0103ng trang c\u1ee7a kh\u00e1ch. H\u01a1n n\u1eefa, vi\u1ec7c copy script qua website kh\u00e1c nh\u01b0ng \u1ee9ng d\u1ee5ng v\u1eabn ch\u1ea1y l\u00e0 m\u1ed9t \u0111i\u1ec1u team kh\u00f4ng mu\u1ed1n c\u00f3. D\u00f9 lu\u00f4n h\u01b0\u1edbng t\u1edbi l\u1ee3i \u00edch c\u1ee7a kh\u00e1ch h\u00e0ng nh\u01b0ng &quot;kh\u00f4ng ti\u1ec1n th\u00ec c\u1ea1p \u0111\u1ea5t&quot; ph\u1ea3i kh\u00f4ng c\u00e1c b\u1ea1n?<\/p>\n<p>Sau nhi\u1ec1u ng\u00e0y l\u1eb7n l\u1ed9i v\u00e0 c\u00e0i \u0111\u1eb7t \u0111\u1ee7 lo\u1ea1i \u1ee9ng d\u1ee5ng, kh\u00f4ng t\u00ecm \u0111\u01b0\u1ee3c m\u00f4 h\u00ecnh n\u00e0o ho\u00e0n h\u1ea3o 100%, team quy\u1ebft \u0111\u1ecbnh s\u1eed d\u1ee5ng m\u00f4 h\u00ecnh c\u1ee7a HoverSignal nh\u01b0ng c\u00f3 m\u1ed9t ch\u00fat &quot;bi\u1ebfn t\u1ea5u&quot; nho nh\u1ecf \u0111\u1ec3 ph\u00f9 h\u1ee3p h\u01a1n v\u1edbi \u0111\u1eb7c th\u00f9 \u1ee9ng d\u1ee5ng c\u1ee7a EGANY. C\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>Ph\u00e1t tri\u1ec3n theo h\u01b0\u1edbng HoverSignal (nhi\u1ec1u \u1ee9ng d\u1ee5ng, m\u1ed9t script)<\/li>\n<li>To\u00e0n b\u1ed9 assets s\u1ebd n\u1eb1m \u1edf ph\u00eda EGANY thay v\u00ec n\u1eb1m \u1edf platform nh\u01b0 tr\u01b0\u1edbc<\/li>\n<li>X\u00e1c th\u1ef1c ng\u01b0\u1eddi d\u00f9ng qua URL \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o \u1ee9ng d\u1ee5ng ch\u1ec9 ch\u1ea1y tr\u00ean m\u1ed9t URL ch\u1ec9 \u0111\u1ecbnh tr\u01b0\u1edbc<\/li>\n<\/ul>\n<p>Team b\u1eaft \u0111\u1ea7u v\u1edbi c\u01a1 ch\u1ebf t\u1ea1o ra script cho \u1ee9ng d\u1ee5ng, t\u1ea1m g\u1ecdi l\u00e0 <strong>bundler<\/strong>. Bundler ho\u1ea1t \u0111\u1ed9ng kh\u00e1 \u0111\u01a1n gi\u1ea3n, m\u00f4 h\u00ecnh b\u00ean d\u01b0\u1edbi:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/09\/bundler.jpg\" alt=\"Bundler\" \/><\/p>\n<ol>\n<li><strong>Core<\/strong>. Developer s\u1ebd build s\u1eb5n file javascript \u0111\u1ec3 ch\u1ea1y \u1ee9ng d\u1ee5ng v\u00e0 upload tr\u01b0\u1edbc l\u00ean storage (n\u01a1i l\u01b0u tr\u1eef file c\u1ee7a team). Bundler s\u1ebd d\u1ef1a v\u00e0o th\u00f4ng tin c\u1ee7a \u1ee9ng d\u1ee5ng v\u00e0 t\u00ecm \u0111\u00fang core c\u1ea7n thi\u1ebft<\/li>\n<li><strong>Settings<\/strong>. Bundler s\u1ebd \u0111\u01b0\u1ee3c ph\u00eda app service cung c\u1ea5p c\u00e1c th\u00f4ng tin c\u1ee7a \u1ee9ng d\u1ee5ng, trong \u0111\u00f3 c\u00f3 thi\u1ebft l\u1eadp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. Thi\u1ebft l\u1eadp m\u1eb7c \u0111\u1ecbnh s\u1ebd l\u01b0u t\u1ea1i database \u0111\u1ec3 d\u00f9ng cho l\u1ea7n c\u00e0i \u0111\u1eb7t \u0111\u1ea7u ti\u00ean<\/li>\n<li><strong>Bundle<\/strong>. K\u1ebft h\u1ee3p core v\u00e0 settings, ta c\u00f3 bundle ho\u00e0n ch\u1ec9nh<\/li>\n<\/ol>\n<p>M\u1ed9t v\u00ed d\u1ee5 c\u1ee5 th\u1ec3 h\u01a1n v\u1edbi code \u0111\u1ec3 c\u00e1c b\u1ea1n d\u1ec5 h\u00ecnh dung:<\/p>\n<pre><code class=\"language-js\">\/\/ Script \u0111\u1ec3 ch\u1ea1y \u1ee9ng d\u1ee5ng\n\/\/ core.js\nconsole.log(settings.message);<\/code><\/pre>\n<pre><code class=\"language-json\">\/\/ Thi\u1ebft l\u1eadp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng\n\/\/ settings.json\n{\n  &quot;message&quot;: &quot;Xin ch\u00e0o, Frontend Du K\u00fd&quot;\n}<\/code><\/pre>\n<pre><code class=\"language-js\">\/\/ File script sau khi \u0111\u01b0\u1ee3c bundle\n\/\/ bundle.js\nconst settings = { message: &quot;Xin ch\u00e0o, Frontend Du K\u00fd&quot; };\nconsole.log(settings.message);\n\n\/\/ =&gt; &#039;Xin ch\u00e0o, Frontend Du K\u00fd&#039; \u0111\u01b0\u1ee3c in ra khi \u1ee9ng d\u1ee5ng ch\u1ea1y<\/code><\/pre>\n<p>Khi c\u00f3 \u0111\u01b0\u1ee3c bundler ho\u00e0n ch\u1ec9nh, c\u00f4ng vi\u1ec7c ti\u1ebfp theo c\u1ee7a team l\u00e0 l\u00e0m sao sinh ra \u0111\u01b0\u1ee3c m\u1ed9t URL duy nh\u1ea5t cho t\u1eebng website c\u1ee7a kh\u00e1ch nh\u01b0ng v\u1eabn \u0111\u1ea3m b\u1ea3o \u0111\u01b0\u1ee3c khi copy URL \u0111\u00f3 qua trang kh\u00e1c th\u00ec \u1ee9ng d\u1ee5ng kh\u00f4ng ch\u1ea1y \u0111\u01b0\u1ee3c. Team c\u00f3 hai ph\u01b0\u01a1ng \u00e1n nh\u01b0 sau:<\/p>\n<ul>\n<li><strong>X\u00e1c th\u1ef1c b\u1eb1ng API \u1edf ph\u00eda frontend<\/strong>. Khi ch\u1ea1y, \u1ee9ng d\u1ee5ng s\u1ebd g\u1eedi m\u1ed9t d\u1ea1ng <code>id<\/code> c\u0169ng nh\u01b0 URL c\u1ee7a trang hi\u1ec7n t\u1ea1i, n\u1ebfu ph\u00eda backend ki\u1ec3m tra h\u1ee3p l\u1ec7 th\u00ec \u1ee9ng d\u1ee5ng m\u1edbi \u0111\u01b0\u1ee3c ph\u00e9p ch\u1ea1y ti\u1ebfp. \u01afu \u0111i\u1ec3m c\u1ee7a c\u00e1ch n\u00e0y l\u00e0 vi\u1ec7c sinh script URL kh\u00e1 d\u1ec5 d\u00e0ng, ch\u1ec9 c\u1ea7n id c\u1ee7a kh\u00e1ch h\u00e0ng th\u00f4i c\u0169ng \u0111\u1ee7 x\u00e1c th\u1ef1c r\u1ed3i. Khuy\u1ebft \u0111i\u1ec3m l\u00e0 ph\u00eda backend ph\u1ea3i ch\u1ecbu t\u1ea3i th\u00eam ph\u1ea7n API x\u00e1c th\u1ef1c. Ngo\u00e0i ra, trong tr\u01b0\u1eddng h\u1ee3p \u1ee9ng d\u1ee5ng kh\u00f4ng h\u1ee3p l\u1ec7, script v\u1eabn s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i v\u00e0 ch\u1ea1y khi\u1ebfn cho hi\u1ec7u n\u0103ng c\u1ee7a website gi\u1ea3m \u0111i<\/li>\n<li><strong>X\u00e1c th\u1ef1c tr\u1ef1c ti\u1ebfp \u1edf ph\u00eda backend<\/strong>. Backend s\u1ebd th\u1ef1c hi\u1ec7n x\u00e1c th\u1ef1c ngay khi nh\u1eadn \u0111\u01b0\u1ee3c request t\u1eeb ph\u00eda website c\u1ee7a kh\u00e1ch. \u01afu \u0111i\u1ec3m c\u1ee7a c\u00e1ch n\u00e0y l\u00e0 ch\u1eb7n ngay t\u1eeb ph\u00eda backend, kh\u00f4ng cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng c\u00f3 c\u01a1 h\u1ed9i &quot;cheat&quot; \u1edf ph\u00eda frontend. Khuy\u1ebft \u0111i\u1ec3m l\u00e0 ph\u00eda backend c\u1ea7n c\u00f3 c\u01a1 ch\u1ebf sinh URL l\u00e0m sao \u0111\u1ec3 kh\u00f4ng ph\u1ea3i truy xu\u1ea5t th\u00f4ng tin \u1ee9ng d\u1ee5ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng m\u1ed7i khi x\u00e1c th\u1ef1c<\/li>\n<\/ul>\n<p>Th\u1ea3o lu\u1eadn m\u1ed9t h\u1ed3i l\u00e2u th\u00ec team ch\u1ecdn ph\u01b0\u01a1ng \u00e1n th\u1ee9 hai, x\u00e1c th\u1ef1c \u1edf ph\u00eda backend. Team tri\u1ec3n khai nh\u01b0 sau:<\/p>\n<ul>\n<li>Bu\u1ed9c kh\u00e1ch h\u00e0ng nh\u1eadp tr\u01b0\u1edbc URL khi c\u00e0i \u0111\u1eb7t \u1ee9ng d\u1ee5ng thay v\u00ec c\u00e0i \u0111\u1eb7t r\u1ed3i m\u1edbi nh\u1eadp URL c\u1ee7a trang mu\u1ed1n ch\u1ea1y<\/li>\n<li>S\u1eed d\u1ee5ng th\u00f4ng tin URL \u0111\u00e3 nh\u1eadp, hash URL v\u00e0 \u0111\u00ednh k\u00e8m v\u00e0o script URL c\u1ee7a kh\u00e1ch. Vd: <code>https:\/\/shop.dev\/sales-001<\/code> s\u1ebd c\u00f3 URL l\u00e0 <code>https:\/\/cdn.egany.com\/bundles\/abc-xyz-123<\/code><\/li>\n<\/ul>\n<p>Do c\u01a1 ch\u1ebf hash l\u00e0 m\u1ed9t chi\u1ec1u (ch\u1ec9 c\u00f3 th\u1ec3 hash t\u1eeb <code>1<\/code> qua <code>abc<\/code> ch\u1ee9 kh\u00f4ng th\u1ec3 \u0111i ng\u01b0\u1ee3c l\u1ea1i t\u1eeb <code>abc<\/code> ra <code>1<\/code>) n\u00ean bundler b\u00e2y gi\u1edd s\u1ebd \u0111\u1ea3m nh\u1eadn lu\u00f4n vi\u1ec7c x\u00e1c th\u1ef1c script URL. \u0110i\u1ec1u n\u00e0y khi\u1ebfn team kh\u00e1 lo ng\u1ea1i v\u1ec1 kh\u1ea3 n\u0103ng ch\u1ecbu t\u1ea3i c\u1ee7a server. Tuy nhi\u00ean, \u01b0u ti\u00ean l\u1edbn nh\u1ea5t l\u00fac b\u1ea5y gi\u1edd v\u1eabn l\u00e0 vi\u1ec7c x\u00e2y d\u1ef1ng MVP (Minimum Viable Product) \u0111\u1ec3 c\u00f3 th\u1ec3 \u0111\u00e1nh gi\u00e1 t\u00ednh kh\u1ea3 thi c\u1ee7a gi\u1ea3i ph\u00e1p.<\/p>\n<p>Ban \u0111\u1ea7u, team d\u1ef1 \u0111\u1ecbnh s\u1ebd t\u1eadn d\u1ee5ng h\u1ec7 th\u1ed1ng c\u00f3 s\u1eb5n v\u00e0 ch\u1ec9 b\u1ed5 sung th\u00eam bundler service m\u00e0 th\u00f4i. Tuy nhi\u00ean, do t\u00ednh \u1ed5n \u0111\u1ecbnh c\u1ee7a CPA ch\u01b0a cao n\u00ean team quy\u1ebft \u0111\u1ecbnh x\u00e2y d\u1ef1ng m\u1ed9t h\u1ec7 th\u1ed1ng ri\u00eang bi\u1ec7t v\u1edbi h\u1ec7 th\u1ed1ng hi\u1ec7n t\u1ea1i \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng vi\u1ec7c ph\u00e1t tri\u1ec3n CPA s\u1ebd kh\u00f4ng \u1ea3nh h\u01b0\u1edfng t\u1edbi h\u1ec7 th\u1ed1ng hi\u1ec7n t\u1ea1i. Vi\u1ec7c n\u00e0y m\u1ea5t kh\u00e1 nhi\u1ec1u th\u1eddi gian v\u00e0 c\u00f4ng s\u1ee9c c\u1ee7a team nh\u01b0ng d\u01b0\u1edbi g\u00f3c nh\u00ecn c\u1ee7a m\u00ecnh th\u00ec vi\u1ec7c x\u1eed l\u00fd l\u1ed7i xung \u0111\u1ed9t gi\u1eefa h\u1ec7 th\u1ed1ng c\u0169 v\u00e0 m\u1edbi c\u00f2n m\u1ea5t nhi\u1ec1u th\u1eddi gian h\u01a1n n\u1eefa.<\/p>\n<h2>R\u01b0\u1ee3u c\u0169<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/09\/ruou-cu.jpg\" alt=\"R\u01b0\u1ee3u c\u0169\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/14132446-Vectober-07-Fancy\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/14132446-Vectober-07-Fancy<\/a><\/p>\n<\/blockquote>\n<p>B\u00ean tr\u00ean l\u00e0 g\u00f3c nh\u00ecn t\u1ed5ng quan v\u1ec1 h\u1ec7 th\u1ed1ng. Li\u1ec7u vi\u1ec7c thay \u0111\u1ed5i h\u1ec7 th\u1ed1ng c\u00f3 \u1ea3nh h\u01b0\u1edfng t\u1edbi h\u01b0\u1edbng ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng m\u00e0 team v\u1eabn \u0111ang l\u00e0m hay kh\u00f4ng? C\u00e2u tr\u1ea3 l\u1eddi t\u1ea5t nhi\u00ean l\u00e0 c\u00f3 r\u1ed3i. Tuy nhi\u00ean, team v\u1eabn lu\u00f4n h\u01b0\u1edbng t\u1edbi vi\u1ec7c h\u1ea1n ch\u1ebf t\u1ed1i \u0111a thay \u0111\u1ed5i v\u1ec1 c\u1ea5u tr\u00fac \u1ee9ng d\u1ee5ng \u0111\u1ec3 tr\u00e1nh vi\u1ec7c ph\u1ea3i ph\u00e1t tri\u1ec3n song song hai phi\u00ean b\u1ea3n kh\u00e1c nhau c\u1ee7a c\u00f9ng m\u1ed9t \u1ee9ng d\u1ee5ng.<\/p>\n<p>V\u1ec1 l\u00fd thuy\u1ebft l\u00e0 v\u1eady, tuy nhi\u00ean do d\u1ef1 \u00e1n v\u1eabn mang t\u00ednh th\u1eed nghi\u1ec7m n\u00ean team ch\u01b0a ti\u1ebfn h\u00e0nh chuy\u1ec3n \u0111\u1ed5i c\u00e1c \u1ee9ng d\u1ee5ng c\u00f3 s\u1eb5n. Thay v\u00e0o \u0111\u00f3, team s\u1ebd ph\u00e1t tri\u1ec3n m\u1ed9t \u1ee9ng d\u1ee5ng m\u1edbi v\u1edbi t\u00ean g\u1ecdi l\u00e0 <a href=\"https:\/\/docs.egany.com\/cross-platform\/ega-shop\">egaShop<\/a>. egaShop s\u1ebd l\u00e0 ti\u1ec1n \u0111\u1ec1 \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i c\u00e1c \u1ee9ng d\u1ee5ng sau n\u00e0y.<\/p>\n<p>Nh\u01b0 nh\u1eefng \u1ee9ng d\u1ee5ng c\u0169, egaShop v\u1eabn:<\/p>\n<ul>\n<li><strong>H\u1ed7 tr\u1ee3 website b\u00e1n h\u00e0ng<\/strong>. M\u1ee5c \u0111\u00edch c\u1ee7a egaShop n\u00f3i ri\u00eang v\u00e0 c\u00e1c \u1ee9ng d\u1ee5ng kh\u00e1c t\u1ea1i CPA n\u00f3i chung v\u1eabn lu\u00f4n l\u00e0 vi\u1ec7c b\u1ed5 sung t\u00ednh n\u0103ng, t\u0103ng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng v\u00e0 t\u0103ng t\u1ec9 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i cho website<\/li>\n<li><strong>Core v\u00e0 Settings<\/strong>. Core v\u00e0 settings v\u1eabn l\u00e0 hai th\u00e0nh ph\u1ea7n ch\u00ednh c\u1ee7a egaShop. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t duy nh\u1ea5t l\u00e0 c\u00e1ch t\u1ed5 ch\u1ee9c thi\u1ebft l\u1eadp t\u1eeb file s\u1ebd chuy\u1ec3n th\u00e0nh d\u1eef li\u1ec7u t\u1ea1i database<\/li>\n<\/ul>\n<p>V\u1edbi hai l\u00fd do tr\u00ean, vi\u1ec7c ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng g\u1ea7n nh\u01b0 kh\u00f4ng c\u00f3 g\u00ec thay \u0111\u1ed5i, n\u1ebfu kh\u00f4ng mu\u1ed1n n\u00f3i l\u00e0 c\u00f3 ph\u1ea7n t\u1ef1 do h\u01a1n v\u00ec \u1ee9ng d\u1ee5ng b\u00e2y gi\u1edd c\u00f3 th\u1ec3 ch\u1ea1y \u0111\u1ed9c l\u1eadp m\u00e0 kh\u00f4ng h\u1ec1 ph\u1ee5 thu\u1ed9c v\u00e0o platform. Developer c\u00f3 quy\u1ec1n quy\u1ebft \u0111\u1ecbnh c\u00f4ng ngh\u1ec7 m\u00ecnh mu\u1ed1n s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng. \u0110\u00f3 c\u00f3 th\u1ec3 l\u00e0 React, Vue, Svelte ho\u1eb7c \u0111\u01a1n gi\u1ea3n l\u00e0 JavaScript thu\u1ea7n t\u00fay.<\/p>\n<p>Tuy n\u00f3i l\u00e0 t\u1ef1 do c\u00f4ng ngh\u1ec7 nh\u01b0ng team v\u1eabn g\u1eb7p c\u00e1c v\u1ea5n \u0111\u1ec1 sau:<\/p>\n<ul>\n<li><strong>K\u00edch th\u01b0\u1edbc bundle l\u1edbn<\/strong>. K\u00edch th\u01b0\u1edbc c\u1ee7a bundle khi c\u00e0i \u0111\u1eb7t nhi\u1ec1u \u1ee9ng d\u1ee5ng l\u00e0 r\u1ea5t l\u1edbn. L\u00fd do l\u00e0 khi \u0111\u01b0\u1ee3c build ri\u00eang, c\u00e1c \u1ee9ng d\u1ee5ng s\u1ebd kh\u00f4ng s\u1eed d\u1ee5ng l\u1ea1i ph\u1ea7n chung m\u00e0 m\u00ecnh c\u00f3, v\u00ed d\u1ee5 nh\u01b0 React runtime. Vi\u1ec7c n\u00e0y d\u1eabn \u0111\u1ebfn code d\u01b0 th\u1eeba kh\u00e1 nhi\u1ec1u n\u1ebfu c\u00f3 hai \u1ee9ng d\u1ee5ng c\u00f9ng d\u00f9ng m\u1ed9t c\u00f4ng ngh\u1ec7<\/li>\n<li><strong>Gi\u1edbi h\u1ea1n \u0111\u1ea7u v\u00e0o<\/strong>. \u0110\u1ea7u v\u00e0o (input) c\u1ee7a bundler hi\u1ec7n t\u1ea1i ch\u1ec9 h\u1ed7 tr\u1ee3 m\u1ed9t file JavaScript duy nh\u1ea5t. \u0110i\u1ec1u n\u00e0y ph\u1ea7n n\u00e0o c\u0169ng gi\u1edbi h\u1ea1n developer v\u1ec1 c\u00f4ng ngh\u1ec7 s\u1eed d\u1ee5ng \u0111\u1ec3 g\u1ed9p chung JS v\u00e0 CSS \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o \u0111\u1ea7u ra lu\u00f4n l\u00e0 m\u1ed9t file JS<\/li>\n<\/ul>\n<p>R\u1ea5t may m\u1eafn l\u00e0 team t\u00ecm ra \u0111\u01b0\u1ee3c c\u00f4ng ngh\u1ec7 ph\u00f9 h\u1ee3p n\u00ean ph\u1ea7n n\u00e0o \u0111\u00f3 gi\u1ea3i quy\u1ebft \u0111\u01b0\u1ee3c hai v\u1ea5n \u0111\u1ec1 tr\u00ean. Tuy gi\u1ea3i ph\u00e1p n\u00e0y v\u1eabn ch\u01b0a tri\u1ec7t \u0111\u1ec3 nh\u01b0ng n\u00f3 v\u1eabn \u0111\u00e1p \u1ee9ng t\u1ed1t \u0111\u01b0\u1ee3c nhu c\u1ea7u c\u1ee7a team.<\/p>\n<h2>T\u1ea1m k\u1ebft<\/h2>\n<p>G\u1ecdi CPA l\u00e0 b\u00ecnh m\u1edbi, r\u01b0\u1ee3u c\u0169 kh\u00f4ng h\u1ec1 sai. Nh\u1edd nh\u1eefng n\u1ec1n t\u1ea3ng c\u00f3 \u0111\u01b0\u1ee3c \u1edf EGANY Apps, team ch\u1ec9 c\u1ea7n \u0111\u01b0a ra m\u00f4 h\u00ecnh \u1ee9ng d\u1ee5ng m\u1edbi l\u00e0 g\u1ea7n nh\u01b0 \u0111\u00e3 ho\u00e0n th\u00e0nh 50% c\u00f4ng vi\u1ec7c r\u1ed3i. D\u00f9 v\u1eabn g\u1eb7p m\u1ed9t ch\u00fat kh\u00f3 kh\u0103n khi b\u1eaft \u0111\u1ea7u nh\u01b0ng so v\u1edbi EGANY Apps th\u00ec v\u1eabn d\u1ec5 d\u00e0ng h\u01a1n nhi\u1ec1u.<\/p>\n<p>\u1ede t\u1eadp sau, m\u00ecnh s\u1ebd chia s\u1ebb v\u1edbi c\u00e1c b\u1ea1n m\u1ed9t s\u1ed1 c\u00f4ng ngh\u1ec7 team l\u1ef1a ch\u1ecdn \u0111\u1ec3 tri\u1ec3n khai d\u1ef1 \u00e1n CPA. Vi\u1ec7c l\u1ef1a ch\u1ecdn c\u00f4ng ngh\u1ec7 s\u1ebd \u0111\u00f3ng vai tr\u00f2 quy\u1ebft \u0111\u1ecbnh trong vi\u1ec7c ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng v\u1ec1 sau &#8211; vi\u1ec7c m\u00e0 EGANY \u0111\u00e3 kh\u00f4ng l\u00e0m t\u1ed1t trong giai \u0111o\u1ea1n n\u00e0y.<\/p>\n<p>H\u1eb9n g\u1eb7p c\u00e1c b\u1ea1n \u1edf t\u1eadp <strong>Frontend Du K\u00fd<\/strong> sau. Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Frontend Du K\u00fd m\u00f9a \u0111\u1ea7u ti\u00ean k\u1ebft th\u00fac v\u1edbi s\u1ef1 \u1ed5n \u0111\u1ecbnh c\u1ee7a EGANY Apps. \u1ede m\u00f9a m\u1edbi, m\u00ecnh s\u1ebd c\u00f9ng c\u00e1c b\u1ea1n kh\u00e1m ph\u00e1 qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n Cross-platform Apps &#8211; m\u1ed9t d\u1ef1 \u00e1n b\u1eaft \u0111\u1ea7u t\u1eeb v\u1ea1ch \u0111\u00edch c\u1ee7a EGANY. N\u1ebfu b\u1ea1n ch\u01b0a \u0111\u1ecdc m\u00f9a 1, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc t\u1ea1i \u0111\u00e2y. Gi\u1edbi thi\u1ec7u Cross-platform Apps s\u1ebd \u0111\u01b0\u1ee3c vi\u1ebft t\u1eaft b\u1eb1ng CPA \u0111\u1ec3 thu\u1eadn ti\u1ec7n cho ng\u01b0\u1eddi vi\u1ebft b\u00e0i M\u1ed9t ng\u00e0y \u0111\u1eb9p tr\u1eddi, khi \u0111ang ph\u01a1i \u0111\u1ed3 tr\u00ean s\u00e2n th\u01b0\u1ee3ng th\u00ec b\u1ed7ng d\u01b0ng c\u00f3 s\u00e0o qu\u1ea7n \u00e1o r\u01a1i v\u00e0o \u0111\u1ea7u s\u1ebfp. S\u1ebfp \u0111\u1eb7t c\u00e2u h\u1ecfi t\u1ea1i sao s\u00e0o<\/p>\n","protected":false},"author":2,"featured_media":975,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,1],"tags":[111,110,109,60,112,29,90],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/968"}],"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=968"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/968\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/975"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}