BẢN THUYẾT trình

CUỘC THI SÁNG TẠO

HALLO! WECOME
TO CODESET

DÀNH CHO THANH THIẾU NIÊN, NHI ĐỒNG TỈNH

ĐẮK LẮK (2022)

TÊN MÔ HÌNH
THUYẾT MINH GIẢI PHÁP SẢN PHẨM DỰ THI

Ý tưởng tạo ra mô hình, sản phẩm Codeset - Web app dạy tư duy lập
trình và các khái niệm về thuật toán,
cơ sở dữ liệu cho học sinh (Đa lứa
Trong xã hội công nghệ hiện đại 4.0, sự ứng dụng của các ngành công
tuổi)
nghệ kĩ thuật máy tín xuất hiện hầu như ở trong mọi mặt của cuộc sống, có
thể thấy việc học và tìm hiểu về mảng lập trình đang dần là xu thế phổ biến.
Sự yêu thích về các ngành học này đã cho chúng em ý tưởng về việc tạo ra
LĨNH VỰC DỰ THI
một phần mềm ứng dụng thực tiễn giúp các bạn học sinh có thể tiếp cận với
các kiến thức ngành lập trình, giải quyết nhiều nhu cầu hữu ích về việc học
tập, phát triển lối tư duy lập trình và phù hợp với mọi lứa tuổi.
Phần mềm tin học

Cách học thông thường của mọi người khi học về môn lập trình gồm các
cách học truyền thống như học từ sách vở, từ các lớp học thêm, các trang web
THÔNG TIN VỀ TÁC GIẢ
lý thuyết,… rồi đem ra thực hành. Tuy nhiên, để giúp cho việc học ngôn ngữ GIÁO VIÊN HƯỚNG DẪN
không những không bị động, nhàm chán mà thêm thú vị và có hiệu quả thì em
đã lên kế hoạch xây ứng dụng học tập với tên gọi “Codeset” với tên đề tài dự
án: “Codeset – Web app dạy tư duy lập trình và các khái niệm về thuận toán, Tác giả chính:
cơ sở dữ liệu cho học sinh (Đa lứa tuổi)”. Phạm Huy Hoàng

Ứng dụng Codeset là một web app (một ứng dụng ở dạng web) giúp bạn Đồng tác giả:
học có thể tìm hiểu về những kiến thức, thông tin cơ bản của ngành lập trìn. Nguyễn Đức Dương Thùy
Từ đó, tạo cho các bạn các mục đích học tập lâu dài và tìm được đúng nhánh Nguyễn Anh Tú
ngành học lập trình (cơ sở dữ liệu, thuật toán, bảo mật, …) mà bản thân yêu
thích. Trực thuộc:
Lớp 11a4 - Trường PTDTNT Tây
Việc tổ chức học tập trên một môi trường học tập cộng đồng (cách triển Nguyên
khai thông tin kiến thức “block sketch” được mô tả ở phần 4), giúp các bạn
học tiếp thú một cách dễ hiểu và có thể thực hành lý thuyết ngay sau khi học Giáo viên hướng dẫn:
xong. Tạo cho bạn học tư duy về việc lập trình, ngoài ra có thể làm quen Lê Thị Nhã Tâm
những người bạn mới thông qua diễn đàn của web app trong việc trao đổi
kiến thức với nhau qua những bài tập. “Codeset” sẽ giúp việc học ngôn ngữ
trở nên thân thiện, dễ hiểu và thú vị hơn, khi ta vừa tự có thể luyện tập cho THÔNG TIN ĐÍNH KÈM
chính mình đồng thời có thể tham gia giao tiếp, thảo luận với các bạn học
khác trên diễn đàn của ứng dụng.
Địa chỉ web:
https://codeset-coding.web.app/
HTTPS: // CODESET.WE B.APP
Trình bày mục đích, tính mới, tính sáng tạo của sản phẩm
Mục đích của sản phẩm
Thay vì học lý thuyết và thực hành bị động
(Passive learning - hình thức học tập mà người
học tiếp nhận hoặc nội dung thông tin mà không
nhận được bất kỳ phản hồi hoặc thực hành định
hướng) một cách truyền thống mà chuyển sang
dạng học theo hình thức học chủ động (Active
learning - hình thức học mà người học tham gia
tích cực để học và nhận phản hồi về lý thuyết
mình đã tiếp thu được ngay trong lúc học). Giúp
tạo nên hứng khởi, sự thích thú và đam mê
trong quá trình tìm hiểu về cái khái niệm và tư
duy của ngành lập trình. Cách triển khai kiến
thức “block sketch” –ghép và nối các vế cấu
trúc thành một khối (input), và nhận lại thông
tin đầu ra (output).
Ngoài ra, bạn học còn có thể giao tiếp, trao
đổi kiến thức với mọi người trên nền tảng trong
qua quá trình học thông qua phần diễn đàn
codeset – nơi bạn học có thể trao đổi, thảo luận
và hỏi đáp các thắc mắc.
So với các giải pháp thụ động hiện nay là
học theo cách rập khuôn, thô sơ với lý thuyết.
Có thể khiến học sinh dễ bị chán nản bởi lối học
bị động. Codeset tạo ra một môi trường học chủ
động, học vì sở thích, vì hứng khởi tìm tòi và
đam mê.
Điểm mới và sáng tạo
Ứng dụng Codetset sinh ra nhằm mục đích
giúp các bạn học sinh (ở nhiều lứa tuổi) có thể
tiếp cận và tìm hiểu về nghành công nghệ thông
tin, cụ thể là mảng lập trình một cách dễ nắm
bắt cho người mới bắt đầu. Phần mềm có hai
nhóm chức năng chính:
• Giúp mọi người học về các khái niệm lập
trình – tương tự việc học bất cứ môn học nào
cũng đều cần có cách tư duy theo môn học
đó. Việc học lập trình có các khái niệm cơ
bản như biến, hàm, mảng, vòng lặp, điều
kiện… việc nắm được và hiểu được ý nghĩa
của các khái niệm trên sẽ giúp bạn học có thể
bắt đầu hành trình học một ngôn ngữ lập
trình mà có cái nhìn rõ ràng và mạch lạc hơn.
Codeset sẽ đưa ra phương pháp giải thích
hiệu quả, dễ hiểu để những bạn học mới cũng
có thể hiểu và nắm bắt.
• Giúp cho mọi người được hiểu về các tư duy
lập trình, gồm các tư duy cơ bản như tư duy
logic, tư duy điều kiện tới các nhóm tư duy
hướng đối tượng và tư duy logic là tiền đề
cho các ngành học lập trình sau này như triển
khai và quản lý cơ sở dữ liệu, xây dựng thuật
toán, quản lý bảo mật và kiểm tra lỗ hổng…
HTTP S: / /
CODESET.WEB.APP
 HTTPS: // CODESET.WEB.APP
Quá trình lắp ráp, lắp đặt hoàn thiện mô hình, sản phẩm
Các nguyên liệu được sử dụng trong dự án này
Triển khai web và tên miền: Firebase Hosting
Cơ sở dữ liệu: Firebase Firestore
Đăng nhập và bảo mật thông tin: Firebase Authenticaiton
Bộ nhớ tài khoản cá nhân: Firebase Storage
Ngôn ngữ Html, Css, Javascript, các thư viện web: Aos,
Parallax, Sweetalert2, AOSjs, Editor.JS, Three.JS, Vanilla-
tilt.JS, Chart, Cleave,…
SDK: Visual Studio Code
Framework: React Native
Desing resources: Iconscout, Phosphoricon, Flaticon,
Dribbble,...
Các bước thực hiện dự án
1. Chuẩn bị
• Lên ý tưởng, phác thảo bố cục, chức năng và tính năng của
các thành phần của web app, các quá trình phác thảo sử dụng
Micro- sơ đồ tư duy - lên khung chức năng, Figma - tạo
design, Cloudcraft – tạo minh họa lưu trữ dữ liệu đám mây.
• Các dịch vụ được sử dụng: firebase cho cơ sở dữ liệu đám
mây, bộ nhớ và xác thực người dùng (Firestore, Storage &
Authentication)
• Chọn SDK để làm việc: Visual studio code – VSC 2022 cùng
các extension hỗ trợ (Live server, Prettier, …)
• Các công cụ (tool) hỗ trợ quá trình xây dựng web app:
WebGradient, CSS Glassmophirsm generator, Bundlephobia,
… 5. Thử nghiệm và kiểm tra trải nghiệm người dùng
• Các file source - tệp tài nguyên, gồm các loại file ảnh (png,
svg, …), màu sắc, font chữ, thư viện Icon, thư viện ảnh…
2. Thiết kế giao diện UX UI cho web app
• Ngôn ngữ xây dựng giao diện ứng dụng web: HTML
& CSS, Javascript.
• Thư viện web để sử dụng: Editor.js, Cleave.js, Chart.js,
Parallax.js, Vanilatilt.js, Lodash.js…
• Xây dựng các thành phần (component) giao diện gồm:
• Trang chủ (Landing page)
• Đăng ký đăng nhập tài khoản (Login/Sign up
page)
• Hồ sơ người dùng (User profile)
• Trang học tập (Dashboard)
• Trang thực hành (Practice)
• Diễn đàn trao đổi (Forum)
• Và cùng nhiều thành phần giao diện khác...
3. Xây dựng backend - phía server (máy chủ)
• Ngôn ngữ sử dụng: Javascript
• Framwork sử dụng: React Native
• Các dịch vụ được cung cấp (serivces): Firebase
(Authentication, Firestore, Storage, Hosting)
• Triển khai các tính năng của ứng dụng:
• Nhóm chức năng học các khái niệm và thông tin
nền về ngôn ngữ lập trình (Khái niệm biến, hàm,
mảng, vòng lặp, …)
• Nhóm chức năng học các tư duy lập trình (Đọc và
thực hành các ví dụ, các module để hiểu về tư duy
lập trình thuật toán hoặc hướng đối tượng – cơ sở
dữ liệu)
4. Chạy và sử dụng ứng dụng
• Gỡ lỗi trong ứng dụng, tối ưu hóa trải nghiệm người
dùng và việc sử dụng.
• Kiểm tra từng chức năng của ứng dụng, đánh giá trải
nghiệm, debug lại những lỗi còn sót.
HTTP S: / /
 HTTPS: // CODESET.WE B.APP

Nguyên tắc hoạt động, vận hành của các mô hình, sản phẩm

Tính năng và nội dung truyền tải

Sơ đồ biểu thị các nhóm tính năng chính của Codeset web app, với
cách học “block sketch” (biểu đạt thông qua việc liên kết các khối –
đại diện cho hàm (function) lại với nhau để tạo nên chức năng) giúp
những người mới tiếp xúc cũng có thể hiểu được ý nghĩa truyền đạt
trong việc gắn kết các khái niệm cơ bản của ngôn ngữ lập trình (Biến
và hàm). Đồng thời giúp bạn học nắm được tư duy lập trình thuật
toán và tư duy lập trình hướng đối tượng (phục vụ cho triển khai cơ
sở dữ liệu)
“Block sketch” - Triển khai các thao tác dễ hiểu để thực hành
áp dụng lý thuyết, như kéo thả các câu lệnh, điền nối logic
mạch cấu trúc code, giúp người dùng trải nghiệm cách hoạt
động, tiếp thu hiệu quả kiến thu trong quá trình học và thực
hành,…

Sơ đồ biểu thị nội dung học tập và cấu trúc phân nhánh kiến thức
(Dành cho nhiều nhóm đối tượng (với các cách học đa dạng) và nhiều
ngành học để trải nghiệm (Hướng đối tượng – cơ sở dữ liệu, Logic -
Thuật toán, Bảo mật – security) cho người mới học ngôn ngữ lập
trình tại Codeset web app.

HTTPS: // CODE SET.WEB. APP

 HTTPS: // CODESET.WE B.APP

Nguyên tắc hoạt động, vận hành của các mô hình, sản phẩm

Cơ sở dữ liệu
Hệ thống hosting & domain (dịch vụ lưu trữ web) quản lý trên Firebase Hosting

• Kết hợp sử dụng framework React

Native và các thư viện.

• Giúp tối ưu trải nghiệm cho web app như

lodash, babel.

• Bảo mật mã nguồn cùng thông tin người

dùng với Obfuscator.

Hình ảnh cơ sở dữ liệu về tài khoản người dùng cùng các thông tin học tập

• Lữu trữ, theo dõi hành vi và hiệu suất học

tập, thông báo tiến học tập cho người dùng
theo nhu cầu, đồng thời có thể liên kết các
nhóm người dùng (cùng lứa tuổi cùng ngành
học) để các bạn có thể tạo một nhóm học theo
cùng một tiến độ, giúp tăng trải nghiệm học
tập.

• Các tính năng trò chuyện trên diễn đàn đã

hoạt động, thảo luận, đóng góp, chia sẻ những
kiến thức, hiểu biết, mẹo vặt trải nghiệm và
còn có thể giao lưu trao đổi thông tin với
nhau.

Hệ thống quản lý danh sách người dùng trên Firebase Authentication

HTTP S: / /
 HTTPS: // CODESET.WE B.APP

Khả năng áp dụng, hiệu quả đạt được (kết quả) của sản phẩm

Sau quá trình chuẩn bị, thiết kế và xây dựng (responsive) , cùng kiểm tra vá lỗi (debug), tinh chỉnh dung lượng
(tốc độ tải trang)
Ứng dụng web app Codeset hiện đã được triển khai ở tên
miền codeset.web.app
Codeset là môi trường phù hợp để các bạn học sinh từ nhiều lứa tuổi có thể tiếp xúc với mảng lập trình thuộc
ngành công nghệ thông tin
Đưa ra cho các bạn học các thông tin cơ bản, giải thích
dễ hiểu dễ liên tưởng
Đưa ra hướng ngành hiệu quả cho bạn học có thể xác
định thế mạnh (làm việc với cơ sở dữ liệu, hoặc thuật
toán, hoặc bảo mật, …)

Tiêu chí - Hiệu quả đạt được

Hiệu suất ứng dụng

Sử dụng giao thức Https bảo vệ ngươi truy cập, ứng dụng nhẹ và có tốc độ truy
cập nhanh, duy diễn giữa các trang linh hoạt (one page loaded của framework
React Native)
Giao diện ứng dụng

Trải nghiệm ổn định, đã tiến hành Responsive (chỉnh sửa giao diện cho nhiều
kích thước khung màn hình khác nhau). Âm thanh hoạt động (app audio
system)

Chức năng ứng dụng web app

Cách thực hành lý thuyết dễ áp dụng, phù hợp với người mới bắt đầu. UX
(giao diện người dùng) tinh gọn thông minh. Kết hợp với hướng dẫn về web
app (introduction)

Cơ sở dữ liệu và các dịch vụ bảo mật

Cung cấp bởi Firebase, tính năng Authenticaiton cho phép đa dạng đăng nhập
cho người dùng (email, google, facebook, số điện thoại, đăng nhập ẩn danh,
…)

HTTP S: / /
 HTTPS: // CODESET.WE B.APP

Hình ảnh mô tả sản phẩm

Giao diện Block sketch

Lời kết
Chân thành cảm ơn mọi người đã đọc. Tác giả hi vọng bản thuyết minh này đã mô tả tổng quát được vè dự án
“Web app dạy tư duy lập trình và các khái niệm về thuật toán, cơ sở dữ liệu cho học sinh (Đa lứa tuổi)” được xây
dựng bằng niềm đam mê và long nhiệt huyết!

HTTP S: / /