{"id":1886,"date":"2026-08-05T15:49:03","date_gmt":"2026-08-05T15:49:03","guid":{"rendered":"https:\/\/www.vpascode.com\/vn\/building-a-professional-webhook-workflow-diagram-with-plantuml-and-vpascode-2\/"},"modified":"2026-08-05T15:49:03","modified_gmt":"2026-08-05T15:49:03","slug":"building-a-professional-webhook-workflow-diagram-with-plantuml-and-vpascode-2","status":"publish","type":"post","link":"https:\/\/www.vpascode.com\/vn\/building-a-professional-webhook-workflow-diagram-with-plantuml-and-vpascode-2\/","title":{"rendered":"X\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 lu\u1ed3ng c\u00f4ng vi\u1ec7c Webhook chuy\u00ean nghi\u1ec7p v\u1edbi PlantUML v\u00e0 VPasCode"},"content":{"rendered":"

\"Learn<\/p>\n

L\u00e0 c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n v\u00e0 ki\u1ebfn tr\u00fac s\u01b0 h\u1ec7 th\u1ed1ng, ch\u00fang ta lu\u00f4n c\u1ea7n tr\u1ef1c quan h\u00f3a c\u00e1c logic backend ph\u1ee9c t\u1ea1p\u2014\u0111\u1eb7c bi\u1ec7t l\u00e0 c\u00e1c lu\u1ed3ng x\u1eed l\u00fd s\u1ef1 ki\u1ec7n b\u1ea5t \u0111\u1ed3ng b\u1ed9 nh\u01b0 x\u1eed l\u00fd webhook. Khi x\u00e2y d\u1ef1ng c\u00e1c lu\u1ed3ng n\u00e0y, vi\u1ec7c vi\u1ebft m\u00e3 \u0111\u1ec3 t\u1ea1o h\u00ecnh \u1ea3nh tr\u1ef1c quan l\u00e0 m\u1ed9t c\u00e1ch tuy\u1ec7t v\u1eddi v\u00ec n\u00f3 gi\u00fap t\u00e0i li\u1ec7u lu\u00f4n r\u00f5 r\u00e0ng v\u00e0 mang t\u00ednh ch\u01b0\u01a1ng tr\u00ecnh h\u00f3a. H\u00f4m nay, t\u00f4i s\u1ebd d\u1eabn b\u1ea1n \u0111i qua qu\u00e1 tr\u00ecnh suy ngh\u0129 ch\u00ednh x\u00e1c c\u1ee7a t\u00f4i khi thi\u1ebft k\u1ebf m\u1ed9t pipeline ti\u1ebfp nh\u1eadn v\u00e0 x\u1eed l\u00fd webhook \u1edf c\u1ea5p \u0111\u1ed9 s\u1ea3n xu\u1ea5t b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ngPlantUML<\/a>b\u00ean trongVisual Paradigm VPasCode<\/strong>.<\/p>\n

<\/article>\n
Khi k\u1ebft th\u00fac b\u00e0i h\u01b0\u1edbng d\u1eabn chuy\u00ean s\u00e2u n\u00e0y, b\u1ea1n s\u1ebd hi\u1ec3u c\u00e1ch c\u1ea5u tr\u00fac c\u00e1c nh\u00e1nh \u0111i\u1ec1u ki\u1ec7n, \u0111i\u1ec1u ph\u1ed1i c\u00e1c t\u00e1c v\u1ee5 song song b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c kh\u1ed1i ph\u00e2n nh\u00e1nh, v\u00e0 \u00e1p d\u1ee5ng c\u00e1c ch\u1ee7 \u0111\u1ec1 phong c\u00e1ch hi\u1ec7n \u0111\u1ea1i nh\u01b0 AWS Orange cho c\u00e1c d\u1ef1 \u00e1n s\u01a1 \u0111\u1ed3 m\u00e3 h\u00f3a c\u1ee7a b\u1ea1n.<\/span><\/article>\n

\"Editing<\/p>\n

1. Thi\u1ebft l\u1eadp c\u1ea5u tr\u00fac n\u1ec1n t\u1ea3ng v\u00e0 ch\u1ee7 \u0111\u1ec1<\/h2>\n

T\u00f4i b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c thi\u1ebft l\u1eadp c\u1ea5u tr\u00fac n\u1ec1n t\u1ea3ng c\u1ee7a s\u01a1 \u0111\u1ed3 ho\u1ea1t \u0111\u1ed9ng. M\u1ed7i \u0111o\u1ea1n m\u00e3 PlantUML ho\u1ea1t \u0111\u1ed9ng m\u1ea1nh m\u1ebd \u0111\u1ec1u c\u1ea7n m\u1ed9t \u0111i\u1ec3m v\u00e0o r\u00f5 r\u00e0ng v\u00e0 m\u1ed9t ch\u1ee7 \u0111\u1ec1 tr\u1ef1c quan th\u1ed1ng nh\u1ea5t \u0111\u1ec3 duy tr\u00ec ti\u00eau chu\u1ea9n chuy\u00ean nghi\u1ec7p trong t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt.<\/p>\n

Thay v\u00ec s\u1eed d\u1ee5ng c\u00e1c h\u1ed9p m\u1eb7c \u0111\u1ecbnh, \u0111\u01a1n \u0111i\u1ec7u, t\u00f4i ch\u1ecdn t\u00edch h\u1ee3p ch\u1ee7 \u0111\u1ec1 t\u00edch h\u1ee3p s\u1eb5naws-orange<\/code>ch\u1ee7 \u0111\u1ec1. \u0110i\u1ec1u n\u00e0y ngay l\u1eadp t\u1ee9c mang \u0111\u1ebfn cho s\u01a1 \u0111\u1ed3 m\u1ed9t v\u1ebb ngo\u00e0i s\u1ea1ch s\u1ebd, mang t\u00ednh \u0111\u00e1m m\u00e2y, ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c ki\u1ebfn tr\u00fac h\u1ea1 t\u1ea7ng hi\u1ec7n \u0111\u1ea1i.<\/p>\n

\r\n@startuml\r\n!theme aws-orange\r\n\r\nstart\r\n: Nh\u1eadn th\u00f4ng b\u00e1o Webhook;<\/code><\/pre>\n
2. X\u1eed l\u00fd x\u00e1c th\u1ef1c v\u00e0 nh\u00e1nh \u0111i\u1ec1u ki\u1ec7n<\/h2>\n
Ti\u1ebfp theo, t\u00f4i c\u1ea7n x\u00e1c \u0111\u1ecbnh r\u00e0o ch\u1eafn b\u1ea3o m\u1eadt c\u1ed1t l\u00f5i cho b\u1ed9 x\u1eed l\u00fd webhook c\u1ee7a ch\u00fang ta. Khi m\u1ed9t webhook \u0111\u1ebfn t\u1eeb m\u1ed9t d\u1ecbch v\u1ee5 b\u00ean ngo\u00e0i (nh\u01b0 Stripe, GitHub ho\u1eb7c AWS), b\u01b0\u1edbc ki\u1ec3m tra v\u1eadn h\u00e0nh \u0111\u1ea7u ti\u00ean ph\u1ea3i x\u00e1c minh ch\u1eef k\u00fd y\u00eau c\u1ea7u \u0111\u1ec3 ng\u0103n ch\u1eb7n vi\u1ec7c gi\u1ea3 m\u1ea1o ho\u1eb7c ch\u00e8n d\u1eef li\u1ec7u kh\u00f4ng \u0111\u01b0\u1ee3c \u1ee7y quy\u1ec1n.<\/p>\n
\u0110\u1ec3 ghi l\u1ea1i logic ra quy\u1ebft \u0111\u1ecbnh n\u00e0y, t\u00f4i s\u1eed d\u1ee5ng c\u00fa ph\u00e1p \u0111i\u1ec1u ki\u1ec7n c\u1ee7a PlantUML (if \/ then \/ else<\/code>). N\u1ebfu ch\u1eef k\u00fd h\u1ee3p l\u1ec7, lu\u1ed3ng c\u00f4ng vi\u1ec7c s\u1ebd ti\u1ebfp t\u1ee5c theo \u0111\u01b0\u1eddng d\u1eabn th\u1ef1c thi ch\u00ednh. N\u1ebfu th\u1ea5t b\u1ea1i, h\u1ec7 th\u1ed1ng ph\u1ea3i ngay l\u1eadp t\u1ee9c h\u1ee7y b\u1ecf, ghi l\u1ea1i c\u1ea3nh b\u00e1o b\u1ea3o m\u1eadt, tr\u1ea3 v\u1ec1 m\u00e3 tr\u1ea1ng th\u00e1i HTTP 401 Kh\u00f4ng \u0111\u01b0\u1ee3c \u1ee7y quy\u1ec1n v\u00e0 k\u1ebft th\u00fac m\u1ed9t c\u00e1ch an to\u00e0n.<\/p>\n
if (Ch\u1eef k\u00fd h\u1ee3p l\u1ec7?) then (c\u00f3)\r\n  : Ph\u00e2n t\u00edch JSON d\u1eef li\u1ec7u;\r\n  ' C\u00e1c b\u01b0\u1edbc x\u1eed l\u00fd song song \u1edf \u0111\u00e2y...\r\nelse (kh\u00f4ng)\r\n  : Ghi c\u1ea3nh b\u00e1o b\u1ea3o m\u1eadt;\r\n  : Tr\u1ea3 v\u1ec1 m\u00e3 tr\u1ea1ng th\u00e1i HTTP 401 Kh\u00f4ng \u0111\u01b0\u1ee3c \u1ee7y quy\u1ec1n;\r\n  stop\r\nendif<\/code><\/pre>\n
3. \u0110i\u1ec1u ph\u1ed1i c\u00e1c t\u00e1c v\u1ee5 b\u1ea5t \u0111\u1ed3ng b\u1ed9 b\u1eb1ng c\u00e1c kh\u1ed1i ph\u00e2n nh\u00e1nh<\/h2>\n
Sau khi d\u1eef li\u1ec7u JSON \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch th\u00e0nh c\u00f4ng, c\u00e1c \u1ee9ng d\u1ee5ng backend th\u1ef1c t\u1ebf hi\u1ebfm khi x\u1eed l\u00fd c\u00e1c t\u00e1c v\u1ee5 theo th\u1ee9 t\u1ef1 nghi\u00eam ng\u1eb7t. V\u00ed d\u1ee5, ch\u00fang ta mu\u1ed1n ghi l\u1ea1i s\u1ef1 ki\u1ec7n v\u00e0o kho d\u1eef li\u1ec7u ph\u00e2n t\u00edch c\u1ee7a ch\u00fang ta v\u00e0 \u0111\u1ed3ng th\u1eddi c\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i \u0111\u0103ng k\u00fd ng\u01b0\u1eddi d\u00f9ng trong c\u01a1 s\u1edf d\u1eef li\u1ec7u ch\u00ednh m\u00e0 kh\u00f4ng l\u00e0m t\u1eafc ngh\u1ebdn l\u1eabn nhau.<\/p>\n
\u0110\u1ec3 bi\u1ec3u di\u1ec5n s\u1ef1 \u0111\u1ed3ng th\u1eddi n\u00e0y, t\u00f4i gi\u1edbi thi\u1ec7u m\u1ed9t kh\u1ed1ifork<\/code>kh\u1ed1i. \u0110i\u1ec1u n\u00e0y tr\u1ef1c quan h\u00f3a vi\u1ec7c chia nh\u1ecf lu\u1ed3ng c\u00f4ng vi\u1ec7c th\u00e0nh c\u00e1c \u0111\u01b0\u1eddng d\u1eabn th\u1ef1c thi song song tr\u01b0\u1edbc khi \u0111\u1ed3ng b\u1ed9 h\u00f3a l\u1ea1i v\u1edbi nhau. \u0110\u00e2y l\u00e0 m\u1ed9t k\u1ef9 thu\u1eadt thi\u1ebft y\u1ebfu \u0111\u1ec3 m\u00f4 h\u00ecnh h\u00f3a ch\u00ednh x\u00e1c c\u00e1c ki\u1ebfn tr\u00fac microservices d\u1ef1a tr\u00ean s\u1ef1 ki\u1ec7n.<\/p>\n
  fork\r\n    : Ghi s\u1ef1 ki\u1ec7n v\u00e0o ph\u00e2n t\u00edch;\r\n  fork again\r\n    : C\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i \u0111\u0103ng k\u00fd ng\u01b0\u1eddi d\u00f9ng;\r\n  end fork<\/code><\/pre>\n
4. \u0110\u00e1nh gi\u00e1 c\u00e1c c\u1ea5p \u0111\u1ed9 \u0111\u0103ng k\u00fd v\u00e0 ph\u00e2n b\u1ed5 t\u00e0i nguy\u00ean<\/h2>\n
Sau khi c\u00e1c thao t\u00e1c theo d\u00f5i song song v\u00e0 c\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i ho\u00e0n t\u1ea5t, lu\u1ed3ng c\u00f4ng vi\u1ec7c ph\u1ea3i ki\u1ec3m tra c\u00e1c thu\u1ed9c t\u00ednh ng\u01b0\u1eddi d\u00f9ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh ph\u00e2n b\u1ed5 h\u1ea1 t\u1ea7ng. \u1ede \u0111\u00e2y, ch\u00fang ta g\u1eb7p ph\u1ea3i m\u1ed9t c\u1ea5u tr\u00fac quy\u1ebft \u0111\u1ecbnh l\u1ed3ng gh\u00e9p: ki\u1ec3m tra xem kh\u00e1ch h\u00e0ng c\u00f3 thu\u1ed9c c\u1ea5p \u0111\u1ed9 cao c\u1ea5p hay kh\u00f4ng.<\/p>\n
N\u1ebfu h\u1ecd l\u00e0 ng\u01b0\u1eddi \u0111\u0103ng k\u00fd cao c\u1ea5p, ch\u00fang ta s\u1ebd ph\u00e2n b\u1ed5 t\u00e0i nguy\u00ean h\u1ea1 t\u1ea7ng ri\u00eang bi\u1ec7t \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o hi\u1ec7u su\u1ea5t \u0111\u1ed9 tr\u1ec5 th\u1ea5p. Ng\u01b0\u1ee3c l\u1ea1i, ch\u00fang ta s\u1ebd g\u00e1n h\u1ecd m\u1ed9t c\u00e1ch tr\u01a1n tru v\u00e0o c\u00e1c t\u00e0i nguy\u00ean chia s\u1ebb. C\u1ea3 hai nh\u00e1nh cu\u1ed1i c\u00f9ng s\u1ebd h\u1ed9i t\u1ee5 l\u1ea1i tr\u01b0\u1edbc khi g\u1eedi email x\u00e1c nh\u1eadn cu\u1ed1i c\u00f9ng \u0111\u1ebfn ng\u01b0\u1eddi d\u00f9ng.<\/p>\n
  if (L\u00e0 g\u00f3i cao c\u1ea5p?) then (c\u00f3)\r\n    : Ph\u00e2n b\u1ed5 h\u1ea1 t\u1ea7ng ri\u00eang bi\u1ec7t;\r\n  else (kh\u00f4ng)\r\n    : G\u00e1n t\u00e0i nguy\u00ean chia s\u1ebb;\r\n  endif\r\n  : G\u1eedi email x\u00e1c nh\u1eadn;<\/code><\/pre>\n
5. K\u1ebft th\u00fac s\u01a1 \u0111\u1ed3 ho\u00e0n ch\u1ec9nh<\/h2>\n
K\u1ebft h\u1ee3p t\u1ea5t c\u1ea3 nh\u1eefng m\u1ea3nh gh\u00e9p n\u00e0y l\u1ea1i v\u1edbi nhau s\u1ebd t\u1ea1o ra m\u1ed9t b\u1ea3n thi\u1ebft k\u1ebf k\u1ef9 thu\u1eadt to\u00e0n di\u1ec7n, d\u1ec5 \u0111\u1ecdc v\u00e0 d\u1ec5 hi\u1ec3u cao.<\/p>\n
\"Completed<\/p>\n
D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u00e3 ngu\u1ed3n ho\u00e0n ch\u1ec9nh, s\u1eb5n s\u00e0ng s\u1ea3n xu\u1ea5t m\u00e0 b\u1ea1n c\u00f3 th\u1ec3 sao ch\u00e9p, d\u00e1n v\u00e0 hi\u1ec3n th\u1ecb ngay l\u1eadp t\u1ee9c:<\/p>\n
\n
\nPlantuml<\/span>
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n            
\r\n                                
\r\n                    Plantuml<\/span>\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                
\r\n                    
@startuml\r\n!theme aws-orange\r\n\r\nstart\r\n: Nh\u1eadn th\u00f4ng b\u00e1o Webhook;\r\nn\u1ebfu (Ch\u1eef k\u00fd h\u1ee3p l\u1ec7?) th\u00ec (c\u00f3)\r\n  : Ph\u00e2n t\u00edch JSON d\u1eef li\u1ec7u;\r\n  nh\u00e1nh\r\n    : Ghi s\u1ef1 ki\u1ec7n v\u00e0o ph\u00e2n t\u00edch d\u1eef li\u1ec7u;\r\n  nh\u00e1nh ti\u1ebfp theo\r\n    : C\u1eadp nh\u1eadt tr\u1ea1ng th\u00e1i \u0111\u0103ng k\u00fd ng\u01b0\u1eddi d\u00f9ng;\r\n  k\u1ebft th\u00fac nh\u00e1nh\r\n  n\u1ebfu (L\u00e0 g\u00f3i cao c\u1ea5p?) th\u00ec (c\u00f3)\r\n    : C\u1ea5p ph\u00e1t c\u01a1 s\u1edf h\u1ea1 t\u1ea7ng ri\u00eang;\r\n  ng\u01b0\u1ee3c l\u1ea1i (kh\u00f4ng)\r\n    : G\u00e1n t\u00e0i nguy\u00ean t\u1eeb nh\u00f3m chung;\r\n  k\u1ebft th\u00fac n\u1ebfu\r\n  : G\u1eedi email x\u00e1c nh\u1eadn;\r\nng\u01b0\u1ee3c l\u1ea1i (kh\u00f4ng)\r\n  : Ghi c\u1ea3nh b\u00e1o b\u1ea3o m\u1eadt;\r\n  : Tr\u1ea3 v\u1ec1 HTTP 401 Kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p;\r\n  d\u1eebng\r\nk\u1ebft th\u00fac n\u1ebfu\r\nd\u1eebng\r\n\r\n@endumlx<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nCh\u1ec9nh s\u1eeda Plantuml trong VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
T\u1ea1i sao l\u1ea1i x\u00e2y d\u1ef1ng s\u01a1 \u0111\u1ed3 v\u1edbi VPasCode?<\/h2>\n
Thi\u1ebft k\u1ebf quy tr\u00ecnh l\u00e0m vi\u1ec7c d\u01b0\u1edbi d\u1ea1ng m\u00e3 ngu\u1ed3n mang l\u1ea1i ph\u01b0\u01a1ng ph\u00e1p nhanh ch\u00f3ng, d\u1ef1a tr\u00ean v\u0103n b\u1ea3n cho t\u00e0i li\u1ec7u k\u1ef9 thu\u1eadt. V\u1edbi Visual Paradigm VPasCode<\/strong>, b\u1ea1n s\u1ebd nh\u1eadn \u0111\u01b0\u1ee3c v\u00f2ng ph\u1ea3n h\u1ed3i t\u1ee9c th\u00ec cho m\u1ecdi s\u01a1 \u0111\u1ed3 c\u1ee7a m\u00ecnh:<\/p>\n