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

ĐẠ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: Bằng cách tạo đối tượng, lưu trữ liệu ăn phân loại ăn giúp người dùng dễ dàng tìm kiếm Ở ta gán id cho ăn để xác định ăn Từ dịng 42 đến 55 hàm xử lý tìm kiếm từ liệu nhập từ bàn phím Hàm getRecipesByRecipesName xuất ảnh bên hàm có khả thực cao nhất, ta tìm hiểu ý tưởng phương thức Đầu tiên sử dụng phương thức toUpperCase() để xử lý chuỗi đầu vào thành chuỗi in hoa lưu lại biến nameUpper Sau sử dụng phương thức map để thực viết hoa tất tittle kho data lưu trữ ăn, dùng phương thức includes(truyền vào nameUpper) để kiểm tra xem nameUpper có xuất tittle viết hoa hay khơng, có đưa thơng tin đối tượng ăn vào recipesArray từ hiển thị ngồi hình PHẦN 3: KẾT LUẬN 3.1 Thành thu - Có kiến thức tảng React-Native - Hiểu cách xây dựng phát triển ứng dụng di động - Có thêm kinh nghiệm việc fix bugs, tra google gặp vấn đề - Tạo sản phẩm đầu tay cho thân, xuất tệp APK tiện sử dụng 3.2 Khó khăn hạn chế - Do chưa có kiến thức bản, phải học lại từ đầu nên tốn thời gian - Khi gặp bugs, chưa có kinh nghiệm nên nhiều thời gian để fix - Ứng dụng dừng lại mức cá nhân sử dụng, sơ sài 3.3 Tài liệu tham khảo - Google - Stackoverflows - Github - reactnative.dev - Youtube - F8 - Css Flexbox ... 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. .. khăn hạn chế - Do chưa có kiến thức bản, ph? ?i học l? ?i từ đầu nên tốn th? ?i gian - Khi gặp bugs, chưa có kinh nghiệm nên nhiều th? ?i gian để fix - Ứng dụng dừng l? ?i mức cá nhân sử dụng, sơ s? ?i 3.3... 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