Tạo Web Apps với Google Apps Script & Google Sheets - Tìm kiếm dữ liệu - Seaching
2. Làm quen với hàm Filter, Includes
3. Xử lý events với Button & Input
4. Biểu diễn data trên Web Apps
5. Dò lỗi và sửa lỗi Web Apps
VIDEO
Xin chào các bạn, mình là Lister Trung đến từ học cùng Lister. Trong buổi hôm trước thì chúng ta đã cùng nhau lấy về dữ liệu ở trong trang tính Google Seit với ứng dụng đó là bắt đầu khởi đồng rồi. Và chúng ta có một cái trang tính như thế này. Ứng dụng web của chúng ta thì đã có một cái file code.gs để có một cái file có một cái hàm đó là get on cais. hàm get for này thì lấy dữ liệu về từ cái Google Shift thì đây chính là bài mà chúng ta làm hôm trước. Thì ở bài ngày hôm nay thì chúng ta chúng ta đã hiển thị được dữ liệu ở dạng bảng rồi. Thì ở đây chúng ta đã có bảng. À thì so với cái bài hôm trước thì chúng ta đã thấy là trong cái trong cái Google Sheet của chúng ta thì chúng ta có hai cột 1 2 3 4 đó là cột thứ ba và cột thứ tư. Thì tương ứng với cái row 2 và row 3 ở đây thì mình ép kiểu về kiểu ngày tháng và đưa về cái định dạng dữ liệu ngày tháng thời gian dạng ngắn gọn tương ứng với cái a cái vùng mà chúng ta đặt ở trong hệ thống máy tính của mình. Và lúc này thì chúng ta đã có cái ứng dụng dữ liệu có thể trả về được. Và hôm trước thì chúng ta có cả cái header được trả về thì bây giờ chúng ta sẽ bỏ header đi bằng cách là chúng ta dùng hàm shift. Hàm shift này dựa trên cái việc đó là chúng ta sẽ xóa cái phần tử đầu tiên trong mảng data return này là một cái mảng chiều và chúng ta đã xóa phần tử đầu tiên của mảng hai chiều rồi. Tức là chúng ta chỉ còn dữ liệu thôi. Và khi mà chúng ta bật ứng dụng web này lên thì chúng ta có ứng dụng web và lúc này mình sẽ lấy dữ liệu từ server về. Khi chúng ta bấm nút là con a function from server thì dữ liệu sẽ được nạp từ server về. Và đây chúng ta thấy là cái cột start và cột đã chuyển về dạng tháng ngày năm giống như cách mà chúng ta sử dụng khai báo region ở trên hệ thống máy tính của mình. Ok. Vậy thì bây giờ chúng ta sẽ thử xem và chúng ta sẽ cải tiến thêm một số các cái tính năng nữa. Thứ nhất là chúng ta đã phone để chúng ta lấy được về dữ liệu ở phía server rồi. Thì bây giờ có lẽ là chúng ta sẽ thêm một cái thanh tìm kiếm đi. Chúng ta sẽ thêm một cái input để có thể tìm kiếm trong file này. Tức là ở trong file HTML. Nhưng mà trước đó trước khi mà sử dụng tính năng thì có lẽ là bây giờ mình sẽ tách thử. Bởi vì file script này của chúng ta là đang chung với cả file HTML. Thì bây giờ mình muốn là tách cái file script này ra thành file riêng. Thì khi mà các bạn thêm một cái file ở trên ứng dụng Appsript thì nó chỉ có hai loại file thôi. Một là file script từ server và hai là file HTML. Thì file CSS hay là file JavaScript thì nó cũng là ở dạng file HTML. Thì chúng ta la xem là làm thế nào để chúng ta tách được các cái file này. Thì các bạn thấy là khi mà chúng ta tạo giao diện người dùng với file HTML thì chúng ta có thể bởi vì nó là một cái môi trường appsript mà. Thì thì để tách được cái file HTML CSS và file JavaScript này thì chúng ta sẽ viết ở phía server một cái hàm chẳng hạn như là một cái function chúng ta đặt là function include. Function này đưa vào một tham số đó là file name. Tức là khi chúng ta đưa vào tên file nào thì sẽ trả ra một cái đầu ra tức là file HTML bằng cách là dùng hàm create HTML output from file đưa vào chính cái tên file chúng ta truyền vào và lấy nội dung get content. Tức là chúng ta mong muốn là à chúng ta lấy cái nội dung của cái file XTML này và sau này chúng ta include vào cái file chính. Thì ví dụ như chúng ta có hai file là file style. File style để định nghĩa là style thì chúng ta dùng thẻ style. File strip thì chúng ta dùng thẻ script. Bởi vì nó dạng HTML nên chúng ta mong muốn là chúng ta import hay là include được những cái nội dung của file JavaScript hay là file CSS này vào trong cái file HTML. Thì lúc này các bạn sẽ sử dụng một cái khái niệm gọi là printing script list. Thì printing script list là gì? Printing script list là chúng ta sẽ sử dụng một quy tắc đó là dùng dấu nằm trong cặp dấu nhỏ hơn lớn hơn này hỏi chấm bằng và sau đó đưa vào cái biểu thức chúng ta muốn. Và trong cái biểu thức này chính là cái đoạn mã có thể là gọi hàm hay là lấy ra giá trị phổ biến. Và trong trường hợp này là chúng ta sẽ gọi hàm ra bằng cách là sử dụng printing script list. Thì để có thể sử dụng thì các bạn dùng dấu này à nhỏ hơn xong rồi đóng là lớn hơn này. Chúng ta dùng hỏi chấm chấm than bằng và đưa vào trong này là tên lời gọi hàm. Thì ví dụ file của chúng ta là file styitis.html thì các bạn sẽ truyền vào tên file là sty nếu chúng ta muốn truyền vào file javascript.html thì chúng ta sẽ include cái file file JavaScript này vào. Thế thì để thực hành thì chúng ta sẽ thử quay trở về với cái ứng dụng của chúng ta. Lúc này chúng ta sẽ tách cái file ra. Ví dụ chẳng hạn chúng ta đặt cái file script của chúng ta là main thì các bạn không dùng là main.js được mà chúng ta tạo ra một cái file HTML. Lúc này file này là file nếu mà chúng ta để là main ch ờ à được main.s thì không được chúng ta phải là thay file HTML cơ. Chúng ta sẽ xóa cái file này đi và chúng ta tạo một loại file là file HTML. Để ờ cho nó khi mình hiểu là file script thì chúng ta đặt file là ví dụ chẳng hạn là my script chẳng hạn. File này là dạng file XTML nhưng trong file XTML này thì thực chất là chúng ta lấy cái đoạn mã script này đây. Đây chính là cái đoạn mã script chúng ta cần. Thì chỗ đây có lẽ là mình sẽ cắt cái đoạn mã script này và cho vào trong file HTML này. Chúng ta sẽ không để là thẻ HTML mà chúng ta để là vẻ thẻ script. Lúc này ở trên phía server.js chúng ta sẽ thêm một cái function. Function của chúng ta là function include. Chúng ta có thể đặt tên khác cũng được, miễn là khi mà cái function include này thì nó sẽ nhập vào một cái tên file name. Và khi mà chúng ta trả về thì chúng ta sẽ return. Cũng là một cái đối tượng của lớp XML service. Chúng ta create HTML output. HTML output from file truyền vào ở đây thì chúng ta sẽ truyền vào file name chính là tham số truyền vào của include và chúng ta dùng là get content. Get content này sẽ cho phép chúng ta lấy về cái nội dung lấy về nội dung của cái XTML output này và chúng ta mong muốn rằng là chúng ta sẽ gọi cái file include này ở phía client. Như vậy là file file ở đây chúng ta có file index.html XTML thì chúng ta muốn include cái file sty của mình vào à hay là cái file JavaScript của mình vào có tên là MyScript thì bên dưới cùng trước cái thẻ đóng body này thì chúng ta sẽ dùng cặp thể à chúng ta mong muốn là đưa vào include cái đoạn mã script thì lúc này chúng ta sẽ đưa vào printing script list. Thì để có thể chúng ta làm như thế này à chúng ta dùng dấu nhỏ hơn này hỏi chấm đây chúng ta dùng là hỏi chấm phần trăm bc và sau đó chúng ta điền cái printing script vào đây và chúng ta hỏi chấm chúng ta đóng lại. Đó thì đây chính là cái cách mà chúng ta sẽ sử dụng. Đây chúng ta hỏi chấm chấm than bằng và sau đó thì chúng ta đưa vào cái file include này. Chúng ta gọi cái hàm include hỏi chấm chấm than bằng chúng ta đưa vào hàm include và chúng ta truyền vào cái tên file. Tên file ở đây file của chúng ta có tên là MyScript thì chúng ta không cần phải đưa vào cái chấm hxtml nữa. Chúng ta chỉ cần đưa vào tên file thôi và nó sẽ lấy nội dung của cái file này. Bây giờ chúng ta sẽ thử triển khai xem là có thực hiện được không. Chúng ta sẽ đóng ứng dụng web app này lại. Mình sẽ vào quản lý các cái phiên bản, các cái tùy chọn triển khai. Tôi chỉnh sửa phiên bản triển khai và tạo ra một cái file mới. Chúng ta đặt tên là đây là phiên bản một chúng ta có tách. Chúng ta sẽ để có cái file JS file riêng. Chúng ta triển khai thì lúc này cái đường dẫn của chúng ta sẽ không thay đổi. Cái ứng dụng web app của chúng ta vẫn có đường dẫn URL là như thế này. Và chúng ta sẽ mở lên. À ở đây đang chưa được rồi. Lúc này ở đây là nó in ra luôn cho chúng ta. Nó đang chưa hiểu đang chưa hiểu cái a thành phần này là một cái a một thành phần trong file X HTML. Chúng ta thử gọi hàm xem. [âm nhạc] Đấy, chúng ta gọi hàn thì nó sẽ báo lỗi bởi vì là lúc này nó sẽ không hiểu được đúng không? Chúng ta sẽ refresh lại này. [âm nhạc] Và tức là cái đoạn mã script này thì nó sẽ chưa chạy được bởi vì là nó chưa include được cái file của chúng ta ở đây. Đó, chúng ta sẽ xem nhá. Trong cái cặp thẻ body này chúng ta dùng cái script list printing script printing script list đây chúng ta có hỏi chấm này bằng này include ở đây có thể là include file sty rồi bây giờ chúng ta sẽ thử ngắt ra ở đây mình còn thử dùng cái dấu chấm phẩy để để ngắt ra như thế này xem coi như chúng ta đang gọi một cái câu lệnh rồi chúng ta sẽ triển khai lại quản lý này và thêm cái phiên bản mớ với triển khai và lúc này chúng ta bấm ứng dụng. À ở đây thì nó vẫn chưa hiểu được cái ứng dụng này của chúng ta tức là nó chưa hiểu được cái script list. quay trở lại. Ở đây chúng ta có file HTML này. File HTML này có một đoạn mã là include đoạn mã include này thì sẽ gọi cái hàm include của chúng ta ở đây và chúng ta sẽ trả về get content của cái include này. À và như vậy thì các bạn sẽ có một cái phần chú ý đó là nếu mà để có thể gọi được cái file include này thì trong cái hàm du get ấy chúng ta không được trả trực tiếp là cái hàm create html output from file mà lúc này chúng ta sẽ phải thay bằng cách là tạo ra một cái file template và thực thi cái file template này. Như vậy chúng ta cần phải quay trở về cái file post code post của chúng ta. Với hàm buget này chúng ta sẽ không dùng create hm output from file trực tiếp mà chúng ta sẽ dùng đó là hàm chúng ta sẽ tạo ra create template from file và chúng ta lấy cái file template bởi vì tức là chúng ta sẽ không trả ngay cái đầu ra là file HTML mà chúng ta sẽ lấy một cái file template và sau đó dùng hàm key valuage để nó sẽ trả ra cái đầu da là HTML output thì khi đó cái hàm dug của chúng ta sẽ ở dạng template và file template này thì cho phép chúng ta lấy cái nội dung là get content của vml đồ bảo này thì chúng ta sẽ thử triển khai lại. Chúng ta chỉnh sửa và chúng ta tạo ra được phiên bản mới. Rồi chúng ta mở ứng dụng web app này lên. Rồi tốt rồi. Chúng ta đã thấy là cái file include nó không còn là một một cái giống như là một cái đoạn mã XTML thông thường nữa mà nó đã được import vào trong thành phần cái file XTML của chúng ta. Rồi, rất tốt. Lúc này chúng ta đã tách được cái file script riêng thành một cái file riêng. Và tất nhiên là file này thì vẫn là dạng file HTML. Chẳng qua là chúng ta tách bằng cái đoạn mã script ra ngoài để khi chúng ta import đoạn mã script này thì nó coi như là một cái phần của cái file HTML. Thì khi mà các bạn đã tách ra, ví dụ chẳng hạn chúng ta có một cái file là file CSS hoặc là file script thì lúc này nó sẽ rất tiện lợi cho chúng ta là chúng ta tách từng cái file riêng biệt. Đó, bây giờ ví dụ chẳng hạn như là chúng ta bảo là ừ chúng ta có thêm một cái file script à file CSS nữa đi. Chúng ta sẽ tạo thêm một cái file HTML. Chúng ta đặt tên là file MyStyle. Mystyle chấm không cần phải chấm đâu. Bởi vì khi chúng ta tạo ra ở dạng file HTML là chúng ta chỉ cần đặt tên file thôi. Và chúng ta sẽ xóa cái đoạn mã này đi. Và file style thì chúng ta sẽ để với cặp thẻ đó là cặp thẻ style. Đó. Và ở đây chúng ta có cặp thẻ đóng style. Rồi chúng ta có thẻ mở size và thẻ đóng size. Giả sử ở đây chúng ta bảo là table đi. Trong cái table này của chúng ta thì thẻ table thì chúng ta có border. Border thì chúng ta để là ví dụ như là 1 pixel chẳng hạn. Chúng ta test thử. Thì lúc này trong file index.html HTML file index này của chúng ta. Rồi chúng ta sẽ thông thẻ head cập thẻ head chúng ta sẽ đưa vào cập thẻ đó là link đến file sty đúng không? Chúng ta sẽ có link này type bằng à style sheet và chúng ta sẽ có hard bằng chúng ta sẽ link đến cái file của chúng ta là file [âm nhạc] à ở đây là chúng ta đang mong muốn là link đến cái file file style là file CSS. Rồi thực ra thì chúng ta sẽ không link như này nó sẽ không tách được một cái file bên ngoài như thế này. Và chúng ta cũng dùng tức là trong thẻ hết này chúng ta cũng include luôn cái style này vào. Như vậy chúng ta sẽ cũng dùng là hỏi chấm này chấm than bằng này. Sau đó đến hỏi chấm và chúng ta đóng cái dấu dấu lớn dấu nhỏ hơn. Đấy và chúng ta dùng hàm là hàm include và đưa vào tên file. Tên file lúc này sẽ là my style. My style thôi, chúng ta không cần đưa vào tên file. Thì ở đây mình đang để cái my style này là có table border là 1 một pixel. Ví dụ như vậy là chúng ta để cái đường viền chúng ta có thêm một cái thuộc tính gì đó không. Ví dụ chẳng hạn chúng ta để là trong cái table này thì chúng ta sẽ thay đổi cái font size. Ví dụ như là font size. Font size chúng ta để là 1 rem hoặc là 16 pixel. Ở đây mình để là 18 pixel chẳng hạn. Rồi bây gi chúng ta sẽ thử thay đổi cái này. Giờ chúng ta mong muốn là tách được cái file script và file CSS tạo ra một cái phiên bản mới. Và phiên bản này là phiên bản P1 có CSS và có JS file. Lúc này chúng ta sẽ thử mở ứng dụng web. Và khi mà chúng ta ghét dữ liệu từ server trở về à có thể không biết là cái file này thì cái phone size của nó có thể là 18 có thể là to hơn rồi đấy nhưng mà border chưa có là 1 đúng không? Chắc là cái table ở đây có thể chúng ta phải đưa vào cái CSS là ở trong TR hoặc là TD. Còn nếu mà để trong table thì nó có thể chưa nhận được chẳng hạn. Đấy chẳng hạn ở đây chúng ta để style là chúng ta để TD chẳng hạn. TD có border là một pixel hay là hay là solid. Solid cũng có thể ở đây rồi chúng ta để chưa chưa để solid ấy. Solid tức là cái đường viền của nó là đường viền mạch đấy. Nếu mà chúng ta mà để solid thử xem có lẽ chúng ta chưa cần đưa vào cái TD ta thêm phiên bản mới. Có thể thấy là trong quá trình thực hiện web app thì chúng ta phải thay đổi cái phiên bản rất nhiều lần bởi vì khi chúng ta thay đổi code muốn thực hiện. À đúng rồi. Đây table này nó có nó có border này là border cho cả table thì đấy tức là border ở bên ngoài. Bây giờ chúng ta bảo tắt xóa mấy đựng cũ này đi. Bây giờ muốn chúng ta muốn thêm dụ cả cái thẻ TD nữa. Tức là phẩy TD đi ta cho TD tức là cái từng ô một chúng ta cũng có border chỉ tùy chọn triển khai. Chúng ta thêm một cái phiên bản mới. Lúc này ứng dụng web của chúng ta chúng ta mở ra. Lúc đầu table có border này. Và khi chúng ta bấm nút gọi hàng. Ok. Bởi vì là từng dòng ở đây là chúng ta có cái dòng tiêu đề TH thì nó lại dùng cái th nên là trong cái TH chưa có tiêu đề. Chúng ta bổ sung thêm là được. Và lúc này các bạn đã có cái thẻ TD rồi. Đó. Bây giờ chúng ta đỏ là TD cũng có thẻ này và TH cũng có thẻ này. Chúng ta thử xem này. Trong file trong phần TH thì chúng ta có table row và chúng ta có TH mà th và TD chính là cái cột của chúng ta thì lúc này mình đã đặt rồi. Ok bây giờ mình sẽ bổ sung đó là trong cái file index.html HTML này ở phía trên của bảng à phía dưới của cái nút này chúng ta cho thêm một cái a ô tìm kiếm đi. Chúng ta để là input này. Input thì bằng text thôi. Chúng ta để cái file bằng input type bằng text. Và cái ID này của chúng ta chúng ta là để là cái input này sẽ dùng để tìm kiếm. Thì chúng ta để là input search dữ liệu chẳng hạn. Ta có một cái file là file input. Và có lẽ phải có một cái nút để bấm vào đúng không? Thế thì vừa nãy chúng ta để có một cái nút là con là khi nào chúng ta bấm vào thì mới nạp về. Bây giờ chúng ta thêm một cái nút đấy. Chúng ta copy cái nút này. Nút này sẽ bảo là cái nút này để chúng ta đi tìm kiếm search. Ở đây thì chúng ta sẽ cho thêm một cái place holder vào trong cái input để bảo người ta nhập vào giá trị tìm kiếm. Thế thì chúng ta sẽ tìm kiếm chúng ta để là place holder. bằng mình tìm kiếm giá trị nào ví dụ chẳng hạn bạn có thể search chúng ta có gì đây là khóa học đúng không chúng ta có thể để là search for bạn có thể nhập vào đây để người ta hiểu rằng chúng ta tìm kiếm và ID của nút này thì mình để là search rồi như vậy là chúng ta có cái nút là nút tìm kiếm chúng ta có cái input search này nó sẽ đặt bên dướ dưới cái nút à code của chúng ta. Rồi bây giờ thì chúng ta sẽ xử lý khi bấm vào nút này thì chúng ta sẽ đi tìm kiếm. Vậy thì ở phía server này thì chúng ta phải làm gì? Ở phía server tức là ở đoạn mãcode.js thì chúng ta phải có lẽ là lúc này thì khi mà tìm kiếm thì không cần phải gọi phía server nữa bởi vì dữ liệu đã được load về rồi đúng không? Chúng ta đã có dữ liệu được load vào đâu rồi? dữ liệu đã được load vào trong cái data return này rồi. Data return đã có thì bây giờ khi tìm kiếm thì chúng ta sẽ tìm kiếm trên cái data return này. Vậy thì chúng ta chỉ cần bắt sự kiện thôi. Ta bắt sự kiện cho cái nút đây là khi mà get on post về là nạp dữ liệu về rồi thì chúng ta mới làm. Vậy chúng ta vẫn viết ở trong hàm này. Bây giờ trong hàm này thì chúng ta viết một cái hàm để chúng ta có thể add cái event ler. [âm nhạc] Đây mình cho thêm cái không gian ở đây. Chúng ta sẽ add event n cho cái search button. Search button. Rồi chúng ta sẽ khai báo biến là btn search bằng giờ chúng ta lấy về cái nút đấy document chấm get element by id và chúng ta truyền vào là btn se chính là cái nút mà chúng ta lấy về khi chúng ta ngoài việc là lấy về ờ cái nút đúng không? Đầu tiên chúng ta sẽ lấy về cả cái input nữa. Vậy chúng ta sẽ khai báo cái input search của chúng ta. input search bằng chúng ta lấy về cái document lấy về cái input element by id input của chúng ta tên là input searchấy để kiểm tra lại thì các bạn vào lại cái file index này id của cái này là input search id của nút là btn search thì trong file script của chúng ta là chúng ta lấy về hai cái thành phần đó thì khi bấm vào nút bây gi chúng ta é sự kiện btn search chấm add event listener. Khi mà click chuẩn, khi click vào cái nút này thì thực hiện một cái hàm gì đó. Thì thực hiện hàm gì đó thì do mình đúng không? Chẳng hạn chúng ta hàm gì đó thì chúng ta viết luôn hàm trong này. Mình dùng arrow function viết cho nó quản hẹn. Bây giờ chúng ta sẽ bảo là khi click vào cái nút button search thì chúng ta sẽ làm gì? Thì chúng ta sẽ đi tìm kiếm. Đầu tiên là phải lấy về cái giá trị tìm kiếm đã xong tìm kiếm trong đấy đúng không? Thế thì cái giá trị chẳng hạn chúng ta khai báo một biến đi. Cái input value này thì chúng ta lấy bằng cái Đây ta lấy cái giá trị mà chúng ta tìm kiếm. Khi bấm vào nút thì chúng ta sẽ tìm xem là đây là cái giá trị rồi. Pot value thì có giá trị và trong cái mảng này của chúng ta thì có chứa cái thành phần đó hay không. Thế thì chúng ta sẽ làm thì chúng ta sẽ phải duyệt cái mảng này và chúng ta dùng có thể là dùng cái hàm là hàm filter. Chúng ta thử xem nhá. Về cái với cái hàm filter chúng ta có filter đi. Hàm filter dùng để lọc đây. Sẽ dùng schol để tra chẳng hạn. Thì chúng ta thấy hàm filter là nó sẽ trả về một cái mảng chứa tất cả các cái giá trị. Ví dụ mà giá trị này nó sẽ ở đây là lớn hơn 18 chẳng hạn. Tức là nó sẽ có tức là hàm filter này thì sẽ cho phép là truyền vào một cái hàm để check check xem là cái điều kiện này nó có thỏa mãn. Nếu có thỏa mãn thì trả về giá trị đó. Tức là chúng ta sẽ có một cái a kết quả trả về. À vậy thì ok. Như vậy thì chúng ta sẽ khai báo một cái mảng constant. Cái mảng này là mảng đã được lọc. Filter mảng đã được lọc này sẽ là kết quả của chúng ta sẽ có một cái data return là dữ liệu của chúng ta này. Chúng ta dùng hàm filter này. Hàm filter. Rồi trong hàm filter này thì bảo là với mỗi phần tử của cái data return giả sử với mỗi phần tử này thì mình gọi là một cái dòng thì chúng ta sẽ thực hiện một cái hàm. Chúng ta lại dùng errow function nhá. Với mỗi cái này chúng ta xem là trong mảng có chứa giá trị của phần tử này không. Vậy thì chúng ta sẽ thử à vậy thì mình sẽ xem là nó có include giá trị không đúng không? Đó. Vậy thì lúc này chúng ta sẽ xem là trong cái mảng mảng của chúng ta thì có include giá trị không. Chúng ta sẽ xem cái hàm include của JavaScript. Chúng ta xem JavaScript thì có hàm include sẽ cho phép chúng ta tìm kiếm là trong mảng đó có chứa phần tử này hay không. Nếu như mà đây chúng ta xem hàm inclus này sẽ trả phải là true nếu mà đúng rồi tức là vì là cái hàm filter ấy thì nó sẽ trả về phần tử khi là true thì chúng ta sẽ include xem. Vậy thì mình có thể quyết tóm gọn một chút, mình có thể viết tắt một chút như thế này. Đó là thay vì đây không phải viết arrow function như thế này thì chúng ta viết errow function ngắn gọn như thế này. Xem nào. Chúng ta với mỗi phần tử row thì chúng ta sẽ xem là data return này nó có include include là hàm của JavaScript này cái row này hay không. Nếu có thì nó sẽ trả về mạng các phần tử chứa row đấy. Đấy, hi vọng ở đây chúng ta có filter. Filter này chính là cái giá trị của mình. Đấy. Và lúc này thì đã có giá trị rồi. Nếu giả sử có giá trị rồi thì chúng ta lock à ở trong trong cái này thì sol lock cũng được. Chúng ta cứ Ctrl lock ra cũng được. Consloock thì chúng ta xem là cái filter đã nhận được chưa đã. Filter đã nhận được chưa? Và nếu nhận được rồi thì chúng ta sẽ in ra đúng không? Chúng ta sẽ biểu diễn. render future data. Đó, chúng ta sẽ biểu diễn giá trị đã được lọc. Giá trị đã được lọc của chúng ta thì như thế này. Thì đây rồi. Ờ thì lúc này chúng ta lọc thì chúng ta dùng y hệt cái này thôi. Chúng ta dùng cái duyệt và chúng ta nhưng mà thay vì là lấy trên cái data return thì chúng ta lấy trên dữ liệu đã được lọc filter for lúc này chúng ta sẽ biểu diễn nó. Ok. Chúng ta thử test xem là nó đã khi bấm vào cái nút search thì nó sẽ search được chưa. Nếu có lỗi thì chúng ta sẽ cùng bóm sửa. Chúng ta bảo là V2. V2 này bổ sung tính năng ở đ search triển khai để chúng ta thử test cái ứng dụng web này. À chúng ta đã có ch giao diện thì chưa đẹp đúng không? Đúng rồi. Bởi vì chúng ta chưa CSS cho cái giao diện này. Rồi chúng ta đã có để nạp được dữ liệu và mình thử tìm chữ cao search. A cao có chữ cao rồi thế nhỉ? Nó đã đưa ra đấy. Nhưng mà bây giờ vì sao này lúc này chúng ta thấy là cái nó vẫn a duyệt ra những cái dữ liệu này. Chúng ta sẽ có cái chữ nâng cao này. Có nâng cao. Nâng cao này nền tảng mình sẽ ờ để test thử. V bởi vì nó đang nối dữ liệu thế nên là trước khi mà chúng ta biểu diễn thì chúng ta phải cho cái bảng của chúng ta cái posable body này có inml inhtml là dốc đã để chúng ta xóa dữ liệu ban đầu. Test thử xem filter sẽ bằng data return filter row xem trong data return có chứa cái row a có chứa row à với mỗi phần tử no row có chứa chứ nhỉ ở đây tức là với mỗi cái phần tử của data return thì là row của chúng ta có chứa giá trị tìm kiếm hay không giá trị tìm kiếm của chúng ta là input thì chúng ta có value đấy rồi có input valu có input value chính là giá trị tìm kiếm và với mỗi cái phần tử trong mảng mảng đấy thì có chứa include cái value này hay không thì chúng ta lại đi tìm kiếm row thì nó lấy về hết đúng không và mình cũng phải xóa dữ liệu inml mình sẽ mở ứng dụng web này ra và bây giờ chúng ta đầu tiên là nạp về đã chưa nạp về thì chưa có dữ liệu đâu. Đầu tiên chúng ta nạp về đã. Nạp về rồi. Bây giờ chúng ta liệu chúng ta có chữ cao se a nó chưa trả về được. Chưa trả về được tức là công dữ liệu chưa đúng à. Tức là nó đang rỗng nền tảng cao mà không được thì nền tảng cao không được. Rồi chúng ta lại nạp lại. Đúng rồi. Chúng ta đã chưa tìm được giá trị này. Chưa tìm được cái giá trị trong tân lại. Tức là khi chúng ta lặp là từng dòng này, từng phần tử này là trong row nó có include cái giá trị chúng ta tìm kiếm hay không. Giờ mình xem nó respect nhá. Mình xem cái consol lock của nó có giá trị gì. Đây các bạn thấy là array 0 này. Array 0 là không trả về giá trị gì hết. Tức là cái filter của chúng ta đang chưa đúng. Cái lọc này của mình đang chưa đủ. Thế mình kiểm tra lại cái hàm lọc với cái hàm lọc của chúng ta MyScript. Chúng ta lọc xem có đúng không nào. À à data return.filter. Và như vậy là data return này, data return này của mình là mảng hai chiều. Mảng hai chiều thì à vậy thì với mỗi phần tử mảng hai chiều này mà lọc thì với mỗi phần tử row. row ở đây là nó sẽ là mảng một chiều và mảng một chiều include input value. Thì mình xem lại xem là nó có chứa cái include này nó sẽ trả về true nếu mảng chứa một cái giá trị cụ thể tức là nó sẽ trả về cái mảng đấy. Food này trả về true. Như vậy là với true thì chúng ta xem là nó sẽ trả về true này thì với mỗi row là nó có giá trị input không. Data return này là chấm filter là với mỗi cái giá phải include input value đúng không? Thì ở đây chúng ta có là đấy include này chúng ta có include include này thì có thể là bỏ input trả lời tr nếu mà nó chứa giá trị input. Vậy thì bây giờ mình phải xem là nó lấy được. Bây gi mình phải dò từng bước. Dò bước thứ nhất là xem đã lấy về được cái value này chưa. Thế bây giờ filter này mà lock ra thì nó array không? Tức là chưa tìm giá trị nào data filter với mỗi thành phần trong row. Đó thì bây giờ với mỗi với mỗi row này với chúng ta xem lại cái filter trước đã nhá. Filter này filter này [âm nhạc] filter filter đưa vào một hàm. Trong hàm này thì sẽ có một cái tham số và xem là cái tham số này nó có thỏa mãn điều kiện hay không. Vậy thì nó sẽ phải có từ khóa return. thì mình dùng ngắn gọn thì nó sẽ trả về thì nó sẽ có lớn hơn bằng 18 hay không. Còn như vậy là ở đây mình có chứa include về mặt logic thì của mình là khá là đúng rồi. Tức là nó có trả về cái giá trị nếu có thì nó sẽ trả về một cái mảng chứa. Như vậy mình chỉ test về mình phải test từng các cái bước một trong cái file MyScript này. À đâu filter filter chưa có thì render là không có thì render này không vấn đề gì. Vấn đề của chúng ta là ở cái hàm filter. Hàng filter này thì chúng ta sẽ xem là với mỗi phần tử của data return, data return là bằng hai chiều với mỗi phần tử của nó là bằng một chiều. Mặt logic thì khá là ok rồi đấy chứ nhạ. Thế thì bây giờ mình sẽ thử consol.log thôi. Consol làm từng bước một. Consol.log lock cái input value. Input value. Ta thử xem là chúng ta search đ input value nó có đúng chưa, lấy được về chưa. và mở web app. Lúc này đầu tiên chúng ta nạp về trước đã. Khi nạp về rồi ok. Và chúng ta khi này lên thì đây nhập đúng không? Chúng ta nhập được rồi. Có chứa rồi. Thế thì bây giờ chúng ta test thử như vậy là xem là nó có trả về một cái mảng. Ờ thì thay vì trước khi mình dùng filter thì mình test trước đó. Đó là chúng ta sẽ đã có input rồi và chúng ta duyệt đi chúng ta data return chấm này c này. Đó bây chúng ta tạm để cái filter này chúng ta comment lại. Chúng ta duyệt thử với mỗi phần tử của mảng filter này ví dụ với mỗi row này ta xem làm gì với mỗi phần tử của data return này. Thế thì chúng ta sẽ với mỗi phần tử này thì chúng ta sẽ in ra thử đi. Chúng ta consol.log chúng ta thử in ra là nó cái phần tử này row. Nó có chứa giá trị của chúng ta hay không. Input value mình mong muốn là xem có trả về cái phần tử nào mà có chứa giá trị chúng ta nhập vào hay không. Đó tức là số loock là như vậy thì chúng ta test chúng ta sẽ tạo phiên bản mới và triển khai thử. Đầu tiên chúng ta nạp dữ liệu từ server về ta nhập chữ ví dụ như là team chẳng hạn. S. Rồi bây gi chúng ta vào sol chúng ta xem xem nó in ra cái gì. À ở đây nó in ra sáu chữ phone. Thì như vậy là vấn đề của chúng ta ở đây là cái hàm cái hàm include của chúng ta có vấn đề. Tức là nó đã nó đang chưa ừ nó chưa tìm thấy hàm include là nó không chứa. Và như vậy các bạn phải hiểu là như này. À bây giờ tức là với bởi vì đây nó là một mảng mà một mảng các giá trị mà mảng các giá trị đấy thì đấy thì nó lại là gì? Với mỗi phần tử này thì nó không chứa một phần của cái giá trị đó. Thế thì bây giờ nếu mà mình muốn tìm là mình sẽ tìm theo tỉ ví dụ chẳng hạn mình sẽ tìm theo cost name hay là mình tìm theo ngày tháng bắt đầu. hay là tìm ở trong description thì vậy thì ở đây chúng ta sẽ phải là tìm là tìm trong post name chẳng hạn đúng không? Thế thì lúc này chúng ta phải sửa code của chúng ta rồi. Thay vì là chúng ta tìm trực tiếp là cả cái row thì chúng ta phải tìm cái row mấy. Ví dụ như là cái cost name của chúng ta là thành phần thứ hai. ID là thứ một này, cost name là thứ hai này. Thì chúng ta sẽ tìm như sau. Chúng ta sẽ tìm row. Ví dụ thì là đầu tiên này, 1 thì là thứ hai. Xem có include input value không. Hoặc là chúng ta sẽ tìm đây, chúng ta sẽ tìm cái row thứ mấy, cái description ấy, chúng ta tìm xem trong description thì row thứ mấy đây thì nó là cột 1 2 3 0 1 2 3 4 5 là thứ năm, tức là thứ hai và thứ sáu đấy. Tức là row 5 nó có include đấy. Hóa ra là như vậy. Chúng ta tìm lại là tìm cả cái mảng đấy chứa thì nó sẽ không chưa giá trị đấy. nó trả về phone hết là đúng rồi. Vậy thì bây giờ đây chúng ta sẽ tìm xem nó chứa một trong hai giá trị trong description hoặc là trong name. Mình sẽ triển khai lại. Nếu đúng là chúng ta đưa vào trong cái hàm filter là sẽ xử lý được rồi. Đấy. Đây chúng ta sẽ xem đầu tiên chúng ta nạp về đó này. Rồi xong chúng ta tìm chẳng hạn. Rồi và lúc này chúng ta sẽ infake xem nếu nó có trả về chu là ok. Rồi tốt rồi. Trả về hai chu và 4 thì rõ ràng là với hai cái dữ liệu là file hai cái dòng có CSS là trả về hai tru độ thở. Thế thì chúng ta đã tìm ra vấn đề của chúng ta là do cái include của chúng ta thôi. Vậy thì bây giờ chúng ta có thể bỏ được cái phần này đi rồi. Chúng ta có thể bỏ phần này đi rồi comment lại. Và lúc này filter của chúng ta là với row thì chúng ta sẽ đưa Đây tức là chúng ta sẽ trả về cái giá trị là trong description hoặc là tên file nếu có thì là filter và sau đó chúng ta lọc về. Rồi hi vọng là chúng ta sẽ chạy thành công. Chúng ta sẽ đặt tên cho cái phiên bản này. Phiên bản mới P2 chuyển nà chạy lên. Đầu tiên là chúng ta sẽ nạp dữ liệu về sau đó chúng ta tìm kiếm tự như là CSS. Ô tốt rồi, chúng ta đã tìm được giá trị dữ liệu rồi. Chúng ta xóa đi. Xóa đi thì à đúng rồi, xóa đi search thì nó sẽ không có cái giá trị nào à chúng ta để là rỗng đúng không? Thì tức là nó nạp về hết các giá trị của chúng ta thường có chữ cao đi chẳng hạn. search rồi có chữ nâng cao cao trong description hoặc trong force name có chữ add script hay là app chẳng hạn chúng ta search rồi tốt rồi chúng ta đã thể hiện được cái tính năng search này khá là thành công bây giờ cái nút search này có rồi thì chúng ta chỉ cần có thể là thay thế là bằng cách là nhập giá trị nào đấy vào đây thì cho dữ liệu có thể search luôn cũng được thì lúc này chúng ta sẽ thay vì là lấy cái nút search chsevent listener thì chúng ta lấy Cái input search này input search này và chúng ta add event listener. Chắc là khi giữ liệu nhập vào thì là thực hiện luôn input. Rồi chúng ta thử quản lý khi chọn chuyển cái chúng ta lúc này đã là B2 search trên cái input này. Và chúng ta sẽ triển khai. Rồi đầu tiên là chúng ta nạp dữ liệu. Nạp dữ liệu thành công. Chúng ta gõ cao. Chúng ta làm thế này thì rõ ràng là rất là tiện lợi, không cần phải bấm nút tìm kiếm đúng không? Chúng ta gõ chữ nào thì nó sẽ ngay lập tức là tìm kiếm dữ liệu của chúng ta. Ứng dụng chẳng hạn. Ok. Rồi như vậy là chúng ta đã cùng nhau làm xong được một cái thao tác rất là cơ bản. Mặc dù là cơ bản như thế thôi nhưng chúng ta cũng dành rất là mất rất là nhiều thời gian và các bạn thấy là chúng ta đã phải thử test lỗi. Nhưng mà đó là một cái quá trình bình thường khi mà chúng ta thực hiện. Các bạn thấy là đầu tiên là chúng ta nạp dữ liệu về. Sau khi nạp dữ liệu vào thì chúng ta sẽ đưa các cái thông tin input search vào rồi chúng ta lấy dữ liệu lọc bằng cách là xem là trong từng phần tử ví dụ chẳng hạn như name description thì có giá trị input hay không. Và chúng ta sẽ lọc dữ liệu và thể hiện ra. Ok, hi vọng các bạn đã có thể làm ra được một cái ứng dụng mặc dù là đơn giản thôi nhưng chúng ta đã làm được cái tính năng thứ hai đó là tìm kiếm searching. Ok, xin chào, cảm ơn và hẹn gặp lại các bạn ở những bài sau. Bye bye. （°◡°）
Thông tin liên hệ
Hotline: 0902 243 813
Chủ nhật: 10h00 – 16h00
Google Sheet - Web App
File Google Sheet
Web App
Tải về (/template/preview)
by UM Liên Kết
Nhận xét
Đăng nhận xét