GIỚI THIỆU VỀ CÔNG TY THỰC TẬP VÀ CƠ SỞ LÝ THUYẾT VỀ FRONT- END DEVELOPER
Tổng quan về công ty thực tập
1.1.1 Tổng quan về đơn vị thực tập
Ngày 01 tháng 05 năm 2000, chúng tôi thành lập Doanh Nghiệp Tư Nhân Quốc Thắng tại
469 Hùng Vương, Phường An Sơn, TP Tam Kỳ, Quảng Nam.
Do nhu cầu phát triển mở rộng đến ngày 21 tháng 03 năm 2002 chuyển đổi thành:
Công Ty TNHH Công Nghệ Tin Học Viễn Thông Quốc Thắng.
Từ năm 2000 đến 2019, chúng tôi đã hoạt động trong nhiều lĩnh vực, bao gồm Công Nghệ, Tin Học Viễn Thông, hệ thống camera, thiết bị chống trộm, chống cháy, thiết bị phòng họp, cùng với các sản phẩm điện, điện tử, điện máy và điện lạnh.
Quốc Thắng hướng tới việc trở thành công ty hàng đầu tại Quảng Nam và các tỉnh lân cận thông qua sự sáng tạo trong khoa học, công nghệ và đổi mới quản trị, nhằm cung cấp nền tảng, thiết bị và dịch vụ được sử dụng rộng rãi.
Sứ mệnh của chúng tôi là phát triển dịch vụ cung cấp thiết bị công nghệ thông tin và thiết bị an ninh, nhằm thay đổi ngành kinh tế Chúng tôi cam kết giúp khách hàng thực hiện công việc theo phương thức mới, từ đó nâng cao năng suất và hiệu quả công việc theo hướng tích cực.
Tổng quan Front-end Developer
1.2.1 Giới thiệu về lập trình Front end
Phần front-end của trang web là bộ phận tương tác trực tiếp với người dùng, bao gồm mọi yếu tố mà người dùng nhìn thấy khi duyệt Internet Từ font chữ, màu sắc cho đến menu xổ xuống và thanh trượt, tất cả đều được tạo ra từ sự kết hợp của HTML, CSS và JavaScript, được trình duyệt máy tính hiển thị.
Công cụ sử dụng: https://code.visualstudio.com/
Hình 2.Hình môi trường lập trình VSCode
1.2.2 Mô tả công việc Front end
Front-end developer, hay còn gọi là kỹ sư front-end hoặc lập trình viên web front-end, là người đảm nhiệm việc xây dựng giao diện người dùng và tương tác cho trang web hoặc ứng dụng web Công việc của họ tập trung vào việc tối ưu hóa phần hiển thị và tương tác trực tiếp với người dùng, nhằm đảm bảo rằng trải nghiệm của người dùng là thuận tiện, hấp dẫn và tương thích trên nhiều thiết bị và trình duyệt khác nhau.
Các yếu tố quan trọng trong lập trình front-end bao gồm:
Popular programming languages for front-end development include HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript HTML is used to create the structure and content of a web page, CSS is utilized for designing the interface and aesthetics, while JavaScript enables dynamic interactions on the website.
There are numerous tools and frameworks available to support front-end development, which help minimize repetitive tasks and enhance development efficiency Popular examples include React, Angular, and Vue.js for JavaScript, as well as Bootstrap and Foundation for CSS.
Thiết kế đáp ứng là một phương pháp quan trọng trong việc tạo giao diện front-end, giúp tối ưu hóa trải nghiệm người dùng trên nhiều loại thiết bị và kích thước màn hình khác nhau, bao gồm máy tính để bàn, điện thoại di động và máy tính bảng.
Tối ưu hóa hiệu suất giao diện front-end là yếu tố quan trọng, đặc biệt trong việc giảm thời gian tải trang Các kỹ thuật như tối ưu hóa hình ảnh, sử dụng bộ nhớ cache và cải thiện quá trình render trang đều góp phần nâng cao hiệu suất tổng thể.
JavaScript đóng vai trò quan trọng trong việc tạo ra sự tương tác động cho người dùng trên trang web Nhờ vào JavaScript, bạn có thể thiết kế các hiệu ứng hấp dẫn, kiểm tra dữ liệu đầu vào và thực hiện nhiều thao tác tương tác khác, nâng cao trải nghiệm người dùng.
Thử nghiệm và gỡ lỗi giao diện front-end là bước thiết yếu để đảm bảo trang web hoạt động chính xác trên nhiều trình duyệt và thiết bị khác nhau.
Cơ hội việc làm của front-end developer rất lớn và đa dạng trong ngành công nghiệp công nghệ thông tin chẳng hạn như :
Công ty phần mềm và công nghệ thông tin: tuyển dụng front-end developer để phát triển các ứng dụng web, trang web, và các sản phẩm liên quan
Các công ty thương mại điện tử luôn tìm kiếm các lập trình viên front-end để phát triển và nâng cao trải nghiệm người dùng trên các trang web mua sắm trực tuyến.
Người làm front-end sử dụng HTML để tạo ra cấu trúc cơ bản cho trang web, trong khi CSS được áp dụng để thiết kế giao diện, bao gồm màu sắc, font chữ, bố cục, vị trí các phần tử và các yếu tố trang trí khác.
Phát triển tương tác động là quá trình sử dụng JavaScript cùng với các thư viện và framework như React, Angular hoặc Vue.js để tạo ra các trải nghiệm tương tác trên trang web Điều này bao gồm việc thiết kế hiệu ứng hover, thay đổi nội dung theo hành vi người dùng và xây dựng các form nhập liệu động, giúp nâng cao trải nghiệm người dùng.
To enhance website performance, front-end developers must focus on optimizing page load times by improving image quality, implementing effective caching strategies, and refining the rendering process These practices significantly reduce loading times and boost overall website speed.
Thiết kế đáp ứng là yếu tố quan trọng để giao diện hoạt động hiệu quả trên các kích thước màn hình khác nhau Để đạt được điều này, cần áp dụng kỹ thuật CSS đáp ứng và thực hiện kiểm tra trên nhiều thiết bị, nhằm đảm bảo trải nghiệm người dùng mượt mà trên mọi nền tảng.
Người làm front-end cần kiểm thử giao diện trên nhiều trình duyệt và thiết bị để đảm bảo tính nhất quán và chính xác của trang web Họ cũng phải phát hiện và khắc phục các lỗi trong mã nguồn và giao diện.
Front-end developer thường làm việc trong môi trường nhóm, tương tác chặt chẽ với nhóm thiết kế để đảm bảo giao diện phản ánh đúng ý đồ thiết kế Đồng thời, họ cũng cần hợp tác với nhóm back-end để đảm bảo tính liên kết liền mạch giữa front-end và back-end.
Cơ sở lý thuyết về Front-end Developer
1.3.1.HTML/CSS a.Giới thiệu về ngôn ngữ lập trình HTML/CSS Để nói về khái niệm của HTML/CSS tưởng chừng rất khó vì chúng rất trừu tượng Tuy nhiên, đối với các lập trình viên có kinh nghiệm thì đây không phải là vấn đề đối với họ.
Hình 3.Ảnh HML/CSS b.Hiểu rõ bản chất và khái niệm của HTML và CSS
HTML và CSS là hai ngôn ngữ lập trình quan trọng trong phát triển web HTML (HyperText Markup Language) được sử dụng để xây dựng cấu trúc nội dung, trong khi CSS (Cascading Style Sheet) định dạng hiển thị cho HTML Nói cách khác, HTML cung cấp nội dung và ý nghĩa cho bố cục, còn CSS chịu trách nhiệm trang trí giao diện, bao gồm cỡ chữ, màu sắc, kiểu chữ và các hiệu ứng đơn giản.
Khi bạn có một ý tưởng thiết kế website hoặc một bản thiết kế hoàn chỉnh trên các công cụ như Photoshop hay Ai, bạn sẽ cần sử dụng HTML/CSS để biến ý tưởng đó thành một trang web thực sự Công cụ HTML/CSS giúp chuyển đổi các hình ảnh đồ họa thành một trang web chức năng, mang lại trải nghiệm thực tế cho người dùng.
HTML giống như một tờ giấy trắng, cung cấp nền tảng cho việc tạo bố cục và nội dung của trang web, trong khi CSS là những chiếc bút màu, giúp làm cho trang web trở nên sinh động và hấp dẫn hơn Sự kết hợp giữa HTML và CSS đóng vai trò quan trọng trong việc phát triển website, giúp cải thiện trải nghiệm người dùng và tối ưu hóa khả năng hiển thị trên các công cụ tìm kiếm.
HTML và CSS là hai công cụ không thể thiếu cho bất kỳ website nào, vì chúng luôn đi đôi với nhau và không thể hoạt động độc lập Tầm quan trọng của HTML và CSS đối với website là tương đương, do đó không thể tách rời để phân tích riêng biệt.
Hình 4.Ảnh HTML/CSS d.HTML và CSS rất quan trọng đối với website
Xây dựng cấu trúc, sắp xếp bố cục, định dạng nội dung website
Mỗi trang web, dù đơn giản hay phức tạp, được xây dựng từ nhiều thẻ HTML khác nhau, mỗi thẻ đảm nhận một vai trò riêng trong việc hiển thị nội dung HTML cho phép bạn thêm tiêu đề, định dạng văn bản, tạo danh sách, chèn hình ảnh và ký tự đặc biệt, cũng như xây dựng các phần nội dung và bố cục mới Với HTML, bạn có thể thoải mái sáng tạo và tổ chức cấu trúc cho trang web của mình.
HTML chỉ là ngôn ngữ đánh dấu, không đủ để tạo sự chuyển động hay thu hút người dùng CSS đóng vai trò quan trọng trong việc định dạng nội dung HTML, cho phép lập trình viên thiết kế màu sắc, nền, kích cỡ và kiểu chữ, giúp giao diện trở nên sinh động và hấp dẫn hơn CSS không chỉ tạo phong cách cho doanh nghiệp trên Internet mà còn giúp tăng tốc độ tải trang cho website.
Tốc độ tải trang là yếu tố quyết định đến việc người dùng có ở lại trang web hay không Nghiên cứu cho thấy rằng, các trang web có tốc độ tải nhanh từ 1 đến 2 giây sẽ thu hút và giữ chân khách hàng tốt hơn.
Tải toàn bộ website trong 2 giây có thể thực hiện được nhờ vào việc tối ưu hóa CSS, không chỉ làm giao diện sinh động mà còn tăng tốc độ tải trang CSS cho phép lập trình viên thiết kế các thẻ HTML như và
- để từ khóa và anchor text nổi bật mà không làm nặng trang, từ đó cải thiện đánh giá của công cụ tìm kiếm và tạo điều kiện thuận lợi cho doanh nghiệp Tuy nhiên, hiệu quả tối ưu hóa phụ thuộc vào trình độ và kinh nghiệm của lập trình viên, giúp tiết kiệm thời gian và công sức trong quá trình thiết kế website.
Gần đây, khi website trở nên bão hòa và cần tích hợp nhiều tính năng ưu việt, các lập trình viên nhận thấy rằng việc sử dụng CSS giúp tiết kiệm thời gian và công sức Chỉ với một đoạn CSS nhỏ, giao diện có thể trở nên hấp dẫn và thu hút hơn Ngoài ra, CSS và HTML dễ sử dụng và nâng cấp, đã được cải tiến nhiều, giúp thiết kế website trở nên đơn giản mà không cần ngôn ngữ hỗ trợ khác.
Dễ dàng chỉnh sửa, thay đổi thiết kế giao diện sang phong cách khác.
Website là sản phẩm dễ "lỗi thời" nếu không được chăm sóc thường xuyên Việc chậm chân trong việc cập nhật nội dung có thể khiến doanh nghiệp mất lợi thế cạnh tranh Các tập tin HTML và CSS nhẹ, cho phép việc upload và biên dịch nhanh chóng, giúp cập nhật nội dung và giao diện website hiệu quả Tối ưu hóa thiết kế và định dạng trang web là cần thiết để duy trì sự hấp dẫn và hiệu quả trong kinh doanh.
HTML và CSS có khả năng tự động định dạng thiết kế website một cách tối ưu, mang lại nhiều lợi ích cho người dùng Đặc biệt, các hiệu ứng hình ảnh và video mà trước đây cần đến Flash giờ đây có thể hoạt động độc lập nhờ vào những cập nhật trong HTML5 và CSS3.
Hình 5.Hình ngôn ngữ JavaScript a) Conditionals
- Một if câu lệnh kiểm tra một điều kiện và sẽ thực hiện một tác vụ nếu điều kiện đó đánh giá là true.
- If else các câu lệnh đưa ra các quyết định nhị phân và thực thi các khối mã khác nhau dựa trên một điều kiện đã cho.
- Chúng ta có thể thêm nhiều điều kiện hơn bằng cách sử dụng else if câu lệnh.
- Toán tử so sánh, bao gồm ,=,===, và !== có thể so sánh hai giá trị.
- Toán tử và logic &&, hoặc “và”, kiểm tra xem cả hai biểu thức được cung cấp có trung thực hay không.
- Toán tử logic ||, hoặc “hoặc”, kiểm tra xem một trong hai biểu thức được cung cấp có phải là trung thực hay không.
- Toán tử bang !, chuyển đổi tính trung thực và sai lệch của một giá trị.
- Toán tử bậc ba là viết tắt để đơn giản hóa các if else câu lệnh ngắn gọn
Một switch câu lệnh giúp đơn giản hóa việc viết nhiều câu lệnh else if, trong đó từ khóa break dừng lại ở case đang được kiểm tra và thực hiện trong tuyên bố switch.
- Một chức năng là một khối thể tái sử dụng mã mà nhóm cùng một chuỗi các câu lệnh để thực hiện một nhiệm vụ cụ thể.
- Tham số là một biến được đặt tên bên trong khối của một hàm sẽ được gán giá trị của đối số được truyền vào khi hàm được gọi:
ES6 đã mang đến những phương pháp mới để xử lý các tham số tùy ý, trong đó có việc sử dụng tham số mặc định Tính năng này cho phép lập trình viên gán giá trị mặc định cho một tham số khi không có đối số nào được truyền vào hàm, giúp cải thiện tính linh hoạt và khả năng sử dụng của các hàm trong JavaScript.
- Để trả về một giá trị từ một hàm, chúng ta sử dụng một câu lệnh return c) Scope
- Phạm vi là ý tưởng trong lập trình rằng một số biến có thể truy cập / không thể truy cập từ các phần khác của chương trình.
- Các khối là các câu lệnh tồn tại trong dấu ngoặc nhọn {}.
- Phạm vi toàn cục đề cập đến ngữ cảnh mà trong đó các biến có thể truy cập vào mọi phần của chương trình.
- Biến toàn cục là những biến tồn tại trong phạm vi toàn cục.
- Phạm vi khối đề cập đến ngữ cảnh trong đó các biến chỉ có thể truy cập trong khối mà chúng được xác định.
- Biến cục bộ là các biến tồn tại trong phạm vi khối.
- Không gian tên toàn cầu là không gian trong mã của chúng tôi chứa thông tin có phạm vi toàn cầu.
- Ô nhiễm phạm vi là khi có quá nhiều biến tồn tại trong một không gian tên hoặc tên biến được sử dụng lại. d)Arrays
- Mảng là danh sách lưu trữ dữ liệu trong JavaScript.
- Mảng được tạo bằng dấu ngoặc [].
- Mỗi mục bên trong một mảng ở một vị trí được đánh số hoặc chỉ mục, bắt đầu từ 0.
- Chúng ta có thể truy cập vào một mục trong một mảng sử dụng chỉ số của nó, với cú pháp như sau: myArray[0].
- Chúng ta cũng có thể thay đổi một mục trong mảng bằng cách sử dụng chỉ mục của nó, với cú pháp như myArray[0] = 'new string';
- Mảng có một thuộc length tính, cho phép bạn xem có bao nhiêu mục trong một mảng.
- Mảng có các phương thức riêng của chúng, bao gồm push() và pop(), tương ứng thêm và xóa các mục khỏi một mảng.
- Mảng có nhiều phương pháp thực hiện các tác vụ khác nhau, chẳng hạn như slice() và shift().
Một số phương thức tích hợp có khả năng thay đổi mảng, trong khi những phương thức khác lại không làm thay đổi mảng Để hiểu rõ hơn, bạn nên tham khảo tài liệu hướng dẫn.
TRIỂN KHAI DỰ ÁN XÂY DỰNG GIAO DIỆN WEBSITE XEM
Phân tích yêu cầu của hệ thống
2.1.1 Giới thiệu về dự án
- Tạo ra một giao diện người dùng hấp dẫn và dễ sử dụng cho trang web xem phim trực tuyến.
- Website xem phim bao gồm các chức năng sau: tìm kiếm phim , xem review phim, trailer về phim.
- Cung cấp trải nghiệm người dùng tốt, cho phép người dùng dễ dàng tìm kiếm, chọn và xem các bộ phim theo sở thích của họ.
2.1.2 Giao diện người dùng ( UI)
Thanh điều hướng chính là khu vực cho phép người dùng dễ dàng truy cập vào các phần khác nhau của trang web, bao gồm phim mới, thể loại phim, chức năng tìm kiếm và tài khoản người dùng.
Trang web xem phim thường sử dụng hình ảnh và video lớn của các bộ phim nổi bật để thu hút sự chú ý của người dùng, đồng thời có thể tích hợp trình chiếu ảnh hoặc video ngắn nhằm giới thiệu các phim mới.
- Tìm kiếm: Một ô tìm kiếm rõ ràng và dễ tìm thấy giúp người dùng dễ dàng tìm kiếm các bộ phim theo tên, thể loại hoặc diễn viên.
Các danh mục và thể loại phim đóng vai trò quan trọng trong việc giúp người dùng dễ dàng tìm kiếm và lựa chọn bộ phim phù hợp với sở thích của mình Ví dụ như các thể loại hành động, phiêu lưu, tình cảm và khoa học viễn tưởng, mang đến cho khán giả nhiều sự lựa chọn phong phú.
Mỗi bộ phim cần có một trang chi tiết riêng, bao gồm thông tin quan trọng như ngày ra mắt, đạo diễn, diễn viên, tóm tắt nội dung và đánh giá.
2.1.3 Trải nghiệm người dùng ( UX)
- Giao diện thân thiện với người dùng: Giao diện cần phải thiết kế sao cho dễ nhìn, dễ dàng hiểu và không gây nhầm lẫn cho người dùng.
Tốc độ tải trang là yếu tố quan trọng, giúp website hoạt động nhanh chóng và mượt mà, đảm bảo người dùng không phải chờ đợi lâu để tiếp cận nội dung phim.
Chức năng tìm kiếm mạnh mẽ cho phép người dùng dễ dàng tìm kiếm nội dung mong muốn theo nhiều tiêu chí như tên phim, thể loại, diễn viên và đạo diễn Việc này giúp người dùng tiết kiệm thời gian và nhanh chóng tìm ra những bộ phim ưng ý.
Thông tin chi tiết về phim bao gồm các yếu tố quan trọng như diễn viên, đạo diễn, ngày ra mắt, tóm tắt nội dung và đánh giá, giúp người xem có cái nhìn tổng quan và sâu sắc hơn về từng bộ phim.
Nội dung dự án
2.2.1.Mục tiêu thiết kế giao diện
- Thu hút được càng nhiều người biết đến web xem phim của mình càng tốt
- Tạo cho người dùng trải nghiệm chất lượng thú vị, dễ sử dụng và gần gũi
- Tạo ra một giao diện trực quan, dễ nhìn, và dễ sử dụng để người dùng có thể dễ dàng thao tác và tìm kiếm nội dung.
2.2.2.Quy trình thiết kế giao diện bằng ReactJS
Bước 1: Tạo môi trường để phát triển React Tiền hành cài đặt NodeJS cho dự án.
Bước 2: Thực hiện các bước khởi tạo Project React chạy trên môi trường NodeJs để bắt đầu thực hiện chuyển giao website mới.
Bước 3: Tạo Component Mỗi Component là một phần của website chúng có chức năng đặc biệt và được gọi ra từ các chương trình khác.
Bước 4: Thiết kế trực quan.
Bước 5: Hoàn thiện giao diện website.
KẾT QUẢ THỰC HIỆN ĐỀ TÀI “ XÂY DỰNG GIAO DIỆN
Giao diện trang home
Hình 7.Giao diện Trang Header
Hình 8.Giao diện trang Home
Hình 9.Giao diện phần footer
Giao diện trang sign up/ login
Hình 10.Giao diện trang Sign Up
Hình 11.Giao diện Trang Login
Giao diện trang Catelogy
- Có tất cả 10 thể loại , dưới đây ví dụ một vài thể loại tiêu biểu:
Hình 13.Giao diện movie theo category Action
Hình 14 Giao diện movie theo category horor
Hình 15 Giao diện movie theo category Animation
Hình 16 Giao diện movie theo category Drama
Hình 17.Giao diện movie theo category Romance
Giao diện trang movie
Hình 18.Giao diện danh sách movie
Giao diện trang chi tiết
Hình 19.Giao diện trang chi tiết
Hình 20.Giao diện phần trailer movie
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Trong thời gian thực tập, em đã tiếp thu nhiều kiến thức quan trọng như HTML, CSS, JavaScript và ReactJs Những kiến thức này không chỉ giúp em củng cố nền tảng mà còn hỗ trợ em trong việc áp dụng vào quá trình học tập và công việc sau này.
- Sự giúp đỡ của Mentor và GVHD cũng đã giúp em hoàn thành tốt hơn trong đợt thực tập vừa rồi và dự án của riêng của mình.
- Em cũng đã áp dụng được kiến thức đã học để tạo ra một website nhỏ cho riêng mình trong đợt thực tập vừa rồi.
Trong thời gian thực tập, do hạn chế về thời gian và kiến thức, tôi chưa hoàn thiện được trang admin cũng như các chức năng khác như cho phép người dùng thích phim, tải phim hay thêm phim vào tủ phim để xem lại sau.
- Cách thiết kế giao diện , màu sắc vẫn chưa được chuyên nghiệp.
Dựa trên những kiến thức thu được từ kỳ thực tập này, tôi sẽ nỗ lực hoàn thiện hiểu biết của mình trong tương lai Tôi sẽ tìm hiểu từ nhiều nguồn và nền tảng khác nhau để bổ sung kiến thức, hướng tới kỳ thực tập tốt nghiệp sắp tới.
Trong thời gian tới, tôi hy vọng sẽ hoàn thiện một trang web xem phim đầy đủ chức năng, bao gồm khả năng like, comment và lưu lại phim, cùng với các quảng cáo, không chỉ dừng lại ở việc xây dựng giao diện.