Như vậy là mình đã giới thiệu cho các bạn seri hướng dẫn lập trình theme woocommerce. Seri này mình đã dự định làm cách đây 1 năm trước, nhưng bây giờ mới có thời gian để thực hiện.
Hy vọng với seri này các bạn sẽ biết được cách xây dựng 1 website bán hàng chuyên nghiệp với wordpress.
Bài viết được sự cho phép của tác giả Lê Xuân Quỳnh
Trong bài 9, chúng ta đã tìm hiểu qua cách hoạt động của các loại subjects. Trong bài này, chúng ta sẽ nghiên cứu cách sử dụng các loại subjects trông qua source code cụ thể.
Ở hình trên, chúng ta có 3 đường thẳng thể hiện cho 3 subscribes đăng ký các sự kiện trong thời gian thực. Trong đoạn code bài trước, đường thẳng đầu tiên thể hiện subscribe 1. Sau khi đăng ký, Publish subjects emit 1 sự kiện string là “1”. Lúc đó subscriptionOne nhận được.
Chúng ta thêm đoạn code sau để đăng ký tiếp subscriptionTwo:
example(of: "PublishSubject") {
let subject = PublishSubject<String>()
subject.onNext("Co ai nghe tui noi khong?")
let subscriptionOne = subject
.subscribe(onNext: { string in
print(string)
})
subject.on(.next("1"))
// Add subscription two
let subscriptionTwo = subject
.subscribe { event in
print("2)", event.element ?? event)
}
}
Kết quả chạy PlayGround như sau:
--- Example of: PublishSubject ---
1
Ở đây chúng ta thấy mặc dù đã đăng ký nhưng subscriptionTwo không hề emit ra sự kiện nào. Điều này dễ dàng thấy rằng, 1 PublishSubject sẽ chỉ thực sự phát ra sự kiện cho subscriptionTwo sau khi nó đã đăng ký.
Tiếp tục thêm đoạn code sau:
subscriptionOne.dispose()
subject.onNext("4")
Kết quả chạy chương trình:
--- Example of: PublishSubject ---
1
2) 4
Lúc này subscriptionOne đã dispose, cho nên nó không thể tiếp tục nhận sự kiện từ PublishSubject.
Đầu tiên gửi sự kiện hoàn thành completed cho subject
Gửi 1 sự kiện “5”. Lúc này không có sự kiện nào được in ra, bởi vì subject đã thực sự kết thúc.
dispose subscriptionTwo báo cho nó biết là đã kết thúc việc lắng nghe
Tạo 1 subscription cho subject. Thêm disposeBag cho nó.
Gửi tiếp sự kiện “?”. Thì subject báo nó đã hoàn thành, nên nó không hiển thị thêm “?” nữa. Tuy nhiên subscriptionOne, subscriptionTwo vẫn hiển thị sự kiện đã hoàn thành mặc dù nó đã dispose. Do vậy, bạn phải chú ý khi sử dụng PublishSubject khi xử lý.
Source đầy đủ:
import UIKit
import RxSwift
public func example(of description: String, action: () -> Void) {
print("\n--- Example of:", description, "---")
action()
}
example(of: "PublishSubject") {
let subject = PublishSubject<String>()
subject.onNext("Co ai nghe tui noi khong?")
let subscriptionOne = subject
.subscribe(onNext: { string in
print("1)" + string)
})
subject.on(.next("1"))
// Add subscription two
let subscriptionTwo = subject
.subscribe { event in
print("2)", event.element ?? event)
}
subscriptionOne.dispose()
subject.onNext("4")
// 1
subject.onCompleted()
// 2
subject.onNext("5")
// 3
subscriptionTwo.dispose()
let disposeBag = DisposeBag()
// 4
subject
.subscribe {
print("3)", $0.element ?? $0)
}.disposed(by: disposeBag)
subject.onNext("?")
}
Đôi khi bạn muốn khi 1 subscription đăng ký mới muốn biết các event trước đó là gì. Chúng ta sẽ cùng nghiên cứu trong bài 11 về BehaviorSubjects.
Khi bạn truy cập trang web trên, thì trình duyệt sẽ tự động download file .exe cài đặt. Tuy nhiên bạn cũng có thể download các phiên bản khác như bản 32bit/64bit hay bản portable
Phần Editor mặc định cho Git (phần mềm sử dụng để hiển thị, chỉnh sửa file khi compare file với Git). Mình sử dụng notepad++ vì nó khá dễ nhìn và nhẹ (các bạn có thể chọn editor khác)
Kiểm tra phiên bản của bản git vừa cài đặt bằng cách mở màn hình cmd hoặc powershell và chạy lệnh
Bức ảnh trên là sự khái quát về một lộ trình phổ biến nhất cho các Web Developer hiện nay trên thị trường web development. Trước khi chúng ta đi sâu vào các kỹ năng bạn cần học để trở thành một nhà phát triển web, bạn nên biết rằng phát triển website không phải là một khái niệm hay một chủ đề duy nhất. Nó có rất nhiều vấn đề phát sinh bên trong đó.
Bạn có thể tập trung vào việc học cách phát triển giao diện người dùng, UX UI, thiết kế đồ họa,… Trước hết, bạn có thể bắt đầu với việc phát triển giao diện người dùng. Để phát triển Front-end, bạn cần học HTML, CSS, JavaScript và thư viện hoặc khuôn khổ như React, Angular hoặc Vue.js.
Vì vậy, bây giờ chúng ta hãy nói chi tiết hơn về phát triển giao diện người dùng là gì và những gì bạn cần học.
“Giao diện người dùng của một ứng dụng thường đề cập đến lớp đại diện cho giao diện người dùng (giao diện người dùng). Điều này có thể bao gồm mọi thứ từ một trang web tĩnh với HTML và CSS đến một ứng dụng React đầy đủ hỗ trợ giao diện người dùng” – Colby Fayock.
Có một số kiến thức cơ bản bạn cần biết để phát triển Web Frontend bao gồm: HTML, CSS, JavaScript. Trong đó, HTML và CSS sử dụng để tạo các trang web tĩnh.
Back End Development là gì?
Phát triển back end còn được gọi là phát triển phía máy chủ. Đó là thực hành giao tiếp giữa cơ sở dữ liệu và trình duyệt. Các ngôn ngữ và công cụ của Back-end Development hiện có bao gồm: Node.js, Express, MongoDB và Mongoose.
Những nguồn tài nguyên miễn phí để học cách phát triển website
freeCodeCamp
Đây là trang web quan trọng nhất mà tôi từng truy cập. Họ có một giáo trình về web development đầy đủ kéo dài 3000 giờ và gần đây họ cũng đã thêm các chứng chỉ về tính toán khoa học, phân tích dữ liệu và học máy với Python.
Ngoài chương trình học, freeCodeCamp có một ấn phẩm (nơi bạn đang đọc bài viết này), kênh YouTube và Diễn đàn nơi bạn có thể nhận trợ giúp về các vấn đề lập trình của mình.
Bạn cũng có thể đăng ký với tư cách là người đăng ký và Quincy (người sáng lập freeCodeCamp) sẽ gửi email cho bạn một số bài báo liên quan đến công nghệ mới nhất từ ấn phẩm của freeCodeCamp hàng tuần.
Udemy
Chỉ cần tìm kiếm free courses from Udemy và nó sẽ lọc ra các tùy chọn của bạn. Bạn sẽ thấy cả khóa học trả phí và miễn phí, nhưng bạn chỉ có thể chọn những khóa học miễn phí và tận hưởng.
Nếu bạn còn nhớ, khóa học lập trình đầu tiên của tôi là từ Udemy – khóa học mà bạn tôi đã đăng ký cho tôi. Vì vậy, nó đã giúp tôi bắt đầu.
Tài liệu tham khảo
Khi tôi muốn tìm hiểu hoặc triển khai một khái niệm mới, tôi thường truy cập Google. Và Google thường đề xuất MDN hoặc tài liệu chính thức của một công cụ hoặc ngôn ngữ. Điều này cũng hữu ích khi tôi quên cách hoạt động của các chi tiết của một chủ đề cụ thể (như Flexbox chẳng hạn).
W3Schools cung cấp rất nhiều hướng dẫn tham khảo ngắn cho nhiều chủ đề bao gồm Java, Python, JavaScript, jQuery, React, Angular, AJAX, SQL, Node.js, Raspberry Pi, Artificial Intelligence, Machine Learning, Data Science, NumPy, SciPy, Matplotlib và MongoDB.
Kết luận
Đây chỉ là một hướng dẫn ngắn gọn dành cho các web developer, để giúp bạn bắt đầu trong lĩnh vực web development. Bạn có thể đánh dấu bài viết này để sử dụng thêm hoặc thậm chí chia sẻ nó với bạn bè của bạn, những người cũng muốn bắt đầu sự nghiệp của họ với tư cách là Nhà phát triển web.
Bài viết được sự cho phép của tác giả Nguyễn Việt Hưng
I. Memoization
Memoization không phải là một từ Tiếng Anh có thể tìm thấy trong từ điển Oxford Online . Nó là biến thể của từ gốc Latin “memoradum” với nghĩa “to be remembered” (được nhớ).
Trong lập trình, memoization là một kỹ thuật tối ưu, nhằm tăng tốc chương trình bằng cách lưu trữ kết quả của các câu gọi function và trả về các kết quả này khi function được gọi với cùng input đã gọi.
Hiểu đơn giản, trong python ta có thể implement memoization với dict bằng cách lưu kết quả gọi function f vào một dict theo dạng:
và sửa lại function để nó lấy result1 nếu input1 có trong dict.
Với bài toán tìm số Fibonacci, kết quả của câu gọi function sau bằng tổng kết quả của 2 lần gọi function liền trước, dễ thấy ta có thể sử dụng memoization để tránh việc tính lại (đồng thời tránh luôn cả việc recursive call quá nhiều khiến vượt quá kích thước của stack)
def fib(n):
if n <= 2: return 1
else:
return fib(n - 1) + fib(n - 2)
In [9]: fib(6)
Out[9]: 8
In [12]: fib(25)
Out[12]: 75025
In [13]: fib(75)
... chờ mãi không thấy
In [13]: %time fib(30)
CPU times: user 244 ms, sys: 1.83 ms, total: 246 ms
Wall time: 245 ms
Out[13]: 832040
Nếu dùng memoization để tối ưu việc tính số Fibonacci , ta không phải tính lại các giá trị đã tính rồi:
LRU (least recently used) cache (đọc là /kaʃ/) là một trong các thuật toán cache phổ biến. Cache được dùng để lưu trữ các kết quả tính toán vào một nơi và khi cần tính lại thì lấy trực tiếp kết quả đã lưu ra thay vì thực hiện tính. Cache thường có kích thước nhất định và khi đầy, cần bỏ đi một số kết quả đã tồn tại trong cache. Việc kết quả nào sẽ bị bỏ đi phân loại các thuật toán cache này thành:
LRU (Least Recently Used): bỏ đi các item trong cache ít được dùng gần đây nhất.
MRU (Most Recently Used): bỏ đi các item trong cache được dùng gần đây nhất.
Việc sử dụng kỹ thuật memoization để tối ưu các quá trình tính toán như vậy là chuyện thường ở huyện, vậy nên từ Python 3.2, trong standard library functools đã có sẵn function lru_cache giúp thực hiện công việc này ở dạng decorator. Khi gọi function với một bộ argument, lru_cache sẽ lưu các argument lại thành key của dict, và sử dụng kết quả gọi function làm value tương ứng. lru_cache có option để chỉnh kích thước của cache, phân biệt kiểu của argument.
Một điểm đáng chú ý là các argument được gọi với function đều phải là immutable object bởi chúng được dùng làm key của dict. Khi dùng decorator lru_cache, ta chỉ cần tập trung vào viết function cần viết, lru_cache sẽ lo việc thực hiện caching/memoization.
In [8]: @lru_cache(maxsize=None)
def fib(n):
if n <= 2: return 1
else:
return fib(n-1) + fib(n-2)
...:
In [9]: %time fib(75)
CPU times: user 84 µs, sys: 26 µs, total: 110 µs
Wall time: 114 µs
Out[9]: 2111485077978050
Ở đây bạn nên tải phiên bản with VirtuaBox nhé, nó tích hợp sẵn VirtuaBox cho các bạn vì máy ảo phải có VirtuaBox mới chạy được. (Nếu bạn đã cài VirtuaBox thì có thể bỏ qua)
Sau khi download về các bạn hãy cài đặt chỉ việc next theo hướng dẫn của nó và khởi động nó lên chúng ta sẽ được giao diện như sau:
Các bạn có thể thêm được rất nhiều máy ảo mà các bạn thích,các bạn chỉ cần nhấn add và tải thêm nhiều mấy ảo để test trên các thiết bị.
Bạn chọn máy ảo mình muốn làm việc và click nút Start ở phía trên để khởi động máy ảo:
Chờ máy ảo khởi động:
Và đây là kết quả
Cài đặt plugin để sử dụng trực tiếp Genymotion trong Android Studio
Bạn vào Android Studio để cài đặt plugin. Click File > Settings > Plugins
Ở cửa sổ mới mở ra các bạn chọn “Plugin” rồi nhấn vào nút “Browse repositories”:
Các bạn gõ Genymotion vào ô tìm kiếm, sẽ thấy nó hiện ra plugin của Genymotion ở phía dưới. Sau đó các bạn click và nút ở Install plugin ở bên cạnh, hộp thoại xác nhận hiện ra thì chọn Yes để Android Studio tiến hành tải và cài đặt plugin:
Sau khi cài đặt xong, bạn sẽ có 1 biểu tượng Genymotion trên thanh tác vụ. Bất cứ khi nào bạn muốn chạy máy ảo Genymotion, chỉ cần chọn một cái trong danh sách và nhấp vào Bắt đầu là được.
Bài viết được sự cho phép của tác giả Trần Thị Thu Hà
SmarJob xin chia sẻ với các bạn kỹ thuật đa ngôn ngữ ứng dụng web dựng trên nền Spring Web MVC. Chúng ta đang sống trong môi trường toàn cầu hóa, ứng dụng muốn tiến xa cần tiếp cận lượng người dùng đông đảo, thuộc nhiều quốc gia khác nhau. Khi đó phát sinh rào cản là ngôn ngữ. Phá vỡ được rào cản ngôn ngữ, ứng dụng bạn tạo ra sẽ nhiều người dùng hơn, doanh thu cao hơn.
Khởi tạo project bằng Maven Archetype maven-archetype-webapp
Chọn kiểu project là Maven, Sử dụng Java 8, Archetype là maven-archetype-webapp
Khai báo 3 thông số GAV (GroupId – ArtifactId – Version)cho ứng dụng sắp tạo ra:
G: vn.smartjob.demo_spring
A: multilanguage
V: 1.0.0–SNAPSHOT (hậu tố –SNAPSHOT được khuyến khích sử dụng)
Màn hình xác nhận ứng dụng Maven sẽ sử dụng, cũng như thông số cấu hình để quản lý dependencies cho project. Nếu bạn nhập sai thông tin, có thể bấm nút Previous để quay lại và sửa.
Đặt tên và chọn vị trí lưu mã nguồn project:
Bạn cần tạo thêm các thư mục và tập tin để cấu trúc cây như sau:
Là project sử dụng Maven build tool, nên việc đầu tiên bạn cần quan tâm là file pom.xml:
Controller điều hướng luồng đi trong ứng dụng Spring Web MVC:
package vn.smartjob.demo_spring.multilanguage;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class WelcomeController {
@RequestMapping(value = "/welcome")
public ModelAndView user() {
return new ModelAndView("welcome");
}
}
Để minh họa, chúng ta hỗ trợ 3 ngôn ngữ: Tiếng Anh, Tiếng Việt, Tiếng Nhật. Bạn có thể hỗ trợ thêm số ngôn ngữ không giới hạn. Điều này khiến lượng khách hàng/lượng người dùng đa quốc gia tăng lên mạnh mẽ:
File messages_en_US.properties
hello=Hello
File messages_vi_VN.properties
hello=Xin chào
File messages_ja_JP.properties
hello=こんにちは
Mẹo: Để đảm bảo font chữ hiển thị đúng, sử dụng Notepad++ biên soạn nội dung đa ngôn ngữ, để chế độ mã hóa (encoding) là UTF-8
Kết quả
Tải về source code từ server SmartJob: multilanguge hoặc clone/fork từ server GitHub: https://github.com/SmartJobVN/spring_mvc_multi_language
Bài viết gốc của Đỗ Như Vý được đăng tải tại smartjob.vn
Bài viết được sự cho phép của tác giả Phạm Công Sơn
Đây là plugin giả lập gõ văn bản, rất phù hợp với những web cần hiển thị text dạng ngắn hay slogan hiện ra từ từ bằng hiệu ứng typing. Các bạn có thể tải plugin này tại đây
<divdata-form="typing"class="hide"><mark><a>Chào mừng các bạn đã đến với blog son20.com của mình</a></mark><br/>Hãy chờ mình một chút <del>Khoảng</del> tầm 2 giây thôi rồi thì mình giới thiệu nhé..<ins>2</ins><br/><strong>Đây là Plugin giả lập Typing rất thú vị.</strong><br/><del></del> để thực hiện giả lập xóa text *<ins>2</ins><br/><ints>{numeric}</ints> để thực hiện delay một khoảng thời gian (tính bằng giây)*<ins>2</ins><br/><kbd></kbd> để tối ưu việc gõ nhầm *<ins>2</ins><br/>Chúc <delstyle="color:red;border-bottom:1px dashed red;">mọi người</del>các bạn sử dụng plugin này vào những trường hợp hữu ích.Chờ xíu để chạy lại nhé <ints>2</ints></div>
Bài viết được sự cho phép của tác giả Trần Thị Thu Hà
Để tuyển dụng được một lập trình viên tốt, thì các nhà tuyển dụng thường đặt khá nhiều kỳ vọng vào các kỹ năng mà lập trình viên đã tự trang bị được cho mình.
Trong bài này, trong lĩnh vực PHP, các nhà tuyển dụng cần gì ở một lập trình viên? Bạn đã chuẩn bị được những kỹ năng gì để đi xin việc tuyển dụng PHP?
1. Những kỹ năng bắt buộc
Nắm chắc kiến thức cơ bản về lập trình web với HTML, CSS (và cả JS thì là tốt nhất)
PHP là để lập trình web, mà HTML+CSS(+JS) là bộ cơ sở đi với nhau, và do đó, bạn muốn làm web mà không biết HTML+CSS thì chắc chắn là không thể được. Thực tế, với HTML+CSS bạn không cần phải biết tường tận mọi ngõ ngách, không cần phải siêu đẳng, thế nhưng những thứ thường gặp bạn cần phải nắm rõ.
Về ngôn ngữ PHP
Bạn làm về PHP, rõ ràng bạn phải hiểu được cơ bản về nó. Cách bạn đặt biến như nào, đặt hàm như nào,… rồi những vấn đề cơ bản như: hiển thị một chuỗi lên HTML bằng PHP như thế nào, PHP kết nối đến DB như là MySQL ra sao,… Bạn có thể lúc nhớ lúc quên, nhưng khi đưa code có sẵn ra bạn phải đọc được và hiểu được, rồi mới tính đến chuyện tự tay code được.
Nếu bạn đã thành thạo một số kỹ năng dưới đây, ngoài việc tăng khả năng kiếm được một công việc như ý về tuyển dụng PHP, bạn còn có lợi thế nhất định khi đàm phán lương bổng.
Thành thạo nhiều các PHP framework
Với cộng đồng PHP lớn mạnh, cũng như vị trí quan trọng của bộ sậu PHP-MySQL trong thế giới web cộng với nhu cầu tuyển dụng PHP ngày càng lớn thì việc mà có vô số các sản phẩm opensource, hoặc có phí là điều dễ hiểu. Tương tự đó, rất ít các công ty phát triển web làm từ đầu sản phẩm của mình, mà thường dựa vào một nền tảng framework nào đó để tuỳ biến. Nhất là các công ty ở Việt Nam, có rất ít công ty bỏ tiền ra đầu tư làm từ đầu sản phẩm của mình. Do đó, bạn nắm được nhiều framework thì bạn lại càng có nhiều lợi thế hơn khi xin việc cũng như khi đàm phán lương bổng.
Nhu cầu tuyển dụng PHP ngày càng lớn.
Các framework đáng chú mà các bạn cần bỏ thời gian nghiên cứu, làm thử gồm:
– Về CMS: WordPress, Joomla, CakePHP, Yii, Laravel, …
– Về eCommercer: Magento, OpenCart, Shopify,…
– Ngoài ra, còn có một số khác, mặc dù ít gặp ở Việt Nam nhưng không phải là không cần: CRM như Sugar hoặc Tiger,..
Thành thạo làm Responsive
Với thời điểm bùng nổ smartphone, tablet iOS, Android như hiện tại, việc có thêm kỹ năng làm web Responsive là cực kỳ quan trọng. Các website lớn, hoặc chuyên nghiệp sẽ yêu cầu điều này. Việc học cách để làm responsive này cũng không tốn nhiều thời gian, cũng như PHP, hiện nay có rất nhiều framework giúp cho các bạn về việc này.
Thành thạo các Javascript framework, tối đặc biệt JQuery
Tương tự với các quan điểm trên, bạn cũng nên nắm được vững cách sử dụng JQuery. Tài liệu hướng dẫn rõ ràng dễ hiểu, các biện pháp giải quyết khó khăn bằng JQuery nhiều vô kể. Và cũng có vô số người sẵn sàng giúp bạn trên StackOverflow.
Ngoài những điểm đề cập trên, thật tuyệt vời nếu nhà tuyển dụng cũng biết được bạn thành thạo, hoặc đã từng làm, hoặc có hiểu biết, hoặc thậm chí là có nghe nói đến một số các thứ sau đây:
– Kỹ thuật về AJAX với JQuery.
– JSON
– Restful Webservices
– Tương tác với web API, request header, response header
– AngularJS
– Thành thạo các tool như Sublime Text, Notepad++, IntelliJ IDEA,…
– Cách deploy một web PHP lên hosting bằng FTP, CPanel,…
Với những chia sẻ trên hy vọng sẽ giúp ích cho các bạn trong quá trình đi xin việc. Chúc các bạn thành công!
Tôi đã làm việc như một nhà tư vấn về phát triển bản thân trong phần lớn cuộc đời. Tôi đã đi qua rất nhiều khái niệm và ý tưởng cũng như phát minh ra một số khái niệm cho riêng mình. Nhưng sau đây là một trong những ý tưởng quan trọng nhất mà tôi đã có:
Hành động không chỉ chịu ảnh hưởng của động lực mà nó còn là nguyên nhân gây ra động lực.
Hầu hết mọi người chỉ cam kết hành động nếu họ được thúc đẩy ở một mức độ nhất định. Và họ chỉ có động lực khi họ cảm thấy một nguồn cảm hứng cảm xúc. Một người chỉ bắt đầu có động lực để học tập cho kỳ thi khi người đó hình dung ra những hậu quả nếu họ thi rớt. Một người quyết định học một loại nhạc cụ nào đó khi họ cảm thấy được truyền cảm hứng vì có thể chơi nhạc cho bạn bè và người thân của họ nghe.
Và tất cả chúng ta đã từng buông lơi mọi thứ vì thiếu động lực ít nhất một lần trong đời. Đặc biệt là trong thời điểm mà chúng ta không nên. Chúng ta cảm thấy thờ ơ và lãnh đạm khi hướng tới một mục tiêu nhất định đã đặt ra cho chính mình bởi vì chúng ta thiếu động lực và chúng ta thiếu động lực bởi vì chúng ta không cảm thấy bất kỳ khao khát về cảm xúc nào để thực hiện điều đó.
Cảm hứng → Động lực → Hành động mong muốn
Nhưng có một vấn đề với khuôn mẫu này: Phần lớn những thay đổi và hành động mà chúng ta cần trong cuộc sống đều được truyền cảm hứng bởi những cảm xúc tiêu cực và chính những cảm xúc đó lại cản trở chúng ta thực hiện những hành động đó.
Nếu một người đang cố hàn gắn mối quan hệ của họ với người khác, những cảm xúc nội tại (những tổn thương, oán giận, sự trốn tránh) hoàn toàn đi ngược lại những hành động cần thiết để hàn gắn (đối mặt, trung thực và giao tiếp).
Cảm giác xấu hổ về cơ thể tạo nên động lực mong muốn giảm cân của một người, nhưng cũng chính cảm xúc xấu hổ đó lại cản trở họ đi đến phòng tập gym vì lo sợ bị người khác chê cười.
Những tổn thương trong quá khứ, kỳ vọng tiêu cực và cảm giác tội lỗi, xấu hổ và sợ hãi thường khiến chúng ta trốn tránh những hành động cần thiết để vượt qua những tổn thương, kỳ vọng và cảm xúc tiêu cực đó.
Động lực thực sự hoạt động như thế nào?
Chuỗi động lực không chỉ gồm 3 phần, mà nó là một vòng lặp vô hạn:
Cảm hứng → Động lực → Hành động → Cảm hứng → Động lực → Hành động → …
Hành động của bạn sẽ tạo ra các phản ứng về cảm xúc và cảm hứng tiếp theo và lặp đi lặp lại thúc đẩy những hành động trong tương lai. Lợi dụng kiến thức này, chúng ta có thể định hướng lại tư duy của chúng ta theo cách sau:
Hành động → Cảm hứng → Động lực
Kết luận là nếu bạn không có động lực để thực hiện một sự thay đổi quan trọng trong cuộc sống của bạn, thì hãy làm một cái gì đó, bất cứ điều gì, và sau đó khai thác các phản ứng với hành động đó như một cách để bắt đầu thúc đẩy bản thân.
Tôi gọi điều này là Nguyên tắc “Hãy làm gì đó đi”. Và tôi đã phát triển nó trong những năm làm việc như một nhà tư vấn giúp đỡ mọi người thoát ra khỏi nỗi sợ hãi và sự thờ ơ để hành động.
Nó bắt nguồn từ chủ nghĩa thực dụng đơn giản: Bạn trả tiền cho tôi để bạn được ở đây và làm điều gì đó. Tôi không quan tâm, hãy làm điều gì đó đi!
Những gì tôi tìm thấy là thường khi họ làm một cái gì đó, thậm chí là những hành động nhỏ nhặt nhất, nó sẽ sớm cung cấp cho họ nguồn cảm hứng và động lực để làm một điều gì đó khác. Họ đã gửi một tín hiệu cho chính mình, “OK, tôi đã làm điều đó, tôi đoán tôi có thể làm nhiều hơn.” Và cứ chậm rãi như vậy, chúng tôi bắt đầu làm cho mọi thứ tiến triển tốt hơn.
Làm thế nào để có động lực làm bất cứ điều gì?
Qua nhiều năm, tôi đã áp dụng Nguyên tắc “Làm Cái Gì Đó” trong cuộc sống của chính mình.
Ví dụ rõ nhất chính là trang web cá nhân và các hoạt động kinh doanh trực tuyến của tôi. Tôi làm việc cho bản thân mình. Tôi không có một ông chủ nói với tôi phải làm gì và không được làm gì. Tôi cũng thường gặp rủi ro về đầu tư cá nhân, cả về tài chính lẫn tình cảm. Đôi khi có những lúc căng thẳng thần kinh, và những cảm giác về sự nghi ngờ cũng như sự không chắc chắn nảy sinh. Và khi không có ai xung quanh thúc đẩy bạn, ngồi một chỗ và xem lại chương trình truyền hình mỗi ngày có thể nhanh chóng trở thành một lựa chọn hấp dẫn hơn.
Hai năm đầu tiên tôi làm việc cho bản thân mình, cả tuần trôi đi mà tôi không làm được gì nhiều bởi vì tôi cứ luôn lo lắng và căng thẳng về những gì tôi phải làm. Và quá dễ để bỏ cuộc. Tôi đã nhanh chóng học được rằng mình phải ép buộc bản thân làm một việc gì đó. Nếu tôi cần phải thiết kế trang web, tôi sẽ buộc mình ngồi xuống và nói “Được rồi, tôi sẽ thiết kế phần tiêu đề ngay bây giờ!” Nhưng ngay sau khi phần tiêu đề đã được hoàn tất, tôi thấy mình đang tiếp tục thực hiện những phần tiếp theo của trang web. Và trước khi tôi nhận ra được điều đó, tôi đã tràn đầy năng lượng và chú tâm vào dự án.
Tôi cũng thường xuyên áp dụng nó trong cuộc sống của mình. Nếu tôi sắp sửa giải quyết một dự án lớn mà tôi đang lo lắng, hoặc nếu tôi cảm thấy bản thân mình nên đi ra ngoài để gặp gỡ nhiều người hơn, tôi sẽ áp dụng nguyên tắc “Hãy làm gì đó đi”. Thay vì mong đợi một kết quả lớn, tôi sẽ chỉ quyết định “OK, bắt đầu một bản phác thảo thôi!” hoặc “OK, tôi sẽ đi ra ngoài làm một chai bia và xem những gì đang diễn ra!”
Giáo viên dạy Toán thời trung học của tôi đã từng nói: “Nếu các em không biết làm cách nào để giải một bài toán, cứ viết một cái gì đó, bộ não sẽ tự động tìm ra cách để thực hiện những bước tiếp theo”. Và cho đến ngày nay, lời khuyên đó vẫn đúng. Bản thân hành động tự nó sẽ truyền cảm hứng cho những suy nghĩ và ý tưởng mới dẫn dắt chúng ta đến những phương pháp giải quyết các vấn đề trong cuộc sống. Những cái nhìn sâu sắc sẽ không đến nếu chúng ta chỉ đơn giản ngồi im và suy nghĩ về nó.
Gần đây tôi đã nghe một câu chuyện về một tiểu thuyết gia đã viết được hơn 70 cuốn tiểu thuyết. Có người hỏi ông ấy làm cách nào mà ngài có thể viết nhất quán và duy trì được cảm hứng mỗi ngày như vậy. Ông ấy đã trả lời: “Mỗi ngày cố gắng viết 200 từ, chỉ có vậy!”. Ý tưởng ở đây là nếu chúng ta buộc mình phải viết 200 từ mỗi ngày, chính 200 từ đó sẽ truyền cảm hứng cho chúng ta tiếp tục viết, và đến khi nhận ra thì ta đã có hàng ngàn từ trên bản thảo.
Bạn có thể đã nhận ra khái niệm này ở đâu đó. Nhưng không quan trọng nó đến với bạn bằng hình thức nào, đó là một lối suy nghĩ vô cùng hữu ích và là một thói quen tốt cần được áp dụng.
Càng trải nghiệm nhiều tôi càng thấm thía rằng thành công trong bất cứ lĩnh vực nào chỉ phụ thuộc ít đến hiểu biết hay tài năng mà gắn kết chặt chẽ với hành động được bổ trợ bởi kiến thức và tài năng.
Bạn có thể thành công trong một lĩnh vực nào đó dù có thể hiện tại bạn không biết bạn đang làm gì. Bạn cũng có thể thành công dù không có tài năng đặc biệt nào trong lĩnh vực đó. Nhưng bạn sẽ không bao giờ thành công ở bất cứ lĩnh vực nào nếu không hành động. Không bao giờ.
Bài viết được sự cho phép của tác giả Lê Xuân Quỳnh
Nhiều bạn newbie sẽ rất khó trả lời câu hỏi: Làm sao để viết code swift đúng chuẩn thế giới? Bạn viết code và người khác đọc được một cách dễ dàng, tuân theo tiêu chuẩn của cộng đồng Swift.
Khi viết ngôn ngữ lập trình nói chung, Swift nói riêng không ai có thể nói bạn viết sai hay đúng như nào. Ví dụ đoạn code sau:
class classSample {
var BienGido = ""
func TenHam() {
print(BienGido)
}
}
Khi biên dịch chương trình, nó không báo lỗi. Nhưng đoạn code trên mắc 3 lỗi code style nghiêm trọng:
Tên lớp bắt đầu bằng chữ thường. Luật bất thành văn, khi đặt tên class ở đa số tất cả các ngôn ngữ lập trình, người ta đều phải bắt đầu bằng chữ in hoa. Lý do là: tên lớp là 1 class – nó là 1 danh từ. Ở bộ môn tiếng Việt lớp 3, có quy định: danh từ chỉ tên riêng đều phải viết hoa, ví dụ: Hà Nội, Hồ Chí Minh, Lào Cai.. Cũng tương tự, ở programing language cũng có quy luật tương tự.
Đặt tên biến bắt đầu bằng chữ hoa. Tên biến ở đây là thuộc tính để lưu trữ giá trị của class. Do vậy bạn không thể đặt tên viết hoa được, vì nó đại diện cho nhiều đối tượng kế thừa từ lớp. Bạn không thể nói là tim là 1 danh từ riêng được. Vì con người nào cũng có tim cả.
Tên hàm bắt đầu bằng chữ hoa. Tương tự, tên hàm là phương thức cho class, cho nên nó cũng là chung cho các đối tượng kế thừa từ lớp. Nó bắt buộc phải viết thường.
Sau khi sửa lại, đoạn code sẽ như sau:
class ClassSample {
var bienGido = ""
func tenHam() {
print(bienGido)
}
}
Tuy nhiên, với 1 bạn mới dấn thân vào con đường lập trình, thì ai sẽ là người nhắc nhở bạn những rule này? Thật may mắn, Swift đã có 1 thư viện hỗ trợ cho bạn viết code 1 cách clean nhất, lỡ bạn có đặt tên biến viết hoa hay tên class viết thường như trên, thì nó tự động báo cho bạn biết để sửa, nhằm đảm bảo code là đẹp nhất.
Tin tôi đi, khi bạn dùng library này, bạn sẽ ngày càng chuẩn chu hơn trong việc viết code và tự tin phang vào đứa nào dám bảo bạn viết sai quy tắc của IOS programing.
Đầu tiên bạn cần phải cài đặt em nó vào project mới của bạn. Project của bạn có thể là đã có sẵn hoặc tạo mới từ đầu, bạn thoải mái chọn lựa.
Cách cài đặt có thể xem readme của nó, hoặc không thì tôi làm đơn giản như sau:
Nếu bạn thích Homebrew, thì bạn gõ dòng lệnh:
brew install swiftlint
Còn nếu đam mê CocoaPods thì gõ:
pod init
pod 'SwiftLint'
Đọc đến đây có nhiều bạn hỏi tôi là “Ơ thế Homebrew là gì mà CocoaPods là gì?” Bạn ơi, ngồi xuống đây làm điếu thuốc, uống chén nước để tôi nói bạn nghe này:
Homebrew và CocoaPods là 2 thư viện hỗ trợ bạn cài thư viện ngoài 1 cách nhanh chóng và đơn giản bằng dòng lệnh.
Mặc định máy Macbook của bạn sẽ không có cài đặt nó đâu, và nếu bạn muốn chơi với 2 em nó thì có 2 cách: 1 là bạn google từ khóa “cách cài đặt Homebrew” hay là CocoaPods, sau đó bạn tìm 1 video nào đó trên youtube chẳng hạn, xem rồi thẩm thôi. Cách 2 là đợi tôi có thời gian tôi giải thích bọn nó làm gì. Bật mí là để hiểu bản chất hơn về việc xây dựng thư viện thì bạn dùng Homebrew hay hơn CocoaPods, sau này có thời gian chúng ta sẽ xây dựng các library của các bạn và đẩy lên cho cộng đồng nhé. Bạn sẽ hiểu hơn các khái niệm static hay dynamic library. Còn bây giờ chưa phải lúc làm chuyện đó chúng ta vẫn còn non.
Quay lại với swiftLint, hiện tại khi cài đặt thư viện xong, bạn mở lên thì nó vẫn chưa hoạt động với project của bạn. Chúng ta cần giao thông với em ấy và thực hiện 1 vài bước setting nhỏ như sau:
Bạn vào setting -> Chọn vào tab Build Phases và nhấn vào nút + -> “New Run Script Phase”. Thêm đoạn script sau:
"${PODS_ROOT}/SwiftLint/swiftlint"
Đoạn code trên nhằm báo cho Xcode dùng Swiftlint để check code convention.
Bạn sửa tên Run scipt thành swiftlink. Sau đó kéo cái script này lên gần trên cùng, sau cái [CP] Check Pods Manifest.lock như hình:
Để kiểm tra lại, bạn thử sửa đoạn code tên class viết thường xem nó báo lỗi không nha!
Lỗi vì tên class viết thường
Thử với nhiều code lỗi như sau:
import Foundation
class classSample {
enum enumLoi {
case case1
case Case2
}
var BienGido = ""
func TenHam() {
var EnumLoi: enumLoi = .case1
switch EnumLoi {
case .case1:
print("case1")
case .Case2:
print("case2")
break
}
print(BienGido)
}
}
Thông báo lỗi bạn thu được:
Các lỗi code sinh ra
Các dòng đỏ báo lỗi bạn có thể dịch như sau:
Tên phải uppercase, viết hoa chữ đầu
enumLoi cũng phải viết hoa chữ đầu
Case2 phải viết chữ thường
Tên biến không được viết hoa chữ đầu
Tên hàm phải bắt đầu bằng chữ thường
Tương tự 5
Trong case đã có lệnh print nên không cần thiết phải có break
Sau khi chuẩn hóa ta có đoạn code sau:
class ClassSample {
enum EnumDung {
case case1
case case2
}
var bienGido = ""
func tenHam() {
var enumDung: EnumDung
enumDung = .case1
switch enumDung {
case .case1:
print("case1")
case .case2:
print("case2")
}
print(bienGido)
}
}
Ồ vậy là bây giờ bạn đã yên tâm mỗi khi viết code, có quên có sai ở đâu đo thì yên tâm đã có thằng check cho bạn rồi. Và đảm bảo sau 1 thời gian sử dụng swiftlint thì bạn viết code sẽ chuẩn mực hơn, sexy hơn.
Hi vọng bài viết này sẽ giúp được cho các bạn ngày càng phát triển kỹ năng coding của mình.
Hiện nay, các lập trình viên hay lẫn lộn giữa các khái niệm Dependency Inversion, Inversion of Control (IoC), Dependency Injection (DI). Ba khái niệm này tương tự nhau nhưng không hoàn toàn giống nhau.
Sự khác biệt giữa 3 khái niệm trên:
Dependency Inversion: Đây là một nguyên lý để thiết kế và viết code.
Inversion of Control: Đây là một design pattern được tạo ra để code có thể tuân thủ nguyên lý Dependency Inversion. Có nhiều cách hiện thực pattern này: ServiceLocator, Event, Delegate, … Dependency Injection là một trong các cách đó.
Dependency Injection: Đây là một cách để hiện thực Inversion of Control Pattern (Có thể coi nó là một design pattern riêng cũng được). Các module phụ thuộc (dependency) sẽ được inject vào module cấp cao.
Ghi chú: Đôi khi chúng ta so sánh giữa Dependency Injection với Abstraction Factory Design Pattern. Thế những có 1 chút khác biệt giữa hai phương pháp này, đó là DI có một Framework làm việc phía sau nó để gọi các factory và các service đã đăng ký.
Tóm lại, Dependency Injection (DI) là một mẫu thiết kế phần mềm (software design parttern). Đây là cách tuyệt vời để giảm các kết nối chặc chẽ giữa các thành phần của phần mềm (software components). Nó cho phép chúng dễ dàng quản lý các thay đổi trong tương lai cũng như quản lý những hệ thống phần mềm phức tạp dễ hơn.
Ưu điểm:
Giảm sự kết dính giữa cách thành phần của phần mềm. Hay gọi là giảm sự phụ thuộc của các thành phần với nhau.
Dễ bảo trì và dễ thay đổi khi có nhu cầu. (không làm ảnh hưởng đến các thành phần khác trong cùng 1 hệ thống)
Tăng khả năng tái sử dụng.
Dễ viết Unit Test và kiểm thử.
Nhược điểm:
Sử dụng interface nên đôi khi sẽ khó debug, do không biết chính xác module nào được gọi.
Làm tăng độ phức tạp của code.
2. Các dạng Dependency Injection
Constructor Injection: Các dependency sẽ được container truyền vào (inject vào) 1 class thông qua constructor của class đó. Đây là cách thông dụng nhất.
Setter Injection: Các dependency sẽ được truyền vào 1 class thông qua các hàm Setter.
Interface Injection: Class cần inject sẽ implement 1 interface. Interface này chứa 1 hàm tên Inject. Container sẽ injection dependency vào 1 class thông qua việc gọi hàm Inject của interface đó. Đây là cách rườm rà và ít được sử dụng nhất.
3. Mục đích của Dependency Injection là gì?
Chúng ta cần biết mục đích của DI dùng làm gì thì mới có thể áp dụng vào dự án của mình được và sử dụng loại DI nào cho phù hợp.
Với cách code thông thường, các module/class cấp cao sẽ gọi các module cấp thấp. Module/class cấp cao sẽ phụ thuộc và module/class cấp thấp, điều đó tạo ra những phụ thuộc giữa chúng (gọi là dependency). Khi module/class cấp thấp thay đổi, module/class cấp cao phải thay đổi theo. Một thay đổi sẽ kéo theo hàng loạt thay đổi, giảm khả năng bảo trì của code. Nếu bạn đang làm trên một dự án lơn thì việc thay đổi sẽ là điều kinh khủng đối với bạn (bạn sẽ sợ sửa cái này ảnh hưởng đến cái khác vì chúng đang có 1 sự phụ thuộc lẫn nhau mà).
Vậy nếu tuân theo Dependendy Inversion principle, các module cùng phụ thuộc vào 1 interface không đổi. Ta có thể dễ dàng thay thế, sửa đổi module cấp thấp mà không ảnh hưởng gì tới module cấp cao.
Mình phải công nhận là lý thuyết về thằng DI hơi khó tiêu, bạn cần phải đọc nhiều nguồn khác nhau bao gồm tiếng anh và tiếng việt để không bị bỏ xót và nhầm lẫn thông tin.
Bây giờ, mình có project đơn giản là đọc và hiển thị thông tin từ Database. Chúng ta sẽ cùng xem và so sánh giữa cách viết thông thường và cách viết sử dụng Dependency Injection để hiểu rõ hơn nhé.
Nhìn hình trên, Tôi giả sử rằng lúc ban đầu ứng dụng của chúng ta chỉ cần lấy thông tin từ SQL database và hiện thị. vơi làm thông thường, chúng ta sẽ bắt đầu viết class GetMessageFromDatabase. hàm Main sẽ gọi class DisplayMessage và class DisplayMessage cần khởi tạo class GetMessageFromDatabase để lấy thông tin từ Database. Vài tháng sau, chúng ta nhận được yêu cầu từ khách hàng là họ muốn lấy thông tin từ Database và XML file. Vậy là chúng ta lại viết thêm class GetMessageFromXML để lấy thông tin từ XML file. Sau đó vài tháng, khách hàng lại muốn lấy thêm thông tin từ Text file và chúng ta lại ngồi viết thêm class GetMessageFromText tương ứng.
Vấn đề phát sinh là mỗi lần thêm một datasource mới (database, xml, text file) chúng ta cần phải viết một class để lấy dữ liệu tương ứng, sau đó lại phải sửa class DisplayMessage để nó khởi tạo và lấy đúng datasource mình cần. Nếu là một hệ thống lơn thì việc thay đổi này sẽ là một vấn đề lớn và mang lại nhiều phiền toái.
Mục đích của chúng ta cần là viết code theo một cách mà khi cần thêm vào một nguồn dữ liệu mới, thì chỉ cần update lại lời gọi datasource ở hàm Main thôi. Chúng ta không cần thay đổi code ở class DisplayMessage để thích ứng với các loại datasource mới được thêm vào.
Code không dùng Dependency Injection:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
DisplayMessage dm = new DisplayMessage();
dm.ShowMessage();
}
}
public class DisplayMessage
{
GetMessageFromDatabase Gmd;
public DisplayMessage()
{
Gmd = new GetMessageFromDatabase();
}
public void ShowMessage()
{
Console.WriteLine(Gmd.GetMessage());
Console.ReadLine();
}
}
public class GetMessageFromDatabase
{
public string GetMessage()
{
//Pretend this comes from the database
return "Hi from database";
}
}
}
Mọi thứ OK, giả sử vài tháng sau chúng ta cần lấy nguồn dữ liệu từ XML dựa vào tham số ở hàm Main. Vậy chúng ta cần phải thêm class GetMessageFromXMLvào code của mình. Đồng thời chúng ta cần phải sửa lại một chút code ở hàm Main và class DisplayMessage. Bây giờ code của chúng ta sẽ như sau:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
DisplayMessage dm = new DisplayMessage(args[0].ToString());
dm.ShowMessage();
}
}
public class DisplayMessage
{
string source;
public DisplayMessage(string s)
{
source = s;
}
public void ShowMessage()
{
if (source.ToUpper() == "DATABASE")
{
GetMessageFromDatabase Gmd = new GetMessageFromDatabase();
Console.WriteLine(Gmd.GetMessage());
Console.ReadLine();
}
else if (source.ToUpper() == "XML")
{
GetMessageFromXML Gmx = new GetMessageFromXML();
Console.WriteLine(Gmx.GetMessage());
Console.ReadLine();
}
}
}
public class GetMessageFromDatabase
{
public string GetMessage()
{
//Pretend this comes from the database
return "Hi from database";
}
}
public class GetMessageFromXML
{
public string GetMessage()
{
//Pretend this comes from an XML file
return "Hi from XML";
}
}
}
Bây giờ giả sử vài tháng sau nữa chúng ta lại cần lấy dữ liệu từ file Text dựa vào tham số truyền vào ở hàm Main. Giờ mình làm gì đây? viết thêm class GetMessageFromTextFile, rồi sửa lại code của class DisplayMessage nửa hả?
Bạn có thấy sự phụ thuộc của class DisplayMessage khi thực thi thế nào chưa? Đó là nó phải thay đổi dựa vào nguồn dữ liệu được lấy.
Inversion of Control cố gắng làm cho class DisplayMessage và các class dữ liệu lấy ra hoàn toàn độc lập với nhau. Inversion of Control (IoC) thường được thực thi bằng việc áp dụng Dependency Injection (DI) như mình đã có nhắc ở phần định nghĩa.
Bây giờ chúng ta sẽ xem đoạn code trên dược áp dụng DI vào thì nó sẽ như thế nào nhé.
Code dùng Dependency Injection:
Trong đoạn code bên dưới tôi sẽ dùng 1 trong 3 loại Dependency Injection đó là Constructor Injection.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ConsoleApplication1
{
public interface IGetData
{
string GetMessage();
}
class Program
{
static void Main(string[] args)
{
IGetData IG;
string source = args[0].ToString();
if (source.ToUpper() == "DATABASE")
{
IG = new GetMessageFromDatabase();
}
else if (source.ToUpper() == "XML")
{
IG = new GetMessageFromXML();
}
else if (source.ToUpper() == "TEXT")
{
IG = new GetMessageFromTextFile();
}
else
{
IG = new GetMessageFromDatabase();//default set to database
}
DisplayMessage dm = new DisplayMessage(IG);
dm.ShowMessage();
}
}
public class DisplayMessage
{
IGetData IGLocal;
public DisplayMessage(IGetData IG)
{
IGLocal = IG;
}
public void ShowMessage()
{
Console.WriteLine(IGLocal.GetMessage());
}
}
public class GetMessageFromDatabase : IGetData
{
public string GetMessage()
{
//Pretend this comes from the database
return "Hi from database";
}
}
public class GetMessageFromXML : IGetData
{
public string GetMessage()
{
//Pretend this comes from an XML file
return "Hi from XML";
}
}
public class GetMessageFromTextFile : IGetData
{
public string GetMessage()
{
//Pretend this comes from an Text file
return "Hi from Text file";
}
}
}
Như bạn thấy ở ví dụ trên, việc tiêm (injecting) vào các phụ thuộc (dependencies) thông qua constructor (), Tôi đã tách class DisplayMessage và các class lấy dữ liệu (ex: class GetMessageFromDatabase ,…. ). Tôi có thể thêm nhiều class mới để lấy data nêu tôi muốn mà không cần phải sửa lại class DisplayMessage, miễn sao những class đó phải được kế thừa (inherit) từ interface IGetData. Nghĩa là, mọi thứ ở đây sẽ phụ thuộc vào chỉ 1 Interface. Đây đều chúng ta mong muốn (giảm được sự phụ thuộc – reduce dependencies ).
Hy vọng sẽ giúp bạn nắm được cơ bản về khái niệm và cách sử dụng Dependency Injection.
Luôn có hai dạng lập trình viên, một dạng luôn nắm vững lý thuyết, dạng còn lại thì không.
Những người nắm vững lý thuyết thì luôn có năng suất làm việc cao hơn hẳn những người không học lý thuyết, vì không phải tốn thời gian để thử sai (trial and error), cũng không cần tốn thời gian tra cứu lại kiến thức.
Một ví dụ đơn giản về CSS, chúng ta có class .gift-image có thuộc tính top = 10px, và chúng ta muốn class này có thuộc tính top = 0 trên các thiết bị có màn hình nhỏ hơn 600px:
Bài viết được sự cho phép của tác giả Tô Thị Vân Anh
Không biết viết mở đầu như thế nào, thôi thì đi thẳng vào vấn đề chính luôn cho nhanh. Bây giờ nếu muốn thực hiện tự động download file từ một trang web nào đó bằng Selenium thì chúng ta sẽ phải làm những gì và như thế nào?
Đầu tiên mình sẽ đưa ra các bước mô phỏng được thực hiện trên trình duyệt Firefox như thế này nhé:
1. Mở trình duyệt Firefox và đi tới link có chứa thông tin file cần tải xuống
2. Nếu khi mở link trang web ra mà đã có chứa file cần download ở đó luôn rồi thì sang bước tiếp theo. Hoặc chưa có thì các bạn có thể thực hiện click vào menu nào đó để đi đến trang có thông tin download được là được nhé.
3. Thực hiện click vào link hoặc button để tải file xuống.
4. Lúc này, có 1 cửa sổ của hệ thống hiển thị ra có hỏi bạn là bạn muốn mở file này hay muốn lưu file này. Rất tiếc là bạn không thể sử dụng Selenium để thực hiện lựa chọn nào đó được, vì thế sẽ phải tìm cách xử lý cái popup này.
5. Cuối cùng, chờ file tải xong và đóng trình duyệt.
Thực tế thì chúng ta vẫn làm như vậy, còn để biến các bước này vào trong code và để nó làm được các công việc kia thì sẽ cần làm gì? Cũng rất đơn giản thôi.
Không tính các bước râu ria, không liên quan lắm đến chủ đề bài viết thì các bước cơ bản sẽ như sau:
1. Khởi tạo một profile cho FirefoxProfile.
FirefoxProfile profile=new FirefoxProfile();
2. Set Preference cho profile đó – Các preference cho từng loại file mà bạn muốn tải xuống, (có thể là file .Zip, .docx, .elsx, .pdf … ) tùy từng loại file mà bạn sẽ cần có các preference tương ứng. Và bạn cũng có thể lựa chọn thêm các Preference khác để có các tùy chọn cài đặt tương ứng, như mình đã giải thích ở bài trước. Ví dụ:
//set = 2 để lưu file vào một thư mục cụ thể nào đó trong máy tính của
profile.setPreference("browser.download.folderList", 2);
//Giá trị = false, không mở cửa sổ khi download
profile.setPreference("browser.download.manager.showWhenStarting", false);
// Set đường dẫn lưu file xuống máy tính
profile.setPreference("browser.download.dir",
"D:\\AnhTo\\Draft\\DownloadFile");
// Ở đây mình truyền vào các loại file liên quan đến bộ office thì nó sẽ không hỏi, mà lưu luôn xuống máy.
profile.setPreference("browser.helperApps.neverAsk.saveToDisk",
"text/csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
3. Khởi tạo trình duyệt với profile đã tạo:
WebDriver driver=new FirefoxDriver(profile);
4. Đi đến link trang web có thông tin file cần tải xuống:
Chào các bạn, kể từ khi công nghệ ảo hóa ra đời thì nó đã giúp chúng ta rất nhiều trong việc giảm thiểu chi phí đầu tư cho các thiết bị cơ sở hạ tầng, kiểm thử phần mềm và nhiều những ưu điểm tuyệt vời khác.
Đơn cử như việc bạn có thể tạo ra một hoặc nhiều máy tính ảo chạy trên một máy tính thật, mà chức năng của các máy ảo đó tương tự như máy thật. Và tất nhiên, các máy ảo này khi chạy thì cũng sẽ chiếm tài nguyên phần cứng của máy thật.
Hiện nay có rất nhiều công cụ hỗ trợ việc ảo hóa như vậy. Tiêu biểu nhất có thể kể đến như: VirtualBox, VMware, Parallels… Trong số này có VirtualBox là miễn phí còn lại hầu như đều phải trả phí.
Để tìm hiểu kỹ hơn về các phần mềm này, và hiểu hơn về tác dụng của phần mềm ảo hóa thì bạn có thể tham khảo các bài viết sau:
Trong bài viết này mình sẽ hướng dẫn các bạn cách cài đặt VMware trên Ubuntu (một trong những phần mềm tạo máy tính ảo tốt nhất và phổ biến nhất hiện nay). Ok, giờ thì bắt đầu thôi nào !
Cài đặt VMware Workstation trên Ubuntu
+ Bước 1: Đầu tiên, các bạn hãy truy cập vào đường link bên dưới để download file cài đặt phần mềm VMware về, các bạn lưu ý chọn đúng phiên bản cho hệ điều hành Linux nha.
NOTE: Các bạn có thể đổi tên tùy ý nha. Bạn có thể đổi tên file này cho dễ gõ lệnh hơn nhé. Ví dụ abc.bundle. Còn ở đây mình giữ nguyên tên file nhé !
+ Bước 4: Tiếp theo các bạn chạy lệnh sau:
sudo bash <filename> như hình bên dưới và nhấn Enter..
Áp dụng vào ví dụ này là: sudo bash VMware-Workstation-Full-16.1.0-17198959.x86_64.bundle
Nếu sau khi chạy 100% mà hiện lên thông báo Installation was successful như hình bên dưới thì tức là bạn đã cài đặt thành công rồi nhé.
+ Bước 5: Sau đó các bạn vào kho ứng dụng đã cài đặt, tìm kiếm với từ khóa VM thì kết quả sẽ xuất hiện như hình bên dưới. Các bạn bấm vào VMware Workstation để bắt đầu một số công việc cấu hình.
Ở bước này các bạn tích vào I accept terms in the license agreement => sau đó bấm Next để tiếp tục.
NOTE: Ở đây các bạn phải cuộn hết cái License Agreement để đồng ý với điều khoản của họ thì mới bấm Next được nha. Để xác nhận là bạn đã đọc hết rồi ấy mà 🙂
+ Bước 6: Tiếp theo các bạn cứ chọn như trong hình => rồi bấm Next thôi.
Tiếp tục chọn theo như hình bên dưới rồi bấm Next.
+ Bước 7: Ở bước này, nếu có yêu cầu quyền quản trị thì bạn nhập mật khẩu máy khi các bạn Ubuntu hoặc các hệ điều hành tương ứng.
=> Sau đó bấm Enter hoặc bấm vào Authentication để bắt đầu xác nhận.
Và đây là giao diện của phần mềm VMware Workstation trên Ubuntu. Vì VMware Workstation là phiên bản trả phí nên bạn chỉ có quyền dùng thử 30 ngày, tính từ ngày cài đặt.
Sau đó, nếu bạn muốn dùng tiếp bạn phải mua bản quyền thì mới có thể tiếp tục sử dụng được.
Mình nghĩ 30 ngày là khoảng thời gian đủ để bạn trải nghiệm và đưa ra quyết định có nên mua thêm hay không. Khi mua bạn sẽ được cấp key và bạn sẽ dùng key đó để sử dụng phần mềm.
GỢI Ý: Bạn có thể sử dụng thẻ MasterCard ảo để thanh toán Quốc tế một cách dễ dàng.
Lời Kết
Vậy là trong bài viết mình đã hướng dẫn các bạn cách cài đặt VMware Workstation trên hệ điều hành Ubuntu phiên bản 20.04 rồi ha. Các phiên bản mới hơn thì các bạn cũng làm hoàn toàn tương tự vậy thôi, không khác gì cả.
Trong các bài viết tiếp theo mình sẽ hướng dẫn các bạn cách thiết lập cũng như cài đặt máy ảo bằng cách sử dụng VMware Workstation. Hẹn gặp lại các bạn trong các bài viết tiếp theo nha !
Trong ví dụ này mình sẽ có input là một tấm ảnh chụp từ màn hình mobile, kết quả output mong muốn sẽ là nội dung chữ trên bức ảnh đó và kiểm tra lại để đảm bảo trên ảnh có chứa những nội dung chữ mình mong muốn.
Optical character recognition (also optical character reader, OCR) is the mechanical or electronic conversion of images of typed, handwritten or printed text into machine-encoded text, whether from a scanned document, a photo of a document, a scene-photo (for example the text on signs and billboards in a landscape photo) or from subtitle text superimposed on an image.
OCR Input (PNG file): Screenshot_2017-03-15-14-57-02.png OCR Output (text): The text “Logs saved to sdcard/SysLog/2017-03-15_14.56.59”
Các bước thực hiện:
1. Bạn có thể tạo một project mới hoặc tải project mẫu mình đã upload tại đây.
2. Import thư viện Tess4J và các thư viên liên quan (có thể import hết thư viện trong thư mục “tesslibs” mình để trong project).
3. Đặt thư mục “tessdata” (data dùng để nhận diện ký tự) và hình ảnh cần test ra thư mục root, sau này bạn có thể thay đổi đường dẫn đến hình ảnh cũng được.
Sau khi có đủ thư viện, đặt thư mục tessdata và hình ảnh input đúng vị trí, chúng ta tạo một class mới để bắt đầu. Đây là một đoạn code ngắn để thực hiện những yêu cầu ban đầu:
1. Đọc chữ từ screenshot.
2. In tất cả các chữ có trên ảnh ra.
3. Kiểm tra những chữ đã xuất ra được có chứa các nội dung mình cần hay không.
public static void main(String[] args) {
// Set the image source path
String imagePath = “Screenshot_2017-03-15-14-57-02.png”;
File image = new File(imagePath);
// JNA Interface Mapping
ITesseract instance = new Tesseract();
try {
String Textresult = instance.doOCR(image);
// Print out the text results
System.out.println(Textresult);
// Verify to check the text is displayed
System.out.println(“**************”);
String ExpectedText = “Logs saved to sdcard/SysLog/”;
if (Textresult.contains(ExpectedText)) {
System.out.println(“Passed. The expected text is displayed!”);
} else {
System.out.println(“Failed. The text was not found!”);
}
} catch (Exception e) {
System.out.println(“Failed. Could not read the text from image file!”);
}
}
}
Nội dung chúng ta có được:
Cách này khá hữu ích khi làm automation, đôi lúc có những thành phần không thể getText do không lấy được locators, dùng cách này thì chúng ta sẽ không cần locators, ngoài ra còn ứng dụng trong các trường hợp khác như đọc nội dung PDF, tài liệu scanned. Các bạn thử nhé!
HTML Web Storage được tạo ra để lưu trữ data của user ở dưới local giống như cookie.
HTML Web Storage và Cookie khác nhau như thế nào ? Tại sao nên dùng HTML Web Storage ?
Cookie là một đoạn văn bản ghi thông tin được tạo ra và lưu trên trình duyệt của máy người dùng. Cookie thường được tạo ra khi người dùng truy cập một website. Cookie sẽ ghi nhớ những thông tin như tên đăng nhập, mật khẩu, các tuỳ chọn do người dùng lựa chọn đi kèm… Các thông tin này được lưu trong máy tính để nhận biết người dùng khi truy cập vào một trang web. Tuy vậy, cookie có một số khuyết điểm như:
Cookie luôn luôn gửi request tới web server vì vậy đối với các tệp lớn thì nó có thể tiêu tốn băng thông đáng kể.
Giới hạn của một cookie chỉ là 4 KB.
Người dùng có thể mở file chứa cookie và sửa nội dung trong đó.
Trong một số trường hợp người dùng disable cookie trên trình duyệt thì tính năng này sẽ bị vô hiệu hóa.
Có lẽ vì những khuyết điểm đó mà HTML Web Storage được sinh ra.
Ưu điểm của HTML Web Storage :
HTML Web Storage có thể lưu trữ một lượng data lớn từ 2MB tới 10MB. Giới hạn này phụ thuộc vào browser, protocol (HTTP hoặc HTTPS).
Web Storage an toàn hơn: người dúng khó mà có thể tìm ra file lưu Web Storage để sửa data. Tuy vậy thì chúng ta vẫn có thể sửa data Web Storage khi F12 trên trình duyệt.
Web Storage cũng lưu trữ ở dưới local nhưng nó không bao giờ được gửi tới web server vì vậy mà không ảnh hưởng tới băng thông.
Data được lưu trữ trên một trình duyệt nên không thể truy xuất trên trình duyệt khác.
Data được lưu trữ dưới dạng chuỗi JSON.
Web Storage là tính năng của HTML5 nhưng nó hỗ trợ đến cả những phiên bản trình duyệt cũ mà hiện tại ít ai dùng.
Ứng dụng của Web Storage
Dùng để lưu những data của user mà được sử dụng nhiều lần trên các phiên làm việc khác nhau (một phiên làm việc được tính là một lần đóng mở tab).
Dùng cho các ứng dụng SPA ( Single page application). Thông thường khi xử lí dữ liệu thao tác của user trên 1 page thì chúng ta lưu vào biến javascript. Còn nếu muốn share dữ liệu giữa các page thì có thể dùng Web Storage. Ví dụ lưu thông tin đăng nhập của user, lưu thông tin giỏ hàng, …
Không dùng Web Storage để lưu các dữ liệu quan trọng như mật khẩu người dùng, …
Làm việc với web storage
Có 2 loại storage:
localStorage – dữ liệu được lưu mãi mãi kể cả khi đóng tab hoặc đóng trình duyêt. Dữ liệu chỉ mất khi clear history.
sessionStorage – dữ liệu được lưu trong 1 phiên làm việc. Dữ liệu mất khi người dùng đóng tab.
Kiểm tra trình duyệt có hỗ trợ storage không
if (Storage) {
// Storage is supported!
} else {
// No support. Use a fallback such as browser cookies or store on the server.
}
Dữ liệu được lưu dưới dạng key:value. Tùy vào dữ liệu mà chúng ta có các cách lưu khác nhau. Với dữ liệu đơn giản thì lưu key value như một chuỗi đơn giản. Với dữ liệu phức tạp thì nên lưu value dưới dạng chuỗi JSON, khi lưu dữ liệu dùng JSON.stringify() còn khí lấy dữ liệu dùng JSON.parse(). Vì dữ liệu được lưu dưới dạng string nên khi lấy ra có thể cần phải xử lí bằng cách dùng các hàm parseInt(), parseFloat(), …
Lấy Data
localStorage.getItem(‘name’);
localStorage.name
localStorage[‘name’]
Xóa Data
localStorage.removeItem(‘name’);
localStorage.clear();
Event
window.addEventListener(“storage”, function(event) {
var key = event.key;
var newValue = event.newValue;
var oldValue = event.oldValue;
var url = event.url;
var storageArea = event.storageArea;
// handle the event
});
Các Interactive Game bên trong trợ lý ảo Google Assistant được xây dựng như thế nào và Google đã ứng dụng những công nghệ gì bên trong. Bài viết sẽ giúp bạn giải đáp thắc mắc trên đồng thời hướng dẫn cách xây dựng một Interactive Game cho trợ lý ảo Google.
Nội dung này được trình bày bởi Ms. Mandy Chan – Developer Advocate @Google. Qua bài chia sẻ, bạn sẽ hiểu thêm về:
Khái niệm Conversational Action (tạm dịch: Hành động hội thoại)
Khái niệm Interactive Canvas API
Cách để xây dựng một full-screen interactive game trên Android với JavaScript
Tại sao bạn nên xây dựng Interactive Game trong Google Assistant
Hiện tại, Google Assistant đang hỗ trợ hơn 19 ngôn ngữ và hoạt động trên 80 quốc gia. Dù người dùng mục tiêu của bạn ở bất kỳ đâu, Google Assistant đều có thể giúp đỡ họ thông qua hơn 1 tỷ thiết bị đang sử dụng ứng dụng này. Bạn có thể tiếp cận họ theo nhiều cách khác nhau thông qua Google Assistant.
Người dùng hiện tại đang sử dụng các thiết bị thông minh theo nhiều cách khác nhau. Theo nghiên cứu được thực hiện bởi Adobe, phần lớn người dùng sử dụng các thiết bị thông minh nhằm phục vụ cho nhu cầu âm nhạc và cho các hoạt động thường nhật, chẳng hạn như cập nhật thông tin thời tiết. Đồng thời, cũng có một lượng lớn người dùng sử dụng các thiết bị để giải trí, chơi game.
Trong số những người sử dụng Google Assistant, có 55% người dùng sử dụng cô trợ lý ảo này chỉ để hỏi những câu hỏi vui; có 20% thì sử dụng để chơi các trò chơi bên trong ứng dụng Google Assistant (*Google gọi đây là Interactive Game).
Giờ hãy cùng đi vào nội dung chi tiết.
Interactive Game là gì?
Smart display lần đầu ra mắt vào năm 2019. Trong suốt năm đó, số lượng người dùng tương tác với các thiết bị smart display đã tăng lên gấp 4 lần.
Từ hai năm trước, chúng ta đã thấy được sức hút của các trò chơi bằng giọng nói (voice game) bên trong trợ lý ảo Google Assistant.
Các lập trình viên đã tạo ra những ứng dụng mang tính tương tác cao như thế bằng cách tận dụng thứ mà Google Assistant làm tốt nhất. Đó là “cô ấy” có thể hiểu được giọng nói và ngôn ngữ của người dùng.
Kết quả là voice game đã rất thành công trong việc tạo ra một trải nghiệm tốt cho người dùng trong một môi trường chỉ có mỗi audio.
Ngày nay, nhờ sự phổ biến của smart display, nhiều lập trình viên cũng bắt đầu xây dựng các trò chơi có thể tương tác cả giọng nói lẫn hình ảnh, chẳng hạn như các tựa game: Guess the Drawing, Trivia Crack, Who wants to be a Millionaire,…
Với Guess the Drawing, bạn có thể chơi game với hàng trăm bức ảnh động đầy hấp dẫn ở chế độ xem chậm. Trong khi đó, nhờ Trivia Crack, bạn có thể chơi game mà vẫn có thêm kiến thức với bộ câu hỏi và câu trả lời về các chủ đề như lịch sử, mỹ thuật, giải trí và khoa học. Với Who wants to be a Millionaire, người tham gia sẽ trả lời một bộ câu hỏi để chinh phục mức giải thưởng cao nhất là 1 triệu USD, đồng thời bạn cũng có thể sử dụng các quyền trợ giúp để tham gia cuộc chơi này.
Và đây là một tựa game khác: “Are You Feeling Lucky?”
Interactive Game này sử dụng cả lợi thế của việc hiển thị trên màn hình lẫn tương tác bằng giọng nói của Google Assistant.
Nhiều người chơi sẽ cùng nhau tham gia trả lời các câu hỏi đơn giản được đưa ra và trên màn hình sẽ hiển thị các avatar khác nhau để giúp phân biệt và theo dõi xem đang đến lượt của người chơi nào.
Những hình ảnh động này có thể được tạo ra là nhờ một thứ được gọi là Interactive Canvas.
Interactive Canvas là một API cho phép các lập trình viên tạo ra fluid animation (một loại hiệu ứng chuyển động) và customize trò chơi của họ bằng cách sử dụng các công nghệ quen thuộc như HTML, CSS, JavaScript và Web Assembly.
Nhờ kết hợp giữa các khả năng hiển thị (visual capabilities) cùng với khả năng hiểu biết ngôn ngữ tự nhiên và nhận diện giọng nói của Google, các lập trình viên giờ đây có thể thỏa sức sáng tạo của bản thân thông qua việc xây dựng các Interactive Game trên Google Assistant với cả các hiệu ứng hình ảnh, chuyển động lẫn âm thanh.
Interactive Canvas hoạt động như thế nào?
Trước khi đào sâu vào Interactive Canvas, hãy cùng tìm hiểu về cách vận hành (diagram) của một Hành động (action) diễn ra với action builder/ SDK và một web service.
Lifecycle của một Conversational Action
Web service có thể được sử dụng để cung cấp dynamic prompts và làm cho API gọi vào hoặc kiểm tra bên trong database.
Web service yêu cầu thiết bị tìm nạp (fetch) web app
Khi người dùng nói chuyện với thiết bị, giả dụ: “Ok Google, talk to my conversational action”, thiết bị sẽ gửi đoạn audio những gì người dùng đã nói tới action. Action ngay sau đó tiến hành xử lý request trả về một prompt web service của bạn. Nó bao gồm các dữ liệu như canvas, web app và các metadata khác.
Khi thiết bị nhận được những thứ này, nó sẽ khởi tạo web app của bạn.
Bên trong web app, Interactive Canvas API được khởi tạo và sau đó website được render trên thiết bị.
Bởi do người dùng tương tác với action của bạn, bạn có thể update và request dữ liệu giữa server và bên client. Đây cũng là một high-level và nó có thể diễn ra.
Code: Fulfillment và Web App logic
Hiện tại, Canvas đang hỗ trợ trên các thiết bị smart display và điện thoại android. Điều này có nghĩa là trước khi bạn gửi đi một canvas response, hãy kiểm tra thiết bị của phía client xem nó có hỗ trợ canvas không. Chúng ta thực hiện nó bằng cách kiểm tra trên thiết bị (device capabilities) xem có bao gồm interactive canvas không, bằng cách tìm:
Đến phần tải lên canvas web app, bạn sẽ cần sử dụng một lớp (class) canvas mới, được cung cấp bởi node.js trong thư viện của bên phía client. Class này có 2 thuộc tính (properties) gồm: url và data.
Hãy luôn nhớ rằng lần đầu tiên mà bạn gửi lại canvas response, NÓ BUỘC PHẢI CÓ MỘT URL. Nó sẽ giúp cho thiết bị biết đâu là nơi để tìm nạp (fetch) web app.
Hãy luôn nhớ rằng lần đầu tiên mà bạn gửi lại canvas response, nó buộc phải có một URL.
Một điều cần lưu ý nữa là hãy đảm bảo URL đấy là https để chắc chắn hoạt động một cách bảo mật.
Điều gì sẽ xảy ra ở phía client sau khi nhận được canvas response?
Web app là 1 trang web được render trên thiết bị.
Nó được build chủ yếu bằng hai công nghệ web truyền thống là HTML và JavaScript.
Khi web app được tải thì cũng đồng thời khởi tạo Canvas JavaScript library. Đây là một client-side library vận hành trên thiết bị. Đừng nhầm lẫn nó với server-side node.js client library.
Canvas JavaScript xử lý response từ phía server và nó cũng tạo ra các request tới thiết bị.
Một lưu ý nhỏ đó là bạn cũng có thể build web app bằng cách sử dụng các JavaScript framework phổ biến như React hay tất cả các libraries như pixie.js.
Thêm nữa, bạn nên sử dụng Single Page Application (SPA) vì nó giúp tránh được tình trạng nhấp nháy như website và đảm bảo một UI mượt mà cho người dùng mobile.
Loading process trên thiết bị là một phần của web app. Interactive Canvas Library được nhập vào và được khởi tạo. Sau khi đã được khởi tạo, bạn có thể truy cập vào một thể hiện (instance) của interactive canvas – thứ cho phép bạn kiểm soát canvas response thông qua việc sử dụng on update callback. Gửi các request tới server bằng cách sử dụng the send text query method. Interactive canvas instance cũng cho phép bạn đăng ký callbacks thông qua ready method.
Việc gửi requests từ client đến server được thực hiện như thế nào?
Chúng ta đã trao đổi về cách để kiểm soát canvas response từ phía server của client. Vậy còn về việc gửi requests từ client đến server? Điều này có thể được thực hiện bằng cách gọi send text query method trên interactive canvas object.
SendTextQuery mang một StringValue – một cụm từ (phrase) mà người dùng sẽ nói một cách khác là để trigger chính xác intent. Đây là một method mạnh mẽ để giao tiếp với server và chúng ta sẽ cùng nhau xem qua một vài dòng code để dễ hình dung hơn.
Các nguyên tắc khi thiết kế Interactive Game (Design Principles)
Chúng ta đã làm việc với nhau về Interactive Canvas là gì, cách mà client và server tương tác với nhau và cách chúng ta duy trì trạng thái (state) giữa server và client. Giờ hãy cùng tìm hiểu về design principles ở phần xây dựng Interactive Game cho Google Assistant.
Chuyển tiếp giọng nói
Khi build một Interactive Game, hãy đảm bảo rằng nó mang tính đối thoại (conversational) thay vì ở dạng lệnh (command-based). Hãy nghĩ về những điều này từ ngay khi trò chơi được bắt đầu.
Tận dụng hiệu ứng hình ảnh
Việc tận dụng hình ảnh khi xây dựng các trò chơi cho smart display rất quan trọng. Hãy đảm bảo rằng:
Bạn mang đến người dùng những dấu hiệu trực quan (visual cue).
Làm nổi bật các item có thể tương tác trên màn hình.
Sử dụng các hình ảnh chuyển động để hiển thị cho người dùng các điểm chính cần quan tâm (point of interest).
Tối ưu hiển thị
Tối ưu hóa hiển thị và thiết kế giao diện cũng là một phần quan trọng. Sử dụng kích thước phông chữ tối thiểu là 32pt cho văn bản chính như tiêu đề và kích thước 24pt cho văn bản phụ như đoạn mô tả hay các đoạn văn bổ sung được xem là lựa chọn hợp lý.
Chế độ nhiều người chơi cục bộ
Đối với các trò chơi nhiều người chơi, tận dụng lợi thế của việc có thể hiển thị để thể hiện các lượt chơi của các người chơi bằng cách sử dụng các icon khác nhau.
Xử lý lỗi
Cũng giống như những công việc khác, hãy nhớ kiểm soát các lỗi trong trò chơi một cách khéo léo. Một mẹo để làm việc này đó là sử dụng các gợi ý ở dạng hình ảnh / văn bản hay âm thanh rõ ràng khi người dùng gặp rắc rối trong trò chơi.
Tận dụng SSML và thư viện âm thanh được cung cấp bởi Google
Để cải thiện trò chơi hơn, bạn có thể tận dụng thêm công nghệ SSML và thư viện âm thanh của Google. SSML hay còn được gọi là Speech Synthesis Markup Language. Nếu bạn là một web developer thì có thể hiểu SSML cũng tương tự CSS. Với CSS, bạn có thể thiết kế style cho văn bản thì SSML sẽ giúp bạn thiết kế style cho giọng nói (voice) bằng cách thay đổi âm lượng, cao độ giọng nói, thậm chí thêm vào các quãng ngắt nghỉ giữa các từ. Đồng thời, SSML cũng cho phép bạn thêm vào phân lớp (layering) của âm thanh vào background.
World Games được sáng tạo dưới dạng các câu hỏi đố và người chơi có thể trả lời trực tiếp bằng giọng nói.
Multiplayer Games là các loại game cho phép nhiều người chơi cùng lúc hiện cũng đang được phát triển khá phổ biến.
Persistent Games cho phép các người chơi chơi nối tiếp nhau một cách liên tục và được xây dựng dựa trên tình hình thực tế của mỗi khu vực, mỗi quốc gia.
Trên đây là giới thiệu một cách tổng quan về tất cả những gì có thể làm để phát triển game với Google Assistant. Hãy tự cởi bỏ giới hạn của bản thân và sáng tạo thêm thật nhiều những games hấp dẫn nhất.
Bài viết được trích dẫn từ phần trình bày của cô Mandy Chan – Developer Advocate @Google tại sự kiện Vietnam Web Summit 2020 LIVE do TopDev tổ chức
Bài viết được sự cho phép của tác giả Trần Anh Tuấn
Chắc hẳn nhiều bạn trong khi học hay khi đi làm ở công ty sau khi vượt qua ngưỡng newbie về HTML hay là CSS rồi. Trong quá trình code CSS sẽ thấy rằng sao có nhiều người họ code cái template đó nhanh thế nhỉ ?
Sao mình cũng dùng CSS như họ mà, hay là mình gõ chậm nhỉ, hay là tư duy phân tích yếu. Thế là mò mẫm trên mạng và thấy người ta bảo dùng SASS code lẹ lắm, chẳng biết SASS là cái gì thế là vội vàng ngồi nghiên cứu về nó.
Rồi phát hiện ra rằng CSS viết lồng nhau được luôn hay thật. Thế là cắm đầu cắm cổ tập viết lồng nhau bao nhanh luôn. Nhưng kết quả vẫn đâu vào đấy vẫn thấy chưa nhanh lắm, thế là tiếp tục hỏi cộng đồng mạng, và họ bảo dùng Mixins code cho nhanh
Và thấy dòng code trên rồi tự hỏi@mixin là cái gì thế nhỉ ? Rồi lại tiếp tục vọc tiếp và thấy rằng ah thì ra @mixin là như vậy nè nó giúp cho chúng ta có thể tái sử dụng và tận dụng code một cách triệt để, để đỡ phải gõ đi gõ lại một dòng code hoài, tiết kiệm thời gian và hoàn thành sớm nữa.
Vậy Mixins thực chất là gì ? Và làm sao để tạo một Mixin để sử dụng cho hiệu quả trong quá trình code trang web đây ?
Hiểu được nhu cầu của các bạn nên hôm nay mình viết bài này để chúng ta sẽ cùng nhau tìm hiểu về Mixins trong SASS là gì và một số hàm Mixins thông dụng trong SASS mà chúng ta nên biết để việc code được nhanh hơn nhiều nhé.
# Mixins là cái gì ?
Nếu các bạn làm lập trình thì chắc hẳn cũng biết đến function nhỉ ? Mixins cũng tương tự như vậy đấy. Nó cho phép chúng ta sử dụng đi sử dụng lại ở nơi nào mà chúng ta muốn hoặc ta có thể tùy chỉnh tham số truyền vào. Mục đích là tiết kiệm code, thời gian và đem lại hiệu quả cao.
Như đã nói Mixins cũng tương tự như function nên Mixins có 2 loại đó chính là
Loại có tham số
DÀNH CHO BẠN:
Mình có khoá học HTML CSS từ cơ bản tới nâng cao cho người mới, nếu bạn quan tâm thì bạn có thể học thử miễn phí bằng việc nhấn vào đây nha.
@mixin mixin_name(param1, param2...){
// code here
}
Loại không có tham số
@mixin mixin_name(){
// code here
}
Để gọi một Mixin ta có cú pháp như sau: @include mixin_name. Ví dụ
@mixin menulink(){
ul {
li {
display: inline-block;
a {
color: blue;
}
}
}
}
@include menulink;
Thì nó sẽ render như thế này
ul li {
display: inline-block;
}
ul li a {
color: blue;
}
# Một số hàm Mixins hay và thông dụng
Sau đây mình xin chia sẻ một số Mixins mà mình đã từng làm cũng như học hỏi được từ những pro khác trên mạng. Mình sẽ viết ra đây kèm giải thích cho các bạn nhé.
@mixin size
Cho phép chúng ta thiết lập độ rộng và chiều cao của một phần tử bất kỳ khi dùng.
Ví dụ mình muốn cho một class .box nào đó có chiều cao 100px và chiều rộng 100px mình sẽ dùng như thế này: @include size(100px), hàm ở trên mình set giá trị $height là mặc định nếu không truyền tham số thứ 2 thì nó sẽ bằng chiều rộng
Còn các bạn muốn set chiều rộng và chiều cao khác nhau thì các bạn có thể dùng như thế này: @include size(100px, 200px). Từ đó ta sẽ có kết quả
Các bạn có thấy rằng giá trị mặc định của $inset nếu không truyền vào thì sẽ là false nên câu điều kiện @if sẽ chạy đoạn code ở dưới và ngược lại nếu là true thì sẽ chạy đoạn code trên. Sử dụng if else giống trong lập trình luôn.
.box{
@include box-shadow(10px,10px,20px,0px,true);
}
// result
.box {
box-shadow: inset 10px 10px 20px 0px;
}
@mixin transform
Cho phép tạo thuộc tính transform nhanh chóng dựa vào tham số chúng ta truyền vào
Cho phép tạo border-radius cho phần tử chúng ta muốn, có thể set toàn bộ radius như nhau hoặc set từng góc có độ bo góc khác nhau nhé. Như ở dưới mình set các tham số tương ứng cho các góc.
Nếu mình chỉ điền vào một tham số đầu tiên thôi thì tất cả các tham số kia đều là tham số đầu từ đó ta có border-radius 4 góc đều như nhau. Tuy nhiên nếu các bạn muốn set riêng thì các bạn có thể dùng như thế này
Các bạn có thể tối ưu hơn dựa vào những giải pháp khác nhé. Ở đây mình chỉ code đơn giản thôi, các bạn có thể suy nghĩ và làm nó tốt hơn nà
@mixin centerAbsolute
Khi các bạn code website sẽ gặp các trường hợp muốn làm một phần tử nào đó center bằng việc sử dụng thuộc tính position: absolute kết hợp với thuộc tính transform: translate đúng không ?
Thì trong một trang web dài hay nhiều layout phức tạp chắc chắn sẽ dùng nhiều, nên để tối ưu cho việc phải code đi code lại ta sẽ tạo ra một Mixin để sử dụng nó được nhiều nơi nhé
Giả sử các bạn muốn phần tử .box đều center hàng dọc và ngang thì các bạn truyền tham số vào là both còn nếu chỉ muốn center hàng dọc thôi thì dùng top hoặc ngược lại muốn center theo chiều ngang thôi thì dùng left
Ngoài ra còn có nhiều Mixins hay khác mà các bạn có thể viết thêm như là khi viết media queries để làm responsive hay là hiển thị flexbox chẳng hạn.
@mixin min/max-width
@mixin minWidth($breakpoint) {
@media only screen and (min-width: $breakpoint) { @content; }
}
@mixin maxWidth($breakpoint) {
@media only screen and (max-width: $breakpoint) { @content; }
}
Thay vì các bạn phải viết đi viết lại dòng @media only screen dài quá thì mình viết một Mixin như trên để tiết kiệm thời gian các bạn có thể dùng nó như sau
Với các tham số truyền vào thì bạn tự do tùy chỉnh flexbox cho một phần tử mà bạn muốn một cách nhanh nhất nhé.
.box{
@include flex(row, center, center, wrap);
}
//result
.box{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
Và còn còn rất nhiều Mixins hay và tuyệt vời hơn khác nữa, trong quá trình làm các bạn sẽ tự nhận ra nên viết những Mixins gì để tiết kiệm thời gian, nâng cao năng suất, giúp cho việc code trở nên khỏe hơn và mau hoàn thành hơn.
# Tạm kết
Hi vọng với những kiến thức về Mixins sẽ giúp ích cho các bạn phần nào trong quá trình code SASS được nhanh nhất nhé. Ngoài ra mình cũng tìm kiếm thêm trên Google và tìm được khá nhiều Mixins hay khác nữa mà các bạn có thể tham khảo tại đây hoặc tại đây nhé. Chúc các bạn một ngày tốt lành.
Bài viết được sự cho phép của tác giả Trần Hữu Cương
Cấu hình compiler cho Dev C++
Dev C++ là một IDE, một phần mềm dùng để soạn thảo/ lập trình ngôn ngữ C/C++.
Trong bộ cài Dev C++ có tích hợp sẵn trình compiler C/C++ là Boost C++, tuy nhiên trình compiler này khá cũ hoặc đơn giản là máy bạn đã có sẵn trình compiler C/C++ nên bỏ qua không cài Boost C++.
Trong trường hợp này bạn cần phải cấu hình lại trình compiler trên Dev C++ để có thể thực hiện compile, run file C/C++.
chúng ta vẫn còn non.
Đã định nói thêm cái gì đấy mà nghĩ mãi không nhớ ra là cái gì, thôi thì tạm thế đã nhé. Hehe
