Giter Club home page Giter Club logo

int2208-7-2019's Introduction

INT2208-7-2019

CNPM

int2208-7-2019's People

Contributors

sockyone avatar truonganhhoang avatar vudung042 avatar duong17020661 avatar namtp12 avatar niits avatar thanhtrunggvc avatar trandunguet avatar nguyenhuyentrang070899 avatar trinhthithao09 avatar traidat avatar maithedai avatar vietcuongk99 avatar ducloc1999 avatar vandinh18 avatar hugmanh avatar nguyenkhanhie3 avatar o0ovano0o avatar hungnmz avatar buibaouet avatar daoduckhiem avatar huong1999 avatar duonggha13 avatar thanhphamtroll1999 avatar anhbros avatar dominan avatar trinhanh268 avatar phungxuanvuong avatar nguyenchum99 avatar bekeomut93hy avatar

Watchers

 avatar Xuan Hoang Nguyen avatar

int2208-7-2019's Issues

Thêm tương tác cho trang giao diện khóa học sử dụng jQuery và học front-end library Reactjs để thao tác giao diện người dùng

  • tạo hiệu ứng khi chọn đáp án , đổi màu ô đáp án khi click chọn
  • tạo hiệu ứng menu để thao tác chọn các chức năng có trong chủ đề < bài học > ,
  • học các khái niệm quan trong react : component, router , props , state ,JSX... có thể học thêm redux
  • xây dụng các component , router điều hướng , handle event của react để tạo ra 1 trang single one page , không load lại trang
  • sử dụng state trong react để lưu trạng thái của các component với nhau
  • sử dụng props trong react để trung chuyển các thuộc tính qua các component

Là một người muốn học tiếng anh , tôi muốn phần Trang chủ và Điều hướng đầy đủ thành phần tương ứng với các chức năng: đăng ký, đăng nhập để sử dụng sản phẩm dễ dàng qua thanh điều hướng

  • Thiết kế giao diện trang chủ dễ sử dụng, dễ kiểm thử so với khách hàng và nhà phát triển.
  • Thiết kế logo cho sản phẩm.
  • Thiết kế mẫu cho thanh điều hướng bao gồm: Trang chủ, đăng ký, đăng nhập.
  • Cài đặt giao diện theo thiết kế mẫu.
  • Tạo liên kết cho mỗi thành phần trên thanh điều hướng.
  • Thiết kế bảng xếp hạng điểm những người đang tham gia khóa học.
  • Thiết kế các khóa học mà người dùng có thể được học sau khi đăng nhập.
  • Thiết kế slide về thông tin liên hệ ở cuối trang.
  • Lấy ý kiến người dùng sử dụng giao diện cơ bản xem đã đúng yêu cầu mà người dùng muốn hay chưa?
  • Kiểm thử lại các tính năng của trang chủ như đã liên kết đến các trang khác, font chữ, kiểu chữ có lỗi không.
  • Kiểm tra, sửa chữa khi phát hiện lỗi với từng thành phần.
  • Tối ưu mã nguồn, bình luận những chỗ cần thiết và căn chỉnh sao cho mã nguồn trong sáng.

Product Backlog

  • Học HTML, CSS, Bootstrap 4, JavaScript cơ bản.
  • Xây dựng giao diện màn hình chính, thêm tính năng các khóa học cho user , học ngữ pháp, từ vựng cấu trúc câu cơ bản.
  • Tìm hoặc xây dựng database.
  • Sử dụng PHP + Angular (có thể thay đổi) để xây dựng phân back-end, tối ưu dữ liệu ,tốc độ cho Website , clean code giúp dễ dàng nâng cấp phiên bản về sau.
  • Xây dựng đăng nhập thông qua Google hoặc Facebook, tạo hồ sơ người dùng.

Xây dựng giao diện màn hình chính

  • Dựa trên 2 trang web học Tiếng Anh trực tuyến là: Elight và Duolingo.
  • Xây dựng giao diện màn hình chính, thêm tính năng học từ vựng cho người dùng
  • Xây dựng giao diện phần trang chủ : phần header , main-part , footer , contact
  • Xây dựng khung đăng nhập cho người dùng login
  • Xây dựng giao diện phần tính năng học từ vựng

Học HTML, CSS, Bootstrap 4, JavaScript cơ bản.

  • Học HTML, CSS, Bootstrap 4, JavaScript cơ bản.
  • Học những thẻ quan trong hay được sử dụng trong HTML5.
  • Học những thuộc tính trong CSS3
  • Học Javascript DOM giúp tương tác trang web ở phần front-end
  • Học bootstrap và Jquery để xây dụng website responsive

User story: là người dùng tôi muốn có khung đăng nhập và đăng kí để tương tác và quản lý thông tin của người dùng

  • Tạo form giao diện html,css cho trang đăng kí vào đăng nhập < có thể tham khảo một số template của bootstrap > responsive giao diện phù hợp cho cả mobile và desktop .
  • Tạo database bằng mongodb , sử dụng mongoose để tạo model <thiết lập mô hình MVC>
    kết nối tương tác với cơ sở dữ liệu
  • Liên kết với database sử dụng module mongoose
  • Thực hiện các chức năng rằng buộc khi người dùng đăng kí ( VD : điền đầy đủ các trường còn thiếu nếu người dùng bỏ qua , mật khẩu ít nhất 8 kí tự trong đó có ít nhất 1 kí tự chữ , 1 kí tự số và 1 kí tự đặng biệt , email đăng kí phải là duy nhất không trùng lặp ) ,
  • Ở phần viết hàm đăng nhập cần chú ý hiện ra các thông báo nếu người dùng chưa thực hiện đủ các bước hoặc sai ở bước nào đó, thông báo cho người dùng nếu họ điền sai email hay password đã được đăng kí.
  • Sau khi kiểm tra mail được đăng kí không bị trung lặp bắt đầu lưu tài khoản của người dùng vào database , trước đó cần hash password của tài khoản < có thể sử dụng module bcrypt của nodejs express > để tăng cường tính bảo mật cho tài khoản
  • Ở bước đăng nhập ( tham khảo module passport của nodejs express ) để xác thực tài khoản người dùng bằng email và password (dùng session để lưu trữ tạm thời tài khoản của người dùng)
  • Xem lại logic 1 lượt của chức năng đăng nhập , đảm bảo người dùng đăng nhập để sử dụng các tính năng có trong website
  • Có thể sử dụng tài khoản của google ( lấy thông tin từ tài khoản google của người dùng )
    để đăng nhập .
  • Xây dựng các ca kiểm thử (test case) dựa trên kỹ thuật kiểm thử biên. Yêu cầu độ bao phủ của bộ kiểm thử phải trên 70%. Nếu dưới 70% thì sửa lại test case để đạt yêu cầu về độ bao phủ.
  • Kiểm tra lại mã nguồn xem có mã xấu hay không. Nếu có mã xấu thì sửa lại đoạn mã đó.
  • Demo sản phẩm với 1 vài người dùng dùng thử sản phẩm để kiểm tra xem còn lỗi về giao diện (giao diện cho mobile đã được responsive chưa) , logic hay không.

User story: là một người dùng tôi muốn có tính năng (hay khóa học) học từ vựng trên website để có thể nâng cao kiến thức về tiếng anh của bản thân , tăng kiến thức về từ vựng trong tiếng anh

  • Xây dựng trang html dựa trên UI của Elight Learning English (sử dụng template của bootstrap , package của React để làm giao diện cũng như hiệu ứng cho trang)
  • Chia nhỏ khóa học thành các chủ đề tương ứng, giúp người dùng tiếp cận khóa học một cách dễ dàng nhất
  • Xây dựng database phù hợp, đúng ngữ pháp , câu từ , chính tả , hình ảnh để tạo 1 trải nghiệm tốt nhất cho người dùng
  • sử dụng Nodejs và Axios sử dụng như API để lấy dữ liệu từ server trả về JSON cho React quản lí
  • thiết kế khung câu hỏi và câu trả lời , khung trả lời bao gồm 1 ảnh miêu tả ý nghĩa của từ đó và nghĩa tiếng Anh của từ , mỗi câu hỏi gồm 3 câu trả lời có button để kiểm tra đáp án mà người dùng đã chọn
  • Thông báo cho người dùng khi họ hoàn tất một câu hỏi trắc nghiệm , sai hay đúng và đáp án đúng của câu hỏi đó là gì , có thể giải thích thêm
  • Ở mỗi câu mà người dùng tích chính xác đáp án , sẽ được cộng điểm tương ứng cho câu hỏi đó và sau khi kết thúc lượt quiz sẽ thông báo cho người dùng kết quả của phần quiz đó
  • Xây dựng tính năng này trên một trang duy nhất ( single web-page application ) để tăng tốc độ cho website không phải reload quá nhiều tăng trải nghiệm người dùng ( tham khảo 1 số freamwork liên quan như reactjs , angular và redux )
  • Lấy ý kiến người sử dụng để cải tiến tính năng của hệ thống
  • Rà soát mã nguồn , tối ưu mã nguồn (Thanh lọc những component , ảnh , file json mà không sử dụng tới) , tận dụng tối đa các component khi sử dụng
  • Đảm bảo tính logic của hệ thống , tạo các test case để tìm lỗi và rà soát lỗi ( luôn đảm bảo đúng về ngữ pháp , câu từ , chính tả )

Xây dựng giao diện màn hình chính

  • tạo menu navigator điều hướng cho trang web , phần header của trang
  • hoàn thiện backgroud, logo
  • tạo main-part phần chính của trang chủ có phần giới thiệu trang web và giới thiệu các khóa học hiện có ở trang web
  • hoàn thiện footer , contact hoàn thành giao diện trang chủ

Xây dựng chức năng đăng kí , đăng nhập cho trang web

  • tạo form giao diện html cho trang đăng kí vào đăng nhập < có thể tham khảo một số template của bootstrap >
  • tạo database bằng mongodb , sử dụng mongoose để tạo model kết nối tương tác với cơ sở dữ liệu
  • Liên kết với database sử dụng module mongoose
  • thực hiện các chức năng rằng buộc khi người dùng đăng kí ( VD : điền đầy đủ các trường còn thiếu nếu người dùng bỏ qua , mật khẩu ít nhất 8 kí tự trong đó có ít nhất 1 kí tự chữ , 1 kí tự số và 1 kí tự đặng biệt , email đăng kí phải là duy nhất không trùng lặp )
  • hiện ra các thông báo nếu người dùng chưa thực hiện đủ các bước hoặc sai ở bước nào đó
  • sau khi kiểm tra mail được đăng kí không bị trung lặp bắt đầu lưu tài khoản của người dùng vào database , trước đó cần hash password của tài khoản < sử dụng module bcrypt của nodejs express > để tăng cường tính bảo mật cho tài khoản
  • ở bước đăng nhập , sử dụng module passport của nodejs express để xác thực tài khoản người dùng bằng email và password ( dùng session để lưu trữ tạm thời tài khoản của người dùng )
  • thông báo cho người dùng nếu họ điền sai email hay password đã được đăng kí
  • xem lại logic 1 lượt của chức năng đăng nhập , đảm bảo người dùng đăng nhập để sử dụng các tính năng có trong website
  • có thể sử dụng tài khoản của google , facebook để đăng nhập

Xây dựng trang giao diện cho trang "khóa học từ vựng" < giao diện html thô >

  • xây dựng trang html dựa trên UI "khóa học 1 nghìn từ vựng " của elight.edu.vn
  • chia nhỏ thành các chủ để học cho người dùng lựa chọn , mỗi chủ đề là một khung chia theo tỉ lệ 8-4 < như bootsrap quy định >
  • có hình cho mỗi chủ đề mỗi chủ đề là 1 bài học , tên của chủ đề phần miêu ta và hiển thị thông báo hoàn thành được bao nhiêu phần của chủ đề học từ vựng đó
  • load video từ youtube cho phần giới thiệu chủ đề
  • có nút kiểm tra , nút tiếp tục và trở lại trong phần chọn từ
  • có label điền từ, nút kiểm tra trong chức năng điền từ
  • sử dụng css để căn lề thêm 1 số animation , color , font , effect cơ bản...

Product Backlog : Xây dựng tính năng đăng nhập

  • là người dùng tôi muốn có khung đăng nhập và đăng kí để tạo tài khoản và đăng nhập vào trang web
  • là người dùng tôi muốn mật khẩu phải có ít nhất 1 ký tự in hoa, 1 ký tự số và 1 ký tự đặc biệt để nâng cao tính bảo mật.
  • là người dùng tôi muốn khi đăng ký phải có chức năng xác nhận qua email để tài khoản của tôi chính chủ.

Product Backlog : Xây dựng các tính năng cho phần học từ vựng

  • là một người dùng tôi muôn có tính năng quiz ( hình thức trăc nghiệm có 3 đáp án trong đó có 1 đáp án đúng là nghĩa tiếng việt của từ ) mỗi đáp án đúng sẽ được 1 điểm số nhất định cập nhật vào điểm thành tích cá nhân của account , để tăng khả năng học từ thông qua các câu hỏi trắc nghiệm nhanh
  • là người dùng tôi muốn trang học từ vựng thao tác giống 1 trang single one-page để giúp tôi có thao tác trang web 1 cách nhanh nhất , thuận tiện nhất

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.