Tài liệu Lập trình ứng dụng kết nối camera ip trên android (báo cáo thực tập)

1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP LẬP TRÌNH ỨNG DỤNG KẾT NỐI CAMERA IP TRÊN ANDROID Công ty thực tập : KiteMetric Người phụ trách : Phạm Hoàng Hải Thực tập sinh : Đoàn Thị Thanh Hiếu TP. Hồ Chí Minh, tháng 06 năm 2022 Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 2 LỜI MỞ ĐẦU Ngày nay, sự phổ biến của thiết bị di động đã tác động lớn đến sự phát triển các ứng dụng chạy trên các nền tảng di động khác nhau. Với tốc độ phát triển vô cùng mạnh mẽ, ngành phát triển ứng dụng di động đã và đang là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới, cả về phần cứng và phần mềm. Sau khoảng thời gian trau dồi kiến thức và kỹ năng trên ghế nhà trường, với mong muốn được thử sức, được áp dụng những kiến thức, kỹ năng sẵn có, và muốn có được kinh nghiệm từ dự án thực tế, muốn tiếp xúc văn hóa làm việc trong môi trường thuộc lĩnh vực công nghệ thông tin, nên em quyết định tìm nơi phù hợp để thực tập. Sau khoảng thời gian cân nhắc và trao đổi với đại diện của công ty, em đã có cơ hội thực tập tại công ty KiteMetric – một doanh nghiệp trẻ, năng động. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 3 LỜI CẢM ƠN Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn, hỗ trợ nhiệt tình của thầy phụ trách đã giúp cho em tiếp thu được những kiến thức quan trọng để có thể làm được một ứng dụng di động. Chân thành cảm ơn các bạn trong team internship đã hỗ trợ lẫn nhau, cùng nhau khắc phục lỗi để hoàn thiện ứng dụng Kết nối camera IP trên Android. Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này. Cuối cùng, em xin trân trọng gửi lời cảm ơn Công ty KiteMetric đã tạo điều kiện cho em có cơ hội được thực tập tại công ty. Em xin chân thành cảm ơn! Đoàn Thị Thanh Hiếu TpHCM, ngày 17 tháng 06 năm 2022 Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 4 NHẬN XÉT CỦA KHOA .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... .......................................................................................................................................................... Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 5 MỤC LỤC MỤC LỤC .................................................................................................................................................. 5 Chương 1: Giới thiệu công ty thực tập ................................................................................................... 6 1. Giới thiệu công ty KiteMetric....................................................................................................... 6 2. Sản phẩm của công ty ................................................................................................................... 6 Chương 2: Nội dung thực tập ................................................................................................................ 10 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty ............................................................ 10 2. Nghiên cứu kỹ thuật .................................................................................................................... 10 3. Thực hiện project ........................................................................................................................ 15 4. Lịch làm việc ................................................................................................................................ 15 Chương 3: Chi tiết về project ................................................................................................................ 17 1. Giới thiệu về ứng dụng ................................................................................................................ 17 2. Thực hiện...................................................................................................................................... 22 3. Kế hoạch ....................................................................................................................................... 22 TÀI LIỆU THAM KHẢO ........................................................................................................................ 23 TỔNG KẾT .............................................................................................................................................. 24 Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 6 Chương 1: Giới thiệu công ty thực tập Hình 1: Logo công ty KiteMetric 1. Giới thiệu công ty KiteMetric KiteMetric được thành lập năm 2012 là một công ty tư vấn công nghệ với sứ mệnh hỗ trợ các doanh nghiệp thực hiện hóa từ ý tưởng thành sản phẩm chất lượng cao. - Về dịch vụ Web & Mobile development: Thiết kế và xây dựng sản phẩm với hiệu năng cao với trải nghiệm người dùng tuyệt vời trên nhiều nền tảng. - Về dịch vụ Machine Learning: xây dựng ứng dụng AI để tự động hóa các tác vụ thủ cộng, cải thiện kinh doanh với trí thông minh theo hướng dữ liệu. - Về dịch vụ User Experience: thiết kế mockups, thử nghiệm các ý tưởng để xác thực ý tưởng và đưa ra thiết kế UI/UX sáng tạo để mang lại sự độc đóa của bất kỳ sản phẩm nào. - Về dịch vụ Technology Consulting: Giúp định hình ý tưởng của bạn, xác định các rào cảng kỹ thuật, đề xuất các giải pháp và công nghệ phù hợp cho dự án. Websit công ty: https://kitemetric.com/ Email công ty: [email protected] Điện thoại: 028 6651 7777 Địa chỉ: 4th Floor, AGA Building, 72/24 Phan Dang Luu Street, Ward 5, Phu Nhuan District, Ho Chi Minh City, Vietnam 2. Sản phẩm của công ty Những công nghệ mà công ty KiteMetric sử dụng bao gồm: Nodejs, Java, Python, Javascript, ReactJS, VueJS, Docker, Kubernetes, native (iOS, Android, Windows) / cross-platform (React Native) mobile app development. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 7 Về mảng Máy học: Deep learning frameworks (Tensorflow, PyTorch, Caffe2), fundamental machine learning algorithms, object detection, recognition, tracking, video, and image processing. Những sản phẩm nổi bật của công ty KiteMetric: FaceSwap là một ứng dụng thú vị cho phép người dùng thay thế khuôn mặt nhân vật nổi tiếng trong ảnh bằng khuôn mặt của họ bằng cách sử dụng một bức ảnh duy nhất từ máy ảnh. Ứng dụng có sẵn trên cả Android và iOS với hơn một nửa triệu người dùng. Hình 2: Giao diện FaceSwap Blanket Inc. là một công ty khởi nghiệp được tài trợ tốt được thành lập ở trung tâm Thành phố New York. KiteMetric đã giúp Blanket xây dựng và ra mắt sản phẩm ngay từ ngày đầu tiên. Sản phẩm này là một ứng dụng dành cho thiết bị di động áp dụng hỗn hợp các thuật toán để thực hiện nhiệm vụ, đo lường và khen thưởng hiệu suất của nhân viên, đồng thời giúp tăng cường hiệu quả trong quản lý nhà hàng và hoạt động hàng ngày của họ. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 8 Hình 3: Giao diện ứng dụng blanket Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 9 Bên cạnh đó còn các sản phẩm khác như: - Coinmarket: https://kitemetric.com/case-studies/coin-market/ - Vinasun Taxi: https://kitemetric.com/case-studies/vinasun/ - Foresight: https://kitemetric.com/case-studies/foresight/ - Tapviral: https://kitemetric.com/case-studies/tapviral/ ... Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 10 Chương 2: Nội dung thực tập Triển khai team internship phát triển ứng dụng Kết nối camera IP trên Android nhằm mục đích giúp sinh viên thực tập được đào tạo toàn diện về cách thức tạo ra một ứng dụng Android từ lúc lên ý tưởng cho đến khi sản phẩm hoàn thiện ra đời; bên cạnh đó còn rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp trong quá trình phát triển sản phầm. Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển ứng dụng di động chuyên nghiệp, năng động. 1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty Thời gian: 1 ngày Nội dung: Giới thiệu về công ty, cách thức tổ chức của công ty Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và phát triển (như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức của công ty. Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc… Giới thiệu về các thành viên trong team internship và được nghe người phụ trách trình bày ý tưởng về sản phẩm sẽ thực hiện trong quá trình thực tập tại công ty. Giới thiệu các công cụ, nguồn tài liệu hỗ trợ trong quá trình học tập và làm việc tại công ty. Kết quả: Hiểu thêm về văn hóa, quá trình thành lập và phát triển của công ty KiteMetric. Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn. 2. Nghiên cứu kỹ thuật 2.1. Các công cụ làm việc Thời gian: 4 ngày Nội dung: Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc. Trong thời gian này, supervisor đã hướng dẫn thực tập sinh tìm hiểu về các công cụ sẽ giúp ích cho trong công việc sau này. Một số phần mềm trong số đó như: Jira: sử dụng trong làm việc nhóm, được sử dụng để theo dõi công việc, tiến độ làm việc và quản lý dự án. Figma: một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng website. Với Figma, người dùng có thể sáng tạo không giới hạn giao diện người dùng Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 11 (UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế khác. Github: một hệ thống quản lý dự án và phiên bản code, hoạt động giống như một mạng xã hội cho lập trình viên. Các lập trình viên có thể clone lại mã nguồn từ một repository và Github chính là một dịch vụ máy chủ repository công cộng, mỗi người có thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể làm việc. Android Studio: IDE chính thức được sử dụng trong phát triển ứng dụng Android dựa trên IntelliJ IDEA. Chức năng chính của Android Studio là cung cấp các giao diện giúp người dùng có thể tạo các ứng dụng và xử lý các công cụ file phức tạp sau hậu trường. 2.2. Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên. Kết quả: Cài đặt thành công các ứng dụng, sử dụng cơ bản các chức năng của các ông cụ, phần mềm hỗ trợ cho các tác vụ trong dự án. Tìm hiểu ngôn ngữ Dart, Flutter Thời gian: 10 ngày (2 tuần) Nội dung: Tìm hiểu về các khái niệm, thuật ngữ Dart, những kiến thức về framework Flutter ❖ Dart: nắm được các kiến thức như: - Biến, câu lệnh điều khiển - Vòng lặp - Hàm - Lập trình hướng đối tượng - Các thư viện cơ bản ❖ Flutter - Nắm được lịch sử, ưu và nhược điểm. - Kiến trúc của Flutter framework - Widget: • Bất cứ thứ gì được dựng trong Flutter, nó sẽ nằm trong Widget. • Widget mô tả ứng dụng sẽ trông như thế nào dựa trên cấu hình và trạng thái hiện tại của chúng. • Khi trạng thái của một Widget thay đổi, Widget sẽ được build lại. • Các widget có thể được lồng vào nhau khi xây dựng ứng dụng. - Stateless widget • Stateless Widget không có state. • Công việc duy nhất là hiển thị thông tin và giao diện người dùng. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 12 • Khi tạo một StatelessWidget yêu cầu phải extends đúng class StatelessWidget và phải bao gồm một phương thức build. - Statefull widget • Stateful widget cung cấp thông tin cấu hình và state object. ▪ State là thông tin mà có thể kích hoạt quá trình rebuild của widget và có thể thay đổi trong suốt vòng đời của widget. ▪ Sử dụng phương thức setState để kích hoạt quá trình rebuild của widget. • Khi tạo một StatefulWidget cần tạo 2 class đại diện cho state object và widget. ▪ Widget phải extends đúng class StatefulWidget và cần phương thức createState() để cung cấp State cho StatefulWidget. ▪ State object: phải bao gồm một phương thức build. - Inherited Widgets • Inherited Widget là một nơi lưu trữ data và cung cấp data cho widget con trong widget tree. • Tất cả widget con của Inherited Widget đều có thể truy cập vào Inherited Widget để lấy data. - Tuỳ chỉnh widget - Các xử lý phổ biến trong flutter: xử ly navigation, .... - Meterial UI, Theme - Static UI - Dynamic UI - Storage: tìm hiểu về các thuật ngữ, khái niệm như: Future, async, await, Shared Preference, File System, SqLite. - State management Thực hiện: - Tham gia đầy đủ các buổi training của công ty, meeting báo cáo tiến độ, kết quả tìm hiểu của nhóm internship. - Làm các bài thực hành, kiểm tra về kiến thức đã học. Kết quả: - Tiếp thu những kiến thức về ngôn ngữ Dart, framework Flutter. Có được những kiến thức quan trọng cho việc lập trình mobile sau này. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 13 - 2.3. Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu. Tìm hiểu về teamplate Flutter Boilerplate Nội dung: Các kiến thức về template boilerplate để có thể tạo ra một ứng dụng di động đơn giản. - Cách thức tạo một project flutter theo teamplate boilerplate Tải project về hoặc clone project với link bên dưới: https://github.com/zubairehman/flutter-boilerplate-project.git Chạy 2 câu lệnh bên dưới: flutter pub get flutter packages pub run build_runner build --delete-conflictingoutputs - Cấu trúc thư mục: • Cấu trúc thư mục lõi: flutter-app/ |- android |- build |- ios |- lib |- test • Cấu trúc của thư mục lib: Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 14 lib/ |- constants/ |- data/ |- stores/ |- ui/ |- utils/ |- widgets/ |- main.dart |- routes.dart Trong đó: 1. constants - Chứa các giá trị không thay đổi dù có thực hiện thao tác gì trong app. 2. data - Chứa các phương thức, thuộc tính liên quan đến data. Điển hình là các api được đặt vào đây. 3. stores - Các file trong đây là tập hợp các hàm mà các hàm này sẽ được sử dụng ở bên UI. 4. ui  -  Chứa các thư mục mà mỗi thư mục là mỗi screen. 5. util  - Chứa các function phổ biến của ứng dụng. 6. widgets - Chứa các widget thường được tái sử dụng cho ứng dụng như là Button, TextField …. 7. routes.dart - Chứa tất cả các routes của ứng dụng. 8. main.dart - File này được thực thi đầu tiên trong ứng dụng. Tất cả các cài đặt chính đều được cài đặt trong file này như theme, routes, title, ... Thực hiện: - Tham gia tìm hiểu và báo cáo cho các bạn trong team internship. Tìm kiếm tài liệu trên mạng để tìm hiểu thêm. Kết quả: - Biết cách thức tạo ứng dụng android sử dụng framework Flutter theo template boilerplate. Nắm được kiến trúc thư mục, tổ chức tài nguyên của template boilerplate. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 15 3. Thực hiện project Nhờ sự hỗ trợ tận tình của thầy Phạm Hoàng Hải, bạn Nguyễn Trọng Thuận và những thành viên trong team internship mà sau 12 tuần vừa tìm hiểu vừa thực hành, thực tập sinh đã nắm được những kiến thức về Dart, Flutter, và áp dụng những kiến thức đạt được đó vào dự án thực tế. Chi tiết đồ án sẽ được nói ở phần sau. 4. Lịch làm việc Tuần 1 2 3 4 5 Mức Nhận xét độ của người hoàn hướng dẫn thành Công việc Người hướng dẫn Sprint 1: - Tìm hiểu về công ty, cách tổ chức của công ty. - Làm quen với làm việc: Jira, Figma, Android Studio, Github. - Học cách trao đổi, làm việc qua email. - Lên kế hoạch cho dự án. Sprint 2: - Tìm hiểu ngôn ngữ lập trình Dart. - Tìm hiểu Flutter. Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Sprint 3: - Tìm hiểu ngôn ngữ lập trình Dart. - Tìm hiểu Flutter. - Tìm hiểu template boilerplate. Sprint 4: - Khảo sát, thu thập yêu cầu. - Phân tích yêu cầu ứng dụng. Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Sprint 5: - Thiết kế UI/UX. Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần 100% Minh Khang Thầy Phạm Hoàng Hải 100% Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang 100% Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần 100% Minh Khang Đạt cầu yêu Đạt cầu yêu Đạt cầu yêu Đạt cầu yêu Đạt cầu yêu Sinh viên Đoàn Thị Thanh Hiếu 16 6 7 8 9 10 11 12 Sprint 6: - Điều chỉnh bản thiết kế UI/UX. - Khởi tạo project theo teamplate boilerplate và push lên github. Sprint 7: - Triển khai hiện thực giao diện của ứng dụng. Sprint 8: - Kết nối camera với ứng dụng. Sprint 9: - Xây dựng cơ sở dữ liệu theo template boilerplate. Sprint 10: - Hiện thực chức năng chính của ứng dụng. Sprint 11: - Thực hiện các chức năng validate. Sprint 12: - Kiểm thử và hoàn thiện sản phẩm. Thầy Phạm Hoàng Hải Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần 100% Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Thầy Phạm Hoàng Hải, Thầy Nguyễn Tấn Trần Minh Khang Đạt cầu yêu 100% Đạt cầu yêu 100% Đạt cầu yêu 100% Đạt cầu yêu 100% Đạt cầu yêu 100% Đạt cầu yêu 100% Đạt cầu yêu Sinh viên Đoàn Thị Thanh Hiếu 17 Chương 3: Chi tiết về project 1. Giới thiệu về ứng dụng 1.1 Giới thiệu Ngày này, không chỉ ở Việt Nam và nhiều nước khác trên thế giới trải qua thời kỳ khó khăn của dịch bệnh dẫn đến lạm phát, thiếu hụt việc làm, nền kinh tế suy thoái khiến có vấn nạn trộm cắp, cướp đoạt xảy ra nhiều hơn, để tiện cho việc truy tìm và cung cấp bằng chứng cho cơ quan chức năng nhiều hộ gia đình lắp ráp camera. Bên cạnh đó, nhiều hộ gia đình lắp ráp camera không chỉ đề phòng trộm cắp và còn sử dụng cho nhiều mục đích khác. Chính vì sự phố biến của camera này nên việc phát triển ứng dụng cho việc truy cập vào camera, quản lý, giám sát, phát hiện các bất thường xảy ra ngày càng tăng. Chính vì thế team internship được giao phó triển khai là Ứng dụng kết nối Camera IP trên Android. Team internship sử dụng framework Flutter – framework dựa trên ngôn ngữ lập trình Dart - do Google phát triển, nhóm triển khai ứng dụng theo template boilerplate – một teamplate hệ thống lại các thư mục, tệp và chứa kiến trúc ứng dụng, app theme, ràng buộc và những dependencies tối thiểu để tạo ra ứng dụng từ đó giúp cho lập trình viên dễ quản lý source code và giúp giảm thiểu thời gian cài đặt và phát triển bằng cách sử dụng code mẫu và tránh viết lại từ đầu. Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 18 1.2 Danh sách các màn hình ❖ Màn hình Splash ❖ Màn hình Home Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 19 ❖ Màn hình Thêm camera Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu 20 ❖ Màn hình Thêm group camera Thầy Phạm Hoàng Hải Sinh viên Đoàn Thị Thanh Hiếu