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 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 hoà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 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ý Có nhiều ứng dụng Blog thị trường Nhóm chưa hồn tồ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 chun mơn Chưa có địa điểm cố định cho công việc OPPOTURNITIE S 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 chuyên lập trình Tiếp thu nhiều kĩ tốt Dễ dàng apply vào cơng 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 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 tục cho sản phẩ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ó 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 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 hoà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 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 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 tồ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ịn có logic nâng cao dễ dàng xử lý điều kiện mạng