Tích hợp Client Angular với API .NET cho Ứng dụng Freelancer

Xây dựng ứng dụng full-stack luôn là một thách thức thú vị, đặc biệt khi bạn muốn tạo ra một sản phẩm độc đáo trong khi nâng cao kỹ năng kỹ thuật của mình. Trong vài tuần qua, tôi đã làm việc trên một dự án kết hợp Angular 17/18 ở frontend với API .NET 8 ở backend: một ứng dụng thị trường freelancer.

Giới thiệu về ứng dụng Freelancer Marketplace

Ứng dụng web thị trường freelancer được xây dựng bằng ASP.NET 8 Web API và Angular 18. Người dùng có thể đăng ký, đăng nhập và tham gia với ba vai trò khác nhau: Quản trị viên, Khách hàng và Freelancer. Freelancers có thể tạo hồ sơ, quản lý danh mục, duyệt và nộp đơn cho các dự án, và trò chuyện với khách hàng trong thời gian thực. Khách hàng có thể đăng dự án, quản lý các đề xuất và hợp tác với freelancers. Quản trị viên có thể quản lý người dùng và thực thi các quy tắc của nền tảng.

Tính năng nổi bật

• Đăng ký & Đăng nhập người dùng: Xác thực bảo mật bằng cách sử dụng JWT tokens và ủy quyền dựa trên vai trò (Quản trị viên / Khách hàng / Freelancer).
• Tính năng cho Freelancer:
  • Quản lý hồ sơ với thông tin có thể chỉnh sửa.
  • Tạo, chỉnh sửa, xóa các mục danh mục (tiêu đề, mô tả, ảnh) với phân trang.
  • Duyệt các dự án và lọc theo kỹ năng yêu cầu (có 5 kỹ năng khác nhau).
  • Nộp các đề xuất cho các dự án.
  • Xem các đề xuất đã nộp (lọc theo Đã phê duyệt / Bị từ chối / Đang chờ xử lý).
  • Các đề xuất đã phê duyệt tự động tạo ra các dự án hoạt động và cho phép trò chuyện thời gian thực với khách hàng.
  • Hệ thống nhắn tin với bộ đếm chưa đọc, xem trước tin nhắn cuối cùng, thời gian…

Dự án này được sinh ra như một bài tập học tập và cũng là cách để trình bày cách kết hợp hai framework mạnh mẽ. Ứng dụng tích hợp xác thực, điều hướng dựa trên vai trò, lưu trữ dữ liệu, phân trang, SignalR cho trò chuyện trực tiếp và các yếu tố UX khác như modal, guard và thông báo. Đây là một kịch bản thực tế nơi khách hàng và freelancer tương tác trên một nền tảng, với các quản trị viên giữ cho hệ sinh thái hoạt động.

Tại sao lại là một ứng dụng Freelancer Marketplace?

Thay vì xây dựng một ứng dụng CRUD thông thường, tôi muốn điều gì đó gần gũi hơn với một sản phẩm thực tế. Một thị trường freelancer thật sự hoàn hảo vì nó tự nhiên liên quan đến nhiều vai trò, tương tác động và quy trình làm việc, điều này thúc đẩy cả API và client Angular vượt ra ngoài những điều cơ bản.

Các vai trò trong ứng dụng:

• Freelancer: xây dựng hồ sơ, thêm mục danh mục, duyệt các dự án, nộp đề xuất và trò chuyện với khách hàng khi đề xuất được phê duyệt.
• Khách hàng: tạo dự án, quản lý các đề xuất đến và hợp tác với freelancers.
• Quản trị viên: giám sát nền tảng với một bảng điều khiển để kích hoạt/tắt tài khoản người dùng và theo dõi sự hiện diện trực tuyến trong thời gian thực.

Mỗi vai trò có thanh điều hướng riêng và trải nghiệm người dùng được thiết kế riêng.

Kết nối Angular với .NET

Dự án bắt đầu bằng Angular 17 và sau đó được nâng cấp lên Angular 18, điều này tạo thành một nghiên cứu điển hình tốt về việc giữ cho các phụ thuộc frontend hiện đại và tương thích. Ở backend, API .NET 8 cung cấp xác thực (JWT), lưu trữ với EF Core và SQLite, và khả năng thời gian thực với SignalR.

Một số điểm nổi bật của sự tích hợp:

• Xác thực & Ủy quyền: JWT tokens được xử lý trong Angular thông qua interceptors, với các guard phía client ngăn chặn người dùng không được phép hoặc bị tắt truy cập vào ứng dụng.
• CRUD + Phân trang: Các mục danh mục, dự án và đề xuất đều được phân trang để duyệt một cách mượt mà.
• Tích hợp SignalR: Trò chuyện thời gian thực giữa freelancers và khách hàng, với bộ đếm tin nhắn chưa đọc, chỉ số hiện diện và cuộn tự động cuộc trò chuyện.
• Trải nghiệm người dùng: Các guard của Angular cảnh báo về những thay đổi chưa lưu, modal xác nhận các hành động quan trọng, và toasters cung cấp phản hồi.

Những bài học rút ra

Một vài bài học đã xuất hiện trong quá trình xây dựng thị trường:

1. Cấu trúc thư mục rất quan trọng: Tôi bắt đầu với mỗi component Angular trong một thư mục riêng. Mặc dù không hoàn toàn được tổ chức, nhưng nó vẫn hoạt động. Dự án đã nhắc nhở tôi rằng việc lặp đi lặp lại và tái cấu trúc là những phần tự nhiên trong quá trình học tập.
2. Angular và .NET kết hợp tốt: Sự đồng bộ giữa thiết kế frontend phản ứng của Angular và API có cấu trúc của .NET giúp phát triển mượt mà. Một khi xác thực và SignalR được cấu hình, mọi thứ khác đều khớp lại với nhau.
3. Kịch bản thực tế yêu cầu độ sâu: Khác với các dự án toy, việc xây dựng một thị trường freelancer yêu cầu suy nghĩ về các quy trình làm việc: đề xuất, phê duyệt, dự án hoạt động và nhắn tin. Độ sâu này khiến sự tích hợp trở nên chân thực.

Tại sao điều này quan trọng

Nếu bạn đang học phát triển full-stack, có giá trị to lớn trong việc chọn một ý tưởng dự án thu hút bạn và có độ phức tạp thực tiễn. Bạn sẽ gặp phải những thách thức tương tự như trong các ứng dụng chuyên nghiệp: xử lý trạng thái, đảm bảo an ninh, thiết kế API cho nhiều vai trò và duy trì sự rõ ràng trong mã nguồn.

Dự án này không chỉ đơn thuần là một bài tập hướng dẫn - nó là một minh chứng hoạt động về cách Angular và .NET có thể cung cấp một nền tảng hiện đại, nơi sự hợp tác theo thời gian thực là trung tâm.

Kết luận

Ứng dụng Freelancer Marketplace đã cho tôi cơ hội thực hành việc tích hợp giữa Angular 17/18 và .NET 8, khám phá giao tiếp thời gian thực SignalR và suy nghĩ cẩn thận về vai trò người dùng và quy trình làm việc.

Đối với bất kỳ ai xây dựng các dự án tương tự, tôi khuyên bạn nên bắt đầu nhỏ nhưng chọn một ý tưởng ứng dụng có đủ các yếu tố chuyển động để giữ cho nó hấp dẫn. Đó là cách bạn phát triển không chỉ như một lập trình viên, mà còn như một nhà thiết kế hệ thống có ý nghĩa với người dùng thực tế.

Bước tiếp theo

Nếu bài viết này giúp bạn hiểu cách Angular có thể tiêu thụ dịch vụ API .NET trong một ứng dụng thực tế, đây là cách bạn có thể tiếp tục hành trình của mình:

• 📁 Khám phá Kho lưu trữ GitHub – Đi vào kho lưu trữ để kiểm tra ứng dụng Angular và tích hợp API. Theo dõi mã để củng cố sự hiểu biết của bạn về việc tiêu thụ và tương tác với API trong .NET.
• 💡 Chia sẻ Kiến thức – Bạn có biết ai đó đang học làm việc với API .NET hoặc Angular không? Hãy chia sẻ hướng dẫn này với họ để giúp họ tăng tốc học tập và cải thiện kỹ năng.
• 🖥 Bắt đầu Lập trình – Cách tốt nhất để nắm vững những khái niệm này là thực hành. Lấy mã đã cung cấp và thử nghiệm với việc thêm các tính năng mới hoặc tích hợp các API khác.
• 👍 Thích Kho lưu trữ – Nếu bạn thấy dự án hữu ích, hãy cho nó một lượt thích! Điều này sẽ giúp người khác khám phá kho lưu trữ và hưởng lợi từ nó.

Bằng cách tham gia vào hướng dẫn và dự án này, bạn sẽ xây dựng được nền tảng vững chắc trong việc tích hợp API .NET và Client Angular, sẵn sàng triển khai những kỹ năng này vào các ứng dụng thực tế.