{"id":11973,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc)"},"content":{"rendered":"<p>C\u00e1c\u00a0<strong>m\u00f4 h\u00ecnh C4<\/strong>, \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Simon Brown, l\u00e0 m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, ph\u00e2n c\u1ea5p v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi nh\u00e0 ph\u00e1t tri\u1ec3n \u0111\u1ec3 tr\u1ef1c quan h\u00f3a ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m. N\u00f3 s\u1eed d\u1ee5ng b\u1ed1n c\u1ea5p \u0111\u1ed9 tr\u1eebu t\u01b0\u1ee3ng (do \u0111\u00f3 g\u1ecdi l\u00e0 \u201cC4\u201d) \u0111\u1ec3 m\u00f4 t\u1ea3 m\u1ed9t h\u1ec7 th\u1ed1ng t\u1eeb c\u00e1i nh\u00ecn t\u1ed5ng quan c\u1ea5p cao nh\u1ea5t cho \u0111\u1ebfn chi ti\u1ebft c\u1ea5p m\u00e3 ngu\u1ed3n:<\/p>\n<ol>\n<li>\n<p><strong>B\u1ed1i c\u1ea3nh H\u1ec7 th\u1ed1ng<\/strong>\u00a0(C\u1ea5p \u0111\u1ed9 1) \u2013 T\u1ed5ng quan l\u1edbn: h\u1ec7 th\u1ed1ng v\u00e0 ng\u01b0\u1eddi d\u00f9ng\/\u0111i\u1ec3m ph\u1ee5 thu\u1ed9c b\u00ean ngo\u00e0i c\u1ee7a n\u00f3.<\/p>\n<\/li>\n<li>\n<p><strong>C\u00e1c th\u00e0nh ph\u1ea7n<\/strong>\u00a0(C\u1ea5p \u0111\u1ed9 2) \u2013 C\u00e1c l\u1ef1a ch\u1ecdn c\u00f4ng ngh\u1ec7 c\u1ea5p cao v\u00e0 tr\u00e1ch nhi\u1ec7m.<\/p>\n<\/li>\n<li>\n<p><strong>C\u00e1c th\u00e0nh ph\u1ea7n<\/strong>\u00a0(C\u1ea5p \u0111\u1ed9 3) \u2013 C\u00e1c kh\u1ed1i x\u00e2y d\u1ef1ng logic ch\u00ednh b\u00ean trong m\u1ed9t th\u00e0nh ph\u1ea7n.<\/p>\n<\/li>\n<li>\n<p><strong>M\u00e3 ngu\u1ed3n<\/strong>\u00a0(C\u1ea5p \u0111\u1ed9 4) \u2013 Chi ti\u1ebft t\u00f9y ch\u1ecdn \u1edf c\u1ea5p \u0111\u1ed9 l\u1edbp ho\u1eb7c c\u1ea5u tr\u00fac m\u00e3 ngu\u1ed3n.<\/p>\n<\/li>\n<\/ol>\n<p>N\u00f3 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi ba lo\u1ea1i s\u01a1 \u0111\u1ed3 b\u1ed5 sung:<\/p>\n<ul>\n<li>\n<p><strong>B\u1ea3n \u0111\u1ed3 H\u1ec7 th\u1ed1ng<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u0110\u1ed9ng<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Tri\u1ec3n khai<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">M\u00f4 h\u00ecnh n\u00e0y \u0111\u1ed9c l\u1eadp v\u1edbi k\u00fd hi\u1ec7u (b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng b\u1ea5t k\u1ef3 c\u00f4ng c\u1ee5 v\u1ebd s\u01a1 \u0111\u1ed3 n\u00e0o) v\u00e0 t\u1eadp trung v\u00e0o s\u1ef1 r\u00f5 r\u00e0ng, nh\u1ea5t qu\u00e1n v\u00e0 chi ti\u1ebft ph\u00f9 h\u1ee3p v\u1edbi \u0111\u1ed1i t\u01b0\u1ee3ng ng\u01b0\u1eddi xem. N\u00f3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng r\u1ed9ng r\u00e3i v\u00ec tr\u00e1nh \u0111\u01b0\u1ee3c c\u00e1c s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac d\u1ea1ng \u201cb\u00f3ng l\u1ed9n x\u1ed9n\u201d v\u00e0 c\u00f3 th\u1ec3 m\u1edf r\u1ed9ng t\u1eeb b\u1ea3n ph\u00e1c th\u1ea3o tr\u00ean b\u1ea3ng tr\u1eafng \u0111\u1ebfn t\u00e0i li\u1ec7u h\u00f3a t\u1ef1 \u0111\u1ed9ng.<\/p>\n<p>\u0110\u1ed1i v\u1edbi nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p n\u00e0y\u00a0<strong>nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p nh\u1eafm m\u1ee5c ti\u00eau<\/strong>, ch\u00fang t\u00f4i s\u1eed d\u1ee5ng v\u00ed d\u1ee5 chu\u1ea9n t\u1eeb trang web ch\u00ednh th\u1ee9c c\u1ee7a C4:\u00a0<strong>H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn<\/strong>\u00a0cho ng\u00e2n h\u00e0ng gi\u1ea3 t\u01b0\u1edfng \u201cBig Bank plc\u201d. M\u1ee5c ti\u00eau kinh doanh l\u00e0 cho ph\u00e9p kh\u00e1ch h\u00e0ng c\u00e1 nh\u00e2n xem t\u00e0i kho\u1ea3n v\u00e0 th\u1ef1c hi\u1ec7n thanh to\u00e1n tr\u1ef1c tuy\u1ebfn, \u0111\u1ed3ng th\u1eddi t\u00edch h\u1ee3p v\u1edbi c\u00e1c h\u1ec7 th\u1ed1ng c\u1ed1t l\u00f5i hi\u1ec7n c\u00f3 c\u1ee7a ng\u00e2n h\u00e0ng.<\/p>\n<p>Ch\u00fang t\u00f4i s\u1ebd \u0111i qua t\u1eebng c\u1ea5p \u0111\u1ed9\u00a0<strong>m\u1ed7i c\u1ea5p \u0111\u1ed9<\/strong>\u00a0v\u1edbi:<\/p>\n<ul>\n<li>\n<p>M\u1ee5c \u0111\u00edch v\u00e0 \u0111\u1ed1i t\u01b0\u1ee3ng ng\u01b0\u1eddi xem<\/p>\n<\/li>\n<li>\n<p>C\u00e1c y\u1ebfu t\u1ed1 ch\u00ednh + tr\u00e1ch nhi\u1ec7m<\/p>\n<\/li>\n<li>\n<p>C\u00e1c m\u1ed1i quan h\u1ec7<\/p>\n<\/li>\n<li>\n<p>M\u1ed9t s\u01a1 \u0111\u1ed3 C4 PlantUML s\u1eb5n s\u00e0ng s\u1eed d\u1ee5ng\u00a0<strong>s\u01a1 \u0111\u1ed3 C4 PlantUML<\/strong>(PlantUML h\u1ed7 tr\u1ee3 c\u00fa ph\u00e1p C4 v\u00e0 hi\u1ec3n th\u1ecb \u0111\u1eb9p m\u1eaft trong h\u1ea7u h\u1ebft c\u00e1c tr\u00ecnh xem Markdown)<\/p>\n<\/li>\n<li>\n<p>L\u00fd do v\u00e0 c\u00e1c quy\u1ebft \u0111\u1ecbnh ch\u00ednh<\/p>\n<\/li>\n<li>\n<p>L\u00e0m th\u1ebf n\u00e0o s\u01a1 \u0111\u1ed3 h\u1ed7 tr\u1ee3 c\u00e1c b\u00ean li\u00ean quan<\/p>\n<\/li>\n<\/ul>\n<h3>B\u01b0\u1edbc 1: X\u00e1c \u0111\u1ecbnh ph\u1ea1m vi v\u00e0 t\u1ea1o s\u01a1 \u0111\u1ed3 b\u1ed1i c\u1ea3nh h\u1ec7 th\u1ed1ng (M\u1ee9c \u0111\u1ed9 1)<\/h3>\n<p><strong>M\u1ee5c \u0111\u00edch<\/strong>: Hi\u1ec3n th\u1ecb c\u00e1ch h\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn m\u1edbi ph\u00f9 h\u1ee3p v\u1edbi th\u1ebf gi\u1edbi. \u0110\u1ed1i t\u01b0\u1ee3ng: c\u00e1c b\u00ean li\u00ean quan kinh doanh, ng\u01b0\u1eddi kh\u00f4ng chuy\u00ean k\u1ef9 thu\u1eadt, th\u00e0nh vi\u00ean m\u1edbi trong nh\u00f3m.<\/p>\n<p><strong>C\u00e1c th\u00e0nh ph\u1ea7n<\/strong>\u00a0(t\u1eeb v\u00ed d\u1ee5 ch\u00ednh th\u1ee9c):<\/p>\n<ul>\n<li>\n<p><strong>Kh\u00e1ch h\u00e0ng Ng\u00e2n h\u00e0ng C\u00e1 nh\u00e2n<\/strong>\u00a0(Ng\u01b0\u1eddi) \u2013 M\u1ed9t kh\u00e1ch h\u00e0ng c\u00f3 m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng c\u00e1 nh\u00e2n.<\/p>\n<\/li>\n<li>\n<p><strong>H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn<\/strong>\u00a0(H\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m) \u2013 H\u1ec7 th\u1ed1ng m\u1edbi m\u00e0 ch\u00fang ta \u0111ang x\u00e2y d\u1ef1ng.<\/p>\n<\/li>\n<li>\n<p><strong>H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Ch\u00ednh<\/strong>\u00a0(H\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m, hi\u1ec7n c\u00f3) \u2013 M\u00e1y ch\u1ee7 ch\u00ednh x\u1eed l\u00fd d\u1eef li\u1ec7u kh\u00e1ch h\u00e0ng, t\u00e0i kho\u1ea3n v\u00e0 giao d\u1ecbch.<\/p>\n<\/li>\n<li>\n<p><strong>H\u1ec7 th\u1ed1ng Email<\/strong>\u00a0(H\u1ec7 th\u1ed1ng ph\u1ea7n m\u1ec1m, b\u00ean ngo\u00e0i) \u2013 D\u1ecbch v\u1ee5 Email \u0110\u01a1n gi\u1ea3n c\u1ee7a Amazon Web Services (AWS SES) \u0111\u1ec3 g\u1eedi x\u00e1c nh\u1eadn.<\/p>\n<\/li>\n<\/ul>\n<p><strong>C\u00e1c m\u1ed1i quan h\u1ec7<\/strong>:<\/p>\n<ul>\n<li>\n<p>Kh\u00e1ch h\u00e0ng \u2192 s\u1eed d\u1ee5ng \u2192 H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (\u0111\u1ec3 xem t\u00e0i kho\u1ea3n v\u00e0 th\u1ef1c hi\u1ec7n thanh to\u00e1n)<\/p>\n<\/li>\n<li>\n<p>H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn \u2192 s\u1eed d\u1ee5ng \u2192 H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Ch\u00ednh (\u0111\u1ec3 x\u1eed l\u00fd d\u1eef li\u1ec7u t\u00e0i kho\u1ea3n v\u00e0 thanh to\u00e1n)<\/p>\n<\/li>\n<li>\n<p>H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn \u2192 g\u1eedi email th\u00f4ng qua \u2192 H\u1ec7 th\u1ed1ng Email<\/p>\n<\/li>\n<\/ul>\n<p>\u0110\u00e2y l\u00e0 s\u01a1 \u0111\u1ed3\u00a0<strong>S\u01a1 \u0111\u1ed3 b\u1ed1i c\u1ea3nh C4 c\u1ee7a PlantUML<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><code data-language=\"mermaid\"><\/code><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle S\u01a1 \u0111\u1ed3 B\u1ed1i c\u1ea3nh H\u1ec7 th\u1ed1ng (M\u1ee9c \u0111\u1ed9 1) cho H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\r\n\r\nPerson(customer, \"Kh\u00e1ch h\u00e0ng Ng\u00e2n h\u00e0ng C\u00e1 nh\u00e2n\", \"M\u1ed9t kh\u00e1ch h\u00e0ng c\u00f3 m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng c\u00e1 nh\u00e2n.\")\r\nSystem(internet_banking_system, \"H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\", \"H\u1ec7 th\u1ed1ng m\u1edbi \u0111\u1ec3 xem t\u00e0i kho\u1ea3n v\u00e0 th\u1ef1c hi\u1ec7n thanh to\u00e1n.\")\r\nSystem(core_banking_system, \"H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Ch\u00ednh\", \"M\u00e1y ch\u1ee7 ch\u00ednh hi\u1ec7n c\u00f3 x\u1eed l\u00fd d\u1eef li\u1ec7u kh\u00e1ch h\u00e0ng, t\u00e0i kho\u1ea3n v\u00e0 giao d\u1ecbch.\")\r\nSystem_Ext(email_system, \"H\u1ec7 th\u1ed1ng Email\", \"D\u1ecbch v\u1ee5 Email \u0110\u01a1n gi\u1ea3n c\u1ee7a Amazon Web Services (AWS SES) \u0111\u1ec3 g\u1eedi x\u00e1c nh\u1eadn.\")\r\n\r\nRel(customer, internet_banking_system, \"S\u1eed d\u1ee5ng\")\r\nRel(internet_banking_system, core_banking_system, \"S\u1eed d\u1ee5ng\")\r\nRel(internet_banking_system, email_system, \"G\u1eedi email th\u00f4ng qua\")\r\n\r\nLay_D(customer, internet_banking_system)\r\nLay_D(internet_banking_system, core_banking_system)\r\nLay_U(email_system, internet_banking_system)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>L\u00fd do v\u00e0 gi\u00e1 tr\u1ecb<\/strong>: S\u01a1 \u0111\u1ed3 duy nh\u1ea5t n\u00e0y ngay l\u1eadp t\u1ee9c tr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi \u201cCh\u00fang ta \u0111ang x\u00e2y d\u1ef1ng g\u00ec v\u00e0 ai l\u00e0 ng\u01b0\u1eddi m\u00e0 n\u00f3 giao ti\u1ebfp?\u201d N\u00f3 ng\u0103n ch\u1eb7n s\u1ef1 m\u1edf r\u1ed9ng ph\u1ea1m vi b\u1eb1ng c\u00e1ch l\u00e0m r\u00f5 c\u00e1c ph\u1ee5 thu\u1ed9c b\u00ean ngo\u00e0i. C\u00e1c b\u00ean li\u00ean quan kinh doanh y\u00eau th\u00edch n\u00f3 v\u00ec v\u1eabn ch\u01b0a c\u00f3 chi ti\u1ebft c\u00f4ng ngh\u1ec7 n\u00e0o.<\/p>\n<h3>B\u01b0\u1edbc 2: S\u01a1 \u0111\u1ed3 Container (M\u1ee9c \u0111\u1ed9 2)<\/h3>\n<p><strong>M\u1ee5c \u0111\u00edch<\/strong>: Thu nh\u1ecf v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c \u0111\u01a1n v\u1ecb tri\u1ec3n khai\/ch\u1ea1y \u0111\u01b0\u1ee3c ch\u00ednh (container) v\u00e0 c\u00e1c l\u1ef1a ch\u1ecdn c\u00f4ng ngh\u1ec7 c\u1ee7a ch\u00fang. \u0110\u1ed1i t\u01b0\u1ee3ng: ki\u1ebfn tr\u00fac s\u01b0, tr\u01b0\u1edfng nh\u00f3m ph\u00e1t tri\u1ec3n, nh\u00e2n vi\u00ean v\u1eadn h\u00e0nh.<\/p>\n<p><strong>C\u00e1c container b\u00ean trong H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>\u1ee8ng d\u1ee5ng Trang \u0110\u01a1n<\/strong>\u00a0(Tr\u00ecnh duy\u1ec7t web \u2013 JavaScript + Angular) \u2013 Giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng to\u00e0n di\u1ec7n cho ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn.<\/p>\n<\/li>\n<li>\n<p><strong>\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng<\/strong>\u00a0(Thi\u1ebft b\u1ecb di \u0111\u1ed9ng \u2013 Native iOS\/Android ho\u1eb7c React Native) \u2013 Ch\u1ee9c n\u0103ng h\u1ea1n ch\u1ebf cho vi\u1ec7c s\u1eed d\u1ee5ng khi di chuy\u1ec3n.<\/p>\n<\/li>\n<li>\n<p><strong>\u1ee8ng d\u1ee5ng API<\/strong>\u00a0(B\u00ean m\u00e1y ch\u1ee7 \u2013 Java + Spring Boot) \u2013 API JSON\/HTTPS \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng b\u1edfi c\u1ea3 hai giao di\u1ec7n ph\u00eda tr\u01b0\u1edbc.<\/p>\n<\/li>\n<li>\n<p><strong>C\u01a1 s\u1edf d\u1eef li\u1ec7u<\/strong>\u00a0(C\u01a1 s\u1edf d\u1eef li\u1ec7u quan h\u1ec7 \u2013 PostgreSQL) \u2013 L\u01b0u tr\u1eef d\u1eef li\u1ec7u phi\u00ean l\u00e0m vi\u1ec7c, c\u00e0i \u0111\u1eb7t ng\u01b0\u1eddi d\u00f9ng, t\u00f3m t\u1eaft t\u00e0i kho\u1ea3n \u0111\u00e3 \u0111\u01b0\u1ee3c l\u01b0u t\u1ea1m (d\u1eef li\u1ec7u c\u1ed1t l\u00f5i v\u1eabn n\u1eb1m tr\u00ean m\u00e1y ch\u1ee7 ch\u00ednh).<\/p>\n<\/li>\n<\/ul>\n<p><strong>C\u00e1c m\u1ed1i quan h\u1ec7 ch\u00ednh<\/strong>\u00a0(c\u00f9ng c\u00e1c h\u1ec7 th\u1ed1ng b\u00ean ngo\u00e0i nh\u01b0 M\u1ee9c 1):<\/p>\n<ul>\n<li>\n<p>SPA v\u00e0 \u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng \u2192 g\u1ecdi \u2192 \u1ee8ng d\u1ee5ng API<\/p>\n<\/li>\n<li>\n<p>\u1ee8ng d\u1ee5ng API \u2194 C\u01a1 s\u1edf d\u1eef li\u1ec7u<\/p>\n<\/li>\n<li>\n<p>\u1ee8ng d\u1ee5ng API \u2192 H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i v\u00e0 H\u1ec7 th\u1ed1ng Th\u01b0 \u0111i\u1ec7n t\u1eed<\/p>\n<\/li>\n<\/ul>\n<p><strong>S\u01a1 \u0111\u1ed3 Container C4 c\u1ee7a PlantUML<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml<\/p>\n<p>LAYOUT_TREN_XUONG()<br \/>\nLAYOUT_CO_CHU_GIAI_THICH()<\/p>\n<p>ti\u00eau \u0111\u1ec1 S\u01a1 \u0111\u1ed3 Container C4 cho H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn<\/p>\n<p>Person(khach_hang, \u201cKh\u00e1ch h\u00e0ng Ng\u00e2n h\u00e0ng C\u00e1 nh\u00e2n\u201d, \u201cM\u1ed9t kh\u00e1ch h\u00e0ng c\u00f3 m\u1ed9t ho\u1eb7c nhi\u1ec1u t\u00e0i kho\u1ea3n ng\u00e2n h\u00e0ng c\u00e1 nh\u00e2n.\u201d)<\/p>\n<p>System_Boundary(h\u1ec7_th\u1ed1ng_ng\u00e2n_h\u00e0ng_tr\u1ef1c_tuy\u1ebfn, \u201cH\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn\u201d, \u201cH\u1ec7 th\u1ed1ng m\u1edbi \u0111\u1ec3 xem t\u00e0i kho\u1ea3n v\u00e0 th\u1ef1c hi\u1ec7n thanh to\u00e1n.\u201d) {<br \/>\nContainer(spa, \u201c\u1ee8ng d\u1ee5ng Trang \u0110\u01a1n\u201d, \u201cJavaScript + Angular\u201d, \u201cGiao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng to\u00e0n di\u1ec7n cho ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn\u201d, $sprite=&#8221;angular&#8221;)<br \/>\nContainer(ung_dung_di_dong, \u201c\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng\u201d, \u201ciOS\/Android (React Native)\u201d, \u201cCh\u1ee9c n\u0103ng h\u1ea1n ch\u1ebf cho vi\u1ec7c s\u1eed d\u1ee5ng khi di chuy\u1ec3n\u201d, $sprite=&#8221;react&#8221;)<br \/>\nContainer(ung_dung_api, \u201c\u1ee8ng d\u1ee5ng API\u201d, \u201cJava + Spring Boot\u201d, \u201cAPI JSON\/HTTPS \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng b\u1edfi c\u1ea3 hai giao di\u1ec7n ph\u00eda tr\u01b0\u1edbc\u201d, $sprite=&#8221;java&#8221;)<br \/>\nContainerDb(database, \u201cC\u01a1 s\u1edf d\u1eef li\u1ec7u\u201d, \u201cPostgreSQL\u201d, \u201cL\u01b0u tr\u1eef d\u1eef li\u1ec7u phi\u00ean l\u00e0m vi\u1ec7c, t\u00f9y ch\u1ecdn ng\u01b0\u1eddi d\u00f9ng, t\u00f3m t\u1eaft t\u00e0i kho\u1ea3n \u0111\u00e3 \u0111\u01b0\u1ee3c l\u01b0u t\u1ea1m\u201d, $sprite=\u201dpostgresql\u201d)<br \/>\n}<\/p>\n<p>System(core_banking_system, \u201cH\u1ec7 th\u1ed1ng ng\u00e2n h\u00e0ng c\u1ed1t l\u00f5i\u201d, \u201cM\u00e1y ch\u1ee7 ch\u00ednh hi\u1ec7n c\u00f3 x\u1eed l\u00fd d\u1eef li\u1ec7u kh\u00e1ch h\u00e0ng, t\u00e0i kho\u1ea3n v\u00e0 giao d\u1ecbch.\u201d)<br \/>\nSystem_Ext(email_system, \u201cH\u1ec7 th\u1ed1ng Email\u201d, \u201cD\u1ecbch v\u1ee5 G\u1eedi Email \u0110\u01a1n gi\u1ea3n c\u1ee7a Amazon Web Services (AWS SES) \u0111\u1ec3 g\u1eedi x\u00e1c nh\u1eadn.\u201d)<\/p>\n<p>\u2018 Quan h\u1ec7<br \/>\nRel(customer, spa, \u201cS\u1eed d\u1ee5ng\u201d, \u201cHTTPS\u201d)<br \/>\nRel(customer, mobile_app, \u201cS\u1eed d\u1ee5ng\u201d, \u201cHTTPS\u201d)<br \/>\nRel(spa, api_app, \u201cG\u1ecdi\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(mobile_app, api_app, \u201cG\u1ecdi\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api_app, database, \u201c\u0110\u1ecdc t\u1eeb v\u00e0 ghi v\u00e0o\u201d, \u201cJDBC\/SQL\u201d)<br \/>\nRel(api_app, core_banking_system, \u201cTruy v\u1ea5n \/ C\u1eadp nh\u1eadt\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api_app, email_system, \u201cG\u1eedi email qua\u201d, \u201cHTTPS\u201d)<\/p>\n<p>\u2018 G\u1ee3i \u00fd b\u1ed1 c\u1ee5c (t\u00f9y ch\u1ecdn \u2013 gi\u00fap PlantUML s\u1eafp x\u1ebfp c\u00e1c th\u00e0nh ph\u1ea7n t\u1ed1t h\u01a1n)<br \/>\nLay_D(customer, internet_banking_system)<br \/>\nLay_D(internet_banking_system, core_banking_system)<br \/>\nLay_U(email_system, internet_banking_system)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>L\u00fd do<\/strong>: Ch\u00fang t\u00f4i \u0111\u00e3 ch\u1ecdn m\u00f4 h\u00ecnh hi\u1ec7n \u0111\u1ea1i SPA + backend API cho web, \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng b\u1ea3n \u0111\u1ecba \u0111\u1ec3 t\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t, v\u00e0 gi\u1eef c\u01a1 s\u1edf d\u1eef li\u1ec7u nh\u1eb9 nh\u00e0ng (h\u1ea7u h\u1ebft d\u1eef li\u1ec7u n\u1eb1m trong m\u00e1y ch\u1ee7 ch\u00ednh c\u0169). S\u01a1 \u0111\u1ed3 n\u00e0y l\u00e0 ngu\u1ed3n duy nh\u1ea5t \u0111\u00e1ng tin c\u1eady cho c\u00e1c quy\u1ebft \u0111\u1ecbnh c\u00f4ng ngh\u1ec7 c\u1ea5p cao v\u00e0 gi\u00fap nh\u00f3m DevOps l\u00ean k\u1ebf ho\u1ea1ch h\u1ea1 t\u1ea7ng.<\/p>\n<h3>B\u01b0\u1edbc 3: S\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n (M\u1ee9c \u0111\u1ed9 3)<\/h3>\n<p><strong>M\u1ee5c \u0111\u00edch<\/strong>: Ph\u00f3ng to v\u00e0o m\u1ed9t container (th\u01b0\u1eddng l\u00e0 container ph\u1ee9c t\u1ea1p nh\u1ea5t \u2013 \u1ee8ng d\u1ee5ng API) v\u00e0 hi\u1ec3n th\u1ecb c\u00e1c th\u00e0nh ph\u1ea7n logic ch\u00ednh. \u0110\u1ed1i t\u01b0\u1ee3ng: c\u00e1c \u0111\u1ed9i ph\u00e1t tri\u1ec3n.<\/p>\n<p><strong>V\u00ed d\u1ee5: C\u00e1c th\u00e0nh ph\u1ea7n b\u00ean trong \u1ee8ng d\u1ee5ng API<\/strong>:<\/p>\n<ul>\n<li>\n<p>B\u1ed9 \u0111i\u1ec1u khi\u1ec3n T\u00e0i kho\u1ea3n (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>B\u1ed9 \u0111i\u1ec1u khi\u1ec3n X\u00e1c th\u1ef1c<\/p>\n<\/li>\n<li>\n<p>B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u0110\u1eb7t l\u1ea1i m\u1eadt kh\u1ea9u<\/p>\n<\/li>\n<li>\n<p>Th\u00e0nh ph\u1ea7n B\u1ea3o m\u1eadt (x\u1eed l\u00fd x\u00e1c th\u1ef1c, JWT, v.v.)<\/p>\n<\/li>\n<li>\n<p>Th\u00e0nh ph\u1ea7n Qu\u1ea3n l\u00fd T\u00e0i kho\u1ea3n (\u0111i\u1ec1u ph\u1ed1i c\u00e1c cu\u1ed9c g\u1ecdi \u0111\u1ebfn Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i)<\/p>\n<\/li>\n<li>\n<p>Th\u00e0nh ph\u1ea7n Th\u00f4ng b\u00e1o Email<\/p>\n<\/li>\n<\/ul>\n<p><strong>S\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n PlantUML C4<\/strong>\u00a0(\u0111\u01b0\u1ee3c t\u1eadp trung v\u00e0o \u1ee8ng d\u1ee5ng API):<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle S\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n cho H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn - \u1ee8ng d\u1ee5ng API\r\n\r\nContainer(spa, \"\u1ee8ng d\u1ee5ng Trang \u0110\u01a1n\", \"javascript v\u00e0 angular\", \"Cung c\u1ea5p t\u1ea5t c\u1ea3 c\u00e1c ch\u1ee9c n\u0103ng ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn cho kh\u00e1ch h\u00e0ng th\u00f4ng qua tr\u00ecnh duy\u1ec7t web c\u1ee7a h\u1ecd.\")\r\nContainer(ma, \"\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng\", \"Xamarin\", \"Cung c\u1ea5p m\u1ed9t t\u1eadp h\u1ee3p con h\u1ea1n ch\u1ebf c\u00e1c ch\u1ee9c n\u0103ng ng\u00e2n h\u00e0ng tr\u1ef1c tuy\u1ebfn cho kh\u00e1ch h\u00e0ng th\u00f4ng qua thi\u1ebft b\u1ecb di \u0111\u1ed9ng c\u1ee7a h\u1ecd.\")\r\nContainerDb(db, \"C\u01a1 s\u1edf d\u1eef li\u1ec7u\", \"S\u01a1 \u0111\u1ed3 C\u01a1 s\u1edf d\u1eef li\u1ec7u quan h\u1ec7\", \"L\u01b0u tr\u1eef th\u00f4ng tin \u0111\u0103ng k\u00fd ng\u01b0\u1eddi d\u00f9ng, th\u00f4ng tin x\u00e1c th\u1ef1c \u0111\u00e3 m\u00e3 h\u00f3a, nh\u1eadt k\u00fd truy c\u1eadp, v.v.\")\r\nSystem_Ext(mbs, \"H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Mainframe\", \"L\u01b0u tr\u1eef t\u1ea5t c\u1ea3 th\u00f4ng tin c\u1ed1t l\u00f5i v\u1ec1 kh\u00e1ch h\u00e0ng, t\u00e0i kho\u1ea3n, giao d\u1ecbch, v.v.\")\r\n\r\nContainer_Boundary(api, \"\u1ee8ng d\u1ee5ng API\") {\r\n    Component(accounts, \"B\u1ed9 \u0111i\u1ec1u khi\u1ec3n T\u00e0i kho\u1ea3n\", \"Spring MVC\", \"Cung c\u1ea5p t\u00f3m t\u1eaft t\u00e0i kho\u1ea3n v\u00e0 s\u1ed1 d\u01b0 cho kh\u00e1ch h\u00e0ng.\")\r\n    Component(auth, \"B\u1ed9 \u0111i\u1ec1u khi\u1ec3n X\u00e1c th\u1ef1c\", \"Spring MVC\", \"X\u1eed l\u00fd \u0111\u0103ng nh\u1eadp ng\u01b0\u1eddi d\u00f9ng, qu\u1ea3n l\u00fd phi\u00ean v\u00e0 t\u1ea1o token.\")\r\n    Component(reset, \"B\u1ed9 \u0111i\u1ec1u khi\u1ec3n \u0110\u1eb7t l\u1ea1i M\u1eadt kh\u1ea9u\", \"Spring MVC\", \"Cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng \u0111\u1eb7t l\u1ea1i m\u1eadt kh\u1ea9u th\u00f4ng qua email.\")\r\n    Component(security, \"Th\u00e0nh ph\u1ea7n B\u1ea3o m\u1eadt\", \"Spring Bean\", \"X\u1eed l\u00fd x\u00e1c th\u1ef1c, t\u1ea1o token JWT v\u00e0 m\u00e3 h\u00f3a m\u1eadt kh\u1ea9u.\")\r\n    Component(accountmgmt, \"Th\u00e0nh ph\u1ea7n Qu\u1ea3n l\u00fd T\u00e0i kho\u1ea3n\", \"Spring Bean\", \"\u0110i\u1ec1u ph\u1ed1i c\u00e1c cu\u1ed9c g\u1ecdi \u0111\u1ebfn h\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng C\u1ed1t l\u00f5i cho c\u00e1c thao t\u00e1c t\u00e0i kho\u1ea3n.\")\r\n    Component(email, \"Th\u00e0nh ph\u1ea7n Th\u00f4ng b\u00e1o Email\", \"Spring Bean\", \"G\u1eedi email \u0111\u1eb7t l\u1ea1i m\u1eadt kh\u1ea9u v\u00e0 email x\u00e1c minh t\u00e0i kho\u1ea3n th\u00f4ng qua SMTP.\")\r\n\r\n    Rel(accounts, security, \"S\u1eed d\u1ee5ng\")\r\n    Rel(auth, security, \"S\u1eed d\u1ee5ng\")\r\n    Rel(reset, security, \"S\u1eed d\u1ee5ng\")\r\n    Rel(accountmgmt, mbs, \"S\u1eed d\u1ee5ng\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"\u0110\u1ecdc\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"S\u1eed d\u1ee5ng\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"S\u1eed d\u1ee5ng\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"S\u1eed d\u1ee5ng\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"S\u1eed d\u1ee5ng\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"S\u1eed d\u1ee5ng\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"S\u1eed d\u1ee5ng\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>L\u00fd do<\/strong>: M\u1ee9c \u0111\u1ed9 n\u00e0y cho th\u1ea5y c\u00e1ch c\u00e1c tr\u00e1ch nhi\u1ec7m \u0111\u01b0\u1ee3c ph\u00e2n chia (t\u00e1ch bi\u1ec7t c\u00e1c v\u1ea5n \u0111\u1ec1) v\u00e0 gi\u00fap vi\u1ec7c \u0111\u01b0a c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n m\u1edbi v\u00e0o l\u00e0m vi\u1ec7c nhanh h\u01a1n nhi\u1ec1u. B\u1ea1n ch\u1ec9 v\u1ebd s\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n cho c\u00e1c container \u0111\u1ee7 ph\u1ee9c t\u1ea1p \u0111\u1ec3 x\u1ee9ng \u0111\u00e1ng v\u1edbi vi\u1ec7c l\u00e0m nh\u01b0 v\u1eady.<\/p>\n<h3>B\u01b0\u1edbc 4: S\u01a1 \u0111\u1ed3 M\u00e3 ngu\u1ed3n (M\u1ee9c \u0111\u1ed9 4) \u2013 T\u00f9y ch\u1ecdn<\/h3>\n<p><strong>M\u1ee5c \u0111\u00edch<\/strong>: Hi\u1ec3n th\u1ecb c\u1ea5u tr\u00fac b\u00ean trong c\u1ee7a m\u1ed9t th\u00e0nh ph\u1ea7n duy nh\u1ea5t (s\u01a1 \u0111\u1ed3 l\u1edbp, s\u01a1 \u0111\u1ed3 tu\u1ea7n t\u1ef1, v.v.). \u0110\u1ed1i t\u01b0\u1ee3ng: c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n \u0111ang l\u00e0m vi\u1ec7c tr\u00ean m\u00e3 ngu\u1ed3n \u0111\u00f3.<\/p>\n<p>V\u00ed d\u1ee5 cho th\u00e0nh ph\u1ea7n\u00a0<strong>B\u1ed9 \u0111i\u1ec1u khi\u1ec3n X\u00e1c th\u1ef1c<\/strong>th\u00e0nh ph\u1ea7n \u2013 m\u1ed9t s\u01a1 \u0111\u1ed3 l\u1edbp UML \u0111\u01a1n gi\u1ea3n trong PlantUML:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<p>@startuml<br \/>\nclassDiagram<\/p>\n<p>skinparam {<br \/>\nroundcorner 8<br \/>\nArrowColor #444444<br \/>\nArrowFontColor #444444<br \/>\nBorderColor #444444<\/p>\n<p>Class {<br \/>\nBorderColor #1A237E<br \/>\nBackgroundColor #E8EAF6<br \/>\nFontColor #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>class \u201cAuthenticationController\u201d {<br \/>\n+login(credentials)<br \/>\n+refreshToken()<br \/>\n}<\/p>\n<p>class \u201cJwtTokenProvider\u201d {<br \/>\n+generateToken(user)<br \/>+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201cUserRepository\u201d {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201cuses\u201d<br \/>\nAuthenticationController ..&gt; UserRepository : \u201cuses\u201d<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>Trong c\u00e1c d\u1ef1 \u00e1n th\u1ef1c t\u1ebf, b\u1ea1n th\u01b0\u1eddng b\u1ecf qua M\u1ee9c 4 v\u00e0 thay v\u00e0o \u0111\u00f3 tr\u1ecf \u0111\u1ebfn m\u00e3 ngu\u1ed3n th\u1ef1c t\u1ebf.<\/p>\n<h3>B\u01b0\u1edbc 5: S\u01a1 \u0111\u1ed3 h\u1ed7 tr\u1ee3<\/h3>\n<p><strong>S\u01a1 \u0111\u1ed3 \u0111\u1ed9ng<\/strong>\u00a0(v\u00ed d\u1ee5: lu\u1ed3ng \u201cXem t\u00f3m t\u1eaft t\u00e0i kho\u1ea3n\u201d)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>title S\u01a1 \u0111\u1ed3 \u0111\u1ed9ng cho Xem t\u00f3m t\u1eaft t\u00e0i kho\u1ea3n<\/p>\n<p>Person(customer, \u201cKh\u00e1ch h\u00e0ng c\u00e1 nh\u00e2n ng\u00e2n h\u00e0ng\u201d) {<br \/>\nContainer(spa, \u201c\u1ee8ng d\u1ee5ng trang \u0111\u01a1n\u201d) {<br \/>\nContainer(api, \u201c\u1ee8ng d\u1ee5ng API\u201d) {<br \/>\nContainerDb(db, \u201cC\u01a1 s\u1edf d\u1eef li\u1ec7u\u201d) {<br \/>\nSystem_Ext(coreBanking, \u201cH\u1ec7 th\u1ed1ng ng\u00e2n h\u00e0ng c\u1ed1t l\u00f5i\u201d)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(customer, spa, \u201c1. Nh\u1ea5n v\u00e0o \u2018T\u00e0i kho\u1ea3n\u2019\u201d, \u201c\u201d)<br \/>\nRel(spa, api, \u201c2. GET \/accounts\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api, db, \u201c3. \u0110\u1ecdc t\u00f3m t\u1eaft \u0111\u00e3 \u0111\u01b0\u1ee3c l\u01b0u t\u1ea1m\u201d, \u201c\u201d)<br \/>\nRel(api, coreBanking, \u201c4. L\u1ea5y d\u1eef li\u1ec7u m\u1edbi nh\u1ea5t\u201d, \u201c\u201d)<br \/>\nRel(api, spa, \u201c5. Tr\u1ea3 v\u1ec1 JSON\u201d, \u201c\u201d)<\/p>\n<p>HI\u1ec2N_TH\u1eca_CH\u00da_TH\u00cdCH()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>S\u01a1 \u0111\u1ed3 tri\u1ec3n khai<\/strong>\u00a0(b\u1ea3n \u0111\u1ed3 v\u1eadt l\u00fd c\u1ea5p cao):<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>title S\u01a1 \u0111\u1ed3 tri\u1ec3n khai cho H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn<\/p>\n<p>Deployment_Node(aws, \u201cAmazon Web Services\u201d, \u201cM\u00e2y\u201d) {<br \/>\nDeployment_Node(ec2, \u201cNh\u00f3m Auto-Scaling EC2\u201d, \u201cLinux\u201d) {<br \/>\nContainer(api, \u201c\u1ee8ng d\u1ee5ng API\u201d, \u201cJava Spring Boot\u201d)<br \/>\n}<br \/>\nDeployment_Node(rds, \u201cRDS\u201d, \u201cPostgreSQL\u201d) {<br \/>\nContainerDb(db, \u201cC\u01a1 s\u1edf d\u1eef li\u1ec7u\u201d)<br \/>\n}<br \/>\n}<\/p>\n<p>Deployment_Node(customerDevice, \u201cThi\u1ebft b\u1ecb c\u1ee7a Kh\u00e1ch h\u00e0ng\u201d, \u201cWeb\/\u0110i\u1ec7n tho\u1ea1i di \u0111\u1ed9ng\u201d) {<br \/>\nContainer(spa, \u201c\u1ee8ng d\u1ee5ng Trang \u0110\u01a1n\u201d)<br \/>\nContainer(mobile, \u201c\u1ee8ng d\u1ee5ng Di \u0111\u1ed9ng\u201d)<br \/>\n}<\/p>\n<p>System_Ext(coreBanking, \u201cH\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng L\u00f5i (mainframe n\u1ed9i b\u1ed9)\u201d)<\/p>\n<p>Rel(spa, api, \u201cG\u1ecdi API \u0111\u1ebfn\u201d, \u201cHTTPS\u201d)<br \/>\nRel(mobile, api, \u201cG\u1ecdi API \u0111\u1ebfn\u201d, \u201cHTTPS\u201d)<br \/>\nRel_U(api, spa, \u201cCung c\u1ea5p \u0111\u1ebfn tr\u00ecnh duy\u1ec7t web c\u1ee7a kh\u00e1ch h\u00e0ng\u201d)<br \/>\nRel_U(api, mobile, \u201cCung c\u1ea5p \u0111\u1ebfn \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng\u201d)<\/p>\n<p>SHOW_LEGEND()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 s\u1eed d\u1ee5ng Tr\u01b0\u1eddng h\u1ee3p nghi\u00ean c\u1ee9u n\u00e0y trong th\u1ef1c t\u1ebf<\/h3>\n<ol>\n<li>\n<p>B\u1eaft \u0111\u1ea7u b\u1eb1ng m\u1ed9t bu\u1ed5i l\u00e0m vi\u1ec7c: v\u1ebd S\u01a1 \u0111\u1ed3 B\u1ed1i c\u1ea3nh tr\u00ean b\u1ea3ng tr\u1eafng.<\/p>\n<\/li>\n<li>\n<p>L\u1eb7p l\u1ea1i \u0111\u1ec3 \u0111i \u0111\u1ebfn C\u00e1c Container v\u00e0 C\u00e1c th\u00e0nh ph\u1ea7n b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Gi\u1eef c\u00e1c s\u01a1 \u0111\u1ed3 trong kho m\u00e3 ngu\u1ed3n (nh\u01b0 m\u00e3 ngu\u1ed3n!) \u0111\u1ec3 ch\u00fang lu\u00f4n \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt.<\/p>\n<\/li>\n<li>\n<p>T\u1ef1 \u0111\u1ed9ng t\u1ea1o t\u00e0i li\u1ec7u s\u1ed1ng \u0111\u1ed9ng.<\/p>\n<\/li>\n<\/ol>\n<p>V\u00ed d\u1ee5 H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn n\u00e0y l\u00e0 t\u00e0i li\u1ec7u tham kh\u1ea3o ch\u00ednh th\u1ee9c do Simon Brown t\u1ea1o ra v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng t\u1ea1i h\u00e0ng ngh\u00ecn t\u1ed5 ch\u1ee9c tr\u00ean to\u00e0n th\u1ebf gi\u1edbi. B\u1eb1ng c\u00e1ch tu\u00e2n theo c\u00e1c b\u01b0\u1edbc n\u00e0y, b\u1ea1n hi\u1ec7n \u0111\u00e3 c\u00f3 m\u1ed9t m\u00f4 t\u1ea3 ki\u1ebfn tr\u00fac ho\u00e0n ch\u1ec9nh, s\u1eb5n s\u00e0ng s\u1ea3n xu\u1ea5t, m\u00e0 b\u1ea5t k\u1ef3 ai \u2013 t\u1eeb CEO \u0111\u1ebfn l\u1eadp tr\u00ecnh vi\u00ean m\u1edbi \u2013 \u0111\u1ec1u c\u00f3 th\u1ec3 hi\u1ec3u \u1edf m\u1ee9c \u0111\u1ed9 chi ti\u1ebft ph\u00f9 h\u1ee3p.<\/p>\n<h3>B\u00e0i vi\u1ebft v\u1ec1 S\u01a1 \u0111\u1ed3 C4<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 Tr\u1ef1c quan h\u00f3a M\u00f4 h\u00ecnh C4 b\u1eb1ng C\u00f4ng c\u1ee5 AI c\u1ee7a Visual Paradigm<\/strong><\/a>: H\u01b0\u1edbng d\u1eabn n\u00e0y gi\u1ea3i th\u00edch c\u00e1ch t\u1eadn d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi AI \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng h\u00f3a v\u00e0 n\u00e2ng cao tr\u1ef1c quan h\u00f3a m\u00f4 h\u00ecnh C4 nh\u1eb1m thi\u1ebft k\u1ebf ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m nhanh h\u01a1n.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>T\u1eadn d\u1ee5ng Studio C4 AI c\u1ee7a Visual Paradigm \u0111\u1ec3 t\u00e0i li\u1ec7u h\u00f3a ki\u1ebfn tr\u00fac \u0111\u01b0\u1ee3c \u0111\u01a1n gi\u1ea3n h\u00f3a<\/strong><\/a>: B\u00e0i vi\u1ebft n\u00e0y chi ti\u1ebft c\u00e1ch s\u1eed d\u1ee5ng studio \u0111\u01b0\u1ee3c t\u0103ng c\u01b0\u1eddng AI \u0111\u1ec3 t\u1ea1o ra t\u00e0i li\u1ec7u ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m s\u1ea1ch s\u1ebd, d\u1ec5 m\u1edf r\u1ed9ng v\u00e0 d\u1ec5 b\u1ea3o tr\u00ec.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 Studio C4-PlantUML: C\u00e1ch m\u1ea1ng h\u00f3a thi\u1ebft k\u1ebf ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m<\/strong><\/a>: T\u00e0i nguy\u00ean n\u00e0y kh\u00e1m ph\u00e1 vi\u1ec7c k\u1ebft h\u1ee3p t\u1ef1 \u0111\u1ed9ng h\u00f3a do AI \u0111i\u1ec1u khi\u1ec3n, s\u1ef1 r\u00f5 r\u00e0ng c\u1ee7a m\u00f4 h\u00ecnh C4 v\u00e0 t\u00ednh linh ho\u1ea1t c\u1ee7a PlantUML th\u00e0nh m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd duy nh\u1ea5t.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 Studio C4 PlantUML \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 AI c\u1ee7a Visual Paradigm<\/strong><\/a>: H\u01b0\u1edbng d\u1eabn n\u00e0y m\u00f4 t\u1ea3 m\u1ed9t c\u00f4ng c\u1ee5 \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf ri\u00eang, ra m\u1eaft v\u00e0o cu\u1ed1i n\u0103m 2025, c\u00f3 kh\u1ea3 n\u0103ng chuy\u1ec3n \u0111\u1ed5i c\u00e1c l\u1eddi nh\u1eafc b\u1eb1ng ng\u00f4n ng\u1eef t\u1ef1 nhi\u00ean th\u00e0nh c\u00e1c s\u01a1 \u0111\u1ed3 C4 nhi\u1ec1u l\u1edbp.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>Studio C4-PlantUML | Tr\u00ecnh sinh s\u01a1 \u0111\u1ed3 C4 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 AI<\/strong><\/a>: T\u1ed5ng quan t\u00ednh n\u0103ng n\u00e0y nh\u1ea5n m\u1ea1nh m\u1ed9t c\u00f4ng c\u1ee5 do AI \u0111i\u1ec1u khi\u1ec3n, \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 t\u1ea1o s\u01a1 \u0111\u1ed3 ki\u1ebfn tr\u00fac ph\u1ea7n m\u1ec1m C4 t\u1eeb c\u00e1c m\u00f4 t\u1ea3 v\u0103n b\u1ea3n \u0111\u01a1n gi\u1ea3n.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>T\u1ea1o v\u00e0 ch\u1ec9nh s\u1eeda s\u01a1 \u0111\u1ed3 th\u00e0nh ph\u1ea7n C4 b\u1eb1ng tr\u1ee3 l\u00fd chatbot AI c\u1ee7a Visual Paradigm<\/strong><\/a>: B\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y minh h\u1ecda c\u00e1ch s\u1eed d\u1ee5ng tr\u1ee3 l\u00fd chatbot \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 AI \u0111\u1ec3 t\u1ea1o v\u00e0 tinh ch\u1ec9nh ki\u1ebfn tr\u00fac c\u1ea5p th\u00e0nh ph\u1ea7n cho c\u00e1c h\u1ec7 th\u1ed1ng ph\u1ee9c t\u1ea1p m\u1ed9t c\u00e1ch l\u1eb7p l\u1ea1i.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>Tr\u00ecnh sinh s\u01a1 \u0111\u1ed3 C4 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 AI: C\u00e1c c\u1ea5p ch\u00ednh v\u00e0 c\u00e1c ch\u1ebf \u0111\u1ed9 h\u1ed7 tr\u1ee3<\/strong><\/a>: Trang n\u00e0y gi\u1ea3i th\u00edch c\u00e1ch tr\u00ecnh sinh AI h\u1ed7 tr\u1ee3 b\u1ed1n c\u1ea5p ch\u00ednh c\u1ee7a m\u00f4 h\u00ecnh C4 \u2013 B\u1ed1i c\u1ea3nh, Container, Th\u00e0nh ph\u1ea7n v\u00e0 Tri\u1ec3n khai \u2013 \u0111\u1ec3 cung c\u1ea5p t\u00e0i li\u1ec7u to\u00e0n di\u1ec7n.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Tr\u00ecnh sinh s\u01a1 \u0111\u1ed3 AI: Phi\u00ean b\u1ea3n h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 m\u00f4 h\u00ecnh C4<\/strong><\/a>: C\u1eadp nh\u1eadt n\u00e0y chi ti\u1ebft vi\u1ec7c t\u00edch h\u1ee3p c\u00e1c t\u00ednh n\u0103ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 AI nh\u1eb1m t\u1ef1 \u0111\u1ed9ng h\u00f3a vi\u1ec7c t\u1ea1o s\u01a1 \u0111\u1ed3 m\u00f4 h\u00ecnh C4 theo c\u1ea5p b\u1eadc.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>Tr\u00ecnh sinh AI m\u00f4 h\u00ecnh C4: T\u1ef1 \u0111\u1ed9ng h\u00f3a to\u00e0n b\u1ed9 v\u00f2ng \u0111\u1eddi m\u00f4 h\u00ecnh h\u00f3a<\/strong><\/a>: T\u00e0i nguy\u00ean n\u00e0y nh\u1ea5n m\u1ea1nh c\u00e1ch m\u1ed9t tr\u1ee3 l\u00fd chatbot chuy\u00ean d\u1ee5ng s\u1eed d\u1ee5ng c\u00e1c l\u1eddi nh\u1eafc t\u01b0\u01a1ng t\u00e1c \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o t\u00ednh nh\u1ea5t qu\u00e1n trong t\u00e0i li\u1ec7u ki\u1ebfn tr\u00fac cho c\u00e1c \u0111\u1ed9i DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>B\u00e0i \u0111\u00e1nh gi\u00e1 to\u00e0n di\u1ec7n: Tr\u1ee3 l\u00fd chatbot AI th\u00f4ng th\u01b0\u1eddng so v\u1edbi C\u00f4ng c\u1ee5 C4 c\u1ee7a Visual Paradigm<\/strong><\/a>: So s\u00e1nh n\u00e0y gi\u1ea3i th\u00edch l\u00fd do t\u1ea1i sao c\u00e1c c\u00f4ng c\u1ee5 chuy\u00ean d\u1ee5ng nh\u01b0 Studio C4 PlantUML cung c\u1ea5p k\u1ebft qu\u1ea3 c\u00f3 c\u1ea5u tr\u00fac h\u01a1n v\u00e0 ch\u1ea5t l\u01b0\u1ee3ng chuy\u00ean nghi\u1ec7p h\u01a1n so v\u1edbi c\u00e1c m\u00f4 h\u00ecnh ng\u00f4n ng\u1eef t\u1ed5ng qu\u00e1t.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>C\u00e1c\u00a0m\u00f4 h\u00ecnh C4, \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Simon Brown, l\u00e0 m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, ph\u00e2n c\u1ea5p v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi nh\u00e0<\/p>\n","protected":false},"author":11,"featured_media":11974,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[108],"tags":[],"class_list":["post-11973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc) - Cybermedian<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc) - Cybermedian\" \/>\n<meta property=\"og:description\" content=\"C\u00e1c\u00a0m\u00f4 h\u00ecnh C4, \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Simon Brown, l\u00e0 m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, ph\u00e2n c\u1ea5p v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi nh\u00e0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cybermedian\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":3736,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"vi\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc) - Cybermedian\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/vn\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/vn\/\",\"name\":\"Cybermedian\",\"description\":\"H\u1ecdc m\u1ed9t \u0111i\u1ec1u m\u1edbi m\u1ed7i ng\u00e0y\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/vn\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/vn\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc) - Cybermedian","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"vi_VN","og_type":"article","og_title":"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc) - Cybermedian","og_description":"C\u00e1c\u00a0m\u00f4 h\u00ecnh C4, \u0111\u01b0\u1ee3c t\u1ea1o b\u1edfi Simon Brown, l\u00e0 m\u1ed9t c\u00e1ch \u0111\u01a1n gi\u1ea3n, ph\u00e2n c\u1ea5p v\u00e0 th\u00e2n thi\u1ec7n v\u1edbi nh\u00e0","og_url":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cybermedian","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"curtis","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":3736,"image":{"@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc) - Cybermedian","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/vn\/wp-content\/uploads\/sites\/14\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/vn\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/vn\/"},{"@type":"ListItem","position":2,"name":"M\u1ed9t nghi\u00ean c\u1ee9u tr\u01b0\u1eddng h\u1ee3p to\u00e0n di\u1ec7n t\u1eebng b\u01b0\u1edbc: \u00c1p d\u1ee5ng m\u00f4 h\u00ecnh C4 v\u00e0o H\u1ec7 th\u1ed1ng Ng\u00e2n h\u00e0ng Tr\u1ef1c tuy\u1ebfn (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/vn\/#website","url":"https:\/\/www.cybermedian.com\/vn\/","name":"Cybermedian","description":"H\u1ecdc m\u1ed9t \u0111i\u1ec1u m\u1edbi m\u1ed7i ng\u00e0y","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/www.cybermedian.com\/vn\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/vn\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/posts\/11973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/comments?post=11973"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/posts\/11973\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/media\/11974"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/media?parent=11973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/categories?post=11973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/vn\/wp-json\/wp\/v2\/tags?post=11973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}