Nhận diện khuôn mặt toidicodedao

Phần 6 – Từ thử nghiệm tới deploy – Vô Thai kiếm (Serverless Architecture)

Kết thúc phần trước, bọn họ đã Oauth WebTask nhằm viết ngừng RestAPI của ứng dụng theo phong cách thiết kế Serverless. Ở phần cuối này, họ sẽ sử dụng AngularJS để chế tạo một ứng dụng Web đối chọi giản.

Bạn đang xem: Nhận diện khuôn mặt toidicodedao

Nếu chưa sử dụng AngularJS bao giờ, hãy đọc bài viết này để có đủ kiến thức và kỹ năng cơ bản AngularJS để triển khai theo lý giải nhé:https://sangplus.com/angular-js-101-gioi-thieu-ve-angularjs.html

Viết code HTML

Mở IDE ưa thích của bạn lên để bước đầu code nào. Ta tạo ra 3 file index.html, scriptstyle.css cùng thư mục nhé.

Bước 1: họ link tới file css với java_script từ bỏ thẻ head.

Phần HTML của trang web cũng không có gì khó, chúng ta đọc phản hồi là hiểu. Website gồm 4 khu vực:

Form để người tiêu dùng nhập dữ liệu (link ảnh)Khu hiển thị hình ảnh của idol và tác dụng nhận diệnHiển thị list idol và tài liệu dưới dạng JSONMột số ảnh để test

Bước 2:Ta viết một vài class trong tệp tin style.css. Bạn sẽ thấy ở chỗ này mình để class idol-face bao gồm position là absolute, width với height đều là 0. Đây là hình vuông vắn khoanh vùng khuôn khía cạnh của idol. Mình đã dựa vào tác dụng JSON trả về để set style động mang lại class này.

Hình chữ nhật chỗ khuôn phương diện Ngọc Trinh tất cả class là idol-face, style đụng dựa theo công dụng JSON

Bước 3:Chúng ta bắt đầu viết code trong file script. Đầu tiên, chúng ta khởi tạo thành module AngularJS và tạo nên service nhấn diện. Service này đã submit url lên RestAPI đã viết tại vị trí trước, trả về tác dụng dạng JSON.

Cuối cùng, họ viết code trong controller để hoàn thiện ứng dụng thôi. Chúng ta tiếp tục phát âm code và phản hồi nhé.

Mở file index.html lên trong Chrome để chạy thử vận dụng thôi nào:

Toàn cỗ source code cho ứng dụng web chỉ gói gọn gàng trong 3 file. Chúng ta vào repo Github của bản thân mình để coi nhé:https://github.com/ToiDiCodeDaoSampleCode/vav-idol

Deploy ứng dụng

Toàn bộ vận dụng chỉ là tệp tin HTML, CSS với JavaScript tĩnh, không buộc phải server vẫn chạy được bình thường. Việc deploy áp dụng chỉ là… kiếm chiếc host để đưa 3 file này lên mạng cho tất cả những người khác truy vấn thôi. Nếu bạn đã có server giỏi host riêng biệt thì chỉ việc upload file html này lên là xong. Host cực nhẹ do mọi giải pháp xử lý được diễn ra ở client cùng webtask, server không giải pháp xử lý gì cả.

Trong bài bác này, mình đã hướng dẫn các bạn sử dụng Github Pages để host file HTML tĩnh này nhé. Vận tốc tải của Github Pages rất nhanh, chịu cài mạnh, miễn phí, lại có khả năng liên kết với custom domain nên không ít người sử dụng nó nhằm host file HTML tĩnh.

Cả 2 trang nhấn diện Idol (https://jav-idol.toidicodedao.com/) và bảo mật nhập môn (https://security.toidicodedao.com/) đông đảo được bản thân host trên Github Page đấy. Chúng ta có thể tìm hiểu thêm ở đây:https://pages.github.com/.

Xem thêm: Mèo Đánh Nhau Và Cách Giữ Hòa Bình Giữa Những Hoàng Thượng, Mèo Đánh Nhau Ngăn Chặn Thế Nào

Bắt đầu thôi nào, chỉ việc làm theo 4 bước solo giản

1. Đăng ký: chúng ta vào github.comđể đăng ký một tài khoản nếu chưa tồn tại tài khoản github nhé.

2. Chế tác Repository: sau khoản thời gian đăng kí với đăng nhập, chúng ta bấm nút New repositorymàu xanh để sinh sản Repository bắt đầu trên Github.

Đặt đến nó một chiếc tên (gì cũng được), nhớ tick lựa chọn “Initialize with a README” nhằm Github khởi sản xuất sẵn repository nhé.

Sau kia bấm Create Repository. Đây là kết quả:

3. Upload file lên Repository: chúng ta bấm chữ Upload file, lựa chọn 3 file index.html, script cùng style.css trong máynhé. Sau đó bấm Commit changes thôi.

4. Thiết lập Github Pages: sau khoản thời gian đã thấy file, các bạn click vào bánh răng Settings góc trên mặt phải, scroll xuống search mục Github Pages. Lựa chọn branch là master branch với bấm Save nhé.

Sau khi bấm Save, scroll lại xuống mục Github Pages bạn sẽ thấy ứng dụng của chính mình đã online. Rất có thể copy đường liên kết này để truy vấn ứng dụng hoặc giữ hộ cho bạn bè dùng demo nhé.

Nếu bạn có nhu cầu thay đổi, sửa đổi ứng dụng, cứ bài toán sửa trực tiếp trên Github, hoặc sửa làm việc local rồi upload đè lên các file trên github là được.Nếu đọc khuyên bảo không hiểu, chúng ta hãy vào trang nào giúp thấy hướng dẫn bí quyết deploy lên github (có video) nhé: https://code4startup.com/projects/zero-create-landing-page-mail-chimp-woofu-viral-marketing-strategies

Kết

Phần upload hình ảnh mình giữ lại cho chúng ta tự tìm hiểu nhé! gợi ý đây (Có thể tham khảo source code của dìm diện Idol) :

Thêm 1 input contorl gồm dạng fileKhi người dùng chọn file, dùng JavaScript để đọc base64 của file đóSử dụng RestAPI của imgur hoặc cloudinary nhằm upload base64 của hình ảnh và lấy links của ảnhSau lúc đã tất cả link, submit link lên api nhằm lấy kết quả thôi.

Chúc mừng các bạn đã kết thúc series nhấn Diện Idol. Đây là một trong những series hơi dài với hơi khó, tuy thế bạn cũng trở nên học được khá nhiều thứ:

Cách thực hiện Microsoft Bing Image SearchCách thực hiện Postman để demo và điện thoại tư vấn RestAPIQui trình thừa nhận diện khuôn khía cạnh của một hệ thống nhận diệnCác khái niệm và cách áp dụng Cognitive APIKhái niệm Serverless, phương pháp viết funtion Serverless với WebtaskCách sử dụng Github Pages để deploy một trang Web

Nếu có khó khăn gì trong quá trình tuân theo hướng dẫn, các bạn cứ thoải mái góp ý hoặc hỏi trong phần bình luận nhé. Bản thân sẽ nỗ lực giải đáp. Hi vọng chúng ta tiếp tục theo dõi các series giỏi ho trong tương lai của Tôi đi code dạo.

Leave a Reply

Your email address will not be published. Required fields are marked *