Báo cáo bài tập lớn lập trình python chủ Đề học tiếng anh thông qua flashcards

I.Mô tả cơ bản về ứng dụng web Mục tiêu của dự án lần này là xây dựng được một ứng dụng web giúp người dùng học tiếng anh thông qua các thẻ flashcard.. 1.Các chức năng Tạo tài khoản ngườ

HOC VIEN CONG NGHE BUU CHINH VIEN THONG

KHOA CONG NGHE THONG TIN

6

BAO CAO BAI TAP LON LAP TRINH PYTHON Chu dé:

HOC TIENG ANH THONG QUA FLASHCARDS

Thanh vién: Lê Trung Phúc - B22DCCN627

Nguyễn Hoàng Tân - B22DCCN714

Lưu Bảo Long - B22DCCN498

Võ Thanh Huyền - B22DCCN403

Đào Ngọc Huy - B22DCCN378

HÀ NỘI, 11-2024

2.2 Lot ich vì 00) |0aiiÝÝẢỒ 4

H Các nhóm người sử dụng và các tính năng của ứng dụng cho mỗi nhóm người 5

1 Người dùng thông thường - - 2 222112011101 1101 111111111111 1111 11111111111 11111111 1111 ca 5 1.1 Đăng ký tài khoản người dùng - L2 22012201120 1121 1151112111511 1511 111g cay 5 1.2 Tạo các topic nơi chứa các kiến thức cần ghi nhớ ¿se scccz2222 xe 5 1.3 Tạo các thẻ flashcard trong mỗi †OpiC . 5: S1 1EE11E211121111E111121111211 xe 5 1.4 Ôn tập kiến thức thông qua câu hỏi trắc nghiệm - 2 s2 v2 t2E22222Exe2 5 1.5 On tap từ vựng thông qua trò chơi Hangman - ©2221 2EE£EE£EEt2E122222222xe2 5 J9) 0 ïn/ 0n 5

1 Qua trình xây dựng cơ bản của tất cả các tính năng s- 5: s2 11111211E71221211 c2 7 LoL Tao model .Ẽ 7 1.2 Tạo VI€W, UIÍ G1 1 211111951111 11531 1111151111111 1 119g 1111111191111 1 1111511111111 1 E124 8 1.3 Tao template 000c 4 9

2 Qua trinh xây dựng riêng biỆt 5 QC 02012201 12111211151 1151111111111 1 1111011 81g cưng 13

V Kết Quả 17

1 Tinh nang dang ky va dang nhap tat Khoa ccc cece cece cee cceceeetseetseetseeneees 17

II, lo 6i: na 17 1.2 Đăng nhập tải khoản - L0 01120111211 12111211121 11211121110 11011101811 17

2 Tính năng tạo các topic(chủ đề) cho từ vựng s- c2 1112121211121 1E yeu 18

3 Tinh nang tao flashcard(từ vựng) theo chủ đề 5c c1 222112111211 121212 xe 19

4 Ôn tập kiến thức thông qua câu hỏi trắc nghiệm ¿222221 2EEEEEEEEE27E121222122xee 20

5 Ôn tập từ vựng thông qua trò chơi Hangman - 25s 2S E12112112212112712112112222Exe 22

6 Tao các topIc mặc định cho người dùng - - ccc 2: 22212221121 1123 1153115111511 1511 25112, 24

I.Mô tả cơ bản về ứng dụng web

Mục tiêu của dự án lần này là xây dựng được một ứng dụng web giúp người dùng học tiếng anh thông qua các thẻ flashcard

1.Các chức năng

Tạo tài khoản người dùng

Tao cac topic vé chu dé can hoc, trong topic sẽ chứa các thẻ flasheard, với mặt trước là nội dung, mặt sau là giải thích

Kiểm tra phát âm của bản thân

Ôn tập kiến thức thông qua câu hỏi trắc nghiệm

Học và ôn tập kiến thức thông qua trò chơi

Cách hoạt động của Django: Django hoạt động dựa trên kiến trúc MVT

a Model: Định nghĩa câu trúc dữ liệu và cung cấp các công cụ dé tương tác với cơ sở đữ liệu

View: Xử lý logic của ứng dụng và trả về kết quả cho người dùng

Template: Định dạng giao diện mà người dùng sẽ thấy khi truy cập vào ứng dụng

2.2 Loiich cia Django

Tiét kiém thoi gian: Django cung cap nhiéu tinh nang “batteries included" (tich hep san) như quản lý người dùng, xac thuc, va két noi co so dir ligu, giup tiét kiém thoi gian khi phát triên ứng dụng

Bảo mật: Django được xây dựng với các phương pháp bảo mật tốt nhất, giúp lập trình viên tránh những lỗ hồng phô biến mà không cân phải thiết lập thêm

Khả năng mo rong: Django co thê xử lý mọi quy mô ứng dụng, từ các dự án nhỏ đến các nên tảng lớn như Instagram hay Pinterest

Dễ học và sử dụng: Django sử dụng Python, một ngôn ngữ dễ đọc và dễ học, nên phủ hợp

cả với người mới bắt dau

Quan ly cơ sở dữ liệu hiệu quả: Django ORM (Object-Relational Mapping) giúp làm việc với cơ sở dữ liệu dễ dàng mà không cân việt câu lệnh SQL, phức tạp

II Cac nhóm người sử dụng và các tính năng của ứng dụng cho mỗi nhóm người

Ứng dụng web có 2 tệp người sử dụng là: người dùng thông thường và quản trị viên

1 Người dùng thông thường

Người dùng thông thường có thể sử dụng các tính năng sau:

1.1 Đăng kỹ tài khoản người dùng

Người dùng có thê đăng ký tài khoản người dùng nếu chưa có Khi đăng ký xong người dùng có thê sử dụng tài khoản đó đăng nhập vào ứng dụng web và tạo các nội dung cho riêng minh, cái mà chỉ người dùng đó mới thây được

1.2 Tụo các topic nơi chứa các kiến thức cần ghỉ nhớ

Sau khi có tài khoản người dùng, người dùng có thê tạo các topic, nơi chứa cac the flashcard

có cùng chung một chủ đề nào đây Điều này giúp người dùng có thê tổng hợp các kiến thức vô cling mét noi dé sau nay dé tìm kiếm hơn

1.3 Tao cac thé flashcard trong mỗi topic

Trong mỗi topic chung ta c6 thê tạo các thẻ flashcard với mặt trước có thể là tiêu đề hoặc từ tiếng anh cân học, mặt sau là nội dung chi tiệt hoặc nghĩa của từ

Mỗi thẻ sẽ có thêm tính năng kiểm tra phát âm, để giúp người dùng kiểm tra cả cách phát âm của bản thân

1.4 Ôn tập kiến thức thông qua câu hỏi trắc nghiệm

Người dùng có thê ôn tập kiến thức của mỉnh băng cách tham gia vào các bài kiểm tra trắc nghiệm được tạo tự động từ các thẻ flashcard trong từng topic Hệ thông sẽ hiện thị câu hỏi từ mặt trước của flashcard và yêu câu người dùng chọn đáp án đúng

1.5 Ôn tập từ vựng thông qua trò choi Hangman

Người dùng có thê học từ vựng một cách thú vị thông qua trò chơi Hangman (treo cô) Trong trò chơi này, hệ thông sẽ chọn ngâu nhiên tử vựng từ các flashcard của người dùng vả hiện thị các ô trông đại diện cho các chữ cái trong từ đó Người dùng đoán từng chữ cái, và môi lần đoán sai, hình ảnh treo cô sẽ dân hoàn thiện Trò chơi kêt thúc khi người dùng đoán đúng từ hoặc

bị treo cổ

2 Quản trị viên

Quan trị viên có thê tạo ra các topic mặc định Các topic này có thê được thấy và truy cập bởi bất

kỳ người dùng nào

Các topic này được tạo ra với mục đích đưa cho người dùng các nhóm từ vựng phô biến được sử dụng trong giao tiép va việt lách

IIT Qua trinh xay dung

1 Quá trình xây dựng cơ bản của tất cả các tính năng

Ld Tao model

Đầu tiên chúng ta truy cập vào ñle models.py File này sẽ được Django mặc đỉnh khởi tao trong thư mục của ứng dụng

migrations templates

init .py

admin.py apps.py forms.py models.py

max_length=100, blank= ; nul1l=

-CASCADE, null= » blank=

Cuôi cùng chúng ta sẽ thêm các phương thức cho các class nêu can

id_topic =m i(primary_key = True, null = False

name_topic Cha d(max_length = 5@, blank = False

type_topic = model ld(max_length = 59, blank = True

slug topic = models.S ield(null=False, blank=True

image_topic = models.Im: id(upload_to= max_length=100, blank=True, null=True

is_default = models.BooleanField(default=False

created_by = models.ForeignKey(User, on_delete=models.C/ DE, null=True, blank=True

def save(self, *args, **kwargs):

Phương thức str giúp ta định nghĩa dữ liệu sẽ được trả về khi đối tượng được gọi

Về cơ bản mọi model đều được tạo ra theo các bước trên

1.2 Tao view, url

VIews.py cũng là một file Django khoi tao mac dinh

init_.py admin.py apps.py forms.py models.py tests.py

return render(request, ‘topics.html', {‘topics':.topics})

Day la view sé hién thị tất cả các topic của người dùng trong template topics.htnl

Tương tự các chức năng khác nhau sẽ có view khác nhau Các view sẽ tiếp nhận request thông qua các url được định nghĩa trong file urls.py (đây cũng là file DJango khởi tạo mặc định) Trong urls.py sẽ có các đường dẫn của các yêu cầu khác nhau gửi về các view để xử lý:

from django.urls import

from django.conf.urls.static import

from django.conf import settings

from import views

urlpatterns = [

"topics/', views.topics, nmame='topics'),

n('flashcards/<slug:slug topic>/', views.fle ards, name="flashcards' 2

etail/<slug:slug flashcard>/*, views.word_detail, name='word_detail*

pic/',views.create_topic , name = Peete a cae i

bo slug _’ Vụ” views create h „ name = `'create_flashcard"'

Ũ

?

"hangman/*", views “ name usd

"delete_topic/<int:id_topic>/', views = A

"delete flashcard/<int:id_flashcard>/', 2 flashcard, name='delete_flashcard"),

ic/<int:id_topic>/", views.custom_ ustom_topic '||,

custom _flashcard/<int:id_flashcard>/', views ° shca name='custom_flashcard'),

('register/', views „ ngme='register' '

master.htmi quiz.html

Tao cac file html trong thu muc templates

Sử dụng cú pháp của Django Template Language (DTL) dé thém logic vao HTML

«+ Sw dung template tag:

Tich hop cac tag nhu {% for %}, {% if %}, {% include %}, va {% extends %} dé thém logic va tai str dung layout

*ịs flashcards,js flip_card.js hangman,js speech.Js speechandsentjs

10

“+ Tao file master

ta ad

Đây là file khuôn mẫu của trang Các trang khác có thê kế thừa từ trang nay

+* Tạo các file Topics,, Topic-detail, word-detail lần lượt được ké thira tir file master

“* Tao file quiz va hangman ké thira tir master

Quiz: Trang dùng đề làm trắc nghiệm để người dùng có thể ôn lại từ vựng một cách không nhàn chán

I1

-container” st “display: none; margin-top: 28px;”

try-again-buttor lick="reloadPage()">Try Again

2 Quá trình xây dựng riêng biệt

%% Lấy phiên âm, phát âm của một từ bằng API

API (Application Programming Interface) la m6t giao diện cho phép các ứng dụng hoặc hệ thống giao tiếp với nhau API đóng vai trò như một trung gian, cung cấp cách thức truy cập dữ liệu hoặc tính năng của một phần mềm, dịch vụ hoặc nền tảng mà không cần phải biết cách nó hoạt động bên trong Sử dụng API của các từ điển giúp dữ liệu lấy được chính xác và đáng tin cậy, đồng thời tiết kiệm thời gian cho người sử dụng

Đẻ lấy phiên âm và phát âm của một từ thông qua API cần qua 4 bước:

Bước 1: Xây dựng url API request

Bước 2: Gửi request tới API, sử dụng thư viện requests để làm việc này

Bước 3: Phân tích đữ liệu json trả về (responce)

Bước 4: Lưu dữ liệu vào trường phiên âm, phát âm trong class flashcard

%% Lấy phién 4m théng qua Merriam-Webster Dictionary API:

Bước 1; Cau tric url API request cua Merriam-Webster Dictionary 1a:

https://www.dictionaryapi.com/api/v3/references/{ dictionary }/json/{ word}?key={api_key} Trong do:

{dictionary } 1a loai tr điển, nhóm em str dung thu vién collegiate, phiên bản từ điển phô biến nhất của Merriam-Webster, tập trung vào người học và sử dụng tiếng Anh nói chung, bao gồm học sinh, sinh viên, và người dùng thông thường

{word} là từ cần tra cứu

{api key} là key được lấy từ tài khoản Merriam-Webster Dictionary API

Bước 2: Gửi request tới API, sử dụng thư viện requests để làm việc này

13

Bước 3: Khi gửi request tới Merriam-Webster Dictionary API, dữ liệu được trả về bao gồm nhiều thông tin khác nhau, trong đó, phiên âm năm trong truong “mw” (phién am) thuộc trường

“prs” (pronunciation) nắm trong trường “lwi” (headword information)

Vi du voi tir “parrot”:

Bước 4: Lưu phiên âm

+ Lấy phát âm thông qua Oxford Dictionary API:

Bước 1: Cấu trúc url API request của Oxford Dictionary:

Bước 2: Gửi request toi API, str dung thu vién requests dé lam viéc nay

response = requests.pet(url, headers={"app_1d":'APP ID, "app key":'APP KEY'})

14

voi APP ID va APP_KEY lay tt trang chu Oxford Dictionary API

Bước 3: Khi gửi request đến Oxford Dictionary API, phat 4m cua tir can tra sẽ được lưu dưới dạng file Audio trong trwong audioFile: lexicalEntries — Entries — pronunciations — audioFile

Bước 4: Lưu dữ liệu

s* Do việc lấy phát âm của một từ thông qua Oxford Dictionary API con nhiều hạn chế, nhóm em da sw dung ket hop voi ResponsiveVoice API, API ho tro tao 4m thanh phat 4m tir van ban, bao gom cac tw tiếng Anh

Buéc 1; Cau tric url API request của ResponsiveVoice API:

https://code.responsivevoice.org/getvoice.php?t={ word} &tl=en&sv=&vn=&pitch=0.5 &rate=0.5

&vol=l&key=YOUR API KEY

Trong do:

© t: tir can phat 4m

e tl: ma ngôn ngữ, ở đây là en (ngôn ngữ Anh)

e©_ sv, vn: các tham số chọn giọng nam, nữ hoặc vùng miền

e pitch, rate, vol: Diéu chinh dé6 cao, tốc độ, và âm lượng của giọng đọc

e©- key (API KEY): xác thực quyên truy cập

Bước 2: Gửi request tới API, sử dụng thư viện requests để làm việc này

Bước 3: Lưu dữ liệu

15

IV.Phan chia cong viéc

Phân chia công việc dựa trên cầu trúc của mô hình Django: Django hoạt động dựa trên mô hình MVT nên nhiệm vụ được chia thành 3 phân: Model, View, Template

Nguyễn Hoàng Tân Cac van dé vé templates

Luu Bao Long

Dao Ngoc Huy Cac van dé vé view va url

Lé Trung Phuc Cac van dé vé model

V Kết Quả

1 Tính năng đăng ký và đăng nhập tài khoản

1.1 Đăng kỹ tài khoản

Đăng ký tài khoản Username Required 150 characters or fewer Letters, digts and @)/+/~/_ only Email

Password

+ Your passweed can't be too similar to your other personal information

* Yosr pa an't be entirely numeric Password confirmation:

Đăng ký Tôi đà có tài khoản

e© Người dùng có thể đăng ký tài khoản dựa trên tài khoản gmail của minh

e© Khi đăng ký tài khoản thành công người dùng có thể dùng tài khoản đó để đăng nhập vào

trang web của chúng tôi

1.2 Đăng nhập tài khoản

Khi bạn đăng nhập thành công bạn có thê sử dụng tính năng này

e_ Tính năng nảy sẽ giúp bạn có thể tạo ra các chủ để về từ vựng bạn muốn học e©_ Bạn cũng có thể chèn ảnh vào cho đẹp mắt và dễ dàng nhận biết

e Ban cting c6 thể chỉnh sửa hoặc xóa chủ đề nếu muốn

Ví dụ :

18