Software Architecture – Tìm hiểu Layers Pattern

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Chúc mừng nha, đã tìm kiếm tới Layers Pattern tức là có quan tâm tới Architecture của phần mềm. Lúc này trình đã lên một tầm cao mới. Hầu hết những ông đã mang danh kĩ sử (Engineer) đều biết về kiến trúc của chuyên nghành mà mình đang theo.

Nghề CNTT cũng vậy, người kĩ sư phần mềm (Software Engineer) cần phải có cái nhìn sâu sắc, hiểu biết am tường về kiến trúc phần mềm. Yên tâm, series architecture ở Kieblog có đủ cả, chỉ mất công đọc thôi

Mô hình 3 lớp (three-layer) có gì hay?

1. Cực kì phổ biến

Layers Pattern là một trong những mẫu thiết kế phổ biến nhất trong giới tinh hoa phần mềm (Architecture Pattern). Còn được biết tới với cái tên n-tier Architecture Pattern, tier ở đây cũng được hiểu là một lớp. Gọi là n-tier vì có thể có nhiều lớp.

Hầu như các program hay application phát triển từ Java EE đều tuân theo kiến trúc này. Đối với các ứng dụng business đơn thuần hoặc không quá phức tạp, hầu như ở công ty phần mềm nào cũng có thể tìm ra một sản phẩm có kiến trúc Layers Pattern.

Software Architecture – Tìm hiểu Layers Pattern

Phổ biến là vậy, có gì ở kiến trúc này khiến nó trở nên rộng khắp như vậy?. Ưu nhược điểm là gì?. Đây, câu trả lời dưới đây.

Xem tuyển dụng software developer đãi ngộ tốt trên TopDev

2. Có gì ở Layers Pattern

Layers Pattern là được phân vào loại Modules trong Kiến trúc phần mềm (Software Architecture). Các lớp sẽ đảm nhận một chức năng riêng biệt, tuy vậy lớp (Layer) lại không thể hoạt động độc lập.

Rõ ràng, vì cả khi 3 modules cùng hoạt động thì mới có Software, mới có Application để dùng. Tuy nhiên, việc phát triển (development) và kiểm thử (testing) lại có thể diễn ra độc lập.

Phần module kết nối với database có thể testing bằng cách gọi request (Postman), chạy automation test với Selenium, …

Ví dụ như sử dụng Java để phát triển một ứng dụng (application):

Layer 1 – Phần view (screen) có thể dùng (JSF) Java Server Faces
Layer 2 – Các object trong bean có thể dùng Spring bean hoặc EJB3 bean
Layer 3 – Data access objects có thể là POJO’s (Plain Old Java Objects) Mybatis, JDBC, …

3. Điểm mạnh, điểm yếu

3.1 Điểm mạnh

Đầu tiên, điểm mạnh dễ nhìn nhận nhất là dễ hiểu. Hầu hết các hệ thống có thiết kế kiểu Layers pattern thường có kiến trúc 3 lớp.

Hơn nữa, việc áp dụng pattern này khi thiết kế còn có các ưu điểm sau:

Thứ nhất, về khả năng kiểm thử (Testability), vì các lớp có thể được hoàn thành độc lập nên khả năng kiểm thử mô hình này tương đối tốt. Nếu phần database layer cần test, ta có thể test ngay. Nếu phần view (screen) cần test layout, độ dài hoặc dữ liệu, có thể tạo mockup database hoặc response giả.

Thứ hai, về Ease of development (độ dễ để phát triển), do phân thành các lớp độc lập nên dễ dàng để nắm bắt và hiểu rõ.

Ngoài ra, do một lớp chủ yếu liên hệ với các lớp lân cận kế bên, nên lúc đọc hay viết source cũng đơn giản và dễ nắm bắt hơn.

Hơn nữa

Promotes maintainability, portability, reusability, testability, design time modifiability. Conceptually simple to implement. Layers can be made visible in the code.

Thúc đẩy khả năng bảo trì, tính di động, khả năng sử dụng lại, khả năng kiểm tra, sửa đổi thời gian thiết kế. Khái niệm đơn giản để thực hiện. Có thể dễ dàng hiểu nội dung các lớp khi đọc source.

3.2 Điểm yếu

Tuy thiết kế theo hướng Modules, nhưng kiến trúc kiểu Layers Pattern cũng tồn tại không ít điểm yếu. Có thể liệt kê 3 điểm yếu trong thiết kế kiểu này lần lượt như sau:

Thứ nhất, vì kiến trúc lớp phân tầng các lớp (layer) nên trường hợp có thay đổi ở các lớp, sẽ khó khăn để hiểu và cập nhật ở các lớp khác. Chính vì ở tính Overall agility (Khả năng nhanh chóng thay đổi về mặt tổng thể) của kiến trúc này không quá nhanh.

Thứ hai, về tính mở rộng (Scalability)

Because of the trend toward tightly coupled and monolithic implementations of this pattern, applications build using this architecture pattern are generally difficult to scale.

Do thiết kế chặt chẽ trong liên kết giữa các lớp, việc triển khai phải đồng bộ theo khối nên các ứng dụng xây dựng sử dụng mẫu kiến trúc này thường khó mở rộng.

Thứ ba, về hiệu suất (Performance), trường hợp phần mềm sử dụng thiết kế kiểu này, nhưng có quá nhiều lớp (xử lí ở các lớp phức tạp, chiếm nhiều thời gian) sẽ ảnh hưởng về mặt tổng thể tới hiệu năng, thời gian phản hồi của cả hệ thống.

Hơn nữa

Layers above are allowed to use layers below, but this relation only goes one way. The allowed to use relation can be limited so the current layer may only use the layer immediately below it. Cyclical dependencies are not permitted.

Các lớp ở phía trên được phép sử dụng các lớp ở phía dưới, nhưng mối liên hệ này chỉ đi theo một chiều. Việc sử dụng mối quan hệ này có thể bị giới hạn, vì vậy lớp hiện tại đôi khi chỉ sử dụng được lớp ngay dưới nó. Không có chu kì ở đây

4. Tham khảo

Giả thích về Layers Pattern

Layered Architecture – Software Architecture Patterns by Mark Richards

Cảm ơn vì đã đọc bài, nhớ like page và chia sẻ bài viết nha. Happy coding!

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm việc làm Developer hấp dẫn trên TopDev

Bí kíp tìm dự án cho anh em mới vào nghề freelancer thiết kế website wordpress

Bài viết được sự cho phép của tác giả Võ Quang Huy

WordPress ngày càng trở nên phổ biến. Anh em làm nghề thiết kế website wordpress thì ngày càng đông và tất nhiên độ cạnh tranh ngày càng cao.

Vì vậy để tìm một khách hàng trong thời kỳ này cũng không phải là một chuyện đơn giản, đặc biệt là đối với các bạn mới quyết định dấn thân vào con đường này.

1001 lý do mỗi doanh nghiệp cần có một website riêng cho mình

15 thư viện slider jquery miễn phí cho dự án website của bạn

Với kinh nghiệm 5 năm trong nghề hôm nay mình sẽ moi gan, móc ruột chia sẻ cho anh em vài bí kíp để get dự án (Tìm khách hàng) sao cho hiệu quả nhé. Dươí đây là các phương pháp get dự án của cá nhân mình và các ý kiến phía dưới cũng hoàn toàn là ý kiến cá nhân nha.

Tạo website giới thiệu dịch vụ thiết kế website wordpress

Đây là một trong những việc quan trọng nhất bạn cần phải làm. Hãy tạo ngay cho mình một website để giới thiệu dịch vụ thiết kế website.

Website này thông thường sẽ trình bày những hạn mục sau:

Dịch vụ bên bạn đang cung cấp
Các dự án hay website mẫu bạn đã làm
Bảng giá của các hạn mục trên
Thông tin liên hệ

Có website sẽ giúp bạn tăng uy tín, cũng như show các skill bạn có thể làm được. Có website từ đó bạn có thể viết các bài viết liên quan đến dịch vụ thiết kế web để seo trên google cũng nhưng dễ dàng chạy quảng cáo…

Tóm lại hãy show những gì tốt nhất của bạn lên website để khách hàng biết.

Ví dụ đây là website giới thiệu dịch vụ thiết kế web bên mình

Tham gia, support trong các group về wordpress, theme wordpress…

WordPress cũng như các framework php khác hầu như đều có các group để thảo luận. Trên các group này ngoài việc support lẫn nhau thì cũng có 1 lượng không nhỏ khách hàng vào các group này để tìm người làm website.

Vì vậy khi tham gia vào các group này ngoài việc trao đổi về kỹ thuật các bạn còn có thể tiếp cận 1 lượng khách hàng nhất định

Một số group facebook về wordpress ở việt nam các bạn có thể tham gia:

Các bạn có thể tìm hiểu thêm một số cộng đồng hay group khác. Nhớ là tích cực support những người hỏi nha. Nó sẽ giúp bạn tăng uy tín cũng như giúp nhiều người biết đến bạn

Một số hình ảnh mình chụp từ group, rất nhiều người cần thiết kế web trong các group…

Tích cực chia sẻ các vấn đề liên quan đến thiết kế website

Các bạn biết đến mình thông qua kênh nào? Chắc 90% là nhờ website huykira.net này phải không?

Đây là một ví dụ cho việc chia sẻ sẽ nhận lại nhiều hơn, ở website này mình chia sẻ rất nhiều thứ như:

Theme wordpress do mình tự viết
Các plugin hay do mình tự viết
Các kiến thức về lập trình wordpress
Mình hay share code cho cộng đồng

Khi chia sẻ thì sẽ nhiều người biết đến mình nhiều hơn vì thế cơ hội tiếp cận với khách hàng của mình cũng nhiều hơn.

Đặt biệt: Khi website của bạn có một lượt view cố định thì mình sẽ có nhiều cách để tiếp cận với khách như:

Mình sẽ code website mẫu rồi share code bản free kết hợp với bán bản pro
Mình share code html và bán bản wordpress theme
Bán mẫu web trực tiếp trên blog

Gây ám ảnh cho đối phương :))

Hồi mới vào nghề mình hay gây ám ảnh cho mọi người… kiểu như thế này:

Thấy thằng bạn mở quán điện thoại: “Ê bạn. Mở của hàng đt hả? Thế mi có website chưa ta làm cho :))”

Thấy con bạn bán hàng online: “Ê mi. Bán hàng online rứa có website để chạy quảng cáo chưa”

Nghe bạn nói Anh của ta mới mở trung tâm gia sư: “Rứa ổng có website chưa ????”

Mấy đứa bạn post hình ảnh khai trương 1 cửa hàng hay quán cafe gì đó lập tức nhảy vào comment: “Khai trương rứa có website chưa :))”

Đại loại thế đi đâu, gặp ai mình cũng khoe là mình có thiết kế website. Cứ như vậy lâu ngày mọi người bị ám ảnh cmn luôn. Cứ thế mọi người chung quanh cứ nhắc đến website là nhớ đến Huy Kira :)))

Vì thế hầu như bạn bè mình, anh chị, đồng nghiệp có mối làm website thì nhớ đến mình và mình cũng nhận được rất nhiều dự án nhờ kiểu giới thiệu như thế này

Tổng kết:

Trên đây là những bí kíp của mình sử dụng và mình thấy hiệu quả, chắc chắn sẽ còn nhiều cách khác nhau để tiếp cận khách hàng. Bạn nào có độc chiêu khác, có thể comment phía dưới để anh em tham khảo nha.

Đây là bài viết đầu tiên trong năm 2021 này, Chúc các bạn năm mới sức khỏe, get được nhiều dự án thiết kế website wordpress trong năm nay…

Chào thân ái và quyết thắng!

Bài viết gốc được đăng tải tại huykira.net

Có thể bạn quan tâm:

Xem thêm Tuyển lập trình WordPress hấp dẫn trên TopDev

Kinh Nghiệm Phỏng Vấn BrSE

Bài viết được sự cho phép của tác giả Nguyễn Văn Trọng

Trước khi tiếp nhận dự án mỗi ứng viên BrSE sẽ được khách hàng phỏng vấn (sau khi xem CV) để kiểm tra 2 yếu tố : kỹ năng và ngoại ngữ. Đây là rào cản lớn nhất mà các bạn phải vượt qua. Bài viết này dành cho các tân BrSE mới chập chững vào nghề, còn các cao nhân đã có kinh nghiệm rồi thì .. cũng đọc cho vui ^^. Mình đã từng trượt phỏng vấn và rút được nhiều thứ từ thất bại nên mong các bạn né được những ổ gà trên bước sắp tới. Hôm nay mình sẽ chỉ 1 số cách để mọi người vượt qua nó dễ dàng hơn.

Sau khoảng thời gian gõ code mòn bàn phím, tích lũy kinh nghiệm về kỹ thuật và quy trình phần mềm, cùng với tiếng Nhật đã được tôi rèn trong mấy năm khổ ải thì các cu đơ (tester, QA …) sẽ tiến lên 1 bưới mới trong sự nghiệp : kỹ sư cầu nối.

Nhưng để được qua Nhật thì điều quan trọng nhất là phải chứng minh được năng lực với các bác khách hàng để các bác ấy tin tưởng rước anh chị em qua. Vậy phải mần răng ?

Tuyển dụng Kỹ sư cầu nối không yêu cầu kinh nghiệm tại Topdev.

Hiểu Rõ Khách Hàng Cần Gì

Các bạn không phải chỉ hiểu khơi khơi là dự án làm về ngôn ngữ abc, framework xyz, mà còn cần nắm được họ cần mình qua để mần cái chi. Hãy nắm scope (phạm vi), làm từ mô đến mô (thường thì từ design đến UT) – cái ni hỏi sếp hoặc account manager phụ trách khách hàng là sẽ rõ ngay. Khi nắm được mục đích là mình qua phát triển module, design, hay chỉ là qua học nghiệp vụ để về triển khai, thì sẽ nhấn mạnh nó trong phần tự giới thiệu bản thân và trả lời được gần như toàn bộ những câu hỏi chính xoáy về kỹ năng – kinh nghiệm. Như vậy bạn đã pass 50% rồi đó

Những Câu Hỏi Thường Gặp Và Cách Ứng Phó:

Tôi đã xem CV của bạn và thấy bạn làm dự án về xxx, bạn cho tôi biết bạn làm gì trong dự án đó ? Hãy chuẩn bị trước để nói 1 cách mạch lạc “Tôi chịu trách nhiệm về …trong thời gian … tháng”

Bạn đã bao giờ làm công đoạn design chưa ? nếu rồi thì hãy nói cụ thể mình làm basic hay detail, làm mới hay modify. Nếu chưa thì có thể nói “Mặc dù chưa làm nhưng đã đọc nhiều design trong quá trình code/test nên hiểu được cách để tạo ra design là như thế nào và cần những gì…bla .. bla..”, hoặc nếu hỏi về 1 vài công đoạn khác như Test (UT, AT, IT) thì cứ chém những gì mình biết và đừng bao giờ nói KHÔNG. Trường hợp mà ko biết cái gì luôn thì phải thêm từ “NHƯNG” vào “nhưng tôi có khả năng nắm bắt nhanh nên nếu được các bác giúp đỡ giai đoạn đầu thì …”

Bạn đã sử dụng Framework này bao giờ chưa ? (các bác Nhật ít khi hỏi mấy câu chi tiết ngôn ngữ , 1 phần họ tôn trọng mình ko muốn kiểm tra mấy cái lặt vặt nên thường chỉ hỏi về Framework). Nếu mình làm rồi thì cứ nói cho các bác ấy yên tâm, còn nếu chưa thì hỏi lại “FW ấy được tạo mới hoàn toàn hay là dựa trên FW phổ biến nào không ?” (Thông thường các dự án JP thường sẽ được phát triển dựa trên 1 FW customize lại trên nền tảng 1 hay nhiều FW khác, ví dụ bên Java thì hay kết hợp Spring – Struts, bên JavaScript thì kết hợp Jquery vs 1 FW khác như Knockout, AngularJS)

Ngoài ra có 1 vài câu hỏi dễ trả lời khác như : bạn có thể làm thêm giờ không ? Nếu dự án kéo dài (1 vài năm) thì bạn có theo đến cuối không, bạn có ngại khi phải di chuyển nhiều không, đã từng đi Nhật chưa, đã biết gì về văn hóa Nhật, ưu nhược điểm của bạn về abc là gì, có biết Maria là ai không … ?

Giữ Thái Độ Bình Tĩnh

Hồi bữa lần đầu đi phỏng vấn mình run đến độ vào phòng cái khúm núm chào xong ngồi cái phịch xuống ghế mà quên nói “tôi xin phép được ngồi”. Hay như lúc mấy bác bên kia hỏi (qua video) thì lóng ngóng trả lời câu trước quên mie nó câu sau. Rồi còn họp xong cũng quên luôn cảm ơn các bác đã dành thời gian phỏng vấn mình nữa chớ.

Lý do của ấp úng là bị bất ngờ, lóng ngóng thì tại không biết làm gì – nói gì. Để tránh phạm những sai lầm mình đã gặp, các bạn hãy chuẩn bị thật chu đáo những thứ sau để bình tĩnh trong suốt buổi phỏng vấn nhé.

Kịch bản phỏng vấn : Chào – xin phép ngồi – tự giới thiệu bản thân (khi được yêu cầu) – trả lời phỏng vấn – Cảm ơn.
Bài tự giới thiệu bản thân (không quá 15 dòng – nói trong 3p)
Soạn trước những câu hỏi thường gặp và câu trả lời.
Chú ý cả trang phục, ngủ đủ giấc, ăn uống đầy đủ nữa nhé.

Những kỹ năng cần có của 1 BrSE

Suy Nghĩ Kỹ Trước Khi Trả Lời

Ngày xưa, lúc vừa học khóa tiếng nhật tập trung (N4 -> N2) xong, mình được sếp ưu ái tiến cử đi onsite cho 1 dự án. Nhưng buổi phỏng vấn không suôn sẻ lắm, mình đã bị trượt mà hồi đó không rõ lý do. Sau này nghiệm lại mới thấy dại. Hồi đó khách hàng cần người design và development. Mặc dù các bác ấy khá hài lòng với khả năng kỹ thuật, nhưng khi được đến phần design thì mình đã trả lời bậy.

Khách hàng : Em đã từng làm design chưa ?

Bạn T : dạ em chưa nhưng em có đọc design trong các dự án đã làm nên hiểu được phần nào cách làm ah (nghe rất bài bản)

Khách hàng : Thế bây giờ cho em làm 1 cái design thì em mất bao lâu để hoàn thành (quả này mới đắng)

Bạn T: Dạ khoảng 1 tháng ah. (Trời đất – ngố gì đâu á)

Khách hàng : Bác chỉ biết câm nín nghe tiếng em khóc …

Phân tích cái sai : Không suy nghĩ kỹ mà trả lời bừa. Đầu tiên chưa hiểu được “1 cái design” đó là basic hay detail, cho 1 màn hình hay cho 1 flow (1 flow thường gồm khởi tạo – nhập giá trị – validate – confirm – finish), nếu 1 màn hình thì bao nhiêu Item, màn hình đó chức năng gì (tùy chức năng mà design nhiều hay ít). Đáng lẽ phải hỏi cặn kẽ thì mình trả lời kiểu cho có – không dựa trên cơ sở gì … tèo tèo tèo.

Các bạn nhớ đừng lặp lại nhé. Khi chưa rõ câu hỏi, hoặc đã rõ nhưng chưa đủ căn cứ thì hãy hỏi lại kỹ, KH sẽ đánh giá cao vì bạn làm việc chắc chắn. Còn nếu như hỏi han đủ kiểu mà vẫn không dám chắc thì hãy trả lời kiểu : tôi nghĩ là …, theo kinh nghiệm của tôi thì … Họ sẽ không nói mình sai đâu, bởi vì công việc sắp tới chắc gì đã giống hoàn toàn với những việc mình đã làm trước đây ?

Hãy Giữ Bí Mật Thông Tin Về Các Dự Án Mình Đã Làm

Cái này rất nhiều bạn đã phạm phải. Rất rất rất nguy hiểm. Có thể làm cho nỗ lực của mình đổ sông đổ biển chỉ vì 1 câu nói. Vì nếu như bạn tiết lộ thông tin về KH trước thì chắc gì bạn sẽ không tiết lộ thông tin KH đang phỏng vấn trong những lần sau ?

Khi được hỏi về kinh nghiệm thì mình chỉ nói về : Ngôn ngữ, Framework (FW public), domain (làm về y tế, giáo dục, telecom, thương mại …), khách hàng nước nào (Nhật, Úc, Mỹ …) hay về role đã đảm nhận, khó khăn, thuận lợi, đóng góp. Chỉ vậy thôi.

Những thông tin cần giữ bí mật : Tên khách hàng, Tên dự án, Tên Framework của KH (FW customize), Địa chỉ khách hàng hoặc bất kỳ thông tin gì có nguy cơ khiến người nghe biết được KH đó là ai.

Về Ngoại Ngữ

Hãy Sự Dụng Kính Ngữ Đúng Lúc Và Đúng Cách.

Lúc nào và cách gì thì có quá nhiều page viết rồi nên mình không nhai lại nữa. Mình có quen 2 đứa em, 1 trai 1 gái onsite cho 1 dự án ở Osaka. chú em này tiếng Nhật nghe nói đỉnh hơn em gái kia nhiều nhưng KH lại đánh giá em kia ngon hơn mới đau. Lý do đơn giản là em í biết dùng kính ngữ đúng lúc và đúng cách. Cũng dễ hiểu thôi, ai cũng muốn được tôn trọng.

Còn gì nữa không nhỉ ? thôi tạm tổng kết ở đây vậy. Nếu có câu hỏi tình huống nào thì hãy post ở phần comment nhé, nếu mình không trả lời được sẽ nhờ cao nhân trả lời cho các bạn.

Tổng Kết

Biết khách hàng cần mình làm gì
Chuẩn bị chu đáo trang phục, tác phong, câu nói cửa miệng, bài tự giới thiệu bản thân.
Giữ bình tĩnh trong suốt quá trình phỏng vấn
Suy nghĩ kỹ trước khi đưa ra câu trả lời
Giữ bí mật về KH trước đã từng làm.
Về ngoại ngữ : hãy dùng kính ngữ đúng lúc và đúng cách

Bài viết gốc được đăng tải tại kysubrse.com

Có thể bạn quan tâm:

Xem thêm Việc làm cntt hấp dẫn trên TopDev

Indexeddb là gì? – Tất cả những điều cần biết

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Hôm nay lại rảnh task nên ngồi lò mò tìm hiểu IndexedDB. Trước do ngồi test API với Postman nên có thấy ở phần Storage. Cũng tò mò là ngoài những thằng phổ biến khác, sao ta lại cần thêm thằng này?.

Những điều cần biết về z-index trong css

System Design Cơ Bản - Phần 5: Indexes

Nhiều khi cũng thấy lạ, chẳng hiểu sao cứ hay tò mò, chắc là máu developer ngấm vào trong nên vậy. Thôi kệ.

Quất ngay và luôn thôi cho nóng nha mấy ba!

1. Khái niệm Indexeddb

Theo như định nghĩa ghi ở Mozilla thì:

IndexedDB là database lưu trữ ở phía client, trên browser của người sử dụng. IndexedDB là NoSQL Database, ngoài ra nó cũng hộ trợ các thao tác get, put và transactions.

Chi tiết hơn

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data.

IndexedDB là low-level API cho việc lưu trữ phía client, bao gôm cả files và blobs. API này sử dụng indexes để tăng hiệu năng khi tìm kiếm dữ liệu.

Tại sao lại cần thằng cu này để lưu trữ?.

Câu trả lời là càng ngày việc lưu trữ các thông tin càng ngày càng nhiều. Số lượng thông tin lưu trữ lớn, LocalStorage thì chỉ lưu trữ có giới hạn (tối đa 5MB), nên ta cần một công cụ khác hỗ trợ lưu trữ trên browser khác.

Đó chính là lý do ta cần tới indexedDB

2. Sử dụng – usage

Nếu đã tiếp xúc với các hệ cơ sở dữ liệu khác như Oracle hay PostgreSQL thì không khó để nắm bắt cách thức làm việc với IndexedDB.

Cụ thể, có thể chia thành 5 bước như sau

Open a database – Mở kết nối với database
Create an object store in the database – Lưu trữ các object vào database
Start a transaction and make a request to do some database operation, like adding or retrieving data – bắt đầu một transaction và gửi request tới database, thêm hoặc nhận data
Wait for the operation to complete by listening to the right kind of DOM event – chờ actions hoàn thành thông qua việc lắng nghe trên DOM
Do something with the results (which can be found on the request object).

2.1 Các thành phần

Để hiểu rõ hơn, bắt buộc ta phải nắm các khái niệm sau:

This is the highest level of IndexedDB. It contains the object stores, which in turn contain the data you would like to persist. You can create multiple databases with whatever names you choose, but generally there is one database per app.

Database là cấp cao nhất của IndexedDB. Nó bao gồm các object, thứ được trả về khi ta query. Ta có thể tạo nhiều database với tên bất kì, nhưng thông thường thì chỉ có một database trên một app.

Index – khái niệm index cũng giống như các hệ cơ sở dữ liệu khác, dùng để lấy ra một record bất kì

For example, if you’re storing people, you may want to fetch them later by their name, age, or favorite animal.

Ví dụ, nếu ta lưu trữ đối tượng người, ta có thể muốn lấy tên người đó, tuổi người đó, con vật mà họ thích. Lúc này index sẽ giúp đỡ rất nhiều.

Cursor – con trỏ chắc không còn là khái niệm xa lạ, dùng để di chuyển giữa các record (khi ta có nhiều record)

Transaction – là thứ cần phải có và phải nắm bắt ở mọi hệ cơ sở dữ liệu (để đảm bảo tính toàn vẹn của dữ liệu). Không có chuyện hai người cùng lúc truy xuất để xóa một record trong DB.

3. Đồng bộ (Synchronous) và bất đồng bộ (Asynchronous)

Vì là loại database hoạt động ở phía client nên IndexedDB hoạt động theo cả cơ chế bất đồng bộ (Asynchronous) và đồng bộ (Synchronous).

Hoạt động theo cơ chế bất đồng bộ không những giúp việc thực thi trở nên linh động, nó còn tránh các vấn đề khi đang query thì block client của user (kiểu như not responding).

Đây cũng là một vấn đề cần lưu ý khi làm việc với hệ cơ sở dữ liệu này, lưu ý tới tính bất đồng bộ. Còn về cơ chế đồng bộ:

The synchronous API was intended for use only with Web Workers but was removed from the spec because it was unclear whether it was needed

Synchronous API chỉ được sử dụng với Web Workers nhưng đã bị xóa đi vì không rõ có cần thiết hay không.

Chỗ cần thiết này thì tôi chưa hiểu lắm, nên cũng không biết giải thích sao cho mấy ông, chắc phải để bài viết sau.

4. Ưu, nhược điểm

Về ưu điểm, dễ dàng nhận ra ưu điểm của IndexedDB là nó không có giới hạn. Đối với LocalStorage, thông thường là 5MB, nếu cần lưu ở phía client nhiều hơn 5MB, indexed tất nhiên không phải là lựa chọn tồi.

Ưu điểm thứ hai là lưu trữ có cấu trúc.

Structured storage; you can store objects in IndexedDB object stores and query for those objects by their fields.

Là lưu trữ có cấu trúc, ta có thể lưu trữ các object trong IndexedDB và truy vấn các objects đó chỉ với những field mà chúng có.

Về nhược điểm, indexed là loại hình storage mới trên phía client, nên ở một số trình duyệt cũ có thể không sử dụng được.

5. Khi nào nên sử dụng?

Tuy là hệ cơ sở dữ liệu lưu trữ ở phía client, nhưng không phải lúc nào cũng sử dụng IndexedDB.

Nếu ứng dụng hoặc website ta muốn phát triển yêu cầu chạy ở tất cả các browser cũ và mới, không nên sử dụng indexed.

Ngoài ra, nếu lớn thì viết API query, còn nhỏ thì dùng LocalStorage, nên đôi khi indexed trở nên lỡ cỡ.

6. Tham khảo thêm

Nốt công tìm hiểu về các hình thức lưu trữ phía client thì ngại gì mà không tìm hiểu Cookies

Cảm ơn vì đã đọc bài, nếu hay thì nhớ chia sẻ bài viết nha. Happy coding!

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev

Tại sao lập trình viên thường làm việc vào ban đêm?

Bài viết được sự cho phép của smartjob.vn

Khi hỏi một lập trình viên khoảng thời gian nào tốt nhất để làm việc, chắc chắn bạn sẽ nhận được câu trả lời là ban đêm.

Các lập trình viên cho rằng khoảng thời gian làm việc cho hiệu suất cao nhất chính là ban đêm. Họ chính là những cỗ máy biến cafe thành code hay các dòng lệnh. Tại sao vậy? Lý do đưa ra thật đơn giản, đó là khoảng thời gian yên tĩnh nhất, tránh phiền nhiễu xung quanh. Nhưng để tránh những điều đó họ chỉ cần đóng cửa lại là được. Phải chăng ban đêm còn có điều gì đặc biết thu hút các lập trình viên đến vậy?

10 Kỹ năng quan trọng cần có của Front-end để tìm công việc dễ dàng hơn

10 nguyên tắc lập trình nền tảng mà lập trình viên nào cũng cần biết

Nghề lập trình viên là một nghề mang tính chất sáng tạo, vì vậy có thể gói gọn vào những điều sau:

1. Lịch làm việc của lập trình viên

Lịch làm việc của những người chuyên làm công việc mang tính sáng tạo đòi hỏi phải tập trung toàn bộ tâm trí, chỉ cần vài phút sao nhãng là mất cả giờ đồng hồ làm việc quý giá. Công việc của lập trình viên cần đầu tư rất lớn về trí não và thời gian. Đây chính là lý do vì sao các lập trình viên rất khó chịu khi bị quấy rầy. Công việc của họ chỉ được thực hiện vào ban đêm khi người khác đã đi ngủ, bởi ban ngày công việc bị gián đoạn vì các lý do như đi gặp khách hàng, trả lời email hay điện thoại.

Ban đêm là thời điểm làm việc lý tưởng của lập trình viên

2. Cơ chế nghỉ ngơi của não bộ

Dù làm nghề gì thì đều cần được đi ngủ vào ban đêm và họ sẽ cảm thấy tỉnh táo hơn vào ban ngày. Lập trình viên cũng thế, họ không phải siêu nhân khi thức thâu đêm suốt sáng. Vậy tại sao họ không làm việc lúc cơ thể tỉnh táo nhất? Tại sao phải làm việc lúc não bộ cần nghỉ ngơi? Khi mệt mỏi não bộ cần phải tập trung và khi đó sự mệt mỏi sẽ giúp các lập trình viên tập trung cao hơn.

Khi uống các chất kích thích, não bộ trở nên hiếu động hơn và lúc đó lập trình viên thường dễ sao nhãng công việc của mình, thay vào đó họ lại chuyển sang đọc tin tức, kiểm tra email hoặc nghe nhạc. Trên thực tế, khi tràn trề năng lượng, não bộ lại không thể tập trung làm việc được. Ngược lại khi mệt mỏi, lập trình viên sẽ tập trung toàn bộ sức lực còn lại để viết code.

3. Ánh sáng từ màn hình máy tính

Ánh sáng xanh được tích hợp vào màn hình giúp người dùng nhìn thấy nội dung hiển thị trên đó được rõ hơn. Khi tiếp xúc quá lâu với ánh sáng xanh từ màn hình vào đêm, não sẽ tự động ngưng sản xuất melatonin, một loại hormone điều tiết giấc ngủ. Chỉ cần nhìn chằm chằm vào một nguồn sáng trong buổi tối là giấc ngủ bị trì hoãn. Lập trình viên có thể quên đi mệt mỏi cho đến tận 3h – 4h sáng bởi lúc đó mắt họ đang dán chặt vào cái màn hình máy tính. Với sự lặp đi lặp lại như vậy, các lập trình viên đã vô tình tạo cho mình một giờ sinh học khác.

Các lập trình viên thường làm việc vào ban đêm vì bộ não khi đó không có xu hướng tìm kiếm những điều phiền nhiễu xung quanh, ánh sáng của màn hình máy tính sẽ làm họ tỉnh táo hơn và vì họ không muốn bị áp đặt thời gian. Vẫn biết rằng làm việc ban đêm sẽ tập trung và đạt hiệu quả cao hơn. Tuy nhiên về lâu dài sẽ ảnh hưởng không nhỏ đến sức khỏe. Vì vậy dù công việc có cần sự yên tĩnh thế nào đi nữa thì các coder cũng nên dành vài tiếng ban đêm để nghỉ ngơi và thư giãn nhé.

Bài viết gốc được đăng tải tại smartjob.vn

Có thể bạn quan tâm:

Truy cập ngay việc làm IT đãi ngộ tốt trên TopDev

Cách chuyển nhanh toàn bộ công thức MathType sang Equation

Bài viết được sự cho phép của blogchiasekienthuc.com

Trong bài viết chuyển đổi công thức qua lại giữa MathType và Equation Office mình đã hướng dẫn với các bạn khá chi tiết về cách chuyển đổi công thức MathType sang công thức Equation rồi.

Tuy nhiên, phải công tâm mà nói thì cách làm này còn khá là thủ công và nó chỉ áp dụng được với Word 2019 hoặc các phiên bản mới hơn mà thôi…

7 lý do bạn không nên sử dụng TypeScript

Học kiến thức căn bản TypeScript chỉ trong 30 phút

Biết được nhược điểm này nên mình đã giành khá nhiều thời gian và công sức để tìm hiểu thêm. Và cuối cùng, vào một ngày đẹp trời thì thần may mắn đã dơ tay và mỉm cưới với mình :))

Về cách làm thì chúng ta sẽ thực hiện “đánh lừa” Windows và Word là MathType không được cài đặt trên hệ thống. Khi đó hộp thoại Convert Equation to Office Math sẽ xuất hiện.

Hộp thoại này sẽ hỗ trợ chúng ta chuyển nhanh toàn bộ công thức MathType sang Equation một cách tự động hoàn toàn .

NOTE: Bài viết này được mình hướng dẫn trên hệ điều hành Windows 10, phiên bản Office 2019 và phần mềm MathType 7.4. Các bạn cũng có thể áp dụng tương tự đối với các phiên bản khác nhé !

#1. Các bước thực hiện chuyển công thức MathType sang Equation

+ Bước 1: Tắt hoàn toàn MathType nếu bạn đang mở và đóng luôn MathType chạy ngầm trong Taskbar nhé các bạn.

Trên thanh Taskbar, bạn hãy mở rộng các icon đang ẩn trên thanh Taskbar ra => nháy chuột phải vào icon biểu tượng MathType => và chọn Exit

+ Bước 2: Tùy chỉnh hiển thị phần mở rộng của tệp tin.

Thực hiện: Bạn mở File Explorer ra (nhấn tổ hợp Windows + E) => chọn View => đánh dấu chọn vào dòng File name extensions..

Nếu không thực hiện được thì bạn có thể xem các bước hướng dẫn chi tiết trong bài viết này nhé: Làm thế nào để hiển thị đuôi file trên Windows XP/ 7/ 8/ 10

+ Bước 3: Tìm đến file thực thi MathType.exe

Cách 1: Nháy chuột phải vào icon biểu tượng MathType trên màn hình Desktop => chọn Open file location

Cách 2: Trường hợp biểu tượng MathType của bạn không xuất hiện trên màn hình nền thì bạn có thể tìm theo đường dẫn sau: This PC hoặc Computer (Windows + E) => System (C:) => Program Files (x86) => MathType =>..

Trong đó thì:

System ở đây là tên ô C – ổ chứa hệ điều hành của mình.
Nếu không tìm thấy thư mục Program Files (x86) thì bạn hãy chọn thư mục Program File

+ Bước 4: Nháy chuột phải vào file MathType.exe => chọn Rename => thay đuôi exe thành txt như hình bên dưới.

+ Bước 5: Nhấn phím Enter trên bàn phím => hộp thoại Rename xuất hiện với giao diện như hình bên dưới

Nội dung chính của hộp thoại là: Nếu bạn thay đổi phần mở rộng tên tệp, tệp có thể không sử dụng được. Bạn có chắc chắn muốn thay đổi nó không?

=> Nhấn chọn Yes để xác nhận việc thay đổi.

+ Bước 6: Khởi động tệp tin *.docx có công thức mà bạn muốn chuyển đổi => nháy đúp chuột vào một công thức bất kì => hộp thoại Convert Equation to Office Math xuất hiện, khi đó bạn hãy đánh dấu chọn vào dòng Apply to all equations => chọn Yes là xong.

Quá trình chuyển đổi sẽ tự động diễn ra, nhanh hay chậm thì sẽ phụ thuộc vào số lượng công thức và cấu hình máy tính của bạn. Đây kết quả sau khi chuyển vẫn đẹp và vẫn đúng theo các quy ước Toán học quốc tế.

#2. Khôi phục lại MathType về mặc định

MathType hiện tại đã bị vô hiệu hóa (vì chúng ta đã đổi file *.exe thành *.txt), nên chúng ta không thể sử dụng nó để soạn thảo công thức được. Muốn sử dụng được bạn bạn khôi phục lại trước đã.

Cách thực hiện rất đơn giản bạn thôi, chỉ cần tìm đến tệp tin MathType.exe.txt => nháy chuột phải chọn Rename => và đổi lại thành định dạng *.exe là xong.

#3. Lời kết

Như vậy là mình đã hướng dẫn xong cho bạn cách chuyển nhanh toàn bộ công thức MathType sang Equation một cách tự động rồi nhé. Rất là hữu ích phải không nào 🙂

Công thức được soạn bằng MathType là rất tốt, nó hoàn toàn đáp ứng được các quy ước và tiêu chuẩn Toán học của quốc tế

Vậy một câu hỏi được đặt ra là tại sao chúng ta cần phải chuyển công thức MathType sang công thức Equation? Câu trả lời rất đơn giản, việc chuyển đổi này chỉ diễn ra khi chúng ta cần sao chép công thức sang PowerPoint.

Nếu không chuyển công thức sang Equation thì khi dán vào PowerPoint trông nó sẽ rất xấu. Cụ thể thì công thức không tự động đồng bộ với Template. Ngoài ra, nếu cần định dạng lại màu chữ, cỡ chữ thì các thao tác thực hiện cũng khá phức tạp..

Okay, hi vọng là bài viết này sẽ hữu ích đối với bạn. Xin chào tạm biệt và hẹn gặp lại các bạn trong những bài viết tiếp theo !

Nhựt Nguyễn – Bài viết gốc tại blogchiasekienthuc.com

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev

Selenium: Chọn ngày tháng từ calendar

Bài viết được sự cho phép của tác giả To Thi Van Anh

Sau một thời gian trôi nổi qua các chủ đề, hôm nay mình lại quay lại Selenium đây thỉnh thoảng đảo gió cho có thêm nguồn năng lượng mới cái!.

Các kiểu “đợi chờ” trong Selenium Webdriver: Implicit wait, Explicit wait và Fluent wait

Selenium là gì? Giới thiệu chi tiết về Selenium Automation Testing

Có một loại element bạn sẽ rất hay gặp ở một số trang như đặt vé máy bay hoặc là đặt phòng khách sạn nhà hàng, vầng đó là chọn ngày tháng năm. Trên trang web sẽ có một hay một vài trường khi mà bạn click vào đó nó sẽ hiện ra một bảng ngày tháng (gọi là calendar), việc của bạn là chọn một giá trị ngày tháng bất kì nào đó, và thay vì bạn chọn bằng tay lần này qua lần khác, thì bây giờ sẽ là viết code selnium để nó chọn cho bạn mỗi lần bạn chạy test. Bạn sẽ làm như thế nào?

Tìm hiểu vấn đề

Lướt sơ qua một số các nhập dữ liệu kiểu này, thì có thể có hai trường hợp và thực hiện như sau:

1. Bạn có thể sendkey trực tiếp vào trường ngày tháng đó một giá trị bất kỳ nào đó đúng format quy định là được.

2. Click vào trường đó, thực hiện next, back tháng tùy ý, sau đó chọn 1 giá trị ngày bất kỳ nào đó của tháng, dữ liệu sẽ được fill theo đúng giá trị bạn vừa chọn vào ô text.

Với cách đầu tiên thì quá đơn giản rồi, mình không nói đến nữa, vì nếu làm cách đó thì việc duy nhất bạn cần phải chú ý chỉ là nhập đúng format của ngày tháng cho trường đó là được, nhưng phải lưu ý là không phải chỗ nào cũng dùng cách đó được đâu nha, vì vậy trước khi quyết định phải xem các thuộc tính, kiểu html của trường dữ liệu trước đã nhé!

Với cách thứ hai, cũng có nhiều hướng giải quyết, nhưng hôm nay mình sẽ chia sẻ với các bạn một cách mà mình nghĩ rằng nó cũng khá ổn, thông qua ví dụ cụ thể dưới này.

Giải quyết vấn đề

Để minh họa cho cách làm thứ hai, mình sẽ sử dụng trang web về du lịch có link nhu sau: https://www.path2usa.com/travel-companions

Đầu tiên, thực hiện click vào trường Date với cú pháp:

driver.findElement(By.id("travel_date")).click();

Tiếp theo, nhấn next chọn tháng – ở đây mình sẽ giả định trường hợp là chúng ta sẽ chọn ngày tháng sau ngày tháng hiện tại nên chỉ thực hiện nhấn next thôi, đối với các trường hợp khác thì bạn có thể kế hợp thêm một số các điều kiện cụ thể nào đó, để back, next cho phù hợp thôi.

Inspect element, ta có html, cssClass như phía dưới:

Và giờ sẽ làm gì với chỗ này, ta có thể lấy thông tin tháng đang hiển thị trên trang để thực hiện so sánh với giá trị tháng ta muốn chọn. Nếu giá trị lấy ra này không bằng giá trị mong muốn thì ta sẽ thực hiện nhấn next cho đến khi đúng thì thôi

Mình muốn chọn tháng đi là tháng 5 (May) – lưu ý trên web hiển thị như thế nào thì mình sử dụng giá trị với kiểu viết như thế nha, ở đây các tháng hiển thị theo tên tiếng anh thì mình sẽ dùng đúng tên tiếng anh của tháng 5 – May.

Mình sẽ thực hiện nhấn next cho đến khi nào giá trị tháng mong muốn lấy ra đúng thì thôi, nên là mình sẽ dùng vòng lặp while. Đơn giản dễ hiểu hơn đó là: vòng while cứ lặp đi lặp lại, và nếu như đoạn text lấy ra được vẫn khác May sau mỗi lần lặp thì lại click nút next 1 lần, sau đó lại getText rồi lại so sánh:

While (!driver.findElement(By.cssSelector 
         (".datepicker-days .datepicker-switch")).getText().contains("May"))
{
   btnNext.click();
}

Vòng lặp này sẽ dừng khi mà nó tìm được đúng tên tháng của mình ở trên kia – là May.

Sau khi chọn được tháng rồi, thì chọn ngày trong tháng đó. Các bạn xem html dưới này nhé:

Ta có thứ, tuần nằm trong thẻ <tr>, và với ngày cụ thể sẽ nằm trong thẻ <td> tương ứng với <tr>. Các bạn có thể thực hiện inspect trực tiếp trên trình duyệt của các bạn để xem cho trực quan.

Công việc của chúng ta ở bước này chỉ là thực hiện click vào một ngày cụ thể nào đó, tuy nhiên vấn đề là không có id duy nhất cho từng ngày, mà chỉ có thông tin về class thôi. Muốn chọn được một ngày duy nhất nào đó, các bạn có thể sử dụng xpath tuyệt đối của nó, nhưng mình không khuyến khích cách này đâu!

Ở đây thì mình sẽ thực hiện như sau:

1. Ta sẽ lấy ra danh sách các ngày của tháng này theo cssClass:

List<WebElement> dates = driver.findElements(By.cssSelector(".day"));
int count = dates.size();

2. Sau đó duyệt qua tất cả các ngày lấy được, so sánh với giá trị ngày mong muốn, nếu nó đúng là ngày cần lấy rồi thì thực hiện click vào ngày đó, như phía dưới này của mình là ngày 10 – các bạn cũng có thể sử dụng biến và cho nó ra ngoài, rồi thay bằng giá trị khác tùy ý:

for (int i = 0; i < count; i++){ 
    String text = driver.findElements(By.cssSelector(".day"))
        .get(i).getText();
    if (text.equalsIgnoreCase("10")){
         driver.findElements(By.cssSelector(".day")).get(i).click();
         break;
     }
}

Khi đã tìm được rồi thì không cần phải tìm tiếp nữa, nên sẽ dùng break để ra khỏi vòng lặp for luôn nhé!

Code đầy đủ thì bạn chỉ cần copy theo từng đoạn trên này rồi ghép lại, thêm thư viện là chạy được thôi ah.

Vậy là chỉ với những bước đơn giản như trên bạn đã có thêm một cách để chọn ngày tháng từ calendar rồi, Hi vọng bài viết này hữu ích trong quá trình thực hành và sử dụng selenium cho tất cả các bạn! hehe

Tuần mới nhiều niềm vui nhé!

Bài viết gốc được đăng tải tại vananhtooo.wordpress.com

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev

Gọi các object của Autowired Collections theo thứ tự trong Spring Framework

Bài viết được sự cho phép của smartjob.vn

Đây là tính năng mới bổ sung từ phiên bản 4.0 của Spring Framework. Chúng ta có một Collections chứa các bean (mỗi bean này đều được gán annotation @Autowired ). Để xếp thứ tự xử lý khởi tạo object từ bean, ta gán Annotation @Order đứng trước bean kèm theo số thứ tự được gọi đến. Số thứ tự này không nhất thiết phải theo tuần tự 1,2,3…. chúng ta có thể gán thứ tự 1, 5, 9, 42, v…

04 Điều Cần Chú Ý Cho Người Mới Làm Automation Test

Automation skills cho tester già mà lười

Chúng tôi sử dụng các công cụ, thư viện mới nhất tại thời điểm viết bài, cùng với định hướng sử dụng các best-practice khi viết mã nguồn.
Công cụ
– IntelliJ IDEA 2016.1.2
– Gradle build system 2.13

Thư viện:
– Spring Framework version 4.2.6.RELEASE (spring-core, spring-context)

Khởi tạo project:

Khai báo GAV (Group – ArtifactId – Version) cho ứng dụng đang thực hiện

Thiết lập các tùy chọn liên quan đến Gradle build system

Khuôn mẫu project sử dụng Gradle build system mà bạn thấy là chưa đầy đủ. Bạn cần tạo thêm 7 thư mục mới (src, main, test, java, resources) theo cấu trúc quy ước như sau:

Bởi vì bạn làm đúng theo quy ước, nên sau khi thêm thư mục mới vào project, các icon thư mục tự chuyển sang hình icon khác, trực quan, tương ứng với mục đích sử dụng.

Sửa lại file build.gradle trở thành:

group 'vn.smartjob.demo'
version '1.0.0-SNAPSHOT'

apply plugin: 'java'

sourceCompatibility = 1.8

repositories {
mavenCentral()
}

dependencies {
testCompile group: 'junit', name: 'junit', version: '4.12'
compile("org.springframework:spring-core:4.2.6.RELEASE")
compile("org.springframework:spring-context:4.2.6.RELEASE")
}

Tại dòng 1, Khai báo ứng dụng autowiredOrder thuộc nhóm các ứng dụng do SmartJob.vn sản xuất.
Tại dòng 2, Khai báo phiên bản ứng dụng autowiredOrder là 1.0.0 và đang trong quá trình phát triển. Hậu tố -SNAPSHOT nhắc nhở build system (Gradle hoặc Maven) rằng luôn phải gọi ra autowiredOrder (với tư cách là một dependency) mới mỗi lần sử dụng (không sử dụng dữ liệu cache), do ứng dụng đang trong quá trình phát triển.
Tại dòng 6, Khai báo môi trường thực thi ứng dụng là Java 8, nếu môi trường thực thi (server, PC) sử dụng Java 7 chẳng hạn, ứng dụng autowiredOrder sẽ không chạy được. Và tất nhiên, khi môi trường thực thi là Java 8 thì bạn phải sử dụng Java từ phiên bản 8 trở lên để biên dịch cũng như đóng gói ứng dụng.
Tại dòng 13 và 14, ứng dụng sử dụng dependency spring-core và spring-context với phiên bản mới nhất hiện tại 4.2.6.RELEASE

class Company . Một công ty sẽ đăng tuyển nhiều job. List job được gán annotation @Autowired để Spring Framework nhận diện đối tượng được Autowire, được gọi ra ở dòng 11 trong class App : Company company = applicationContext.getBean(Company.class);

package vn.smartJob.demoAutowiredOrder;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import java.util.List;

@Component
public class Company {

@Autowired
private List<Job> jobs;

public List<Job> getJobs() {
return jobs;
}

public void setJobs(List<Job> jobs) {
this.jobs = jobs;
}

}

Class Job

package vn.smartJob.demoAutowiredOrder;

public abstract class Job {

}

Mỗi job sẽ được sắp xếp, phân nhóm theo các chuyên môn khác nhau. Dưới đây chúng ta tạo 3 loại job là JavaJob , PHPJob , CsharpJob . Các job đều có điểm chung nhất định và kết thừa từ abstract class Job .

Class JavaJob

Class PHPJob

package vn.smartJob.demoAutowiredOrder;

import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Component
@Order(value = 42)
public class PHPJob extends Job {
@Override
public String toString() {
return "PHP job";
}
}

Class CsharpJob

package vn.smartJob.demoAutowiredOrder;

import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Component
@Order(value = 2)
public class CsharpJob extends Job {

}

Như đã nói trong bài viết Kỹ thuật Autowiring sử dụng annotation trong Spring Framework, có 3 cách để Autowire bean. Trong bài viết này chúng ta cấu hình sử dụng code Java bởi class có tên là Config (cách đặt tên là tùy chọn)

package vn.smartJob;

import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;

@Configuration
@ComponentScan(basePackages = {"vn.smartJob.demoAutowiredOrder"})
public class Config {

}

Class ứng dụng chính App

package vn.smartJob;

import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.AnnotationConfigApplicationContext;
import vn.smartJob.demoAutowiredOrder.Company;

public class App {

public static void main(String... args) {
ApplicationContext applicationContext = new AnnotationConfigApplicationContext(Config.class);
Company company = applicationContext.getBean(Company.class);
System.out.println(company.getJobs());
}

}

// Kết quả
// [vn.smartJob.demoAutowiredOrder.CsharpJob@4df828d7, vn.smartJob.demoAutowiredOrder.JavaJob@b59d31, PHP job]

Chúng ta thấy thứ tự xuất hiện là: CsharpJob, JavaJob và cuối cùng là PHPJob, tương ứng với giá trị Order của chúng là 2, 3 và 42.

Download source code: autowiredOrder hoặc clone/fork từ GitHub: https://github.com/SmartJobVN/autowiredOrder

Bài viết gốc được đăng tải tại smartjob.vn

Có thể bạn quan tâm:

Xem thêm Jobs Developer hấp dẫn trên TopDev

The solution for Nearest Neighbors Search – Part 1

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Nearest Neighbors Search (Tìm kiếm người hàng xóm gần nhất trong khu dân cư) là bài toán phổ biến được nhiều người biết tới. Vấn đề đặt ra trong bài toán này cũng là vấn đề mà các hãng gọi xe lớn như Grab, Uber, GoJerk đã giải quyết.

Đặt xe ở vị trí A, tìm tài xế gần nhất trong phạm vi 3km hoặc mở rộng hơn nếu không có tài xế.

Cài đặt Elasticsearch trên CentOS

Function-Score trong Elasticsearch

Giải quyết tốt bài toán này cho ta phương án hoàn hảo để thiết kế các hệ thống lớn như đặt xe với Uber hay Lift. Phát triển các ứng dụng hẹn hò dựa theo vị trí như Tinder, …

1. Về Nearest Neighbors Search

Nearest Neighbors Search is the optimization problem of finding the point in a given set that is closest (or most similar) to a given point. Closeness is typically expressed in terms of a dissimilarity function: the less similar the objects, the larger the function values.

Nearest Neighbors Search là bài toán tối ưu tìm kiếm một điểm gần nhất (hoặc tương tự như vậy) khi đã có một điểm xác định trước. Mức độ tìm kiếm thường được thể hiện dưới dạng hàm không giống nhau: các đối tượng càng ít giống nhau, giá trị hàm càng lớn.

Về độ rộng của square tìm kiếm, có thể là circle (tròn) hoặc rectrangle (vuông). Tìm kiếm một hoặc tất cả các điểm trong phạm vi đã được định sẵn. Solution cơ bản nhất để giải quyết bài toán này là tìm kiếm theo hệ trục tọa độ x,y

Tìm kiếm tất cả các điểm nằm trong khoảng từ x1 -> x2 và từ y1 -> y2.

2. SQL Database và Binary Search Tree

Trường hợp sử dụng SQL Database relation, ta có thể lưu toàn bộ x,y với table id

id || X || y
unique || lattitude || longitude

Lúc này, nếu muốn tìm kiếm một point trong circle hay retrangle, có thể sử dụng SQL BETWEEN. Cách làm này ổn với điều kiện dữ liệu tìm kiếm không quá lớn. Nếu tập dữ liệu tìm kiếm lớn và không gian tìm kiếm rộng, slowdown peformance là chuyện đương nhiên và có thể nhìn thấy trước được.

SELECT id FROM table WHERE x BETWEEN x1 AND x2 AND y BETWEEN y1 AND y2

Một cách khác có thể sử dụng cho bài toán Nearest Neighbors Search là sử dụng Binary Search Tree (BST).

Với BST, bài toán chuyển thành Find the closest element. Tìm node có giá trị gần nhất với giá trị input.

// For above binary search tree
Input : k = 4
Output : 4

Input : k = 18
Output : 17

Input : k = 12
Output : 9

Áp dụng Sort trên BST, ta có phương án giải quyết

If target value K is present in given BST, then it’s the node having minimum absolute difference.
If target value K is less than the value of current node then move to the left child.
If target value K is greater than the value of current node then move to the right child.

Nếu giá K tồn tại trên BST, thì bản thân Node đó là node có độ sai lệnh nhỏ nhất
Nếu K nhỏ hơn giá tị Node hiện tại, di chuyển nó về phía bên trái của cây BST
Nếu giá trị K lớn hơn giá tị Node hiện tại, di chuyển nó phía bên phải của cây BST

3. Giải pháp khác?

Cả hai solutions SQL Database và Binary Search Tree đều là giải pháp cơ bản để giải quyết bài toán Nearest Neighbors Search. Tuy nhiên, với lượng dữ liệu lớn và tần suất tìm kiếm cao.

Rõ ràng ta cần một giải pháp tốt hơn để giới hạn không gian tìm kiếm. Giới hạn được không gian tìm kiếm sẽ tăng tốc thời gian phản hồi. Giải pháp khác được đề cập tới ở đây là R-Trees (Range Querying).

Solution sử dụng R-Trees sẽ được viết ở bài viết thứ hai trên Kieblog.

4. Tham khảo

My pleasure when you’re here to read – Have a good mood – Happy Coding!

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev

4 vấn đề của React mà ở trường có thể không dạy bạn

react developing — 4 vấn đề của React mà ở trường có thể không dạy bạn

Tác giả: Reed Barger

1. Trạng thái React – React state thực sự được cập nhật như thế nào?

Là một React devs, bạn biết rằng trạng thái đó có thể được tạo và cập nhật với useState và useReducerhook.

Nhưng điều gì sẽ xảy ra chính xác khi bạn cập nhật trạng thái của một thành phần bằng một trong số các hooks? Trạng thái được cập nhật ngay lập tức hay được thực hiện sau đó?

Tìm việc làm lập trình viên React

Hãy xem đoạn code sau, đây là một ứng dụng truy cập rất đơn giản. Như bạn mong đợi, bạn có thể nhấp vào nút và bộ đếm tăng lên 1.

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0)

  function addOne() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1> {/* 1 (as we expect) */}

      <button onClick={addOne}>+ 1</button>
    </div>
  );
}

Nhưng điều gì sẽ xảy ra nếu chúng ta cố gắng thêm một dòng bổ sung, dòng này cũng cập nhật số lượng của chúng ta? Khi bạn nhấp vào nút, số lượng hiển thị của chúng tôi sẽ tăng lên một hay hai?

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0)

  function addOne() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1> {/* 1?! */}

      <button onClick={addOne}>+ 1</button>
    </div>
  );
}

Nếu chạy đoạn code này, nó chỉ tăng lên một! Mặc dù đã cố gắng tăng số lượng lên một hai lần, với hai bản cập nhật trạng thái riêng biệt.

Tại sao bộ đếm này hiển thị 1, mặc dù trạng thái tăng rõ ràng 1 hai lần?

Lý do là khi React developing việc lên lịch thực hiện cập nhật trạng thái khi chúng ta cập nhật trạng thái lần đầu tiên. Bởi vì nó chỉ được lên lịch và không được thực hiện ngay lập tức (không đồng bộ), count không được cập nhật trước khi chúng tôi cố gắng cập nhật nó lần thứ hai.

Nói cách khác, bởi vì cập nhật trạng thái được lên lịch, không được thực hiện ngay lập tức, lần thứ hai gọi setCount, count vẫn chỉ là 0, không phải 1.

Cách mà chúng ta có thể sửa lỗi này để cập nhật trạng thái một cách đáng tin cậy, mặc dù các cập nhật trạng thái là không đồng bộ, là sử dụng hàm bên trong có sẵn trong hàm useState setter.

Điều này cho phép chúng ta lấy trạng thái trước đó và trả về giá trị mà chúng ta muốn nó ở trong phần thân của hàm bên trong. Khi sử dụng mẫu này, bạn sẽ thấy rằng nó tăng lên hai như mong muốn ban đầu

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0)

  function addOne() {
    setCount(prevCount => prevCount + 1); // 1
    setCount(prevCount => prevCount + 1); // 2
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={addOne}>+ 1</button>
    </div>
  );
}

3 bước tối ưu hiệu năng React App bằng các API mới của React

5 dự án React buộc phải có trong porfolio của bạn

2. Sử dụng nhiều hiệu ứng để có kết quả tốt hơn

Khi sử dụng một hiệu ứng, hầu hết khi React developing, các developer sẽ chỉ sử dụng một useEffect và cố gắng thực hiện nhiều hiệu ứng khác trong cùng một hàm hiệu ứng. Bạn có thể quan sát điều đó thông qua đoạn code dưới đây

import React from "react";

export default function App() {
  const [posts, setPosts] = React.useState([]);
  const [comments, setComments] = React.useState([]);

  React.useEffect(() => {
    // fetching post data
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));

    // fetching comments data
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then((res) => res.json())
      .then((data) => setComments(data));
  }, []);

  return (
    <div>
      <PostsList posts={posts} />
      <CommentsList comments={comments} />
    </div>
  );
}

Thay vì cố gắng nhồi nhét tất cả các hiệu ứng phụ vào các chi tiết của một hiệu ứng chính, cũng như có thể sử dụng một hook trạng thái nhiều lần, bạn có thể sử dụng nhiều hiệu ứng hơn. Việc này sẽ giúp React hooks mang lại so với việc sử dụng các phương thức vòng đời – lifecycle methods trong các thành phần lớp.

Ví dụ với hàm componentDidMount, cần phải bao gồm bất kỳ hành động nào mà bạn muốn thực hiện sau khi các thành phần được gắn kết. Bạn không thể chia nhỏ các hiệu ứng phụ của mình thành nhiều phương thức – mỗi phương thức vòng đời trong các class có thể được sử dụng một lần và chỉ một lần.

Lợi ích chính của React hooks là có thể chia nhỏ code dựa trên những gì nó đang làm. Nó không chỉ có thể tách các hành động mà còn đang thực hiện sau khi kết xuất thành nhiều hiệu ứng mà còn có thể đồng định vị trạng thái của mình

import React from "react";

export default function App() {
  const [posts, setPosts] = React.useState([]);
  React.useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []);

  const [comments, setComments] = React.useState([]);
  React.useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/comments")
      .then((res) => res.json())
      .then((data) => setComments(data));
  }, []);

  return (
    <div>
      <PostsList posts={posts} />
      <CommentsList comments={comments} />
    </div>
  );
}

3. Không tối ưu hóa các chức năng cập nhật trạng thái (useState, useReducer)

Một nhiệm vụ phổ biến bất cứ khi nào chúng ta truyền một hàm gọi lại từ thành phần mẹ sang thành phần con là ngăn nó được tạo lại, trừ khi các đối số của nó đã thay đổi.

Có thể thực hiện việc tối ưu hóa này với sự hỗ trợ của useCallback hook.

useCallback được đặc biệt tạo ra cho các hàm gọi lại được chuyển cho các thành phần con, để đảm bảo rằng chúng không được tạo lại một cách không cần thiết, điều này dẫn đến việc ảnh hưởng đến hiệu suất đối với các thành phần bất cứ khi nào có kết xuất lại.

Điều này là do bất cứ khi nào parent component kết xuất lại, nó sẽ khiến tất cả các child components cũng hiển thị lại. Đây là nguyên nhân khiến các hàm callback được tạo lại trên mỗi lần hiển thị.

Tuy nhiên, nếu chúng ta đang sử dụng một hàm setter để cập nhật trạng thái mà chúng ta đã tạo bằng hook useState hoặc useReducer, chúng ta không cần kết thúc điều đó với useCallback.

Nói cách khác, không cần phải làm điều này:

import React from "react";

export default function App() {
  const [text, setText] = React.useState("")

  // Don't wrap setText in useCallback (it won't change as is)
  const handleSetText = React.useCallback((event) => {
    setText(event.target.value);
  }, [])

  return (
    <form>
      <Input text={text} handleSetText={handleSetText} />
      <button type="submit">Submit</button>
    </form>
  );
}

function Input({ text, handleSetText }) {
  return(
    <input type="text" value={text} onChange={handleSetText}  />
  )
}

4. useRef hook có thể duy trì trạng thái qua các lần hiển thị

Là các React devs và khi thực hiện việc lập trình với React developing sẽ rất hữu ích khi có thể tham chiếu đến một phần tử React nhất định với sự trợ giúp của một ref. Chúng tôi tạo các ref trong React với sự trợ giúp của useRef hook. Tuy nhiên, điều quan trọng cần lưu ý với useRef là không chỉ hữu ích cho việc tham chiếu đến một phần tử DOM nhất định.

Có một số lợi ích nhất định để có thể lưu trữ và cập nhật các giá trị useRef. Nó cho phép lưu trữ một giá trị không có trong bộ nhớ mà sẽ không bị xóa khi hiển thị lại.

Nếu muốn theo dõi một giá trị qua các lần hiển thị với sự trợ giúp của một biến đơn giản, nó sẽ được khởi động lại mỗi khi thành phần hiển thị. Tuy nhiên, nếu bạn sử dụng một tham chiếu, giá trị được lưu trữ trong đó sẽ không đổi trong các lần hiển thị thành phần.

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);
  const ref = React.useRef({ hasRendered: false });

  React.useEffect(() => {
    if (!ref.current.hasRendered) {
      ref.current.hasRendered = true;
      console.log("perform action only once!");
    }
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

Bài viết gốc đăng tải tại freecodecamp.org

Có thể bạn quan tâm:

Xem thêm Việc làm React hấp dẫn trên TopDev

Observer pattern là gì? – Nhất trụ kình thiên

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Hôm rồi có đứa em đi phỏng vấn, câu hỏi về Observer Pattern. Không có gì để nói nếu tới cái “main content” của pattern này nó cũng không nắm được. BỨC XÚC QUÁ!

Ngồi viết bài này chia sẻ với các “chư vị đồng môn”. Thứ nhất là về Observer pattern, hai nữa là cách học một pattern, áp dụng thực tiễn. Một số ông vừa mới nghĩ tới Design Pattern thôi đã toát mồ hôi hột, đi phỏng vấn được hỏi câu hỏi về Design Pattern run cầm cập, trả lời ú ớ.

Design pattern là gì? Tại sao nên sử dụng Design pattern?

Giới thiệu Abstract Factory Pattern

Nhưng thực chất người phỏng vấn không hề yêu cầu cao tới mức lên bảng cầm bút implement một design pattern hoàn chỉnh, cái người interview cần là cái concept của design pattern đó. Nắm được để biết trong tình huống (situatation) nào thì dùng pattern nào cho phù hợp. Còn lúc implement thì research, chả sao cả, gõ đúng keyword thôi.

Tại sao một Software Engineer tầm cỡ lại cần biết hết Design Pattern?. Vì nó là những mẫu thiết kế chuẩn mực đã được đúc kết từ trước, qua rất nhiều lần implement sai, những hệ thống “banh xa lông”, người ta mới rút ra được pattern đó.

1. Bắt đầu từ cái tên

Observer pattern – tách ra thành hai cái, ob và server. Ob ở đây là object (đối tượng). Còn server?, server ở đây là hướng về cái đối tượng trung tâm, ví như server. Mấy cái rìa rìa là client bên ngoài

Cũng là Behavior Pattern, nhắc tới là nhớ ngay cái pattern đó làm gì?, điển hình là cái Iterator Pattern – Đôi điều thú vị từ Kieblog. Nhìn cái chữ Iterator thôi là nhớ cái main content là loop, cái pattern này chắc chắn design ra để hỗ trỡ cái việc loop.

Đấy, chỉ cần nhớ cái concept vậy thôi là chả bao giờ sợ quên design pattern.

2. Định nghĩa về Observer pattern

Nhớ mãi không quên cái tên pattern rồi. Giờ đi vào detail, chứ nhớ không vậy thì cũng không ổn. Phải nắm rõ 2 thứ:

Khi nào sử dụng?, sử dụng như thế nào?
Điểm mạnh, điểm yếu

Observer Pattern là dạng pattern hành vi (Behavior Pattern). Định nghĩa:

Observer is a behavioral design pattern that lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they’re observing.

Observer là pattern hành vi, giúp chúng ta xác định cơ chế đăng kí để thông báo tới nhiều object về bất kì sự kiện nào xảy ra với đối tượng mà chúng đang đăng kí

Hơn nữa, do là Behavior Pattern nên Observer là mối quan hệ one to many relationship. Một ông ở giữa trụ, một trụ chống trời!

2.1 Bài toán thực tế

Bài toán thực tế. Có 10 người trong một khu dân cứ muốn mua iPhone 12 ở cửa hàng trung tâm khu dân cư.

Nếu cửa hàng không có cơ chế gì thông báo qua phone, qua mail, mỗi người sẽ tới hỏi cửa hàng một vài lần. Câu trả lời là có, chưa có, có chưa có. Không ổn!

Nếu cửa hàng gửi thông báo cho tất cả 10 người về việc có iPhone mới?. Ổn, nhưng gửi thông báo iPhone 11 cho cả 10 người thì người ta chửi sml. Ông X giàu tổ bố, nên chỉ thích 12, 11 đ’ đủ tuổi. Ông Y mẹ bán vàng, gia cảnh nghèo hơn, chỉ thích 8 Plus, nên thông báo về 12 ổng cũng la bm.

Từ bài toán thực tế này (chém thế chứ méo biết có phải không), Observer Pattern ra đời. Chỉ gửi notification cho những người đăng kí quan sát đối tượng (Objects) đó, ngoài ra không gửi, không mang tiếng spam.

2.2 Hiện thực ý tưởng

Đã có ý tưởng thế, pattern này chia thành hai thành phần chính là Publisher và Subscribers

Publisher: quản lý sự kiện mới (có notifi, có object mới). Sẽ publish thông tin đó ra cho subscribler.
Subscribers: ông này thì dễ hiểu rồi, như subscribers Youtube (ấn chuông), khi nào có video mới thì nó bắn notification lên. Chuẩn bài dễ hiểu!

Chi tiết hơn nha.

Đầu tiên, thằng Publisher. Trong Observer Pattern thì thằng Thằng này có 3 method: đăng kí (subscribe), bỏ đăng kí (unsubscribe) và thông báo (notify).

// Source code: refactoring.guru - observer pattern
public class EventManager {
Map<String, List<EventListener>> listeners = new HashMap<>();

public EventManager(String... operations) {
for (String operation : operations) {
this.listeners.put(operation, new ArrayList<>());
}
}

public void subscribe(String eventType, EventListener listener) {
List<EventListener> users = listeners.get(eventType);
users.add(listener);
}

public void unsubscribe(String eventType, EventListener listener) {
List<EventListener> users = listeners.get(eventType);
users.remove(listener);
}

public void notify(String eventType, File file) {
List<EventListener> users = listeners.get(eventType);
for (EventListener listener : users) {
listener.update(eventType, file);
}
}
}

Thằng Subscriber chỉ là một interface, tất cả những thằng nào đăng kí với Publisher đều implement cái interface này.

// Source code: refactoring.guru - observer pattern
package refactoring_guru.observer.example.listeners;

import java.io.File;

// Chỉ là interface, ông nào đăng kí thì implement interface này
public interface EventListener {
void update(String eventType, File file);
}

The Subscriber interface declares the notification interface. In most cases, it consists of a single update method.

Subscriber interface sẽ định nghĩa notification interface. Trong hầu hết các trường hợp, nó chỉ có duy nhất một method update.

Cuối cùng là ông Concrete Subscribers – ông này là người đăng kí cuối cùng. Ông này thì implement interface Subscribers. Ngoài ra còn override method update, tùy cơ ứng biến cho từng trường hợp. Khá linh động

// Source code: refactoring.guru - observer pattern
public class EmailNotificationListener implements EventListener {
private String email;

public EmailNotificationListener(String email) {
this.email = email;
}
// Override lại method update, tùy cơ ứng biến khi có thay đổi từ Publisher
@Override
public void update(String eventType, File file) {
System.out.println("Email to " + email + ": Someone has performed " + eventType + " operation with the following file: " + file.getName());
}
}

Ta cũng có ông Editor để implement các method sẽ gọi notify(), thông báo tới tất cả Subscriber

// Source code: refactoring.guru - observer pattern
package refactoring_guru.observer.example.editor;

import refactoring_guru.observer.example.publisher.EventManager;

import java.io.File;

public class Editor {
public EventManager events;
private File file;

public Editor() {
this.events = new EventManager("open", "save");
}
// Actions method đăng kí gọi notify
public void openFile(String filePath) {
this.file = new File(filePath);
events.notify("open", file);
}
// Actions method đăng kí gọi notify
public void saveFile() throws Exception {
if (this.file != null) {
events.notify("save", file);
} else {
throw new Exception("Please open a file first.");
}
}
}

Cuối cùng, main method chỉ việc đăng kí các event và gọi actions.

public class Demo {
public static void main(String[] args) {
Editor editor = new Editor();

// Đăng kí loại event và các actions muốn làm với event đó
editor.events.subscribe("open", new LogOpenListener("/path/to/log/file.txt"));
editor.events.subscribe("save", new EmailNotificationListener("admin@example.com"));

try {
// Gọi tới notify để thông báo tới các subscriber
editor.openFile("test.txt");
editor.saveFile();
} catch (Exception e) {
e.printStackTrace();
}
}
}

3. Ưu nhược điểm

Ưu điểm lớn nhất ở Observer Pattern là khi có thay đổi ở Subscribler sẽ không ảnh hưởng tới Publisher. Cái này vô cùng quan trọng, mỗi channel trên Youtube đôi khi tới cả triệu lượt theo dõi.

Nếu một thay đổi ở Subscriber đều cần update tới Publisher thì toang, toang thật sự.

Open/Closed Principle. You can introduce new subscriber classes without having to change the publisher’s code.

Có thể thêm mới một class subscriber mà không cần phải thay đổi gì code ở publisher.

Ngoài ra

You can establish relations between objects at runtime.

Với pattern này, ta còn có thể khởi tạo mối liên hệ giữa các object trong lúc runtime

4. Tham khảo

Đối với Java, trên Java 9 có thể sử dụng java.util.Observer. Trên Python thì sử dụng thông qua Pip pip install pattern-observer.

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev

Kỹ thuật Autowiring sử dụng annotation trong Spring Framework

Bài viết được sự cho phép của smartjob.vn

Có 3 cách để autowiring trong Spring là:
– Sử dụng annotation
– Sử dụng code Java
– Cấu hình trong file XML.

Bảo mật ứng dụng Java web bởi Spring Security

10 Frameworks tốt nhất hiện nay cho PHP

Trong bài viết này giới thiệu đến các bạn kỹ thuật autowiring dùng annotation. Đây là cách autowiring nhanh, dễ thực hiện nhất, do chỉ cần đặt annotation @Autowired trước phương thức set (dùng cho việc khởi tạo Object) (*) và đặt annotation @Service trước class chứa phương thức (*).

Ví dụ dưới đây minh họa một giao dịch ngân hàng: chuyển tiền giữa 2 tài khoản.

Chuẩn bị công cụ:
– JDK 8 update 92 [1]
– IntelliJ IDEA 2016.1.2 [2]
– Maven 3.3.9 [3]
– Apache Tomcat 8.0.35 [4]
– Trình duyệt web (Google Chrome, Mozilla Firefox, v.v..)

Khởi tạo project:

Chọn project Maven từ archetype:

Khai báo 3 tham số GAV khởi tạo project (GAV: Group – ArtifactId – Version)

GroupId: vn.smartjob.demo
ArtifactId: demoSpring
Version: 1.0.0-SNAPSHOT (bạn nên dùng hậu tố -SNAPSHOT).

Đặt tên project và chọn thư mục lưu project:

Bạn sửa lại file pom.xml như sau:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>
<groupId>vn.smartjob.demo</groupId>
<artifactId>demoSpring</artifactId>
<packaging>war</packaging>
<version>1.0.0-SNAPSHOT</version>
<name>demoSpring Maven Webapp</name>
<url>http://smartJob.vn</url>

<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>
</dependencies>
<build>
<finalName>demoSpring</finalName>
</build>
</project>

Các dependency quan trọng đã được highlight trong mã nguồn bên trên (dòng 22, 27, 32, 37, 42). Thư viện đã được import tự động

Do project được tạo ra từ Maven archetype, do đó cần chỉnh sửa thêm. Bạn tạo thư mục java để chứa mã nguồn.

Bạn cần thao tác này để IntelliJ IDEA nhận diện thư mục java là thư mục chứa source code.

Bạn sẽ tạo package (chứa các class Java) vào thư mục java vừa tạo ở trên.

Tạo thực thể tài khoản là Account:

package vn.smartJob.demoSpring.annotationBasedAutowiring;

import java.util.Date;

/**
* Account domain.
* 
* @author SmartJob
*/
public class Account {

private long id;
private String ownerName;
private double balance;
private Date accessTime;
private boolean locked;

public Account() {

}

public Account(long id, String ownerName, double balance, Date accessTime, boolean locked) {
this.id = id;
this.ownerName = ownerName;
this.balance = balance;
this.accessTime = accessTime;
this.locked = locked;
}

public long getId() {
return id;
}

public void setId(long id) {
this.id = id;
}

public String getOwnerName() {
return ownerName;
}

public void setOwnerName(String ownerName) {
this.ownerName = ownerName;
}

public double getBalance() {
return balance;
}

public void setBalance(double balance) {
this.balance = balance;
}

public Date getAccessTime() {
return accessTime;
}

public void setAccessTime(Date accessTime) {
this.accessTime = accessTime;
}

public boolean isLocked() {
return locked;
}

public void setLocked(boolean locked) {
this.locked = locked;
}

}

Interface AccountDAO dùng làm khuôn dạng cho các phương thức truy vấn dữ liệu:

package vn.smartJob.demoSpring.annotationBasedAutowiring;

import java.util.List;

/**
* Interface dùng để làm khuôn cho các phương thức (method) truy vấn dữ liệu.
* 
* @author SmartJob
*/
public interface AccountDAO {

public void insert(Account account);

public void update(Account account);

public void update(List<Account> accounts);

public void delete(long accountId);

public Account find(long accountId);

public List<Account> find(List<Long> accountIds);

public List<Account> find(String ownerName);

public List<Account> find(boolean locked);

}

Triển khai class DAO thực tế:

package vn.smartJob.demoSpring.annotationBasedAutowiring;

import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Repository
@Qualifier("accountDao")
public class AccountDAOInMemoryImpl implements AccountDAO {

private Map<Long, Account> accountsMap = new HashMap<>();

{
Account account1 = new Account();
account1.setId(1L);
account1.setOwnerName("Hoang The Anh");
account1.setBalance(8000000.0);

Account account2 = new Account();
account2.setId(2L);
account2.setOwnerName("Nguyen Duc Hai");
account2.setBalance(4000000.0);

accountsMap.put(account1.getId(), account1);
accountsMap.put(account2.getId(), account2);
}

@Override
public void insert(Account account) {
accountsMap.put(account.getId(), account);
}

@Override
public void update(Account account) {
accountsMap.put(account.getId(), account);
}

@Override
public void update(List<Account> accounts) {
for (Account account : accounts) {
update(account);
}
}

@Override
public void delete(long accountId) {
accountsMap.remove(accountId);
}

@Override
public Account find(long accountId) {
return accountsMap.get(accountId);
}

@Override
public List<Account> find(List<Long> accountIds) {
List<Account> accounts = new ArrayList<>();
for (Long id : accountIds) {
accounts.add(accountsMap.get(id));
}
return accounts;
}

@Override
public List<Account> find(String ownerName) {
List<Account> accounts = new ArrayList<>();
for (Account account : accountsMap.values()) {
if (ownerName.equals(account.getOwnerName())) {
accounts.add(account);
}
}
return accounts;
}

@Override
public List<Account> find(boolean locked) {
List<Account> accounts = new ArrayList<>();
for (Account account : accountsMap.values()) {
if (locked == account.isLocked()) {
accounts.add(account);
}
}
return accounts;
}

}

Chúng ta có 2 tài khoản ngân hàng: Hoàng Thế Anh có 8 triệu đồng trong tài khoản (id = 1). Nguyễn Đức Hải có 4 triệu đồng trong tài khoản (id = 2). Để đảm bảo ví dụ minh họa không quá phực tạp, chúng ta không truy vấn vào cơ sở dữ liệu thực, mà sử dụng cơ sở dữ liệu mô phỏng, dạng HashMap. Các phương thức không liên quan đến CRUD (Creat- Read – Update – Delete) nguyên tử (mức nhỏ nhất của một truy vấn), sẽ xử lý bởi AccountService và AccountServiceImpl .

package vn.smartJob.demoSpring.annotationBasedAutowiring;

/**
* Interface service.
* 
* @author SmartJob
*/
public interface AccountService {

public void transferMoney(long sourceAccountId, long targetAccountId, double amount);

public void depositMoney(long accountId, double amount) throws Exception;

public Account getAccount(long accountId);

}

package vn.smartJob.demoSpring.annotationBasedAutowiring;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Service;

/**
* Truy vấn dữ liệu.
*
* @author SmartJob
*/
@Service
public class AccountServiceImpl implements AccountService {
private AccountDAO accountDAO;

@Autowired
@Qualifier("accountDao")
public void setAccountDao(AccountDAO accountDAO) {
this.accountDAO = accountDAO;
}

/**
* Giao dịch Chuyển tiền.
* 
* @param sourceAccountId Tài khoản người gửi
* @param targetAccountId Tài khoản người nhận
* @param amount Số tiền chuyển khoản
*/
@Override
public void transferMoney(long sourceAccountId, long targetAccountId, double amount) {
Account sourceAccount = accountDAO.find(sourceAccountId);
Account targetAccount = accountDAO.find(targetAccountId);
sourceAccount.setBalance(sourceAccount.getBalance() - amount);
targetAccount.setBalance(targetAccount.getBalance() + amount);
accountDAO.update(sourceAccount);
accountDAO.update(targetAccount);
}

@Override
public void depositMoney(long accountId, double amount) throws Exception {
Account account = accountDAO.find(accountId);
account.setBalance(account.getBalance() + amount);
accountDAO.update(account);
}

@Override
public Account getAccount(long accountId) {
return accountDAO.find(accountId);
}

}

File xml khai báo:

Tạo file beans.xml trong thư mục resources:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-4.0.xsd">

<context:component-scan base-package="vn.smartJob.demoSpring.annotationBasedAutowiring"/>

</beans>

Ứng dụng chính:

package vn.smartJob.demoSpring.annotationBasedAutowiring;

import org.springframework.context.support.ClassPathXmlApplicationContext;

/**
* Ứng dụng chuyển tiền.
*
* @author SmartJob
*/
public class App {

public static void main(String[] args) {
ClassPathXmlApplicationContext applicationContext = new ClassPathXmlApplicationContext("beans.xml");
AccountService accountService = applicationContext.getBean("accountServiceImpl", AccountService.class);

System.out.println("Trước khi chuyển tiền");
System.out.println("Số dư trong tài khoản Hoàng Thế Anh:" + accountService.getAccount(1).getBalance());
System.out.println("Số dư trong tài khoản Nguyễn Đức Hải:" + accountService.getAccount(2).getBalance());

// Hoàng Thế Anh chuyển cho Nguyễn Đức Hải 4 triệu 200 nghìn đồng.
accountService.transferMoney(1, 2, 4200000.0);

System.out.println("---------------------------------------------------");
System.out.println("Sau khi chuyển tiền");
System.out.println("Số dư trong tài khoản Hoàng Thế Anh:" + accountService.getAccount(1).getBalance());
System.out.println("Số dư trong tài khoản Nguyễn Đức Hải:" + accountService.getAccount(2).getBalance());
}

}

// Kết quả:

//Trước khi chuyển tiền
//Số dư trong tài khoản Hoàng Thế Anh:8000000.0
//Số dư trong tài khoản Nguyễn Đức Hải:4000000.0
//---------------------------------------------------
//Sau khi chuyển tiền
//Số dư trong tài khoản Hoàng Thế Anh:3800000.0
//Số dư trong tài khoản Nguyễn Đức Hải:8200000.0

Dòng code 13 và 21 rất quan trọng, nó được highlight để bạn chú ý.

Download source code: annotation-based-autowiring . Bạn cũng có thể clone/fork từ Github: https://github.com/SmartJobVN/annotation-based-autowiring

Bài viết gốc được đăng tải tại smartjob.vn

Có thể bạn quan tâm:

Xem thêm Jobs IT for Developer hấp dẫn trên TopDev

Trình duyệt ẩn danh có thực sự an toàn như bạn nghĩ?

Bài viết được sự cho phép của blogchiasekienthuc.com

Internet và mạng xã hội đang ngày càng phát triển, kéo theo đó là nguy cơ dữ liệu cá nhân của người dùng dễ bị đánh cắp một cách bất hợp pháp.

Đồng ý là mạng xã hội nói riêng hay Internet nói chung là sự hòa nhập của cả thế giới, nhưng như thế không có nghĩa là chúng ta không có quyền giữ kín những thông tin cá nhân riêng tư !

8 câu hỏi phỏng vấn dành cho các lập trình viên Mobile app

Mười điều răn dành cho lập trình viên

Để đáp ứng cho nhu cầu đó thì rất nhiều trình duyệt web đã thêm tính năng lướt web ẩn danh cho người dùng, hay những phần mềm hỗ trợ ẩn danh trên Internet. Và thực tế thì chế độ ẩn danh này cũng đã xuất hiện từ rất lâu rồi.

#1. Trình duyệt web ẩn danh là gì?

Có thể bạn sẽ thích: Tìm hiểu kỹ hơn về giao thức HTTP và HTTPs (rất dễ hiểu)

Chế độ ẩn danh về bản chất là sẽ không lưu lại lịch sử duyệt web, cũng như dữ liệu cookie trên máy tính của bạn.

Nếu bạn nào có chút kiến thức về máy tính thì đều biết rằng, khi duyệt web ở chế độ thông thường thì những dữ liệu này sẽ nằm trên máy tính và có một thư mục nhất định để chứa nó. Mục đích là để giúp bạn lướt web nhanh hơn, thuận tiện hơn..

Việc không lưu lại dữ liệu duyệt web trên máy tính sẽ hạn chế tối đa việc các phần mềm gián điệp đang ngầm thu thập dữ liệu mà người dùng vô tình dính phải.

#2. Trình duyệt web ẩn danh liệu có thực sự an toàn?

Như mình đã nói ở trên, trình duyệt web ẩn danh chỉ đơn giản là không lưu lại dữ liệu trên máy tính của bạn.

Nhưng điều này không đồng nghĩa với việc nó sẽ không bị thu thập bởi các bên thứ ba: như là nhà mạng, các nhà quảng cáo hay thậm chí là chính trình duyệt web bạn đang sử dụng.

Về cơ bản thì khi bạn duyệt web, những đối tượng sau có thể biết được những dữ liệu duyệt web của bạn:

1. Nhà mạng: Nghe thì có vẻ hơi vô lý và có phần đổ oan cho nhà mạng nhỉ – nhưng thực tế là như vậy !

Nhà mạng hoàn toàn có thể truy được IP mà bạn đang sử dụng đã từng duyệt web như thế nào, thậm chí là làm gì trên đó. Điều này là hoàn toàn có thể !

Hãy nhớ rằng, các nhà mạng Việt Nam đã không ít lần chặn các trang web nước ngoài để người dùng không truy cập được, vậy nên việc nắm rõ mọi thông tin sử dụng của bạn trên Internet là điều hoàn toàn có thể.

Và thông qua những việc xử lý tội phạm công nghệ cao trên Internet thì bạn cũng đủ hiểu được vấn đề rồi đúng không 🙂

Tuy nhiên, mình chỉ dám khẳng định là họ nắm rõ thôi, còn họ có sử dụng nó cho mục đích gì khác hay không thì mình chịu nhé 😀

2. Plugin (tiện ích mở rộng) cài trên trình duyệt: Như đã nói, ẩn danh chỉ ngăn dữ liệu không lưu trên máy tính, còn bản thân các Plugin thì đa số đều chạy qua hệ thống online, vậy nên vẫn có thể truy cập vào dữ liệu người dùng khi duyệt web.

3. Phần mềm được cài trên máy: Chắc hẳn các bạn đã không ít lần gặp trường hợp đột nhiên máy tính chạy chậm lại, hay việc lướt web bị chậm đi đáng kể, hoặc thậm chí là xuất hiện những quảng cáo vô cùng lạ…

Hãy cẩn thận với những trường hợp này và ngay bây giờ, bạn hãy cài đặt phần mềm diệt virus đi nhé. Bởi máy tính của bạn rất có thể đã dính phần mềm quảng cáo độc hại và nó đang sử dụng đường truyền Internet của bạn đấy.

#3. Có cách nào để không bị lộ thông tin trên Internet không?

Nhiều bạn cho rằng nếu thực hiện Fake IP, hay thay đổi DSN…..là có thể thoát được. Nhưng mình xin khẳng định là bạn có làm gì đi chăng nữa thì bạn cũng không thoát được đâu.

Nói đơn giản thế này cho các bạn dễ hiểu nhé, đôi lúc chúng ta sẽ thấy báo đài thông tin về việc điều tra các hacker tấn công vào các web chính phủ, và kết quả như thế nào thì các bạn cũng đều đã biết rồi, họ đã truy ra được nhóm nào, thậm chí là ở khu vực nào…

Đấy! các bạn thấy không, hacker có trình độ cao như vậy, thậm chí được nuôi bởi chính phủ mà vẫn bị truy vết thì không có gì là không được với dân đen chúng ta cả, những người mà kiến thức máy tính chỉ ở mức độ rất cơ bản.

Nói chung là sẽ truy vết được, vấn đề là ở mức độ nào mà thôi, họ có thực sự muốn truy ra bạn hay không thôi. Nhưng vềcơ bản thì việc Fake IP sẽ giúp cho những người dùng phổ thông an toàn hơn trên Internet.

Để hạn chế việc bị lộ thông tin thì về mặt lý thuyết, chúng ta hãy hạn chế cài những tiện ích mở rộng không an toàn, cài những phần mềm không rõ nguồn gốc, những phần mềm/ ứng dụng c.r.a.c.k…

Nhưng tất nhiên, đó chỉ là giải pháp tạm thời để tránh những thông tin của mình bị bên nào đó lợi dụng cho mục đích xấu mà thôi.

Nếu ví Internet như một con dao thì phần đông chúng ta đang cầm phần dao sắc nhọn, còn các nhà mạng đang cầm phần chuôi. Chúng ta chỉ có thể tuân thủ theo luật chơi do họ tạo ra mà thôi !

Có chăng, điều an ủi nhất là nếu không làm việc gì trái pháp luật thì những thông tin đó vốn biết cũng chẳng để làm gì cả (ý mình là đang nói nhà mạng nhé), còn với những kẻ có chủ đích xấu thì chúng ta cũng đành chịu.

#4. Lời Kết

Vâng, trên đấy là những quan điểm của mình về việc chế độ ẩn danh trên trình duyệt liệu có an toàn như chúng ta nghĩ hay không.

Có thể kết luân lại là, một khi đã tham gia vào môi trường Internet thì không thể giấu giếm hết những thứ riêng tư được – mà thay vào đó bạn hãy hạn chế tối đa việc để những thứ riêng tư lên Internet, vậy thôi !

Điều này cũng là lý do mà một số người nổi tiếng không sử dụng bất kì một mạng xã hội nào, vì họ hiểu rõ không thể nào giấu được nếu tham gia.

Lê Đinh Hoàng Vũ – Bài viết gốc tại blogchiasekienthuc.com

Có thể bạn quan tâm:

Xem thêm tuyển dụng các it giỏi hấp dẫn trên TopDev

Một người kiểm thử có tâm

Bài viết được sự cho phép của tác giả To Thi Van Anh

Bạn nghĩ thế nào là một người kiểm thử có tâm? Có giống như một người chụp ảnh có tâm mà bạn vẫn dành cho người nào chụp cho bạn bức ảnh mà bạn thấy bạn xinh lung linh nhất không?

A/B testing và những tiêu chí chính để đánh giá sự thành công của ASO

Automation skills cho tester già mà lười

Mình thấy là làm gì mà có tâm một chút là cũng được người ta yêu quý hết – mặc dù không biết trong lòng người ta nghĩ thế nào nhưng mà cứ khen là ta phải vui cái đã! hihi

Trong công việc cũng vậy, làm việc tốt không phải chỉ vì đồng lương mà còn là trách nhiệm đối với cái mình đang làm, đầu tiên cứ phải là cố gắng hết sức đã, kết quả có thể đạt được như mong đợi, có khi còn hơn, rồi cũng có khi không được như mình mong muốn ban đầu nhưng mà mình vẫn tin là dù thế nào tự chúng ta cũng sẽ rút ra được một số bài học nào đó cho bản thân, để lần sau tiếp tục cố gắng nhiều hơn nữa, và quan trọng là sẽ không mắc phải sai lầm giống như trước nữa.

Dưới góc nhìn của mình (có tham khảo một vài nơi mà mình đã tìm hiểu được) mình sẽ đưa ra một so sánh nho nhỏ để các bạn thấy được một người kiểm thử có tâm và chưa có tâm khác nhau ở những điểm nào nhé. Các bạn có thể để lại bình luận và nhận xét phía dưới cho mình về các ý dưới này nếu có điểm gì đó chưa đúng hoặc cần bổ sung nhé!

Yếu tố	Người bình thường (Chị A)	Người có tâm (Chị B)
1. Chất lượng test case	Chị A nghĩ rằng chị chỉ cần viết test case với một chất lượng ở mức bình thường và có thể chấp nhận được là được. Test case chị viết có thể là đã đủ theo các yêu cầu của hệ thống, nhưng chị lại không quan tâm đến việc tối ưu các test case mà chị đã viết, chị cũng không quan tâm lắm đến việc các bước thực hiện của chị nhiều chỗ hơi rườm rà và đôi khi thì lại chưa đầy đủ và không dễ để thực hiện lắm! Có thể vấn đề của chị chị nhìn ra rồi, hoặc chưa nhìn ra. Cơ mà chị vẫn chẹp cho qua!	Chị B thì khác, chị ciết test case với chất lượng rất tốt, chi tiết và đầy đủ các thông tin và trường hợp cần thiết, và kết quả review của người khác dành cho các test case mà chị viết không có quá nhiều comment. Mọi người rất ấn tượng với test case của chị B vì sự chi tiết và cẩn thận từ những chi tiết nhỏ, rồi từ chất lượng cho đến sự trình bày.
2. Chất lượng bug	Chị A nghĩ rằng viết bug cũng chỉ đơn thuần là viết bug, để cho thằng dev biết là mày đã làm sai, hệ thống đã có bug, đôi khi với nhiều trường hợp có thể cung cấp thêm được thông tin nhưng chị lại không đưa vào, hoặc có khi hơi sơ sài nữa.	Không chỉ là viết bug, chị B còn cung cấp thêm đầy đủ thông tin giá trị đầu vào của trường hợp này, chị cũng tìm hiểu thêm và sâu hơn những nguyên nhân liên quan khác có thể gây ra vấn đề đó, giúp dev có thể debug và giải quyết vấn đề nhanh hơn.
3. Hiệu quả log bug	Chị A log bug cũng tốt nhưng đôi khi chính chị hoặc dev không tái hiện lại được bug mà chị đã log. (Đọc cột bên cạnh để thấy là chị A có thể thiếu gì nhé :v)	Trước khi lug bug, chị B đã thực hiện kiểm tra kỹ càng nhiều lần hệ thống trên môi trường test của chị và cả ở môi trường trên máy khác nữa. Chị cũng luôn luôn cung cấp đầy đủ các tài liệu và thông tin cần thiết khi viết bug như: thông tin bản build, hệ điều hành, hình ảnh bug, các bước thực hiện để đảm bảo rằng là ai cũng có thể tái hiện được cái bug này. (Chắc là chị B đã đọc bài về viết bug hiệu quả của mình rồi, bạn nào chưa đọc thì đọc để như chị B nhé Kaka)
4. Trong quá trình kiểm thử	Chị A có phương pháp tư duy và hành động theo lối mòn, không có hoặc rất ít sự sáng tạo và cải tiến, chỉ biết đến duy nhất công việc của mình. Qua bao nhiêu vòng test, chị vẫn chỉ làm như thế, chắc là chị chưa biết đến các nguyên tắc của kiểm thử phần mềm, hoặc là chị không quan tâm!	Chị B thì khác, không chỉ biết đến công việc của mình, mà còn luôn suy nghĩ để hướng đến những kịch bản kiểm thử tốt hơn, tìm ra những hướng tiếp cận kiểm thử mới, để việc thực thi test case ngày càng hiệu quả hơn.
5. Thái độ đối với công việc	Chị A làm việc với suy nghĩ chỉ là làm cho xong công việc của mình mà thôi.	Chị B bên cạnh hoàn thiện công việc của mình, bên cạnh đó luôn suy nghĩ để cải tiến chất lượng của hệ thống. Đưa ra các quy trình tốt hơn, những sáng kiến, ý tưởng tốt hơn để đơn giản hóa công việc kiểm thử, giúp nâng cao hiệu quả và nỗ lực kiểm thử của chị cũng như của đồng nghiệp.
6. Mức độ quan tâm đến hệ thống làm việc	Chị A là người kiểm thử nhưng chỉ nắm được hệ thống chỉ đến một mức hạn chế nào đó. Ví dụ, giao cho chị các phần này thì chị chỉ biết đến phần đó, còn của người khác ra sao như thế nào thì hầu như chị không quan tâm! Cũng không suy nghĩ phía dưới hệ thống làm gì, có gì!	Bên cạnh các phần được giao cho mình, chị B luôn luôn dành thời gian để khám phá để hiểu sâu hơn chi tiết hơn về hệ thống mà chị đang làm việc. Khi được bàn giao hệ thống, chị có thể chưa biết nhiều về hệ thống đó, nhưng chị là người mà nhất định sẽ đi sâu tìm hiểu những ngõ ngách, những chi tiết nhỏ nhất của hệ thống, và để hiểu về tất cả những cái phức tạp, sự phụ thuộc và liên quan lẫn nhau giữa các chức năng, những thông tin xử lý phí sau…
7. Góc nhìn của tester	Chị A nghĩ rằng, mình là kiểm thử thì mình chỉ việc kiểm tra hệ thống với góc nhìn của một kiểm thử là đã ok rồi	Chị B thì lại thực hiện kiểm tra hệ thống dưới góc nhìn của một khách hàng. Chị B nghĩ rằng một người có tâm luôn đặt mình vào vị trí của khách hàng để kiểm thử hệ thống của mình. Chị cũng nghĩ đây một yếu tố then chốt quyết định việc chúng ta có thể sử dụng hệ thống theo cái cách mà một người dùng thực sự mà họ sẽ dùng, để từ đó có thể đưa ra được những kịch bản thực tế và giống thật nhất.

Mintpot và hành trình kiến tạo cuộc sống mới – Cơ hội mới dành cho các Techies

Mintpot là một trong những công ty sáng tạo thông minh, không ngừng phát triển và dẫn đầu xu hướng mới của công nghệ hiện đại, theo đuổi mục tiêu tạo ra cuộc sống tốt hơn với VR (Virtual Reality). Ra đời vào năm 2016 tại Hàn Quốc, đến nay, Mintpot đã có nhiều dự án với các sản phẩm thú vị, mang đến cơ hội cho các kỹ sư, lập trình viên IT nhiều thách thức giới hạn và bùng nổ đam mê.

Mintpot Vina – Xu hướng phát triển của công nghệ hiện đại

Hoạt động tại thị trường Việt Nam từ năm 2019, Mintpot Vina là công ty Outsource, chuyên nhận và phát triển các dự án từ công ty mẹ Mintpot tại Seoul, Hàn Quốc. Đây là một trong những công ty sáng tạo thông minh, mang đến các dịch vụ tiện ích, cung cấp các video VR có phụ đề sử dụng công nghệ Real-time.

VR (Virtual Reality) là công nghệ thực tế ảo hay thực tại ảo, đưa người dùng trải nghiệm các cảm giác chân thực trong môi trường giả lập (ảo hóa) được tạo ra nhờ các phần mềm chuyên dụng và điều khiển bởi thiết bị hỗ trợ thông minh. Ngoài ra, công nghệ thực tế ảo VR còn có thể tương tác thực tế với người dùng qua cử chỉ và nhiều giác quan khác nhau như thính giác, khứu giác và xúc giác.

Để mang đến trải nghiệm lý thú cho người dùng, lần đầu tiên trên thế giới, Mintpot đã triển khai chức năng phụ đề VR giúp xóa bỏ rào cản cho người dùng trên nhiều quốc gia khác nhau với 4 ngôn ngữ: Tiếng Hàn, tiếng Anh, tiếng Trung, tiếng Nhật, và sẽ tiếp tục bổ sung, cải tiến trong tương lai.

Các dự án hấp dẫn hướng đến mục tiêu tạo nên cuộc sống tốt đẹp hơn

Mintpot Vina đã và đang phát triển nhiều ứng dụng, phần mềm phục vụ cộng đồng với các sản phẩm nổi bật:

Live Broadcast Apps in real time: Dịch vụ truyền hình trực tiếp của Busking Land cho phép người dùng chuyển tiếp video streaming thông qua ứng dụng Busking Land dành cho các nghệ sĩ hát nhạc đường phố.
Self-storage Brokerage Platform: Dịch vụ hỗ trợ cho lĩnh vực thương mại cho phép doanh nghiệp vận hành không gian lưu trữ một cách hiệu quả.
Dementia Answer Health App For Seniors: Ứng dụng dịch vụ kiểm tra, quản lý sức khỏe và nhận thức cho người cao tuổi gặp các vấn đề về sa sút trí tuệ.
Traveler Companion Matching App: Dịch vụ kết hợp dành cho những người dùng muốn tìm bạn cùng đồng hành trong các chuyến du lịch của mình.

Đầu tư phát triển nguồn nhân lực – Mintpot Vina mở cơ hội hấp dẫn cho tài năng Việt

Chinh phục mục tiêu kiến tạo cuộc sống mới, Mintpot Vina đang tìm kiếm những “mảnh ghép” phù hợp, sẵn sàng cùng công ty đương đầu với những thử thách phí trước. Xứng đáng với những nỗ lực đó, Mintpot Vina trao cho các lập trình viên Việt mức offer lên đến 60Mil VND kèm theo những đặc quyền:

Thu nhập hấp dẫn với nhiều khoản bonus: phụ cấp ăn trưa, phụ cấp vị trí, lương tháng 13, trà và cà phê miễn phí, quà Tết…
Cơ hội tiếp xúc và học hỏi những công nghệ tiên tiến nhất trong lĩnh vực CNTT;
Các hoạt động thể thao ngoài giờ cùng tiệc công ty thường xuyên xả stress hiệu quả cùng “anh-em”.

Cơ hội hấp dẫn mở ra cho các tài năng công nghệ với loạt vị trí hấp dẫn:

Bạn đã sẵn sàng nắm bắt cơ hội?

Apply CV ngay chờ chi!

Developers xây dựng thương hiệu blog của mình như thế nào?

Tác giả: Tapas Adhikary

Các Software Developers làm việc rất nhiều với các thiết kế, viết code, testing và cung cấp ra những phần mềm mà chúng ta đang sử dụng hàng ngày. Dù chuyên môn là gì thì họ vẫn là người biết rất nhiều thứ và có thể chia sẻ nó với người đọc cũng như những devs chưa có nhiều chuyên môn, kinh nghiệm.

Bài viết này sẽ đề cập đến những nguyên tắc cơ bản mà một blog cần có và một blogger cần biết.

1. Xác định rõ mục đích viết blog

Tất cả các bloggers đều cần xác định rõ mục đích khi bắt đầu một việc gì đó và động lực để tiếp tục nó. Bạn cần tìm ý định hoặc mục đích giải thích tại sao bạn muốn bắt đầu viết blog hoặc chia sẻ nội dung của mình.

Câu trả lời đơn giản nhất có lẽ là bạn viết blog vì bạn thích, vì bạn có đam mê với việc này. Đôi khi đó cũng có thể là một chiến lược kinh doanh, hoặc có thể bạn muốn dạy người khác. Có thể bạn muốn tiếp tục học hỏi – thực tế là bất cứ thứ gì bạn bắt đầu đều có hiệu quả.

Là một developer, bạn luôn cần học được những điều mới mẻ. Gần như không thể ghi nhớ từng phần của những gì chúng ta đã học. Khi ghi lại những bài học và những mẩu thông tin đó, devs cũng có thể làm cho kiến thức đó có thể tái sử dụng được.

Đây là lý do tại sao viết một bài báo về điều gì đó bạn đã học gần đây là một ý tưởng tuyệt vời và cung cấp cho bạn ý định rất rõ ràng cho tài liệu tiến bộ của bạn.

2. Tìm động lực cho bản thân

Động lực có thể làm nên điều kỳ diệu khi bạn có nó, và đương nhiên, sẽ thật khó để tiếp tục công việc nếu không có động lực. Là một người sáng tạo nội dung, động lực lớn nhất của bạn có thể là nghe phản hồi từ người đọc. Phản hồi tích cực và phê bình mang tính xây dựng luôn giúp bạn cải thiện nội dung bạn tạo.

Nhưng có một vấn đề. Ban đầu, bạn có thể không có nhiều độc giả để cung cấp phản hồi cho bạn. Khả năng thất vọng cao hơn nếu bạn là một blogger cá nhân. Vì vậy, nó giúp có rất nhiều động lực để duy trì và tiếp tục công việc của bạn. Hãy nhớ đừng bỏ cuộc, hãy luôn động viên. Là một dev, bạn có nhiều điều để học hỏi, chia sẻ và viết.

3. Nghiên cứu là chìa khóa cho việc viết blog thành công

Với blog, nội dung chính là yếu tố mấu chốt quyết định tất cả mọi vấn đề liên quan. Là một developer, bạn có thể có nhiều ý tưởng, các bước giải quyết vấn đề và các kiến thức mới muốn đạt được. Nhưng phần quan trọng nhất là có thể biến nó thành nội dung chất lượng. Thông thường cần dành thời gian cần thiết để nghiên cứu chủ đề một cách kỹ lưỡng và lên ý tưởng cho bài viết của mình.

25 blogger IT nổi tiếng mà dân lập trình ai cũng phải biết

Câu chuyện về cái comment tại một blog nọ

4. Lập dàn ý bài viết

Khi bạn đã nghiên cứu nội dung của mình xong, việc tiếp theo là lập kế hoạch cấu trúc của bài viết. Nội dung bài viết dù xuất sắc vẫn có thể bị người đọc bỏ qua nếu cấu trúc nội dung không đầy đủ và lộn xộn.

Dưới đây là một số mẹo để xây dựng dàn ý bài viết:

Tiêu đề: Một tiêu đề hấp dẫn có thể giúp tác động đến nhiều người đọc truy cập vào bài viết. Không có vấn đề gì, mọi người hầu như không bỏ lỡ đọc tiêu đề của bài báo. Giữ cho nó hấp dẫn sẽ tăng lưu lượng truy cập vào nội dung của bạn.
Ảnh bìa: Ảnh bìa phù hợp sẽ làm cho bài viết của bạn trở nên rất hấp dẫn. Khi bạn chia sẻ bài viết của mình trên các phương tiện truyền thông xã hội như Twitter, Linkedin hoặc Reddit, một ảnh bìa sáng tạo có thể thu hút người đọc của bạn.
Phần mở đầu: phần này mô tả nội dung ở mức độ cao. Nó có thể là một đoạn giới thiệu về những gì bạn định đề cập trong bài viết.
Tiêu đề và Tiêu đề phụ: Bạn nên chia nhỏ nội dung thành các chủ đề phụ hợp lý. Để làm điều đó, hãy tạo các phần và cung cấp các tiêu đề và tiêu đề phụ có liên quan.
Hình ảnh: Tìm những hình ảnh rõ ràng và có thể minh họa cho nội dung mà bạn đang viết để thu hút người đọc.
Tóm tắt: Phần tóm tắt ở cuối giúp người đọc tóm tắt lại những gì họ đã biết được. Nó cũng hữu ích cho một người đọc quay lại để nhớ lại nội dung bằng cách xem qua phần tóm tắt.
Backlinks: Bạn có thể muốn kết thúc bài viết của mình bằng một danh sách các liên kết liên quan để đọc thêm. Bạn cũng có thể sử dụng phần này để liệt kê các liên kết với những bài blogs mà mình đã thực hiện.

5. Công cụ viết blog

Để tạo nội dung chất lượng cần có thời gian. Bạn có thể biến mình thành người sáng tạo nội dung năng suất và hiệu quả bằng cách sử dụng một số công cụ có sẵn miễn phí.

Bạn có thể check lỗi ngữ pháp bằng website Grammaly, hoặc sử dụng website Hemingway Editor để viết bài bằng tiếng Anh nếu không thật sự viết tốt bằng ngôn ngữ này. Bạn có thể thực hiện việc chỉnh sửa ảnh bằng nguồn hình ảnh tại Canva, Pixteller, ShareX

6. Hiệu đính lại bài viết lần cuối trước khi đăng bài

Quá trình kiểm tra và đảm bảo rằng nội dung của bạn đã sẵn sàng để xuất bản được gọi là hiệu đính. Bạn nên kiểm tra các lỗi chính tả, lỗi ngữ pháp, các vấn đề về định dạng code, dấu câu, sự chính xác và ngôn ngữ nhất quán.

7. Xuất bản (Publish) bài viết

Nếu bạn hài lòng với bài blog sau khi hiệu đính, bước tiếp theo chính là xuất bản nó. Bạn có thể muốn lên lịch để nó xuất bản vào một ngày cụ thể trong tuần, hoặc bạn có thể muốn xuất bản ngay lúc đó – điều đó tùy thuộc vào bạn.

Theo nguyên tắc chung, tốt hơn là nên xuất bản khi một bài báo đã sẵn sàng từ phía bạn. Tương tự như vậy, bạn đừng bao giờ vội vàng xuất bản một bài báo để kịp thời hạn.

8. Chia sẻ blog lên các nền tảng mạng xã hội

Phương tiện truyền thông xã hội là một công cụ cực kỳ mạnh mẽ và bạn nên tận dụng nó với tư cách là một blogger.

Việc xuất bản bài viết của bạn có thể là không đủ nếu bạn muốn nó tiếp cận nhiều độc giả tiềm năng nhất có thể. Do đó, bạn nên chia sẻ bài viết của mình trên các nền tảng mạng xã hội khác nhau.

TÌM VIỆC CHO LẬP TRÌNH SOFTWARE

Phỏng dịch theo bài viết gốc đăng tải tại freecodecamp.org

Có thể bạn quan tâm:

Lab – Cài đặt(cloud)

Bài viết được sự cho phép của tác giả Lê Xuân Quỳnh

Các hướng dẫn dưới đây là giành cho cloud. Tuy nhiên bạn có thể tìm thấy hướng dẫn cho máy ảo VM với bài 4.

Click vào đây để tải về hướng dẫn thiết lập môi trường cho bạn.

Nào chúng ta cùng xem cài đặt như nào nhé

CLOUD ACE: Không mang mọi người lên "mây" mà mang "mây" đến gần mọi người hơn

Bí kíp tạo website nhờ vào GitHub và Cloudflare

1. Tạo 1 tài khoản

Để sử dụng hệ thống IBM Analytics Demo Cloud tại địa chỉ:

https://my.imdemocloud.com/

Các bạn chọn vào sigup nếu chưa có tài khoản. Đăng ký 1 account với mật khẩu vừa chữ hoa, chữ thường, số và ký tự đặc biệt nhé. Sau đó hệ thống sẽ gửi mail cho các bạn xác thực. Mở mail ra và xác nhận đã đăng ký thành công.

Nhấp vào chữ Confirm my account. Lúc nào thấy dòng chữ sau là đã thành công:

Welcome to Demo Cloud!

Thank you for validating your email. You are one step away from being able to use resources on the IBM Analytics Demo Cloud.

Tiếp theo là mô tả về hệ thống demo này:

Account – là phần thông tin tài khoản người dùng. Thông tin sử dụng dịch vụ, bao gồm điều khoản người dùng cuối.
Account Administrator – tài khoản của người dùng,được giao quản lý truy cập và giám sát việc sử dụng Dịch vụ của người dùng cuối.
Cloud Web Portal – website IDM cho phép người dùng sử dụng dịch vụ và xem thông tin tài khoản.
Content – tất cả dữ liệu, thông tin, phần mềm, without limitation, any hypertext markup language files, scripts, programs, recordings, sound, music, graphics, images, applets, or servlets that are created, installed, uploaded, or transferred được chấp nhận bởi người dùng..

Nhiều quá tôi không viết hết. Bạn kéo xuống và nhấn chọn chấp nhận điều khoản để tiếp tục.

2. Truy cập ambari

Sau đó bạn chọn vào Ambari Console để chạy dịch vụ. Bạn nhập tên người dùng của bạn được cho ở phía dưới phần connect details, mật khẩu là lúc bạn thiết lập. Sau đó bạn sẽ thấy dịch vụ như hình ảnh:

Vậy là bạn đã cài đặt xong phần service của IBM.

3. SSH và PuTTY

SSH dùng để đảm bảo kết nối an toàn tới server của IDM. Bạn cần tải PuTTY ở trang này để làm việc với server:

http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html

Sau khi tải về bạn cài đặt nó.

Bài viết gốc được đăng tải tại quynhlaptrinhc.wordpress.com

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev

ASP.NET MVC5 #3: Thêm mới View

Bài viết được sự cho phép của Tạp chí Lập trình

Trong phần này, bạn sẽ sửa đổi file “HelloWorldController.cs”, sử dụng view để đóng gói quá trình sinh ra HTML trả về cho client.

Bạn sẽ tạo một view sử dụng “Razor view engine”. “Razor view” có phần mở rộng là “.cshtml” và cung cấp cách thức để tạo ra HTML sử dụng C#. Razor sẽ giúp tinh gọn mã lệnh khi bạn viết một view.

ASP.NET Core là gì?

.NET core vs ASP.NET core: Phân biệt .NET Framework, .NET Core và Mono

Hiện tại, phương thức “Index” trả về một chuỗi là một thông báo đã được khai báo trong Controller. Chúng ta sẽ thay đổi phương thức “Index” để trả về một đối tượng view:

[sourcecode language=”csharp”] public ActionResult Index()
{
return View();
}
[/sourcecode]

Phương thức “Index” ở trên sử dụng một view để sinh ra HTML trả về cho trình duyệt. Các phương thức trong Controller (gọi là action methods) như phương thức “Index” ở trên thường trả về ActionResult (hoặc một lớp dẫn xuất từ ActionResult), không phải các kiểu nguyên thủy như string.

Chuột phải vào thư mục “Views\HelloWorld” và nhấn “Add”. Sau đó chọn “MVC 5 View Page with Layout (Razor)”:

Trong hộp thoại “Specify Name for Item”, nhập vào “Index” sau đó nhấn “OK”:

Trong hộp thoại “Select a Layout Page”, chọn “_Layout.cshtml” và nhấn “OK”:

Trong hộp thoại ở trên, thư mục “Views\Shared” được chọn ở danh mục bên trái. Và như vây, file “MvcMovie\Views\HelloWorld\Index.cshtml” đã được tạo:

Trong file “Index.cshtml” bạn thêm vào như sau:

[sourcecode language=”html”] @{
Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>
[/sourcecode]

Chuột phải vào file “Index.cshtml” và chọn “View in Browser”:

Hoặc bạn cũng có thể chạy ứng dụng và duyệt đến “http://localhost:xxxx/HelloWorld”. Phương thức “Index” trong Controller của bạn sẽ chạy câu lệnh “return View()”. Bởi vì bạn không xác định chính xác tên view được sử dụng. ASP.NET MVC mặc định sử dụng file “Index.cshtml” trong thư mục “\Views\HelloWorld”. Kết quả khi chạy như sau:

Thay đổi các views và các trang layouts

Trước tiên, chúng ta sẽ thay đổi liên kết “Application name” ở đầu trang. Đây là thành phần chung của tất cả các trang. Nó được viết tại một chỗ trong dự án nhưng sẽ xuất hiện trên mọi trang trong ứng dụng. Bạn mở file _Layout.cshtml trong thư mục “/Views/Shared”. File này được gọi là trang bố cục và nó nằm trong thư mục “Shared” để tất cả các trang khác có thể sử dụng.

Layout cho phép bạn xây dựng mã HTML ở một nơi và sau đó áp dụng nó ở nhiều nơi khác trong trang WEB của bạn. Trong trang layout, “@RenderBody()” sẽ là nơi giữ chỗ, là vị trí mà bạn sẽ gắn trang con vào trang layout. Ví dụ: nếu bạn chọn trang “About”, trang “Views\Home\About.cshtml” sẽ được thi hành bên trong phương thức “RenderBody”.

Thay đổi nội dung của phần tử “Title”. Thay đổi “ActionLink” trong file layout từ “Application name” thành “MVC Movie” và controller từ “Home” thành “Movies”. File layout sau khi thay đổi sẽ như sau:

[sourcecode language=”html”] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title – Movie App</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year – My ASP.NET Application</p>
</footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
[/sourcecode]

Chạy ứng dụng, và duyệt đến “http://localhost:xxxx/HelloWorld” .“Application name” đã chuyển thành “MVC Movie”:

Nhấn vào “About”, “Contact” bạn cũng sẽ thấy sự thay đổi tương tự. Điều này là bởi vì, trang “Index”, “About”, “Contact” sử dụng chung một layout.

Trong file “Views\HelloWorld\Index.cshtml” có chứa đoạn mã sau:

[sourcecode language=”html”] @{
Layout = "~/Views/Shared/_Layout.cshtml";
}
[/sourcecode]

Đoạn mã này sử dụng để thiết lập layout “_Layout.cshtml” cho một trang. Nó cũng được khai báo trong “Views\_ViewStart.cshtml”. File “Views\_ViewStart.cshtml” định nghĩa layout chung mà tất cả các trang sẽ sử dụng. Do đó bạn không cần khai báo đoạn mã trên trong file “Views\HelloWorld\Index.cshtml” nữa. Bạn có thể sửa lại file “Views\HelloWorld\Index.cshtml” như sau:

[sourcecode language=”html”] @*@{
Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>
[/sourcecode]

Bạn cũng có thể sử dụng thuộc tính “Layout” để thiết lập layout khác, hoặc thiết lập giá trị “null” nếu không có layout nào được sử dụng.

Bây giờ, chúng ta hãy thay đổi tiêu đề của trang “Index”. Bạn mở file “Views\HelloWorld\Index.cshtml”. Chúng ta sẽ thay đổi ở hai vị trí. Đầu tiên là văn bản xuất hiện trong tiêu đề của trình duyệt và sau đó là trong phần tử “h2”.

[sourcecode language=”html”] @{
ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>
[/sourcecode]

Chúng ta sử dụng thuộc tính “Title” của đối tượng “ViewBag” để thiết lập giá trị cho tiêu đề. File “Views\Shared\_Layout.cshtml” sẽ sử dụng giá trị này trong phần tử “title”.

[sourcecode language=”html”] <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title – Movie App</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
[/sourcecode]

Sử dụng “ViewBag”, bạn cũng có thể dễ dàng truyền các thông số khác giữa view và layout. Chạy ứng dụng và bạn sẽ nhận thấy sự thay đổi. Tiêu đề trình duyệt được tạo với ViewBag.Title chúng ta đặt trong file “Index.cshtml” và thêm “- Movie App” trong file “_Layout.cshtml”.

Chú ý rằng nội dung trong file “Index.cshtml” đã được sáp nhập với nội dung trong file “_Layout.cshtml” và trả về một HTML duy nhất để gửi tới trình duyệt. Layout giúp bạn có thể dễ dàng thực hiện những thay đổi áp dụng trên tất cả các trang của ứng dụng.

Xem ngay tin việc làm .NET tại các doanh nghiệp hàng đầu trên TopDev

Truyền dữ liệu từ Controller tới View

Controller là nơi tiếp nhận và xử lý các yêu cầu từ trình duyệt. Controller lấy dữ liệu từ cơ sở dữ liệu và quyết định loại dữ liệu nào sẽ được trả về cho trình duyệt. Sau đó View được sử dụng để tạo ra HTML trả dữ liệu về cho trình duyệt.

Controller có trách nhiệm cung cấp bất cứ dữ liệu hoặc đối tượng nào được yêu cầu để View hiển thị ra trình duyệt. View không bao giờ thi hành các nghiệp vụ logic hoặc tương tác trực tiếp với cơ sở dữ liệu. Thay vào đó, View chỉ làm việc với dữ liệu được cung cấp bởi Controller. Điều này sẽ khiến cho mã của bạn sạch sẽ, dễ kiểm chứng và bảo trì.

Hiện tại, phương thức Welcome trong lớp HelloWorldController lấy tham số “name” và tham số “numTimes” truyền vào sau đó xuất các giá trị trực tiếp tới trình duyệt. Thay vì trả về một chuỗi như trên, chúng ta sẽ để Controller trả về một View. Bạn có thể sử dụng đối tượng ViewBag để lưu dữ liệu, và View sẽ truy cập đối tượng ViewBag để lấy dữ liệu trả về cho trình duyệt.

Trong file “HelloWorldController.cs”. Chúng ta sẽ đi thay đổi phương thức “Welcome”. Bạn thêm giá trị Message và NumTimes vào đối tượng ViewBag. ViewBag là một đối tượng động. Có nghĩa là bạn có thể gán bất cứ thứ gì cho nó. Đối tượng ViewBag không có thuộc tính được xác định cho đến khi bạn gán cái gì đó cho nó. ASP.NET MVC sẽ tự động ánh xạ các tham số (name và numTimes) từ chuỗi truy vấn trong thanh địa chỉ đến các tham số trong phương thức “Welcome”. File “HelloWorldController.cs” sau khi sửa đổi sẽ như sau:

[sourcecode language=”csharp”] using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult Welcome(string name, int numTimes = 1)
{
ViewBag.Message = "Hello " + name;
ViewBag.NumTimes = numTimes;

return View();
}
}
}
[/sourcecode]

Bây giờ đối tượng ViewBag chứa dữ liệu sẽ tự động truyền tới View. Tiếp theo bạn cần tạo View “Welcome”.

Chuột phải vào thư mục “Views\HelloWorld” và nhấn “Add”, sau đó chọn “MVC 5 View Page with Layout (Razor)” :

Trong hộp thoại “Specify Name for Item” nhập Welcome và nhấn OK:

Trong hộp thoại “Select a Layout Page”, chọn “Shared”, chọn “_Layout.cshtml” và nhấn OK:

File “MvcMovie\Views\HelloWorld\Welcome.cshtml” đã được tạo.

Trong file “Welcome.cshtml”, bạn tạo vòng lặp để hiển thị “name” với “numTimes” lần:

[sourcecode language=”html”] @{
Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
@for (int i = 0; i < ViewBag.NumTimes; i++)
{
<li>@ViewBag.Message</li>
}
</ul>
[/sourcecode]

Chạy ứng dụng và duyệt tới URL sau:

“http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4”

Bây giờ, dữ liệu sẽ được lấy từ URL và truyền vào Controller sử dụng model binder. Controller sẽ đóng gói dữ liệu vào đối tượng ViewBag và truyền ViewBag tới view. Sau đó view sẽ hiển thị dữ liệu dưới dạng HTML.

Trong ví dụ trên, chúng ta đã sử dụng đối tượng ViewBag để truyền dữ liệu từ controller tới view. Trong bài học tiếp theo, chúng ta sẽ sử dụng view model để truyền dữ liệu từ controller tới view.

Bài viết gốc được đăng tải tại tapchilaptrinh.vn

Có thể bạn quan tâm:

Xem thêm Việc làm ASP.NET hấp dẫn trên TopDev

Kiểm tra tính hợp lệ của dữ liệu đầu vào form Spring Web MVC bởi Hibernate Validator

Bài viết được sự cho phép của smartjob.vn

Trong bài viết này chúng tôi giới thiệu đến các bạn sử dụng tổ hợp nhiều kỹ thuật khác nhau:

Spring Web MVC 4
Hibernate Validator
Maven build tool

Chúng ta sẽ xây dựng ứng dụng gồm 2 màn hình: màn hình nhập thông tin và màn hình thông báo kết quả thành công như sau:

Kết quả trả về sau khi đã validate (kiểm tra dữ liệu đầu vào)

18 Web Developer Jobs lương cao tại TopDev

Các bước thực hiện

Tạo mới project sử dụng Maven archetype maven–archetype–webapp . Nếu bạn chưa rõ về cách tạo project từ archetype, bạn có thể xem phần đầu bài viết Kỹ thuật Autowiring sử dụng annotation trong Spring Framework . Một project khuôn được tạo ra, bạn cần bổ sung thêm các thư mục ( src , main , java ), khai báo thêm thư viện để project có được cấu trúc như sau:

File pom.xml đầy đủ như bên dưới, Bạn cần khai báo các thư viện. Mỗi thư viện đều được khai báo 3 thông số GAV (Group – ArtifactId – Version). Chúng tôi sử dụng phiên bản mới nhất tại thời điểm viết bài.

spring-core
spring-beans
spring-context
spring-web
spring-webmvc
hibernate-validator (để validate dữ liệu từ back-end)

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>
<groupId>vn.smartJob.demoSpring</groupId>
<artifactId>beanvalidation</artifactId>
<packaging>war</packaging>
<version>1.0.0-SNAPSHOT</version>

<name>Spring Web MVC - Hibernate Validator SmartJob.vn</name>
<url>https://smartjob.vn/</url>

<dependencies>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.2.6.RELEASE</version>
</dependency>

<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.2.4.Final</version>
</dependency>

</dependencies>

<build>
<finalName>beanvalidation</finalName>
</build>

</project>

Tương ứng với mô hình tham chiếu như hình vẽ trên, cụ thể hóa trong ứng dụng mà chúng ta đang làm:

Front controller: org.springframework.web.servlet.DispatcherServlet
Controller: vn.smartjob.demospring.domain.JobController
View template: Các file index.jsp, addJob.jsp, resultJob.jsp
Model: Class vn.smartjob.demospring.domain.Job là một thành phần của model.
Servlet engine: Chính là Apache Tomcat mà bạn sử dụng để deploy ứng dụng.

Là ứng dụng web, nên deployement descriptor rất quan trọng, file web.xml . Phần filter có tác dụng đảm bảo dữ liệu tiếng Việt Unicode được xử lý đúng. Phần xử lý luồng đi của Spring Web MVC được xử lý bởi class org.springframework.web.servlet.DispatcherServlet

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/webapp_3_1.xsd"
version="3.1">

<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>


<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>*.mvc</url-pattern>
</servlet-mapping>


</web-app>

XHTML

Là một ứng dụng sử dụng Spring Framework, nên không thể thiếu beans configuration, file springmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd">

<context:component-scan base-package="vn.smartjob.demospring"/>
<context:annotation-config/>
<mvc:annotation-driven validator="validator" />

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/" />
<property name="suffix" value=".jsp" />
</bean>

<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basename" value="classpath:messages" />
</bean>

<bean id="validator" class="org.springframework.validation.beanvalidation.LocalValidatorFactoryBean">
<property name="validationMessageSource" ref="messageSource"/>
</bean>


</beans>

Mỗi công việc (job) được mô tả bởi entity Job. Việc sử dụng các annotation nhằm mục đích để Hibernate Validator biết được rule validate.

package vn.smartjob.demospring.domain;

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
import java.math.BigDecimal;
import java.util.Date;

public class Job {

@Size(min = 32, max = 256)
@NotNull
String title;

@NotNull
@Size(max = 256)
String company;

@NotNull
String companyAddress;

@NotNull
@Size(min = 128)
String content;

@NotNull
Date startDate;

@NotNull
Date endDate;

@NotNull
BigDecimal salary;

@NotNull
Date createDate;


public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getCompany() {
return company;
}

public void setCompany(String company) {
this.company = company;
}

public String getCompanyAddress() {
return companyAddress;
}

public void setCompanyAddress(String companyAddress) {
this.companyAddress = companyAddress;
}

public String getContent() {
return content;
}

public void setContent(String content) {
this.content = content;
}

public Date getStartDate() {
return startDate;
}

public void setStartDate(Date startDate) {
this.startDate = startDate;
}

public Date getEndDate() {
return endDate;
}

public void setEndDate(Date endDate) {
this.endDate = endDate;
}

public BigDecimal getSalary() {
return salary;
}

public void setSalary(BigDecimal salary) {
this.salary = salary;
}

public Date getCreateDate() {
return createDate;
}

public void setCreateDate(Date createDate) {
this.createDate = createDate;
}

}

Trong controller xử lý luồng đi của ứng dụng, có 2 method để xử lý 2 màn hình: Màn hình thêm công việc và màn hình hiển thị thông báo thành công. Mỗi method đều được gắn annotation @RequestMapping của Spring Framework.

package vn.smartjob.demospring.controller;

import vn.smartjob.demospring.domain.Job;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class JobController {

@RequestMapping(value = "/form")
public ModelAndView job() {
return new ModelAndView("addJob", "job", new Job());
}

@RequestMapping(value = "/result", method = RequestMethod.POST)
public ModelAndView processJob(Job job, BindingResult result) {
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("j", job);
if (result.hasErrors()) {
modelAndView.setViewName("addJob");
} else {
modelAndView.setViewName("resultJob");
}
return modelAndView;
}

}

Trang addJob.jsp là giao diện để thêm công việc mới. Trong file JSP có phần CSS, phần này chỉ có tác dụng giúp giao diện nhập dữ liệu công việc và hiển thị thông báo thành công, kết quả được đẹp và dễ nhìn hơn. Không tác động vào nghiệp vụ cũng như luồng xử lý nghiệp vụ. Mỗi công việc có có các thuộc tính như sau (được tô màu highlight trong mã nguồn):

title: Tiêu đề công việc
company: Công ty cần tuyển người
companyAddress: Địa chỉ công ty, cũng thường là địa điểm làm việc
content: Nội dung chi tiết: yêu cầu công việc, kỹ năng, các chế độ đãi ngộ
startDate: ngày bắt đầu đăng tin
endDate: ngày gỡ bỏ tin tuyển dụng

<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>


<html>
<head>
<title>Thêm công việc mới</title>
<style type="text/css">
.error {
background-color: #f00;
}
table{
width: 600px;
background-color: lightblue;
}
td{
width: 300px;
}
</style>


</head>
<body>

<h2>Thêm công việc mới</h2>

<mvc:form modelAttribute="job" action="result.mvc">
<table>
<tr>
<td><mvc:label path="title">Tiêu đề công việc</mvc:label></td>
<td><mvc:input path="title" cssErrorClass="error"/></td>
<td><mvc:errors path="title"/></td>
</tr>
<tr>
<td><mvc:label path="company">Công ty</mvc:label></td>
<td><mvc:input path="company" cssErrorClass="error"/></td>
<td><mvc:errors path="company"/></td>
</tr>
<tr>
<td><mvc:label path="companyAddress">Địa chỉ làm việc</mvc:label></td>
<td><mvc:input path="companyAddress" cssErrorClass="error"/></td>
<td><mvc:errors path="companyAddress"/></td>
<td></td>
</tr>
<tr>
<td><mvc:label path="content">Nội dung tuyển dụng</mvc:label></td>
<td><mvc:textarea path="content" cssErrorClass="error"/></td>
<td><mvc:errors path="content"/></td>
</tr>
<tr>
<td><mvc:label path="salary">Mức lương</mvc:label></td>
<td><mvc:input path="salary" cssErrorClass="error"/></td>
<td><mvc:errors path="salary"/></td>
</tr>

<tr>
<td><mvc:label path="startDate">Ngày bắt đầu đăng tin (mm/dd/yyyy)</mvc:label></td>
<td><mvc:input path="startDate" cssErrorClass="error"/></td>
<td><mvc:errors path="startDate"/></td>
</tr>

<tr>
<td><mvc:label path="endDate">Ngày gỡ bỏ tin (mm/dd/yyyy)</mvc:label></td>
<td><mvc:input path="endDate" cssErrorClass="error"/></td>
<td><mvc:errors path="endDate"/></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Gửi">
</td>
</tr>
</table>
</mvc:form>

</body>
</html>

Trang resultJob.jsp là giao diện để thông báo thành công và trả về kết quả

<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>

<html>
<head>
<title>Kết quả</title>
<style type="text/css">
.error {
background-color: #f00;
}
table{
width: 600px;
background-color: lightblue;
}
td{
width: 300px;
}
</style>
</head>
<body>

<h2>Nội dung công việc đã gửi</h2>
<table>
<tr>
<td>Tiêu đề công việc</td>
<td>${j.title}</td>
</tr>
<tr>
<td>Công ty</td>
<td>${j.company}</td>
</tr>
<tr>
<td>Địa chỉ làm việc</td>
<td>${j.companyAddress}</td>
</tr>
<tr>
<td>Nội dung</td>
<td>${j.content}</td>
</tr>
<tr>
<td>Mức lương</td>
<td>${j.salary}</td>
</tr>
<tr>
<td>Ngày bắt đầu đăng tin</td>
<td>${j.startDate}</td>
</tr>
<tr>
<td>Ngày gỡ bỏ tin</td>
<td>${j.endDate}</td>
</tr>
</table>
</body>
</html>

File index.jsp để trỏ trang chủ website về trang thêm công việc mới (addJob.jsp)

<% response.sendRedirect("form.mvc");%>

Để đa ngôn ngữ (sau này), các item resources bundle được khai báo trong file messages.propertiess nằm trong thư mục resources (đây là thư mục quy ước theo cấu trúc project Maven):

NotNull.job.company=Tên công ty không được để trống

Bạn đã hoàn thành ứng dụng, và có thể deploy trên server Apache Tomcat, truy cập link http://localhost:8080 để xem kết quả (trên máy của bạn, có thể port Tomcat sẽ khác số 8080).

Liên kết tải về mã nguồn từ server SmartJob: beanvalidation hoặc clone/fork từ GitHub: https://github.com/SmartJobVN/beanvalidation

Đỗ Như Vý – Bài viết gốc được đăng tải tại smartjob.vn

Có thể bạn quan tâm:

Xem thêm IT Jobs Developer hấp dẫn trên TopDev

Singleton design pattern – tất cả những điều cần biết

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Quay lại với chuỗi bài design pattern ở Kieblog, hôm nay là Singleton Pattern. Singleton là một pattern khá quen thuộc, như là pattern vỡ lòng khi bước vào thế giới của Design Pattern.

Tuy nhiên, để nắm rõ và hiểu sâu Pattern này không dễ. Đơn cử như các câu hỏi:

Singleton Pattern có cung cấp Global Access cho instance không?
Trường hợp Multi Thread hay Concurrency, implement Singleton Pattern thế nào?

Tất cả sẽ có trong bài viết này. Viết dài vãi nồi!

1. Định nghĩa về Singleton Pattern

Định nghĩa thì nhàm chán, nhưng thử nhìn qua thì thấy từ Single. Đang FA mà nghe từ này thì thốn, nhưng pattern đọc vẫn phải đọc.

Singleton is a creational design pattern that lets you ensure that a class has only one instance, while providing a global access point to this instance

Singleton là pattern khởi tạo cho phép bạn đảm bảo rằng class chỉ có duy nhất một instance, trong khi vẫn cung cấp truy xuất toàn cục cho instance này.

Single này không phải độc thân, mà mỗi thằng sẽ có một instance duy nhất.

Nhưng nói Singleton Pattern chỉ giải quyết vấn đề only one instance là còn thiếu, nó còn cho phép cái instance đó được phép global access nữa

2. Solve two problems

Singleton pattern giải quyết 2 vấn đề. Mà thực chất hai vấn đề này vi phạm Single Responsibility Principle. Vi phạm như thế nào sẽ đề cập sau ở phần advantages và disadvantages.

2.1 Ensure that a class has just a single instance

Đầu tiên cũng là quan trọng nhất, rõ ràng Singleton Pattern đảm bảo rằng class chỉ có một instance.

imagine that you created an object, but after a while decided to create a new one. Instead of receiving a fresh object, you’ll get the one you already created.

Tưởng tượng rằng bạn tạo một object, nhưng sau khi tạo lại muốn tạo thêm cái mới. Thay vì nhận được một object mới, bạn nhật được một object đã được tạo từ trước đó.

Chính vì có thể tái sử dụng, không cần lúc nào cũng phải new instance mới, ta có thể dùng Singleton Pattern để đảm bảo rằng chỉ một instance duy nhất được tạo ra.

2.2 Provide a global access point to that instance

Giống như biến toàn cục (Global variable). Singleton pattern cung cấp Global Access cho instance mà nó tạo ra. Ở đâu cần instance đều có thể truy cập được, một hình thức như tái sử dụng.

Đấy, toàn bộ nội dung về thằng Singleton Pattern thì chỉ có vậy. Còn hiện thực ra sao mời anh em tới bước tiếp theo. Source tạm thời viết java ha.

Design pattern là gì? Tại sao nên sử dụng Design pattern?

Giới thiệu Abstract Factory Pattern

3. Hiện thực thế nào?

// Singleton pattern
public final class Singleton {
private static Singleton instance;
public String value;

private Singleton(String value) {
// Following code emulates slow initialization.
try {
Thread.sleep(1000);
} catch (InterruptedException ex) {
ex.printStackTrace();
}
this.value = value;
}

public static Singleton getInstance(String value) {
// Nếu chưa có instance thì new, có rồi thì return cái cũ
if (instance == null) {
instance = new Singleton(value);
}
return instance;
}
}

Tuy nhiên cũng cần chú ý là trường hợp Multi Thread hoặc Concurrency, tránh Deadlock

// Singleton pattern for thread safe implement
public final class Singleton {
private static volatile Singleton instance;
public String value;

private Singleton(String value) {
this.value = value;
}

public static Singleton getInstance(String value) {
if (instance == null) {
// Sử dụng synchronized để đảm bảo class Singleton chưa bị block bởi thread khác
synchronized (Singleton.class) {
if (instance == null) {
instance = new Singleton(value);
}
}
}
return instance;
}
}

4. Advantages and disadvantages

Ưu: You can be sure that a class has only a single instance. Chắc chắn là class chỉ có một instance duy nhất.
Ưu: You gain a global access point to that instance. Gán được global acess cho instance đó.
Ưu: The singleton object is initialized only when it’s requested for the firsttime. Singleton object chỉ khởi tạo một lần duy nhất khi được request tới.

Đấy, ưu điểm có nhiều, tuy nhiên nhược điểm cũng có.

Đầu tiên là cái vi phạm Single Responsibility Principle. Cái thằng SRP này.

The Single Responsibility Principle (SRP) states that a class should have one and only one responsibility. A Singleton, by it’s very nature, has at least two responsibilities.

Trạng thía SRP hiểu rằng class nên chỉ nên có duy nhất một nhiệm vụ duy nhất. Class do only one thing. Đối với singleton pattern, một object phải kiêm nhiệm nhiều nhiệm vụ, ông nào gọi cũng phải chạy tới.

Ngoài ra, nếu lập trình đa luồng (Multi Thread) hoặc Concurrency, một singleton có thể bị giữ bởi một thread, các thread khác không thể access. Dẫn tới deadlock.

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

Xem thêm Việc làm tuyển ux ui hấp dẫn trên TopDev