ĐẠI HỌC BÁCH KHOA HÀ NỘI Trường Công nghệ thông tin và Truyền thông □ & □ Bài tập lớn môn học PROJECT I Xây dựng ứng dụng hiển thị công thức nấu ăn GVHD TS Nguyễn Bá Ngọc SVTH Vũ Minh Dũng Mã số sinh[.]
ĐẠI HỌC BÁCH KHOA HÀ NỘI Trường Công nghệ thông tin Truyền thông - □ & □ - Bài tập lớn môn học PROJECT I Xây dựng ứng dụng hiển thị công thức nấu ăn GVHD: TS.Nguyễn Bá Ngọc SVTH: Vũ Minh Dũng Mã số sinh viên: 20200109 Hà Nội, Tháng năm 2023 Mục lục Phần I: Mở đầu Mô tả đề tài .3 1.1 Mục tiêu đề tài .3 1.2 Ý nghĩa đề tài .3 Phần II: Nội dung đề tài .4 2.1 Lên ý tưởng thiết kế 2.2 Front end 2.3 BackEnd 20 PHẦN 3: KẾT LUẬN 23 3.1 Thành thu 23 3.2 Khó khăn hạn chế .23 3.3 Tài liệu tham khảo 23 Phần I: Mở đầu Mô tả đề tài Xây dựng ứng dụng hiển thị công thức nấu ăn cá nhân 1.1 Mục tiêu đề tài - Tìm hiểu React Native – công cụ tuyệt vời giúp phát triển ứng dụng di động - Nâng cao kỹ lập trình kĩ dùng google để fix bugs - Hiểu quy trình xây dựng ứng dụng di động 1.2 Ý nghĩa đề tài - Giúp thân áp dụng kiến thức học vào thực hành - Tích lũy kinh nghiệm làm project thực tế Phần II: Nội dung đề tài 2.1 Lên ý tưởng thiết kế 2.1.1 Lên ý tưởng Bản thân em có hứng thú với ứng dụng di động nên tìm hiểu cách xây dựng ứng dụng di động Qua tìm hiểu biết React – Native công cụ tuyệt vời để thực việc Các ứng dụng tiêu biểu sử dụng React – Native Facebook, Discord, … Do gần có hứng thú với ăn, cảm thấy có ứng dụng cá nhân giúp lưu trữ cơng thức tìm thật tiện lợi, chức đơn giản, dễ tiếp cận cho người học React – Native 2.1.2 Thiết kế Sau học kiến thức React – Native, em bắt đầu thực phần code Qua tìm hiểu em chọn sử dụng Expo Visual Studio Code làm công cụ (Expo tảng nguồn mở miễn phí để xây dựng ứng dụng sử dụng JavaScript React) Các file em tạo thực code gồm file App.js, file src folder assets Với folder screens hay components, có riêng file styles.js để thiết lập style hình hay components đó, giúp dễ dàng thay đổi, bảo trì mà khơng phải tác động vào code 2.2 Front end Front – end em tập trung phát triển, dành nhiều thời gian Em tạo screen khác có chức hiển thị tạo chức điều hướng hình (navigation) Home Screen RecipesList Screen Search Screen Recipe Screen Ingredients Screen - Source code xây dựng front – end: + Folder assets: Folder assets chứa hình ảnh icon cần thiết xuất ứng dụng + Folder screens: Folder screens chứa hình hiển thị giới thiệu + Folder navigations chứa stack screen: Bằng cách sử dụng thẻ Stack Screen, ta truy cập từ hình sang hình khác trở lại hình truy nhập trước + Folder Components chứa components tạo button Ở hay xuất thẻ TouchableHighlight TouchableOpacity, dùng để bao bọc tạo hiệu ứng chạm vào button, đưa dấu hiệu cho thấy ta chạm xác 2.3 BackEnd Backend xây dựng đơn giản đảm bảo hiệu sử dụng + Folder data chứa liệu ăn, với hàm xử lý lấy thơng tin ăn tham số truyền vào: