Bài tập báo cáo kỹ thuật web với ứng dụng đa nền tảng

06:05 09/06/2023 Documents Downloader   ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG CAO ĐẲNG CƠNG NGHỆ THƠNG TIN TPHCM BÀI TẬP BÁO CÁO KỸ THUẬT WEB VỚI ỨNG DỤNG ĐA NỀN TẢNG Giáo Viên Phụ Trách TRẦN CÔNG MUA Sinh viên thực hiện-MSSV Đào Duy Hưng - 3001180303 Đinh Văn Diện - 3001180395 Phạm Hồng Thái - 3001180403 TP HCM, tháng năm 2020 https://documents-downloader.pages.dev/document 1/41 06:05 09/06/2023 https://documents-downloader.pages.dev/document Documents Downloader 2/41 06:05 09/06/2023 Documents Downloader   Phần 1: Giới thiệu đề tài Trong giới nay, công nghệ ngày phát triển mạnh Mọi người ai chạy theo cơng nghệ Nền cơng nghệ lớn mạnh có lẽ công nghệ thông tin viết tắt IT (Information Technology) Để hỗ trợ đáp ứng nhu cầu sử dụng lan truyền IT nhà phát triển thiết kế nhiều phương án, cơng nghệ App phương án quan trọng App(Ứng dụng) có hầu hết phương tiện SmartPhone, App làm cho công nghệ trở nên đa dạng đáp ứng nhu cầu cảu người sử dụng  Nhóm chúng tơi chọn đề tài cho thi lần tạo sản phẩm App theo mơ hình Blog Hiện có nhiều App thiết kế theo mơ hình phổ  biến kể đến Facebook, Instagram, Twitter … Nhóm chúng tơi định đặt tên cho App INTERFACE Phần 2: KHẢO SÁT YÊU CẦU Yêu cầu hệ thống - Đăng Nhập (Login): + Giao diện dễ nhìn + Có thể đăng nhập tài khoản có database + Khơng thể đăng nhập vào chương trình tài khoản đăng nhập khơng có database - Đăng ký (Sign Up): + Có text box cần thiết cho việc đăng ký tài khoản + Có thể lưu thơng tin người dùng đăng ký database + Có thể dùng tài khoản đăng ký thành công qua phần Đăng Nhập để vào chương trình - Giao diện + Phải show lên toàn post tài khoản đăng nhập + Đầy đủ button để phục vụ cho blog: tìm kiếm, home, đăng bài, thơng báo, thơng tin tài khoản + Update thời gian thực, người dùng đăng post lên giao diện + Hiện thị lượt like số lượng comment post - Tìm kiếm (Search): + Tìm kiếm tên người dùng (User Name) với từ khóa ghi box tìm kiếm + Hiện thị trang cá nhân người tìm kiếm https://documents-downloader.pages.dev/document 3/41 06:05 09/06/2023 Documents Downloader   - - - - + Có thể follow unfollow người tìm kiếm + Trờ trang giao diện button quay Đăng (Post): + Chọn hình ảnh từ máy thư viện để post + Show hình chọn lên trang đăng để preview + Có đầy đủ box để nhập thông tin cần thiết cho post: Caption, Thẻ tag, check in … + Chọn user xem thấy post chặn người mà bạn không muốn cho thấy post Thơng báo + Hiện thị trạng thái hoạt động bạn + Khi có user follow bạn bạn follow user lên thông báo + Khi user comment post bạn reply comment bạn post lên thông báo Thông tin cá nhân + Hiện thị số lượng người theo dõi bạn (followers) số lượng bạn theo dõi (followings) + Cập nhật ảnh đại diện + Hiện thị số lượng post + Đăng xuất tài khoản thêm tài khoản Một số chức bổ sung + Quét mã QR để tìm kiếm user  + Hiện tất ảnh user bạn tìm kiếm bên page Tìm Kiếm + Xóa post + Xóa thơng báo bạn muốn xóa https://documents-downloader.pages.dev/document 4/41 06:05 09/06/2023 Documents Downloader   Phần 3: PHÂN TÍCH HIỆN TRẠNG S W O T STRENGHTS WEAKNESSES OPPOTURNITIES THREATS Hiện công nghệ ứng dụng phát triển mạnh mẽ Thành viên nhóm nắm kĩ quan trọng việc lập trình Thành viên nhóm có thiết  bị tốt để phục vụ cho việc lập trình app Có nguồn thơng tin  bổ ích giúp đỡ cho việc hồn thành sản phẩm Thành viên nhóm chăm tâm vào cơng việc hồn thành sản phẩm Trưởng nhóm Có nhiều ứng dụng Blog thị trường Nhóm chưa hoàn toàn nắm hết thư viện Thành viên nhóm chưa có nhiều kinh nghiệm lĩnh vực app Blog Một số thành viên cần chau dồi kĩ lập trình Một số thành viên chưa tốt tỏng việc đưa ý tưởng Cả nhóm cần trau dồi lượng Tiếng Anh chuyên mơn Chưa có địa Nhờ vào kĩ tốt cảu thành viên giúp tạo sản phẩm tốt thị trường Tạo sản  phẩm tối ưu nhờ việc biết nhiều công nghệ Thời gian tạo sản phẩm thời gian ngắn Trong thời gian cụ thể tạo nhiều sản phẩm Được làm việc cơng ty chun lập trình Tiếp thu nhiều kĩ tốt Dễ dàng apply vào cơng Cạnh tranh nhóm ngày gay gắt Nhiều nhóm có kĩ tốt Công nghệ thay đổi liên tục Thời gian làm việc thành viên nhóm khơng ổn định Cảm thấy chán nản với lỗi sản  phẩm Update liên tục cho sản phẩm Phải chạy theo xu hướng  bên yêu cầu sản phẩm Các thành viên nhóm phải nảy ý tưởng liên https://documents-downloader.pages.dev/document 5/41 06:05 09/06/2023 Documents Downloader    biết cách động viên, thúc đẩy thành viên để hoàn thành sản  phẩm tiến độ Các thành viên nhóm  biết chia cơng việc hợp lý điểm cố định cho cơng việc ty nước ngồi nhờ vào việc trau dồi Tiếng Anh Nhu cầu khách hàng ngày tăng Sản phẩm mẻ, sáng tạo liên tục 10 Tiềm  phát triển nhờ vào việc giới thiệu sản  phẩm mạng xã hội như: Facebook, web… tục cho sản  phẩm Phần 4: THIẾT KẾ HỆ THỐNG Mơ hình hệ thống Hiện có nhiều mơ hình để phát triển ứng, nhóm chúng tơi chọn mơ hình phổ biến  MƠ HÌNH LỚP (3-tier) Lớp giao diện (Presentation logic): lớp cầu nối người dùng với ứng dụng, cung cấp chức ứng dụng cho người dùng nhận lệnh từ người dựng cho ứng dụng Lớp thiết kế cho thân thiện với người dựng tốt Lớp nghiệp vụ (Business logic): phần lõi chương trình, cung cấp tất chức nghiệp vụ chương trình cho lớp giao diện bên Trong mơ hình lớp chức thường nằm phía Client chuyển vào lớp nghiệp vụ   https://documents-downloader.pages.dev/document 6/41 06:05 09/06/2023 Documents Downloader   Lớp CSDL (Data Access logic): lớp cung cấp khả truy xuất đến CSDL cho lớp nghiệp vụ cần Lớp dịch vụ liệu đại diện cho hay nhiều kho lưu trữ liệu chương trình Trong mơ hình xử lý sẩy ba tầng ứng dụng Mỗi lớp gồm vài chức riêng biệt  Trong mơ hình lớp, chức chương trình tách thành lớp riêng biệt Việc tách lớp làm cho phần chương trình độc lập hơn, đáng tin cậy hơn, chương trình trở nên linh động việc thay thế, nâng cấp mơ hình thích hợp với ứng dụng có yêu cầu thay đổi thường xuyên  Công nghệ Ionic Ionic framework dùng để phát triển ứng dụng Hybrid cho mobile Hybrid hiểu lai ứng dụng native web mobile Bản chất hybrid giao diện viết html, css,  javascript cho phép gọi api native hệ thống nên thao tác với hệ điều hành mobile ứng dụng native khác    Ưu điểm: Các ứng dụng hybrid có nhiều ưu điểm hiển thị cho nhiều tảng Tận dụng tính khác thiết bị di động GPS, camera… Thời gian chi phí dùng để phát triển ứng dụng thấp nhiều so với native Chỉ cần biết ngôn ngữ javascript mà ko cần phải biết ngơn ngữ lập trình    Nhược điểm:  Tốc độ chậm với số tính chuyển trang di động Các plugin khơng tương thích với số thiết https://documents-downloader.pages.dev/document 7/41 06:05 09/06/2023 Documents Downloader    bị tảng Một số API chưa hỗ trợ để giao tiếp với thiết bị Ionic coi khung front-end giúp bạn kiểm sốt hình ảnh trải nghiệm lập trình ứng dụng di động, hiệu ứng chuyển động mượt thiết kế đẹp Cộng đồng Ionic lớn, có hẳn trang thiết kế theme riêng lựa chọn để phát triển cho nhanh Angular Angular cung xây dựng ứng dụng Mobile Desktop Nó xây dựng sử dụng JavaScript Bạn phải sử dụng để xây dựng ứng dụng hồn chỉnh kết hợp với HTML, CSS JavaScript   Angular có nhiều cải tiến thơng so với AngularJS Nó có nhiều cải tiến làm dễ học phát triển ứng dụng cho doanh nghiệp Bạn xây dựng ứng dụng dễ dàng mở rộng, bảo trì, test Tính Angular - Cơ chế Two-Way Data Binding: Đây tính cool Angular Data binding tự động nhanh tức  bất thay đổi view tự động cập nhật vào component class ngược lại - Hỗ trợ chế Routing mạnh mẽ: Angular có chế routing tải trang cách bất đồng trang cho phép tạo SPA - Mở rộng HTML: Angular cho phép sử dụng cấu trúc lập trình giống điều kiện if, vòng lặp for để render control - Thiết kế module hoá: Angular tiếp cận theo hướng thiết kế module hoá Bạn phải tạo Angular Module để tổ chức tốt quản lý source code - Hỗ trợ làm việc với hệ thống Backend: Angular xây dựng hỗ trợ làm việc với backend server thực thi logic nhận liệu - Cộng đồng tốt: Angular hỗ trợ Google cộng đồng FireBase - Firebase tảng ứng dụng di động web với công cụ hạ tầng thiết kế để giúp lập trình viên xây dựng ứng dụng chất lượng cao https://documents-downloader.pages.dev/document 8/41 06:05 09/06/2023 Documents Downloader   - Với Google Firebase, bạn tạo ứng dụng chat Yahoo Message Facebook Messager ngày thời gian cực ngắn khoảng ngày chí vài đơn giản bạn cần lo phần client phần server database có firebase lo Firebase kết hợp tảng cloud với hệ thống máy chủ mạnh mẽ tới từ Google, để cung cấp cho API đơn giản, mạnh mẽ đa tảng việc quản lý, sử dụng database Chức firebase Realtime Database Firebase lưu trữ liệu database dạng JSON thực đồng database tới tất client theo thời gian thực Cụ thể bạn xây dựng client đa tảng (cross-platform client) tất client sử dụng chung database đến từ Firebase tự động cập nhật liệu database thêm sửa đổi  Ngồi Firebase cịn cho phép bạn phân quyền cách đơn giản cú pháp tương tự javascript https://documents-downloader.pages.dev/document 9/41 06:05 09/06/2023 https://documents-downloader.pages.dev/document Documents Downloader 10/41 06:05 09/06/2023 Documents Downloader   IPAD      Kiểm thử giao diện: Các nút bấm ứng dụng sau nhiều lần sửa lỗi hoạt động với chức Kiểm thử nguồn tài nguyên: Ứng dụng lưu trữ liệu lên database cách nhanh chóng, đồng thời xóa liệu cách dễ dàng Kiểm thử hiệu năng: Khi thay đổi mạng 2G, sang 3G ứng dụng hoạt động không chậm trễ( delay ) , bên cạnh chia liệu mức ổn Kiểm thử cài đặt: Ứng dụng cài đặt gỡ bỏ thiết bị cách dễ dàng Kiểm thử bảo mật: Bảo mật tuyệt đố liệu người dùng https://documents-downloader.pages.dev/document 27/41 06:05 09/06/2023 Documents Downloader   Phần 7: TRIỂN KHAI VÀ SỬ DỤNG Hướng dẫn người dùng: Tại giao diện đăng nhập, bạn phải có sẵn tài khoản đăng ký từ trước Khi đăng nhập u cầu:   Nhập thơng tin tài khoản bạn đăng ký  Khi bạn thấy lên thông báo tức bạn nhập sai thông tin tài khoản https://documents-downloader.pages.dev/document 28/41 06:05 09/06/2023 Documents Downloader    Còn bạn thấy thông báo này, tức bạn đăng nhập thành cơng chuyển đến giao diện để trải nghiệm phần mềm  Nếu bạn người sử dụng phần mềm chúng tơi, xin mời bạn ấn vào chữ Sign up để sang trang đăng ký tài khoản  Như bạn thấy, thiết kế phần đăng ký dễ sử dụng  Yêu cầu đăng ký: https://documents-downloader.pages.dev/document 29/41 06:05 09/06/2023 Documents Downloader    Điền đầy đủ thông tin đăng ký, bạn không điền đầy đủ thơng tin  phần mềm thơng báo cho người dùng biết https://documents-downloader.pages.dev/document 30/41 06:05 09/06/2023 Documents Downloader    Điền định dạng email đăng ký: @gmail.com, khih bạn thấy thông báo ra, tức bạn điền sai định dạng email  Khi bạn tuân thủ yêu cầu trên, ấn vào nút đăng ký, lên thông  báo tức bạn đăng ký tài khồn thành cơng Khi bạn đăng nhập đăng ký thành cơng chuyển tới giao diện phần mềm Giao diện chính:  Nếu bạn đăng ký tài khoản, thành viên giao diện  bạn giống hình bên https://documents-downloader.pages.dev/document 31/41 06:05 09/06/2023 Documents Downloader   Hoàn toàn trống trơn, tài khoản mới, nên bạn chưa có post Còn bạn thành viên cũ tài khoản bạn đăng post trước giao diện bạn hình https://documents-downloader.pages.dev/document 32/41 06:05 09/06/2023 Documents Downloader   Tại giao diện chính, phía giao diện, bạn nhìn thấy button tượng trưng cho chức khác Home: Khi bạn ấn vào biểu tượng này, phần mềm đưa bạn giao diện Search: Biểu tượng giúp bạn chuyển sang trang tìm kiếm Tại bạn tìm kiếm người dùng khác cách nhập tên người dùng(User Name) Còn nút back phía bên trái giúp bạn quay trở lại giao diện Post: Khi bạn muốn đăng viết lên trang ấn vào nút này, xuất giao diện sau https://documents-downloader.pages.dev/document 33/41 06:05 09/06/2023 Documents Downloader   Khi bạn ấn vào ảnh mặc định phần mềm ấn vào nút chọn tệp, xuất hộp thoại cho chọn đường dẫn đến ảnh https://documents-downloader.pages.dev/document 34/41 06:05 09/06/2023 Documents Downloader   Tại hộp thoại bạn chọn hình ảnh bạn muốn đăng bài, sau chọn ảnh xong, phần mềm cho bạn preview để xem có với bạn chọn hộp thoại không, giao diện lúc hình bên https://documents-downloader.pages.dev/document 35/41 06:05 09/06/2023 Documents Downloader   Khi ưng ý với hình, bạn phải viết thêm caption cho viết nữa, mời bạn điền vào write caption Cuối bạn muốn đăng nhấn vào nút Upload ngay bên không muốn đăng mời bạn nhấn vào nút Cancel Upload: Khi bạn ấn vào nút này, bạn đợi chút thấy thông báo đăng thành công Cancel: Khi bạn ấn nút tức bạn khong muốn đăng nữa, nút giúp đưa bạn trở lại giao diện phần mềm Khi bạn upload thành cơng viết mình, giao diện bạn có viết https://documents-downloader.pages.dev/document 36/41 06:05 09/06/2023 Documents Downloader   Activities: Biểu tượng đưa bạn đến trang chứa tất thông tin hoạt động tài khoản bạn, ví dụ hoạt động đăng bài, hoạt động comment, hoạt động follow Info: Biểu tượng đưa bạn đến trang cá nhân tài khoản Tại chứa thông tin tài khoản bạn tên người dùng (User Name) : dinhnhatlinh , tên đầy đủ(full name): Nguyen Van A, số lượng đăng, số lượng người bạn follow(followings), số lượng người follow bạn (followers) https://documents-downloader.pages.dev/document 37/41 06:05 09/06/2023 Documents Downloader   Khi bạn có viết trước đó, phần Library tài khoản chứa hình mà viết bạn đăng, giao diện lúc hình bên https://documents-downloader.pages.dev/document 38/41 06:05 09/06/2023 Documents Downloader   Tại bạn cập nhật ảnh đại diện cho tài khoản Back: Giúp bạn trở trang giao diện Menu: Khi ấn vào nút này, xuất tùy chọn để bạn chọn   https://documents-downloader.pages.dev/document 39/41 06:05 09/06/2023 Documents Downloader   Ấn vào nút Logout nếu bạn muốn đăng xuất tài khoản bạn ấn Cancel để thoát Menu  Bên toàn hướng dẫn để giúp bạn sử dụng phần mềm nhóm chúng tơi thuận tiện Trong trình sử dụng, bạn cảm thấy phần mềm chúng tối gặp vấn đề ,khơng hài lịng phần mềm muốn chúng tơi hỗ  trợ bạn liên hệ đến hotline: 0328360521  email: democf2000@gmail.com Lời cuối, xin cảm ơn thầy dạy dỗ chúng em năm tháng qua, để chúng em hiểu rõ môn học cải thiện khả lập trình thân Bài báo cáo chúng em nhiều sai sót mong thầy sửa lỗi phản hồi lại cho nhóm chúng em https://documents-downloader.pages.dev/document 40/41 06:05 09/06/2023 https://documents-downloader.pages.dev/document Documents Downloader 41/41