Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB
Nếu bạn thấy hay hãy like share cho bạn bè cùng biết nhé !
  • 5
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    5
    Shares

Kết thúc chuỗi bài viết về chủ đề Xây dựng ứng dụng web với NodeJS + Express FrameWork + AngularJS thì hôm nay mình xin triển khai 1 chủ đề mới đó là Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB. Có lẽ vì thời gian tồn tại và hỗ trợ quá ngắn của angular2 nên nó sẽ làm cho nhiều người phải xoắn não khi cần tìm hiểu về nó khi mà các tài liệu của nó cực ít ỏi hay list thư viện nghèo nàn. Mà đôi khi vì Khách Hàng yêu cầu nó nên chúng ta cũng phải căng não ra để tìm tòi và xử đẹp nó.

Việc tốt – Lương cao cùng CAREERBUILDER

Ở project này mình chỉ sử dụng angular2 để build còn lại chỉ dùng 1 server duy nhất đó là flask-python.

Các bạn cần tạo 1 thư mục để chứa dự án của mình. Ở đây mình đặt là series2/

Cài đặt angular2

Có rất nhiều cách để cài đặt angular2 và ở bài viết này, mình sẽ thực hiện việc cài đặt bằng cách sử dụng angular-cli.

  • Đầu tiên, máy bạn cần cài đặt npm và nodejs(2 thằng này thì rất đơn giản, mọi người có thể search google hoặc tìm lại ở chuỗi series trước của mình nhé)
  • Tiếp đến mình sẽ cài đặt angular-cli bằng cách cd vào thư mục series2 và chạy lệnh : npm install -g @angular/cli
  • Cuối cùng là init project angluar2 bằng lệnh: ng new front --style scss (ở đây mình dùng style là scss nếu các bạn muốn dùng css thì có thể sửa lại – cách viết scss và các lợi ích của nó thì mình cũng đã có 2 bài viết nói về nó rồi, các bạn có thể tham khảo tại đây nhé)
  • Chúng ta kiểm tra bằng cách cd vào thư mục /front và chạy lệnh : ng serve Sau khi build mất tầm mấy giây thì kết quả sẽ được như hình bên dưới:

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

Mở browser lên và truy cập http://localhost:4200/ chúng ta sẽ được kết quả như hình:

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

Thiết lập front

  • Chúng ta sẽ tạo 1 component có tên là home gồm 3 file theo format như bên dưới
  • Trong file front/src/app/app.module.ts chúng ta thêm component vừa tạo vào:
  • Trong file front/src/app/app.component.html chúng ta xóa các đoạn html không cần thiết đi và chỉ để lại dòng lệnh sau:
  • Định nghĩa 1 route có đường dẫn là home và nó sẽ chuyển đến component home chúng ta vừa tạo ở trên bằng cách thêm route vào trong file front/src/app/app-routing.module.tstheo dạng như bên dưới:
  • Chạy lại server angular2 bằng lệnh ng serve và truy cập vào url localhost:4200/home chúng ta sẽ thấy kết quả như hình(chạy server angular 2 là để chắc chắn rằng component mình vừa tạo đã hoạt động tốt):

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

  • Tại thư mục front chúng ta chạy lệnh ng build và sau khi nó hoàn thành chúng ta sẽ thấy trong thư mục front có thêm 1 thư mục dist , đây chính là source mà angular2 đã build ra. Như đã nói ở trên, mình chỉ dùng 1 server flask-python duy nhất nên mình sẽ trả source ở trong thư mục này về cho browser.

Cài đặt Flask framwork

  • Cài đặt python: Các bạn có thể xem tại đây
  • Cài đặt pip: Các bạn có thể tham khảo cách cài đặt tùy thuộc vào HĐH của các bạn ở trên google nhé, rất đơn giản thôi.
  • Cài đặt Flask bằng lệnh: pip install Flask (thêm sudo phía trước nếu bị báo lỗi)
  • Chúng ta kiểm tra bằng cách import flask vào và kết quả sẽ được như hình bên dưới:

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

Thiết lập server

  • trong thư mục series2 chúng ta tạo thư mục /server và tạo file app.pytrong thư mục vừa tạo rồi thêm các lệnh cơ bản sau:

Ở đây static_forder chúng ta đang dùng chính resource đã được build bởi angular2 ở trên.

  • Tại thư mục server chúng ta chạy lệnh python app.py để chạy server python. Chúng ta sẽ được kết quả như hình bên dưới:

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

  • Mở browser lên và chạy url http://127.0.0.1:5000/ hoặc localhost:5000 chúng ta sẽ được kết quả như hình:

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

  • Như mình đã nói từ đầu thì mình chỉ dùng angular2 để build front-end nên tại server mình sẽ phải định nghĩa 1 route có url là /home để đồng bộ với dưới front. Vì đây là single-page nên chúng ta chỉ cần trả về đúng trang index sau khi angular build là được. Chúng ta sẽ thêm vào file app.py như sau:
  • Chúng ta khởi động lại server flask rồi sau đó mở url localhost:5000/home chúng ta sẽ nhận được kết quả như hình:

Xây dựng ứng dụng web với Python + Flask Framework + Angular2 + DynamoDB

Để thực hiện công việc build front và chạy server cho thuận tiện về sau bằng cách tại thư mục server chúng ta tạo file sh có tên là reboot.sh với nội dung như sau:

Bây giờ sau khi thay đổi code bạn chỉ cần vào thư mục server và chạy lệnh sh reboot.sh là xong.

Ở bài viết tiếp theo mình xin hướng dẫn tạo trang CRUD cơ bản. Cảm ơn các bạn đã đón đọc và rất mong nhận được góp ý của tất cả mọi người.

Bài viết liên quan

Leave a Reply

avatar
  Subscribe  
Notify of