Bài tập báo cáo kỹ thuật web với ứng dụng đa nền tảng app của mình là interface

Ủ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 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ọ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 + 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 Phần 3: PHÂN TÍCH HIỆN TRẠNG S W O T STRENGHTS WEAKNESSES OPPOTURNITIES THREATS Hiện cơng Có q nhiều Nhờ vào kĩ Cạnh tranh nghệ ứng dụng ứng dụng Blog tốt cảu nhóm phát triển thị trường thành viên giúp ngày gay mạnh mẽ tạo sản phẩm gắt Thành viên Nhóm chưa tốt thị nhóm nắm hoàn toàn nắm kĩ hết thư quan viện phẩm tối ưu thay đổi liên trọng nhờ việc biết tục việc lập trình Thành viên Thành viên nhóm chưa có trường Nhiều nhóm có kĩ tốt Tạo sản Công nghệ nhiều công nghệ việc nhóm có thiết nhiều kinh bị tốt để phục nghiệm sản phẩm trong nhóm vụ cho việc lập lĩnh vực app thời gian ngắn không ổn định trình app Blog Có Một số thành Thời gian tạo Thời gian làm Trong thời thành viên Cảm thấy chán nản với nguồn thông tin viên cần gian cụ thể có lỗi sản bổ ích chau dồi kĩ thể tạo nhiều phẩm giúp đỡ lập trình sản phẩm cho việc hồn thành sản phẩm Thành viên nhóm chăm Một số thành Được làm việc cho sản phẩm viên chưa tốt tỏng việc đưa cơng ty chun ý tưởng lập trình xu hướng Tiếp thu bên yêu cầu Cả nhóm cần tâm vào trau dồi lượng nhiều kĩ cơng việc hồn Tiếng Anh tốt thành sản phẩm chun mơn Trưởng nhóm Update liên tục Chưa có địa Dễ dàng apply vào cơng Phải chạy theo sản phẩm Các thành viên nhóm phải nảy ý tưởng liên biết cách động điểm cố định ty nước tục viên, thúc đẩy cho công việc nhờ vào việc phẩm thành viên để trau dồi Tiếng hồn thành sản Anh phẩm tiến độ cho sản Nhu cầu khách hàng ngày Các thành viên tăng nhóm Sản phẩm biết chia mẻ, sáng tạo công việc hợp liên tục lý 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… 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ụ  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ó 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 từng 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 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 trong 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 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 - 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 cịn 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 Ngoài Firebase cho phép bạn phân quyền cách đơn giản cú pháp tương tự javascript FireBase Authentication Với Firebase, bạn dễ dàng xác thực người dùng từ ứng dụng bạn Android, iOS JavaScript SDKs với vài đoạn mã Firebase xây dựng chức cho việc xác thực người dùng với Email, Facebook, Twitter, GitHub, Google, xác thực nạc danh Các ứng dụng sử dụng chức xác thực FireBase giải vấn đề người dùng đăng nhập, tiết kiện thời gian nhiều vấn đề phức tạp phần backend Hơn bạn tích họp xác thực người dùng với chức backend có sẵn sử dụng custom auth tokens FireBase Hosting Phát triển ứng dụng web bạn thời gian ngắn với hosting tĩnh cung cấp sẵn Tất kết nối phân phối qua SSL từ CDN toàn thể giới Firebase Triểu khai siêu tốc: Việc triển khai sử dụng cơng cụ dịng lệnh Firebase quay trở lại với phiên trước với cú click chuột Tất ứng dụng có đường dẫn mặc đinh sau firebaseapp.com trả phí triểu khai tên miền tuỳ chỉnh SSL default: Mọi ứng dụng xử lý thông qua kết nối an toàn, Firebase cẩn thận cung cấp SSL cert cho bạn Cloud Messaging Google Cloud Messaging, dịch vụ cloud-to-device push messaging tiếng giới, tích hợp với Firebase đổi tên thành Firebase Cloud Messaging (FCM) FCM khơng có giới hạn hồn tồn miễn phí FCM hỗ trợ messaging iOS, Android Web, tối ưu mạnh mẽ hướng đến bảo mật tiếp kiệm pin FCM xử lý lượng lớn thơng tin gửi 170 tỷ tin nhắn ngày đến tỷ thiết bị FireBase Storage Firebase mắt Firebase Storage để giúp lập trình viên upload download file dễ dàng Firebase Storage Google Cloud Storage hỗ trợ, mang đến khả lưu trữ khổng lồ cho phép Google Cloud project truy cập file dễ dàng Firebase Storage client SDKs có logic nâng cao dễ dàng xử lý điều kiện mạng 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 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  Yê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  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ý:  Đ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  Đ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 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 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 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 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 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 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 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) 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 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 Ấn vào nút Logout bạn muốn đăng xuất tài khoản bạn ấn Cancel để Menu Bên tồ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 q 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 cịn nhiều sai sót mong thầy sửa lỗi phản hồi lại cho nhóm chúng em