Scrapy là một trình thu thập dữ liệu dựa trên Python có thể được sử dụng để trích xuất thông tin từ các trang web. Nó nhanh và đơn giản, và có thể điều hướng các trang giống như trình duyệt có thể. Nó là một trong những framework  mã nguồn mở tốt nhất dùng để crawl dữ liệu. (link)

Bước 1: Cài đặt

Ở đây chúng tôi sử dụng virtualenv để cài đặt scrapy. Điều này cho phép chúng tôi cài đặt scrapy mà không ảnh hưởng đến các mô-đun cài đặt hệ thống khác.

Tạo một thư mục chứa project crawler dữ liệu dùng để lưu trữ code và tạo một môi trường ảo trong đó.

mkdir crawlBlogArrow
cd crawlBlogArrow
virtualenv venv
. venv/bin/activate

Cài đặt scrapy

pip install scrapy

Kiểm tra xem nó đã hoạt động hay chưa. Màn hình dưới đây cho thấy phiên bản mà tôi đang sử dụng là 1.8.0

Bước 2: Tạo Project và sử dụng

2.1 Tạo Project

Để tạo 1 project scrapy ta sử dụng câu lệnh sau

scrapy startproject crawl

Đây là cấu trúc thư mục chúng ta vừa tạo thông qua Scrapy

crawl/
├── crawl                             # nơi chứa code của dự án
│   ├── init.py
│   ├── items.py                    # nơi định nghĩa các trường dữ liệu cần lưu vào db
│   ├── pipelines.py              # nơi xử lý các item trích xuất được và lưu vào db
│   ├── settings.py                # cấu hình thêm các phần mở rộng (middlewares) và các thông số cấu hình khác
│   └── spiders                     # thư mục chứa các spider
│       └── init.py
└── scrapy.cfg                      # file cấu hình về deploy và settings của project

2.2 Đặc tả dữ liệu

File items.py được sử dụng để khai báo metadata cho những dữ liệu mà chúng ta muốn scrape. Trong file này có class StackItem là class được kế thừa từ class Item của Scrapy. Trong class này đã định nghĩa trước một số đối tượng mà Scrapy cần dùng để scrape.

import scrapy

class StackItem(scrapy.Item):
    # define the fields for your item here like:
    # name = scrapy.Field()
    pass

Bây giờ, chúng ta sẽ thêm và những dữ liệu mà chúng ta cần

import scrapy

class StackItem(scrapy.Item):
    title = scrapy.Field()
    thumb = scrapy.Field()    
    content = scrapy.Field()    
    author = scrapy.Field()

2.3 Tạo spiders

Chúng ta sẽ tạo một  spider blogarrow.py trong thư mục spiders  đã được tạo ở trên. Thư mục này khá đặc biệt, bởi nó là nơi chúng ta đưa ra các chỉ định cho Scrapy biết chính xác chúng ta muốn thu thập dữ liệu gì. Trong thư mục này, bạn có thể định nghĩa các Spider khác nhau cho các trang Web khác nhau.

Bắt đầu bằng một class kế thừa từ class Spider của Scrapy và chúng ta sẽ thêm vào các thuộc tính cần thiết.

from scrapy import Spider

class CrawlerSpider(Spider):
    name = "crawler"
    allowed_domains = ["blog.arrow-tech.vn"]
    start_urls = [
        "https://blog.arrow-tech.vn/detect-labels-faces-and-landmarks-in-images-with-the-cloud-vision-api/",
    ]

Những thuộc tính ở đây khá dễ hiểu, chúng thể hiện ý nghĩa qua chính tên của mình. Nếu cần thêm thông tin, bạn có thể tham khảo ở đây:

• name định nghĩa tên của Spider.
• allowed_domains chứa URL gốc của trang Web bạn muốn scrape.
• start_urls là danh sách các URL để Spider bắt đầu quá trình scraping. Tất cả mọi dữ liệu sẽ được Spider download từ các URL ở trong start_urls này.

XPath selector

Một điều rất quan trọng, đó là Scrapy sử dụng XPath selector để trích xuất dữ liệu từ các trang Web. Nói một cách khác, đó là chúng ta có thể chọn lọc ra một thành phần chính xác trên một trang Web bằng cách sử dụng XPath.

Trích xuất dữ liệu

Chúng ta thực hiện trích xuất dữ liệu với đoạn code dưới đây

import scrapy
from scrapy import Spider
from crawl.items import CrawlItem

class CrawlerSpider(Spider):
    name = "crawler"
    allowed_domains = ["blog.arrow-tech.vn"]
    start_urls = [
        "https://blog.arrow-tech.vn/detect-labels-faces-and-landmarks-in-images-with-the-cloud-vision-api/",
    ]
    
    def parse(self, response):

        item = CrawlItem()
        item['title'] = response.xpath('//h1[@class="post-title u-fontSizeLargest u-md-fontSizeLarger"]/text()').extract()[0].strip()    
        thumb_link = "https://blog.arrow-tech.vn" + response.xpath('//img[@class="post-img u-block u-marginAuto"]/@src').extract()[0].strip()   
        item['thumb'] = thumb_link.split('/')[-1]
        yield scrapy.Request(thumb_link,callback=self.parse_img)
        item['author'] =  response.xpath('//a[@class="link link--underline u-fontWeightMedium u-textColorDarker"]/text()').extract()[0].strip() 
        item['content'] =  response.xpath('//div[@class="post-inner js-post-content"]').extract()[0].strip() 
        yield item


    def parse_img(self, response):
        with open("img/%s" % response.url.split('/')[-1], 'wb') as f:
            f.write(response.body)
    

    

• item = CrawlItem() Khởi tạo một mảng dữ liệu như đã đặc tả ở bên trên
• item['title'] = response.xpath('//h1[@class="post-title u-fontSizeLargest u-md-fontSizeLarger"]/text()').extract()[0].strip() Tìm kiếm thẻ h1 có class post-title u-fontSizeLargest u-md-fontSizeLarger và lấy text của nó text()
• thumb_link = "https://blog.arrow-tech.vn" + response.xpath('//img[@class="post-img u-block u-marginAuto"]/@src').extract()[0].strip()  Lấy thumb_link với img có class post-img u-block u-marginAuto
• item['thumb'] = thumb_link.split('/')[-1] Lấy trường thumb bằng các xữ lý biến thumb_link vừa lấy được ở trên
• yield scrapy.Request(thumb_link,callback=self.parse_img) Thực hiện download image thumb từ thumb_link

 Đoạn code dưới đây có chức năng lưu ảnh thumb vào máy của chúng ta (ở đây mình lưu trữ vào thư mục img cùng cấp với thư mục project)

def parse_img(self, response):
        with open("img/%s" % response.url.split('/')[-1], 'wb') as f:
            f.write(response.body)

• item['content'] =  response.xpath('//div[@class="post-inner js-post-content"]').extract()[0].strip() Lấy content với thẻ div có class là post-inner js-post-content

Sau khi đã thực hiện xong những bước trên, chạy lệnh crawl

Lệnh này sẽ lưu trữ kết quả crawl vào file result.json

scrapy crawl crawler -o result.json 

Bạn có thể clone ví dụ trên ở đây để dùng thử

phobrv/demo_use_scrapy

Demo use Scrapy to crawler website data. Contribute to phobrv/demo_use_scrapy development by creating an account on GitHub.

GitHubphobrv

Một ngày đẹp trời khách hàng yêu cầu hàng tháng phải có report về hoạt động của ssh user trên server. Loay hoay hết mấy hôm google search, cuối cùng tìm được em này, thấy cũng khá ngon , viết lên đây chia sẻ với a/e.

Vậy Audit là gì?

Đơn giản để hiểu, auditd là một thằng dịch vụ chạy ngầm (audit deamon) chịu trách nhiệm ghi lại tất cả hoạt động của hệ thống , người dùng ... Theo như google search thì có vẻ audit được tích hợp mặc định trên hầu Linux operating system.
Hầu hết thôi chứ không phải là tất cả, trong trường hợp mình phải tiến hành cài đặt :))

Cài đặt audit như thế nào?

• Bạn có thể google search với keyword Installing the Linux Audit System on .... Còn nếu không thì có thể tham khảo tại đây (Trong trường hợp này mình dùng Ubuntu Server 18).

  sudo apt install -y auditd audispd-plugins
  

• Các cấu hình sẽ được lưu trong folder /etc/audit

• Để thực hiện log hoạt động của tất cả người dùng:

  • Mở file nano /etc/audit/rules.d/audit.rules
  • Thêm 2 dòng bên dưới vào cuối file

  -a exit,always -F arch=b64 -S execve
  -a exit,always -F arch=b32 -S execve
  

  • Sau đó restart với lệnh sudo service auditd restart
  • Mặc định log sẽ được lưu trữ ở /var/log/audit/audit.log. Hoặc có thể cấu hình trong file /etc/audit/auditd.conf

Ok vậy là cơ bản hệ thống đã được giám sát bởi audit rồi. Giờ chúng ta sẽ tìm hiểu qua cách để sử dụng audit.

Sử dụng auditd như thế nào ?

• 3 tiện ích hay dùng:

  • auditctl – 1 tiện ích để kiểm soát hệ thống kernel audit
  • ausearch – 1 tiện ích cho việc tìm kiếm các audit log với các event đặc biệt.
  • aureport – 1 tiện ích để tạo các báo cáo về sự kiện được ghi lại.

• Các thông số trong logs:

  • time - is when the audit is done
  • name - is the object name to be audited
  • cwd - is the current directory
  • syscall - is related syscall
  • auid - is the audit user ID
  • uid and gid - User ID and Group ID
    ...

• Các lệnh aureport hay dùng:

  • sudo aureport -au : Report about authentication attempts
  • sudo aureport -m: Report all events related to account modification
    ...
  • Xem thêm tại sudo man aureport

• Các lệnh ausearch hay dùng:

  • ausearch -m USER_AUTH - Xem các nội dung liên quan đến authentication
  • ausearch -m USER_CMD - Xem các nội dung liên quan đến lệnh mà user thưc hiện
    ... Xem thêm tại ausearch -m
  • man ausearch this-month - (today,this-week,this-mounth ...) Xem tất cả các log trong tháng.
  • man ausearch this-month --file csv > audit.csv - Export log trong tháng ra file CSV.
  • ... Xem thêm tại sudo man ausearch

Một vài scripts hữu ích nếu cần.

Export CSV per month.

#!/bin/bash

#Current date time
CURRENT_DATE=`date +"%Y%m%d"`

#Create folder to store
rm -rf ${CURRENT_DATE}
mkdir ${CURRENT_DATE}
cd ${CURRENT_DATE}

#Export authentication log per month
sudo ausearch -m USER_AUTH -ts this-month --format default > ${CURRENT_DATE}_audit_auth.txt

#Export detail log per month
sudo ausearch  -m USER_CMD -ts this-month --format csv > ${CURRENT_DATE}_audit_detail.csv

Angular là một trong những Framework có sức ảnh hưởng lớn trong việc thiết kế ứng dụng ở phía Client Side. Nó rất mạnh mẽ bởi có thành phần như hệ thống quản lý routing, dependency injection, two-way binding,..

Việc sử dụng Angular khá đơn giản bởi cộng đồng hỗ trợ khá nhiều và những kiến thức trên trang chủ angular.io cung cấp khá đầy đủ. Bạn có thể dựa theo luồng hướng dẫn và từ đó viết một ứng dụng demo dễ dàng.

Một người lập trình viên giỏi không chỉ thành thạo các framework và công nghệ mới mà còn phải quản lý và cấu trúc code sao cho tốt nhất. Kết quả là code của chúng ta phải có tính tái sử dụng, dễ đọc, dễ mở rộng, dễ quản lý và tiết kiệm được thời gian debug.

Là một dev và ít nhiều thời gian tìm hiểu công nghệ (framework Angular 7), hôm nay tôi sẽ nêu ra một số style guide cho Angular cho mọi người cùng nghiên cứu và áp dụng.

Một số nguyên tắc

1. Rule of One

• Một component không quá 400 dòng code
• Để thuận tiện trong việc tái sử dụng code, hay dễ đọc code hơn thì ta nên chia thành các file service, model, module và component thay vì viết chung hết vào trong một component.

2. Small Function

• Một small function giới hạn không quá 75 dòng
• Yêu cầu đặt tên hàm sao cho dễ đọc, thích hợp với tính năng của từng hàm.

3. General Naming Guidelines

• Khuyến khích đặt tên theo cấu trúc: “feature.type.file-style”, trong đó:
  +feature là danh từ diễn tả đặc tính tượng trưng của file.
  +type diễn tả kiểu flie (module, service hay component).
  +file-style là tên định dạng file (ts, html hay css|scss).
  Ví dụ:

check-list.component.ts
create-event.component.html

4. Separate file names with dot and dashes

• Sử dụng dấu ‘ - ‘ ngăn cách đặc tính tượng trưng tên file.
• Sử dụng dấu ‘ . ‘ để phân biệt các phần trong 1 cấu trúc đặt tên.
• Ví dụ:

check-list.component.ts
// 'check-list'
create-event.component.html
// 'create-event.component'

5. Symbols and file names / Service names

• Đặt tên class tương ứng với kiểu file
  Ví dụ: file name có cấu trúc app.component.ts thì tên class tương ứng là AppComponent

@Component({ ... })
export class AppComponent { }
--> file names: app.component.ts

6. Bootstrapping

• Đặt bootstrapping và platform logic vào file main.ts giúp thuận tiện việc khởi tạo logic ứng dụng và tuân thủ nguyên tắc cùng các framework khác.
  

7. Component selectors

• Sử dụng dấu ‘ - ‘ ngăn cách tên selector của một component.
  Ví dụ:

selector: 'ngx-todo-list' thay vì 'ngxToDoList'

8. Component custom prefix

• Nên đặt tên các selector theo phạm vi quyền truy cập bằng việc thêm tiền tố vào phía trước tên selector định nghĩa.
  Ví dụ:

admin-user và client-user.

9. Classes / Interface

• Tên Class/Interface phải viết hoa chữ cái đầu tiên mỗi từ.
  Ví dụ:

export class EventService { }

10. Constants

• Định nghĩa các biến có giá trị không đổi trong thư mục chung ‘shared’

11. Properties and method

• Tên các phương thức phải bắt đầu bằng chữ cái viết in thường.
  Ví dụ:

this.timeToHide();

12. Import line spacing

• Nên ngăn cách một dòng giữa thư viện framework với thư viện bên thứ 3.
  

13. Member sequence

• Nên khai báo tên biến theo bảng alphabet
• Nên comment và ngăn cách dòng giữa các biến/hàm có kiểu public và private

14. Structure code By LIFT (Locate-Identify-Flat-T-DRY)

• Locate: Đặt các file liên quan gần với nhau để thuận tiện cho việc quản lý và tìm kiếm file.
• Identify: Đặt tên tương ứng với nội dung của file để xác định một component.
• Flat: Nên trải cấu trúc một thư mục dài nhất có thể nhưng không được tạo dư thừa bằng cách thêm các folder phụ khi folder đó chưa nhiều file khác nhau.
• T-DRY: DRY (Don’t repeat yourself) Hạn chế tối đa sự lặp đi lặp lại code.

15. Output & Input Decorator

• Không đặt tiền tố 'on' trước action cần emit trừ khi phụ vụ cho nghiệp vụ cần thiết.
  Ví dụ:

@Output() changeDate = new EventEmitter(); thay vì 'onChangeDate'

• Sử dụng Input/Output decorator thay vì input/output directive.

16. Put presentation logic in the component class

• Viết các hàm tính toán hay xử lý logic trong component class thay vì viết trong template.

17. Service

• Là một singletons (tức là service là một class chỉ tạo chứa duy nhất một thực thể và nó sẽ được dùng, gọi đến ở bất cứ đâu qua một biến toàn cục)
• Sử dụng Injectable Decoration khai báo toàn cục thay vì @Inject khai báo cục bộ

Kết luận

Vậy là chúng ta đã điểm qua một vài nguyên tắc trong việc tái cấu trúc code trong Angular. Hy vọng bài viết trên có thể giúp các bạn gần gũi hơn với Angular đồng thời giúp ta có tư duy về tái cấu trúc code và quản lý code tốt hơn. Hẹn gặp lại các bạn ở các bài viết tiếp theo.

Nguồn tham khảo

https://angular.io/guide/styleguide#toc
https://itnext.io/clean-code-checklist-in-angular-️-10d4db877f74

Công nghệ xây dựng ứng dụng mobile ngày càng phát triển bùng nổ. Nếu như trước đây, các bạn chỉ có thể sử dụng Java để xây dựng ứng dụng Android hay Objective-C để xây dựng ứng dụng iOS thì ngày nay, các bạn chỉ cần biết một ngôn ngữ bất kỳ cũng có thể xây dựng được ứng dụng mobile sử dụng ngôn ngữ đó. Ngày càng có nhiều framework hỗ trợ việc lập trình ứng dụng mobile một cách nhanh chóng phải kể đến như React Native, Flutter, NativeScript,...

Tuy nhiên đối với những bạn yêu thích Microsoft, yêu thích C#, yêu thích Visual Studio thì vẫn luôn có một sự lựa chọn hàng đầu đó là Xamarin. Bài viết dưới đây mình sẽ chia sẻ những hiểu biết của mình về Xamarin trong seri Lập trình Xamarin. Hy vọng sẽ giúp các bạn phần nào trong quá trình học tập và làm việc với Xamarin.

OK! Let's GO!!!

Xamarin là gì

Xamarin là một framework để xây dựng các ứng dụng di động đa nền tảng được tạo ra bởi hãng phần mềm di động cùng tên thành lập vào ngày 16 tháng 5 năm 2011 bởi các kỹ sư đã tạo ra Mono, Mono cho Android và MonoTouch với hơn 500 nghìn nhân lực. Hãng này sử dụng ngôn ngữ C# để viết các ứng dụng chạy trên Mac, Android, ý tưởng triển khai các ứng dụng đa nền tảng sử dụng Common Language Infrastructure (CLI) và Common Language Specifications (thường được gọi là Microsoft .NET).
Đến tháng 11/2013, Microsoft đã mua lại và tích hợp chạy trên môi trường Windows 8. Với cơ sở mã nguồn mở của C#, các lập trình viên có thể sử dụng các công cụ Xamarin để viết các ứng dụng native Android, iOS và Windows với giao diện người dùng native và sự chia sẻ code trên nhiều nền tảng, bao gồm Windows và macOS.
Theo như Xamarin công bố, hơn 1.4 triệu lập trình viên đang sử dụng sản phẩm của Xamarin ở 120 quốc gia trên toàn thế giới tính đến tháng 4 năm 2017

Công cụ Xamarin được Microsoft giới thiệu vào thị trường Việt Nam vào 18/04/2014 trong cho cộng đồng các giảng viên các trường CĐ, ĐH tại TPHCM và được chuyển giao các tài liệu, bản quyền với giá ưu đãi cho các sinh viên trên nền Microsoft Visual Studio và được chuyên gia Microsoft demo lập trình Xamarin để app chạy trên môi trường iOS, Android, Windows Phone và Windows 8.1 với các Tools khác nhau.
Tại sự kiện Microsoft Build 2016, Microsoft công báo họ sẽ mã nguồn mở Xamarin SDK và cung cấp các công cụ để phát triển ứng dụng sử dụng Xamarin miễn phí trên Visual Studio.

Xamarin.Forms

Xamarin.Forms là một công cụ giúp code giao diện người dùng có thể được chia sẻ trên các ứng dụng iOS, Android và Universal Windows Platform với 100% C#. Xamarin.Forms bao gồm hơn 40 điều khiển và bố cục, được ánh xạ tới các điều khiển gốc trong quá trình chạy. Nó hỗ trợ các nền tảng sau:

• Android 4.4 +
• iOS 8+
• Windows 10 Universal Windows Platform
  Ngoài ra, Xamarin Forms còn hỗ trợ các nền tảng dưới đây nhưng vẫn đang ở chế độ Preview hoặc do bên thứ ba phát triển:
• Samsung Tizen
• macOS
• GTK#
• WPF

Dưới đây là hình ảnh so sánh về chia sẻ code của cách sử dụng Xamarin truyền thống và sử dụng Xamarin.Forms. Rõ ràng khi sử dụng Xamarin.Forms, chúng ta đã sử dụng được hầu hết code chung cho toàn bộ ứng dụng.

Giao diện các ứng dụng sử dụng Xamarin được viết trong một file XAML. Nó có cấu trúc của một file XML, khá giống với Winform hay XML của Android.

Với 1 đoạn code như này chúng ta có thể build ra 3 nền tảng khác nhau:

Ưu điểm của Xamarin

Chia sẻ code ở mọi nơi

Khi viết một ứng dụng sử dụng bộ công cụ của Xamarin thì về cơ bản bạn đang sử dụng một lớp trừu tượng phía trên các SDK thực sự của iOS và Android. Điều này có nghĩa là bạn sẽ thu được kết quả là một ứng dụng native hoàn toàn với giao diện dùng native trên mỗi nền tảng.
Khi bạn tạo ứng dụng trên Xamarin, bạn sử dụng cùng ngôn ngữ, API và cấu trúc dữ liệu để chia sẻ trung bình 75% code trên tất cả các nền tảng điện thoại di động. Logic ứng dụng này có thể dễ dàng chia sẻ trên nhiều nền tảng. Qua đó có thể giảm đáng kể chi phí và thời gian phát triển ứng dụng di động cho 3 nền tảng phổ biến nhất.

Performance như native

Không giống như phương pháp kết hợp truyền thống dựa trên các công nghệ web, một ứng dụng đa nền tảng được xây dựng với Xamarin cũng có thể xem vào hàng native. Các số liệu performances là tương đương khi so sánh với các số liệu performance của Java, Kotlin cho Android và Objective-C hoặc Swift cho ứng dụng phát triển ứng dụng iOS native. Hơn thế nữa, performance liên tục được cải thiện để phù hợp hoàn toàn với tiêu chuẩn của lập trình native. Nền tảng Xamarin cung cấp là giải pháp để testing và theo dõi hoạt động của ứng dụng. Xamarin Test Cloud kết hợp với công cụ Xamarin Test Recorder cho phép bạn chạy các UI test tự động và xác định các vấn đề về performance trước khi ứng dụng release. Tuy nhiên, dịch vụ này có tính phí.
Hình dưới đây cho chúng ta thấy thời gian mở một ứng dụng HelloWorld bằng ứng dụng native, ứng dụng viết bằng Xamarin Native, ứng dụng viết bằng Xamarin.Forms:

Mội số ưu điểm khác

Một số điểm cộng cho Xamarin như:

• Có khả năng lựa chọn UI layout
• Tích hợp OAuth
• Tích hợp REST APIs từ xa
• Công nghệ dẫn đường và xử lý tín hiệu thời gian thực cho ứng dụng định vị
• Tích hợp mạng xã hội
• Có bộ cơ sở dữ liệu SQLite nhúng
• Thư viện XAML cho phép xây dựng một loạt ứng dụng
• Hỗ trợ data binding

Nhược điểm của Xamarin

Ứng dụng thực hiện chậm hơn và yêu cầu nhiều dung lượng hơn trên thiết bị

Ứng dụng Xamarin lớn hơn, nặng hơn so với ứng dụng native. So sánh với ứng dụng native nó chiếm nhiều hơn vài Mb so với Java/Objective C tương ứng. Kích thước của một ứng dụng code bằng xamarin là 3Mb, trong khi code bằng Objective C chỉ chiếm 172 Kb. Càng sử dụng nhiều API, càng nhiều lưu trữ bị chiếm trên thiết bị.

Khuyết điểm của AOT Compiler

Xamarin Forms cũng có những khuyết điểm AOT compliler. Nó không được complie các đoạn code gọn gàng như Xcode. Hạn chế của Xamarin ảnh hưởng đến cả phát triển, test tải app lên store. Hạn chế chính đối với iOS là nó không hỗ trợ sinh code tự động. Visual Studio biuld code lâu. Cái này tất cả các lập trình viên Xamarin đều đang phải sống chung với lũ, một lần build sẽ mất rất lâu từ 3 đến 10 phút cho solution với 30 project
Đôi lúc thông báo lỗi không rõ ràng chủ yếu trên Android vì nó là 1 công nghệ mới nên vẫn chưa được hoàn hoản mong rằng Microsoft sẽ fix trong tương lai.

Cộng đồng hỗ trợ ít

Cộng đồng Xamarin ít hơn so với cộng đồng của iOS hay Android nên để tìm kiếm được 1 developer Xamarin có kinh nghiệm là chuyện không dễ dàng gì dù Xamarin là nền tảng được phát triển nhờ sự hỗ trợ từ Microsoft. Theo nhiều nguồn thông tin, cộng đồng Xamarin chiếm 10% cộng động lập trình mobile toàn cầu dựa trên thực tế là nền tảng này cung cấp tối đa hỗ trợ cho các developer. Cụ thể, có một platform giáo dục chuyên biệt tại ĐH Xamarin, cung cấp kiến thức và khoá huấn luyện cho những ai mới tiếp cận công nghệ này. Kết quả là learning curve của 1 engineer C#/.Net kinh nghiệm sẽ được tối thiểu hóa.

Kết luận

Vậy là mình đã giới thiệu với các bạn một cách tổng quan về Xamarin. Ở bài viết tiếp theo mình sẽ giới thiệu cụ thể về các thành phần trong gia đình Xamarin. Các bạn hãy đón chờ nhé!

1. Import project

Chọn maven và next ...

2. Config run server

Sau khi project import xong chọn Edit Configuaration

Tạo mới với từ khóa jboss server và cập nhật các thông số theo hình bên dưới

Chỉ định file war để deploy

Click 'Ok' để cập nhật

Chú ý: trước khi test code cần build lại project (Ctr+f9) or (cmd+f9)

3. Tăng tốc intelij

git clone https://github.com/thoeni/inetTester
java -jar ./bin/inetTester.jar
Sau khi run file jar copy hostName rồi thêm 2 dòng bên dưới vào file host sudo nano /etc/hosts

127.0.0.1 <output-host-name>.local
::1 <output-host-name>.local

1 Tổng quan

Cloud Vision API là bộ API được Google cung cấp giúp các lập trình viên dễ dàng sử dụng để detect ảnh chỉ bằng một request đơn giản. Bạn không cần phải biết Machine Learning cũng có thể nhanh chóng tạo được ứng dụng detect ảnh bằng cách sử dụng Cloud Vision API.

"Bạn cứ việc phát triển ứng dụng, detect image cứ để Cloud Vision API lo!!!"

1.1 Mục đích

Bài viết sẽ giúp bạn biết các sử dụng Cloud Vision API để nhận dạng ảnh với các chức năng: nhận dạng nội dung của bức ảnh, nhận dạng khuôn mặt người, nhận dạng công trình nổi tiếng, nhận dạng chữ viết,...
Mình sẽ hướng dẫn các bạn sử dụng theo 2 cách:

• Cách 1: Sử dụng curl để tạo request tới Cloud Vision API trên terminal
• Cách 2: Sử dụng Postman để tạo request tới Cloud Vision API
  Cuối bài viết mình sẽ demo một app Android sử dụng Cloud Vision API để nhận diện nội dung bức ảnh.

1.2 Công cụ cần thiết

• Project Google Cloud Platform: Bạn cần có tài khoản Google Cloud đã được thêm thông tin thanh toán (thẻ VISA). Nếu bạn chưa có thì có thể tham gia Qwiklabs để nhận tài khoản sử dụng trong 45 phút (https://qwiklabs.com/focuses/1841?parent=catalog)
  
• Trình duyệt Chrome hoặc Firefox

2 Cài đặt chung

Đầu tiên, bạn mở project của bạn. Nếu bạn chưa có thì hay tạo một project mới nhé.
Giao diện project sẽ như sau:

2.1 Terminal

Để mở terminal, bạn nhấn vào biểu tượng dưới đây trên thanh navigation:

Sau đó bạn chọn START CLOUD SHELL để mở terminal và vui lòng đợi một chút để trình duyệt của bạn kết nối với server của Google.

Mình sẽ giới thiệu qua một chút về terminal này. Terminal này thực chất giống như terminal (CMD, Windows Power Shell) trên máy bạn. Trên đó đã được Google cài đặt sẵn các môi trường để bạn sử dụng. Bạn có thể sử dụng tất cả các lệnh trên ubuntu như trên máy thật của bạn.

Bạn cũng có thể sử dụng trực tiếp Terminal thật trên máy của bạn để thực hành. Nhưng bạn cần phải cài 1 số công cụ cho nó nếu chưa có như curl, trình chỉnh sửa văn bản (nano, vim,...)

2.2 API Key

Để sử dụng bất kỳ dịch vụ nào của Google, bạn cũng đều cần phải có API Key.
Để tạo API Key, bạn vào menu chọn APIs & Services rồi chọn Credentials như hình dưới đây:

Sau đó bạn click Create credentials:

Trong menu xổ xuống, bạn chọn API key:

Một hộp thoại hiện ra, bạn chọn RESTRICT KEY để lưu lại.
Tiếp theo bạn cần tạo biến môi trường API_KEY để sau này bạn gọi đến Cloud API thì chỉ cần gọi biến đó ra thôi không cần vào copy đoạn key dài dài này nữa.
Để tạo biến môi trường API_KEY, trên terminal, bạn gõ: export API_KEY=xxx
(Trong đó xxx là key mà bạn vừa tạo)
Bạn có thể check xem biến đó đã được tạo đúng chưa bằng lệnh sau: echo $API_KEY
Như vậy đã xong, chúng ta chuyển sang bước tiếp theo.

2.3 Tạo file request.json

File request.json này sẽ là body của request tới Cloud API ở bước tiếp theo.
Để tạo file này, trên terminal các bạn gõ touch request.json
Để chỉnh sửa các bạn có thể dùng lệnh: nano request.json
File này sẽ có dạng json như sau:

Mình sẽ giải thích một số trường trong file này:

• requests: là một mảng. Như vậy Cloud API cho phép bạn cùng lúc detect nhiều ảnh trong 1 request.
• image: là ảnh của bạn. Bạn có thể sử dụng 3 cách:

• Cách 1: Dùng ảnh base64:
  Bạn có thể vào các trang giúp mã hóa ảnh của bạn dưới dạng base64, sau đó bạn copy đoạn text kết quả đó vào phần value của content như hình sau:
  
  Nếu đoạn text mà có data:image/jpeg;base64, ở đầu thì bạn nhớ bỏ đi nhé!
• Cách 2: Dùng Google Cloud Storage:
  Phần này khá phức tạp nên bạn có thể tham khảo tại link sau: https://cloud.google.com/vision/docs
  
• Cách 3: Dùng trực tiếp đường link ảnh
  

• features: là một mảng các thuộc tính. Ví dụ type là kiểu detect, maxResults là số kết quả tối đa trả về,…
• type là kiểu mà bạn muốn Google detect. Hiện tại, Google hỗ trợ các kiểu sau:

• TEXT_DETECTION: nhận dạng text, có hỗ trợ dịch sang ngôn ngữ khác
• DOCUMENT_TEXT_DETECTION: nhận dạng đoạn text
• LABEL_DETECTION: nhận dạng nội dung của bức ảnh
• CROP_HINTS: crop bức ảnh tập trung vào vật trọng tâm hay khuôn mặt
• FACE_DETECTION: nhận dạng khuôn mặt
• IMAGE_PROPERTIES: các thuộc tính của bức ảnh như RGB, pixcel,...
• LANDMARK_DETECTION: nhận dạng công trình nổi tiếng
• LOGO_DETECTION: nhận dạng logo, sản phẩm nổi tiếng
• SAFE_SEARCH_DETECTION: nhận dạng xem bức ảnh có nội dung an toàn hay không
• WEB_DETECTION: phần này giống như search google bằng hình ảnh
  Chi tiết về các trường, các kiểu detect và cách sử dụng các bạn có thể đọc trong tài liệu Cloud VisionAPI: https://cloud.google.com/vision/docs

2.4 Tạo request tới Cloud API bằng curl

Đến phần thú vị nhất của Cloud API rồi.
Sau khi đã tạo xong file request.json, trên cửa sổ terminal, bạn thực hiện lệnh:
curl -s -X POST -H "Content-Type: application/json" --data-binary @request.json https://vision.googleapis.com/v1/images:annotate?key=${API_KEY}
Ví dụ mình sẽ thử detect ảnh sau xem nội dung nhận được là gì nhé!

Nội dung file request.json của mình sẽ là:

{
  "requests":[
    {
      "image":{
        "source":{
          "imageUri":
            "https://znews-photo-td.zadn.vn/w1024/Uploaded/ohunuai/2018_07_19/NGUYEN_BA_NGOC1166_Zing.jpg"
        }
      },
      "features":[
        {
          "type":"LABEL_DETECTION",
          "maxResults":10
        }
      ]
    }
  ]
}

Và kết quả trả về:

{
  "responses": [
    {
      "labelAnnotations": [
        {
          "mid": "/m/088fh",
          "description": "yellow",
          "score": 0.951962,
          "topicality": 0.951962
        },
        {
          "mid": "/m/06z04",
          "description": "skin",
          "score": 0.9510442,
          "topicality": 0.9510442
        },
        {
          "mid": "/m/01k74n",
          "description": "facial expression",
          "score": 0.9331107,
          "topicality": 0.9331107
        },
        {
          "mid": "/m/01f43",
          "description": "beauty",
          "score": 0.91344154,
          "topicality": 0.91344154
        },
        {
          "mid": "/m/05r655",
          "description": "girl",
          "score": 0.8986084,
          "topicality": 0.8986084
        },
        {
          "mid": "/m/02pkb8",
          "description": "lady",
          "score": 0.8730116,
          "topicality": 0.8730116
        },
        {
          "mid": "/m/019nj4",
          "description": "smile",
          "score": 0.84830636,
          "topicality": 0.84830636
        },
        {
          "mid": "/m/06pg22",
          "description": "snapshot",
          "score": 0.8176745,
          "topicality": 0.8176745
        },
        {
          "mid": "/m/015c4z",
          "description": "sitting",
          "score": 0.81240934,
          "topicality": 0.81240934
        },
        {
          "mid": "/m/05wkw",
          "description": "photography",
          "score": 0.7999211,
          "topicality": 0.7999211
        }
      ]
    }
  ]
}

Danh sách kết quả trả về được sắp xếp theo score giảm dần. Mình thấy Google nhận dạng khá chính xác.

2.5 Tạo request tới Cloud API bằng Postman

Tiếp theo mình sẽ hướng dẫn các bạn sử dụng Postman để tạo request detect ảnh.
Cloud Vision API là một REST API với method là POST. Body chính là nội dung của file request.json ở trên.

(Trên URL các bạn thay xxx bằng API Key tạo ở trên nhé)
Sau đó bạn nhấn nút Send và kết quả bạn nhận được:

Google Cloud Vision API là một API nên bạn hoàn toàn có thể sử dụng để detect ảnh ở trong app của mình. Ở phần tiếp theo mình sẽ demo một app android sử dụng Google Cloud Vision API để nhận dạng các vật thể trên camera một cách real-time.

3 App demo

Trong app này, cứ 5 giây mình lại chụp ảnh rồi encode ảnh đó sang base64 rồi dùng Google Vision API với request ảnh ở dạng base64 để lấy về kết quả.
Source code: https://github.com/quanghd96/GoogleCloudVision

4 Tổng kết

Vậy là mình đã hướng dẫn xong các bạn cách sử dụng Google Cloud Vision API để detect ảnh. Hy vọng sẽ giúp ích cho các bạn phần nào trong việc học tập, phát triển sản phẩm,… Cảm ơn các bạn đã theo dõi bài viết của mình!
Tài liệu tham khảo:

• https://qwiklabs.com/focuses/1841?parent=catalog
• https://cloud.google.com/vision/docs

Giới thiệu ứng dụng

Ứng dụng chat giúp mọi người chat nhóm realtime, chia sẻ hình ảnh. Tuy nhiên, trong bài viết này mình sẽ chỉ hướng dẫn các bạn cách tạo một ứng dụng chat local. Còn các chức năng đăng nhập, chat online realtime, chia sẻ hình ảnh mình sẽ hướng dẫn ở các bài viết tiếp theo.

Cài đặt môi trường

Để bắt đầu, bạn cần cài đặt Flutter SDK và một editor có cài sẵn plugin Flutter (trong bài viết này mình sử dụng IntelliJ vì nó rất tiện lợi và thông minh). Việc cài đặt Flutter SDK bạn có thể tham khảo ở đường link sau: https://flutter.io/get-started/install/

Ngoài ra bạn cần thêm một thiết bị thật hoặc máy ảo (Android hoặc iOS) để test.

Tạo project

Bạn mở IntelliJ, chọn Create New Project, sau đó chọn Flutter như hình dưới:

Nếu Flutter SDK Path bị trống thì bạn trỏ đường dẫn tới thư mục chứa Flutter nhé. Sau đó nhấn Next. Các bạn có thể thay đổi thông tin project hoặc để mặc định. Cuối cùng nhấn Finish. Như vậy là các bạn đã tạo thành công ứng dụng sử dụng Flutter.

Dưới đây là hình ảnh toàn bộ project sau khi đã tạo xong.

Thư mục lib chứa toàn bộ source code của project. Hiện tại các bạn chỉ cần quan tâm đến thư mục này. Để chạy thử các bạn nhấn vào nút Run trên thanh công cụ.

Một tính năng rất thú vị của Flutter là Hot reload. Đó là khi bạn sửa code và lưu lại, ứng dụng sẽ được reload mà bạn không cần phải build lại. Bạn có thể trải nghiệm ngay tính năng này bằng cách trên file main.dart, bạn sửa primarySwatch: Colors.blue thành primarySwatch: Colors.red sau đó lưu lại. Ứng dụng sẽ tự động chuyển giao diện từ màu xanh sang màu đỏ. Rất thú vị phải không?

Sau đây chúng ta sẽ tiến hành tạo giao diện cho ứng dụng chat.

Tạo giao diện

Chúng ta cần tạo giao diện gồm:

• Một list để hiển thị tin nhắn
• Một ô để nhập tin nhắn
• Một nút để gửi tin nhắn

Sau đây chúng ta sẽ tạo lần lượt từng đối tượng trên và ghép chúng lại thành một ứng dụng hoàn chỉnh chạy trên thiết bị thật.

Tạo giao diện cơ bản cho ứng dụng

Khi tạo mới một project, trong đó đã có sẵn một số thành phần. Chúng ta cần xóa đi những thứ không liên quan đến ứng dụng chat. Bạn sửa lại class _MyHomePageState như hình dưới đây.

Và đây là hình ảnh ứng dụng trắng chưa có gì. Chúng ta cần phải xây dựng các thành phần đã được liệt kê ở trên.

Tạo ô để nhập tin nhắn

Để tạo ô nhập tin nhắn, bạn tạo hàm sau đây bên trong class _MyHomePageState:

Mình sẽ giải thích qua về hàm này:

Hàm này sẽ trả về cho chúng ta một widget gồm một TextField (là ô chúng ta nhập tin nhắn) với các định dạng giao diện của nó. Bạn có thể thay đổi một số thông số và xem sự thay đổi trên app.

controller là thành phần quản lý TextField như việc lấy tin nhắn, xóa tin nhắn,... trên TextField

onSubmitted là thành phần xử lý khi người dùng submit tin nhắn

decoration là thành phần giúp định dạng cho TextField như text hint,…

Tiếp theo bạn cần tạo đối tượng _textController để quản lý TextField

Tạo hàm _handleSubmitted để xử lý khi người dùng submit:

Hàm này sẽ nhận vào tin nhắn sau đó xử lý. Tạm thời chúng ta sẽ thực hiện việc xóa tin nhắn trên ô TextField

Như vậy việc tạo ô nhập tin nhắn đã hoàn thành. Tiếp theo chúng ta sẽ tạo nút gửi tin nhắn.

Tạo nút gửi tin nhắn

Chúng ta sẽ viết lại hàm _buildTextComposer như sau:

Bạn thấy hàm của chúng ta đã phức tạp hơn rất nhiều rồi đúng không?

Nhưng sẽ rất dễ hiểu thôi, IconTheme chúng là Widget mà giúp các phần tử bên trong nó như nút gửi tin nhắn của chúng ta hiển thị màu theo theme hiện tại.

Do chúng ta tạo thêm một nút nữa nên cần phải đưa chúng vào 1 Row (row sẽ hiển thị các phần tử theo chiều ngang).

TextField được đưa vào bên trong widget Flexible để lúc nào chiều dài của nó cũng kín màn hình.

Nút gửi chúng ta sẽ sử dụng Widget IconButton với:

icon là icon của nút

onPressed là sự kiện nhấn nút. Chúng ta sẽ xử lý trong hàm _handleSubmitted ở trên với tham số truyền vào là tin nhắn lấy từ đối tượng _textController ở trên.

Như vậy là đã xong. Chúng ta làm phần cuối cùng là list tin nhắn.

Tạo list hiển thị tin nhắn

Đầu tiên chúng ta sẽ tạo ra widget để hiển thị 1 tin nhắn

Widget này sẽ gồm có 1 icon là avatar của người gửi và bên cạnh là một Text để hiển thị tin nhắn của người đó.

Sau đó chúng ta sẽ tạo ra list chứa các ChatMessage trên:

Chúng ta sẽ sử dụng ListView với:

itemBuilder là thành phần build ra từng dòng tin nhắn

itemCount là số lượng tin nhắn hiển thị trên list

Ở đây chúng ta cần tạo ra một biến _messages chứa các ChatMessage:

Khi lưu lại bạn sẽ thấy ô nhập tin nhắn và nút gửi đã được di chuyển xuống phía dưới màn hình. Đó chính là do widget Flexiable.

Cuối cùng chúng ta cần xử lý khi người dùng nhấn nút gửi sẽ hiển thị tin nhắn đó vào list trong hàm _handleSubmitted như sau:

Hàm setState trên sẽ set lại biến _messages và cập nhật lại giao diện một cách realtime. Đây cũng chính là một tính năng rất hay của Flutter. Nếu bạn nào đã từng biết React Native thì chắc hẳn sẽ rất quen thuộc với state và hàm này.

Như vậy đã xong.

Source code: https://github.com/quanghd96/chat_flutter

1. Tổng quan

Bạn đã tự hỏi tại sao cần tới một cấu trúc tốt ngay từ đầu cho một project? Với một cấu trúc tốt bạn càng thực hiện nó tốt nó sẽ giúp bạn tiết kiệm thời gian. Việc xây dựng nhiều dự án trên cùng một nền tảng được thiết kế tốt cũng giúp việc trao đổi giữa các dự án một cách dễ dàng hơn. Nhưng có lẽ lý do thuyết phục nhất cho một dự án có cấu trúc tốt ngay từ đầu là việc thực thi nó sẽ dễ dàng hơn.

Khi phần mềm, ứng dụng trở nên lớn và phức tạp thì việc duy trì sẽ càng ngày càng khó khăn. Để không lãng phí thời gian vào việc quản lý một mớ hỗn độn hơn và việc tập trung vào các tính năng thì bạn cần có một cấu trúc tốt và giữ cho nó có cấu trúc tốt ngay từ đầu. Đây là một tập hợp các phương pháp tốt nhất mà chúng tôi đã đúc rút qua quá trình trải nghiệm và tổng kết từ một số trang web khác.

2. Phương pháp

2.1. Tránh phân tách các asset. Chỉ có một phiên bản duy nhất của bất kỳ asset nào. Nếu bạn cần thiết phân tách prefab, scence hoặc mesh hãy làm theo một quy trình rõ ràng cho các phiên bản. Các nhánh "sai" phải được làm nổi bật bằng cách đặt tên, ví dụ: sử dụng tiền tố dấu gạch dưới: _MainSence_Backup

2.2. Sử dụng công cụ quản lý phiên bản cho việc quản lý project.
2.3. Cố gắng giữ cho mọi thứ ngắn gọn và đơn giản. Cố gắng giữ cho các class của bạn ngắn gọn và rõ ràng. Một class nhỏ nên có ít hơn 100 dòng. Và các main class ngăn hơn 1000 dòng. Nếu vượt qua con số này thì bạn đang tạo ra một script tồi tệ và chúng ta cần phải tránh điều đó.

3. Cấu trúc thư mục và Scence

Cấu trúc thư mục giúp các thành viên trong nhóm của bạn sửa đổi, tìm kiếm, tổ chức project và các tài nguyên một cách dễ dàng và đồng thời. Có rất nhiều cách để làm điều này, và chúng tôi sẽ đưa ra một số ví dụ cụ thể mà chúng tôi thấy là hoạt động tốt. Nếu bố cục dự án của bạn đáp ứng những vấn đề sau, thì nó có thể là một bố cục khá tốt.

• Ai làm nó?
• Nó thuộc loại nào? Script, Audio, Art, Design?
• Phạm vi của project bao gồm những gì?
• Giá trị của asset và những dữ liệu nào bạn cần quan tâm nếu bạn thay đổi nó?

4. Streaming Assets:

Hầu hết các asset trong Unity được kết hợp vào project khi nó được xây dựng. Tuy nhiên, đôi khi rất hữu ích khi đặt các tệp này vào hệ thống tệp bình thường trên máy đích để làm cho chúng có thể truy cập qua đường dẫn. Một ví dụ về việc này là triển khai một tệp phim trên thiết bị IOS, tập tin phim gốc phải có sẵn từ một vị trí trong hệ thống tập tin sẽ được phát bởi chức năng PlayMovie.
Bất kỳ một tệp nào được đặt trong một thư mục có tên là StreammingAssets (phân biệt chữ hoa và chữ thường) trong một project Unity sẽ được sao chép đúng nguyên văn sang một thư mục cụ thể trên máy đích. Ban jcos thể truy xuất thư mục bằng thược tính Application.streamingAssetPath. Tốt nhất sử dụng Application.streamingAssetPath để lấy vị trí của thư mục StreamingAssets, vì nó sẽ luôn trỏ đến vị trí chính xác trên nền tảng nơi ứng dụng chạy.
Vị trí của thư mục này thay đổi theo nền tảng.

• Trên máy tính để bàn (Mac OS hoặc Windows), vị trí các tệp có thể lấy bằng mã sau: path = Application.dataPath + "/StreamingAssets";
• Trên iOS, sử dụng : path = Application.dataPath + "/Raw";
• Trên Android, sử dụng: path = "jar:file://" + Application.dataPath + "!/assets/";

Unity cho bạn khả năng tùy biến. Đó là lý do tại sao nó thường xuyên lộn xộn, và vì chúng ta không thể nói về tổ chức mà không có cấu trúc thư mục dự án phù hợp. Đây là một ví dụ chúng tôi sử dụng trong thự tế

|-- Assets
       |-- Animations
       |   |-- 2DAnimations
       |   |-- 3DAnimations
       |-- Editor           //Special Folder
       |-- Media
       |   |-- Audio
       |   |-- Video
       |-- Models
       |-- Materials
       |-- Plugins          //Special Folder
       |   |-- Android
       |   |-- iOS
       |   |-- Special
       |-- Prefabs
       |-- Resources        //Special Folder
       |   |-- Android
       |   |-- iOS
       |   |-- Common
       |-- Scenes
       |   |-- Levels
       |   |-- Others
       |-- Scripts
       |   |-- Editor
       |-- Shaders
       |-- StreamingAssets  //Special Folder
       |-- SandBox
       |-- Sprites

Một vài điểm quan trọng cần ghi nhớ:

• Không sử dụng dấu cách trong đặt tên tệp, vì công cụ dòng lệnh trong Unity3D không xử lý đường dẫn có dấu cách
• Không lưu trữ bất kỳ tập tin asset nào trong thư mục gốc (Resources) . Sử dụng thư mục con bất cứ khi nào
• Không tạo bất kỳ thư mục bổ sung nào trong thư mục gốc (Resources), trừ khi bạn thực sự cần.
• Hãy đặt tên một cách nhất quán
• Sử dụng thư mục "Third_Party" để lưu trữ các asset được nhập từ Asset Store. Chúng thường có cấu trúc riêng và không nên thay đổi
• Sử dụng "SandBox" cho bất kỳ thử nghiệm nào của bạn không hoàn toàn chắc chặn. Khi bạn đang làm việc trên dự án với những người khác, hãy tạo thư mục con SandBox cá nhân của bạn như : SandBox/San

5. Cấu trúc phân cấp của Sence

Bên cạnh hệ thống phân cấp của project, cũng có hệ thống phân cấp của Sence. Như trên, chúng tôi sẽ giới thiệu cho bạn một ví dụ. Bạn có thể thay đổi nó theo nhu cầu của bạn.

• Lights
• Cameras
• AR_Manager
• World
• GUI
• Scene_Manager
• _Dynamic

Một vài điểm quan trọng cần lưu ý:

• Sử dụng các gameobject trống (empty) như các folder trong sence. Sắp xếp một cách cẩn thận secne của bạn để có thể dễ dàng tìm các đối tượng. Tất cả các gameobject trống cần phải đặt position (0,0,0) và rotision và scale mặc định

• Khi bạn khởi tạo một đối tượng trong thời gian chạy, hãy nhớ đặt đối tượng đó trong _Dynamic

• Đặt các prefabs và folders (empty gameobject) ở (0,0,0). Nếu tranform của nó không được sử dụng để định vị đối tượng, nó phải ở gốc. Bằng cách đó, có ít nguy cơ gặp phải sự cố với không gian địa phương và thế giới

• Đặt nhân vật và đối tượng tại pivots, không tại centre. Điều này làm cho nó dễ dàng đặt các nhân vật và các đói tượng trên một sàn một cách chính xác. Nó cũng dễ dàng hơn để làm việc với 3D như thể là 2D cho logic trò chơi, AI và thậm chỉ cả vật lý.

• Làm cho tất cả các mesh phải theo một hướng (trục z dương hoặc âm). Điều này áp dung cho các mesh như ký tự và các đối tượng khác có khái niệm hướng đối diện. Nhiều thuật toán được đơn giản hóa nếu mói thứ đều có cùng hướng đối diện.

• Lấy scale đúng ngay từ đầu. Tạo tỷ lệ sao cho tất cả chúng có thể được nhập với hệ số tỷ lệ là 1 và transforms của chúng có thể được chia theo (1,1,1). Sử dụng đối tượng tham chiếu (Unity cube) để so sánh quy mô dễ dàng. Chọn một đơn vị Unity thống nhất, phù hợp với trò chơi/project của bạn

6. Sử dụng hệ quản lý phiên bản bên trong Unity

Bạn có thể sử dụng bất kỳ hệ quản lý nào: Git, Subversion hoặc bất kỳ VCS nào khác. Bạn nên tập trung tìm hiểu kỹ về tính năng của VCS mà bạn chọn để phục vụ cho việc quản lý phiên bản một cách tốt nhất. Nhiều người đang sử dụng những hệ thống VCS này với mục đích như một giải pháp sao lưu và đồng bộ hóa.

Thiết lập hệ thống quản lý phiên bản với Unity

Bạn sẽ thấy rằng trong hầu hết project Unity có khá nhiều tập tin và thư mục. Tuy nhiên, chỉ có 3 thư mục cần được kiểm soát là: Assets, Packages và ProjectSettings. Những thành phần còn lại được tạo ra từ chúng.
Dưới đây là tóm tắt về tất cả các tệp và thư mục

• Assets: Thư mục chưa tất cả tài nguyên của game bao gồm: scripts, textures, sound, trình editors ... Đây là thư mục quan trọng nhất của project.
• Library: bộ nhớ cache cục bộ cho các nội dung đã nhập, khi sử dụng VCS cần loại bỏ hoàn toàn
• Packages: Thư mục này chưa các tệp dưới định dạng JSON được sử dụng để duy trì liên kết phụ thuộc
• ProjectSettings: trong thư mục này chứa tất các các thiết lập của project như: Physic, Tags, Player Settings ...Nói cách khác, mọi thứ bạn thiết lập từ Edit -> Project Settings sẽ được chuyên vào thư mục này
• Temp: cách thư mục cho các tệp tạm được tạo trong quá trình build, têp jddaau tiên được sử dụng bởi MonoDevelop, tếp thứ 2 bởi Unity
• ProjectName.sln : các tệp giải pháp cho các IDE như Visual Studio

Trước khi thực hiện việc quản lý phiên bản, bạn cần phải cấu hình Project để nó tương thích với việc lưu trữ trong VCS. Thực hiện các bước như sau:

• Chuyển sang chế độ Visible Meta Files in Edit → Project Settings → Editor → Version Control Mode → Visible Meta Files.
• Chuyển sang Force Text in Edit → Project Settings → Editor → Asset Serialization Mode

Với thiết lập này sẽ hiển thị một tệp văn bản cho mọi nội dung trong thư mục Assets
Các tệp có phần mở rộng là .meta với phần đầu tiên là tên đẩy đủ của nội dung liên kết với nó. Việc di chuyển và đổi tên nội dung trong Unity cũng sẽ được cập nhật vào các tệp .meta liên quan. Tuy nhiên, nếu bạn di chuyển hoặc đổi tên nội dung từ một công cụ bên ngoài, hãy đãm bảo rằng đã đồng bộ hóa các tệp .meta liên quan.

Ví dụ : tạo một dự án mới và nhập nó vào kho lưu trữ VCS (GIT)

1. Tạo một project mới trong Unity và đặt tên nó là ReverieSample.
2. Kích hoạt Visible Meta files in Edit->Project Settings->Editor
3. Chuyển Force Text in Edit → Project Settings → Editor → Asset Serialization Mode
4. Tắt Unity (đảm bảo rằng tất cả các tập tin đã được lưu)
5. Thiết lập bộ lọc .gitignore cho các thư mục và tệp không cần thiết
6. Nhập project vào VCS bằng cách sử dụng công cụ GUI hoặc dòng lệnh và đẩy chúng lên VCS remote/ local Responsitory
7. Kiểm tra các thư mục Assets, Packages và ProjectSettings đã có trong VCS chưa
8. Mở project với Unity. Việc mở project sẽ tạo lại thư mục Library và các tệp thư mục cần thiết khác
9. Cuối cùng, bạn có thể thực hiện và cập nhật các thay đổi. Project đã sẵn sàng sử dụng.

File .gitignore : http://www.arreverie.com/blogs/wp-content/uploads/resources/.gitignore

7. Prefabs

Sử dụng prefabs cho mọi thứ. Prefabs trong Unity là giải pháp tốt nhất mà bạn tìm thấy để chia sẻ các cấu trúc phân cấp được cấu hình sẵn. Nói chung, hãy thử để prefab tất cả mọi thứ mà bạn đưa và Sence. Điều này giúp dễ dàng thực hiện các thay đổi mà không cần thay đổi Sence.
Lý do tại sao bạn nên sử dụng Prefabs là khi có một thay đổi với prefab, thì nó sẽ thay đổi toàn bộ ở các Sence mà prefab được sử dụng. Bạn có 100 level và muốn thêm hiệu ứng camera vào tất cả chúng? Không thành vấn đề! Nếu camera của bạn là prefab, chỉ cần thêm hiệu ứng đó vào prefab của máy ảnh.
Sử dụng prefabs riêng biệt cho các trường hợp riêng biệt. Nếu bạn có hai loại enemy và chúng chỉ khách nhau bởi thuộc tính của chúng, hãy tạo các prefab riêng biệt cho cách thuộc tính và liên kết chúng. Điều này giúp cho

• Mỗi loại được thay đổi ở một nơi
• Thực hiện thay đổi mà không cần thay đổi Sence

Liên kết prefabs tới prefabs; không liên kết các cá thể tới các cá thể. Các liên kết đến prefabs được duy trì khi đặt một prefabs vào 1 sence; liên kết đến các cá thể thì không. Liên kết với prefabs có thể giảm việc cài đặt sence và việc thay đổi trong sences

Càng nhiều càng tốt, thiết lập liên kết giữa các cá thể một cách tự động. Nếu bạn cần liên kết các cá thể thãy thiết lập liên kết theo chương trình. Ví dụ, prefab player có thể tự đăng ký với GameManager khi nó khởi động, hoặc GameManager có thể tìm thấy cá thể Player Prefabs khi nó bắt đầu.

Không đặt mest vào prefabs nếu bạn muốn thêm các scripts khác. Khi bạn tạo prefab từ một mest, tạo một gameobject rỗng làm object cha, và đặt nó ở root. Đặt script vào root, không đặt trên mesh. Bằng cách đó, việc thay mesh bằng một mesh khác sẽ dễ dàng hơn và không làm mất dữ liệu mà bạn đã thiết lập trong chủ thể.

8. Documentation

Hầu hết các tài liệu được chú thích trong mã code tuy nhiên một số cần ghi lại ở bên ngoài. Chúng ta cần duy trì tệp README.txt trong project của mình

Tài liệu đáp ứng những điều sau:

• Sơ đồ khối chi tiết và sơ đồ luồng của project giúp hiểu rõ kiến trúc project
• Các chi tiết của script và một số thông tin về các tiêu chuẩn code được tuân thủ trong project
• Lớp được dùng (cho collision, culling và raycasting)
• Các Tag được sử dụng
• GUI cho các lớp (những gì sẽ hiển thị)
• Chi tiết thiết lập Sence
• Cấu trúc Prefabs
• Các lớp Animation và cá thông tin liên quan đến Animation

9. Kết luận

Chúng tôi vừa đưa ra một cách tổng quan ngắn gọn về việc xử lý cấu trúc. Những gì phù hợp với chúng tôi có thể không hiệu quả đối với bạn, do đó đừng ngần ngại điều chỉnh mọi thứ cho phù hợp với sở thích của riêng bạn. Cách tiếp cận mà chúng tôi đã sử dụng ở đây là thử nghiệm một cái gì đó, chỉnh sửa những gì không hiệu quả, sau đó thử lại. Đó là bí quyết của thành công.

[Unity] Hướng dẫn làm biến dạng và tô màu mesh (Deform & paint color on mesh) runtime trên mobile (p1)

Trong phần 2, mình sẽ hướng dẫn 2 bước còn lại là tô màu xung quanh vị trí làm lõm và update lại collider cho mesh.

Tô màu xung quanh vị trí làm lõm

Có nhiều cách để tô màu lên texture trong real time. Tuy nhiên, để sử dụng được trên low-end device thì không có nhiều cách có thể thực hiện. Trong bài viết này, mình sẽ hướng dẫn cách sử dụng RenderTexture.
RenderTexture là một loại Texture đặc biệt cho phép tạo và update runtime. Để sử dụng nó, bạn cần tạo và chỉ định một camera render vào nó. RenderTexture hiển thị những gì camera (mà nó gắn vào) render ra trong real time.

Để làm được điều này, chúng ta cần thực hiện 2 việc:

• Tìm toạ độ uv map của texture terrain dựa trên điểm va chạm.
• Tô màu lên texture lúc runtime dựa trên RenderTexture.

1. Tìm toạ độ uv map dựa trên điểm va chạm
Đầu tiên, bạn cần tạo một RenderTexture. Tại Project, chuột phải chọn Create và tìm đến phần RenderTexture. Để sử dụng RenderTexture, chúng ta sẽ cần một Camera thứ 2 để chỉ định render vào nó. Chúng ta sẽ sử dụng một Camera với phép chiếu trực giao (orthographic projection). Tại Component Camera, gắn RenderTexture vào mục Target Texture.
Tạo một empty Gameobject và gán script PaintingTexture.cs:

public Camera canvasCam;
private Vector2 uvCoord;
private bool HitTestUVPosition(ref Vector3 uvWorldPosition)
{
    if (uvCoord != Vector2.zero)
    {
        uvWorldPosition.x = uvCoord.x - canvasCam.orthographicSize;//To center the UV on X
        uvWorldPosition.y = uvCoord.y - canvasCam.orthographicSize;//To center the UV on Y
        uvWorldPosition.z = 0.0f;
        return true;
    }
    else return false;
}

public void SetUVCoordCollider(Vector2 _uvCoord)
{
    uvCoord = _uvCoord;
}

Hàm HitTestUVPosition() sẽ trả về toạ độ uv map từ toạ độ uv của texture tại nơi va chạm.
Quay trở lại script PhysicsDeformer.cs, chúng ta sẽ viết tiếp code để tính toán toạ độ uv của texture tại nơi va chạm:

private void OnCollisionEnter(Collision collision)
{
    if (collision.gameObject.CompareTag("Terrain"))
    {
        ContactPoint[] contacts = collision.contacts;
        foreach(ContactPoint contact in contacts)
        {
            deformableMesh.AddDepression(contact.point, collisionRadius);
        }
        Vector3 minusNormal = collision.contacts[0].normal;
        minusNormal.y = -collision.contacts[0].normal.y;
        Ray ray = new Ray(collisionTerrainPoint + collision.contacts[0].normal * 0.01f, minusNormal);
        RaycastHit hit;
        if (Physics.Raycast(ray, out hit, 10f, LayerMask.GetMask("Terrain")))
        {
            paintScript.SetUVCoordCollider(hit.textureCoord);
        }
    }
}

2. Tô màu lên texture runtime dựa trên RenderTexture
Kéo texture của Terrain vào phạm vi render của orthogaphic Camera, scale nó sao cho kích thước của nó vừa bằng phạm vi render của orthographic Camera.
Tạo một empty Gameobject, đặt tên là "BrushContainer", sau đó kéo nó ở giữa camera và texture của Terrain. Gameobject này sẽ là nơi chứa các gameobject màu mà chúng ta sẽ tô lên Terrain như hình sau:

Để tô màu lên texture, chúng ta sẽ sử dụng 1 sprite như một brush, và tạo các brush tại vị trí uv map chúng ta đã lấy được bên trên. Các brush sẽ là các object con của BrushContainer. Khi camera render lên RenderTexture, các brush sẽ nằm đè lên texture và kết quả của RenderTexture sẽ giống như trong Camera Review chúng ta nhìn thấy ở hình ảnh trên.
Để thấy được kết quả, bạn hãy gán RenderTexture tại material của Terrain.
Các bạn có thể tải brush hoặc tìm kiếm các hình ảnh tương tự.
Tải hình brush
Kéo hình ảnh brush vào scene và tạo prefab cho nó, sau đó xoá hình ảnh brush trên. Chúng ta sẽ tạo brush từ prefab đó. Đặt prefab vào trong thư mục Resources.
Để tạo các brush, hãy quay lại script PaintingTexture.cs và thêm các dòng sau:

public GameObject brushContainer; //our container for the brushes painted
public float brushSize = 1.0f;
public Color brushColor = Color.grey;
private Object resourceBrush;

void Start()
{
    resourceBrush = Resources.Load("BrushEntity"); // địa chỉ sau thư mục Resources/Tên object.
}

void InstantiateNewBrush(Vector2 _uvWorldPos)
{
    GameObject brushObj;
    brushObj = (GameObject)Instantiate(resourceBrush); //Paint a brush
    brushObj.GetComponent<SpriteRenderer>().color = brushColor; //Set the brush color
    brushColor.a = brushSize * 2.0f; // Brushes have alpha to have a merging effect when painted over.
    brushObj.transform.parent = brushContainer.transform; //Add the brush to our container to be wiped later
    brushObj.transform.localPosition = _uvWorldPos; //The position of the brush (in the UVMap)
    brushObj.transform.localScale = Vector3.one * brushSize;//The size of the brush
}

Đây là hàm sinh các brush tại vị trí uv map chúng ta có được ở mục 1. Chúng ta có thể set màu và kích thước brush tại inspector.
Tuy nhiên, chúng ta cần phải lưu ý khi sinh càng nhiều object, số lượng draw call sẽ rất lớn, điều này sẽ ảnh hưởng khá nhiều đến hiệu năng. Để giải quyết nó, chúng ta sẽ cần giới hạn số lượng brush. Tiếp tục trong script PaintingTexture.cs, thêm các dòng sau:

public RenderTexture canvasTexture; // Render Texture that looks at our Base Texture and the painted brushes
public Material baseMaterial; // The material of our base texture (Were we will save the painted texture)
private bool saving;
private int brushCounter = 0;

void Start()
{
    resourceBrush = Resources.Load("BrushEntity"); // địa chỉ sau thư mục Resources/Tên object.
    baseMaterial.mainTexture = canvasTexture;
}

//Sets the base material with a our canvas texture, then removes all our brushes
void SaveTexture()
{
    brushCounter = 0;
    RenderTexture.active = canvasTexture;
    Texture2D tex = new Texture2D(canvasTexture.width, canvasTexture.height, TextureFormat.RGB24, false);
    tex.ReadPixels(new Rect(0, 0, canvasTexture.width, canvasTexture.height), 0, 0);
    tex.Apply();
    RenderTexture.active = null;
    baseMaterial.mainTexture = tex; //Put the painted texture as the base
    foreach (Transform child in brushContainer.transform)
    {//Clear brushes
        Destroy(child.gameObject);
    }
    Invoke("ResetTexture", 0.1f);
}

void ResetTexture()
{
    saving = false;
}

Cuối cùng, sử dụng các hàm chức năng bên trên để tô màu tại vị trí làm lõm:

const int MAX_BRUSH_COUNT = 1000;
void PaintColor()
{
    if (saving)
        return;
    Vector3 uvWorldPosition = Vector3.zero;
    if (HitTestUVPosition(ref uvWorldPosition))
    {
        InstantiateNewBrush(uvWorldPosition);
    }
    brushCounter++; //Add to the max brushes
    if (brushCounter >= MAX_BRUSH_COUNT)
    { //If we reach the max brushes available, flatten the texture and clear the brushes
        saving = true;
        Invoke("SaveTexture", 0.1f);
}

Bạn có thể giới hạn số lượng brush. Tại hàm Update() hãy gọi hàm PaintColor() để thực hiện tô màu tại real time. Tuy nhiên, tuỳ thuộc vào target device của bạn, hãy giới hạn tần suất gọi hàm PaintColor().

Update lại collider cho mesh của Terrain

Sau khi làm lõm và tô màu Terrain, chúng ta cần update lại collider cho mesh của Terrain. Để update lại collider, quay trở lại hàm DeformableMesh.cs và thêm các dòng sau:

private MeshCollider meshCollider;

void Start()
{
    meshCollider = GetComponent<MeshCollider>();
    MeshRegenerated();
}

void Update()
{
    if(updateCollider)
    {
        timeUpdate += Time.deltaTime;
    }
    if(timeUpdate >3)
    {
        UpdateMeshCollider();
        updateCollider = false;
        timeUpdate = 0;
    }
}

private void UpdateMeshCollider()
{
    meshCollider.sharedMesh = null;
    meshCollider.sharedMesh = meshFilter.mesh;
}

Công việc thực hiện update lại mesh collider khá tốn tài nguyên. Do vậy, việc này không thể được thực hiện một cách thường xuyên và chúng ta cũng nên tránh gọi nó cùng lúc với các công việc làm lõm và tô màu.
Cuối cùng, thêm dòng

updateCollider = true;

vào trong hàm AddDepression() để xác định thời điểm update mesh collider.

Tài liệu tham khảo

https://codeartist.mx/dynamic-texture-painting/
https://www.youtube.com/watch?v=l_2uGpjBMl4

Bài viết này sẽ hướng dẫn cách làm biến dạng mesh trong khi chạy runtime và sử dụng được trên các low-end device. Cụ thể, trong bài viết này mình sẽ tạo hiệu ứng lõm Terrain (có mesh như một model 3D - không phải built-in Terrain của Unity) khi xúc đất.

Tổng quan

Để tạo được hiệu ứng này, chúng ta cần phải xử lý 3 bước:

• Bước 1: Thực hiện làm lõm mesh khi xúc đất.
• Bước 2: Tô màu xung quanh vị trí làm lõm.
  Khi xúc đất, nền đất bên dưới không thể giống như bề mặt đất trước khi xúc được.
• Bước 3: Sau khi làm lõm, chúng ta cần phải update lại collider cho mesh.
  Khi chúng ta di chuyển tới khu vực bị làm lõm, không thể đứng như trên đất bằng như trước khi xúc.

Thực hiện làm lõm mesh

Tạo script DeformableMesh.cs và gắn vào Terrain.

public float maximumDepression;
private MeshFilter meshFilter;
private List<Vector3> originalVertices;
private List<Vector3> modifiedVertices;

void Start()
{
    MeshRegenerated();  
}

void MeshRegenerated()
{
    meshFilter = GetComponent<MeshFilter>();
    meshFilter.mesh.MarkDynamic();
    originalVertices = meshFilter.mesh.vertices.ToList();
    modifiedVertices = meshFilter.mesh.vertices.ToList();
}

public void AddDepression(Vector3 depressionPoint, float radius)
{
    var worldPos4 = this.transform.worldToLocalMatrix * depressionPoint;
    var worldPos = new Vector3(worldPos4.x, worldPos4.y, worldPos4.z);
    for (int i = 0; i < modifiedVertices.Count; ++i)
    {
        var distance = (worldPos - (modifiedVertices[i] + Vector3.down * maximumDepression)).magnitude;
        if (distance < radius)
        {
            var newVert = originalVertices[i] + Vector3.down * maximumDepression;
            modifiedVertices.RemoveAt(i);
            modifiedVertices.Insert(i, newVert);
        }
    }
    meshFilter.mesh.SetVertices(modifiedVertices);
}

Trong đó, maximumDepression là độ sâu lớn nhất mà mesh bị biến dạng.
Bản chất của hàm Addpression() là duyệt qua list tất cả các đỉnh của mesh, sau đó tính toán các đỉnh nào sẽ bị biến dạng dựa trên điểm va chạm depressionPoint, radius và cập nhật lại dữ liệu đỉnh của mesh. Do vậy, ảnh hưởng của script này đến hiệu năng của ứng dụng sẽ phụ thuộc vào tần suất nó được gọi và số đỉnh của Terrain. Terrain càng phức tạp thì ảnh hưởng của nó đến hiệu năng càng lớn. Vì vậy, bạn sẽ cần phải chú ý đến số verts của Terrain và tìm các cách để giảm thiểu nó.

Tiếp theo, tạo script PhysicsDeformer.cs và gắn vào object va chạm với Terrain mà cần tạo hiệu ứng này.

public float collisionRadius = 0.1f;
public DeformableMesh deformableMesh;
private void OnCollisionEnter(Collision collision)
{
    if (collision.gameObject.CompareTag("Terrain"))
    {
        ContactPoint[] contacts = collision.contacts;
        foreach(ContactPoint contact in contacts)
        {
            deformableMesh.AddDepression(contact.point, collisionRadius);
        }
    }
}

Script này đơn giản là tìm điểm va chạm giữa object gắn nó và Terrain. collisionRadius sẽ quyết định bán kính làm lõm tại điểm va chạm ( số lượng các đỉnh bị làm lõm xung quanh điểm va chạm). Với số lượng contact càng lớn, tần suất gọi hàm AddDepression() càng nhiều. Do vậy, tuỳ theo target device của bạn mà tuỳ chỉnh tần suất gọi hàm. Đối với các low-end device, bạn có thể chỉ gọi hàm 1 lần bằng thay contact.point = collision.contacts[0].point ( điểm va chạm đầu tiên).

1. Giới thiệu

Tối ưu hóa là một phần quan trọng trong quá trình phát triển game. Mỗi nền tảng phát triển game đều có những hạn chế về năng lực xử lý của GPU và CPU. Đặc biệt trong game 3D với độ chi tiết cao thì nhu cầu xử lý sẽ càng cao. Khi nhu cầu xử lý này trở nên quá tải thì hiệu năng game sẽ giảm. Việc này tạo nên cảm giác khó chịu cho người dùng như là load game lâu, game chạy chậm và thậm chí bị treo hệ thống. Quy trình tối ưu hóa là chuổi các quyết định giữa việc duy trình hiệu năng game và chất lượng đồ họa.

Trong Unity để tối ưu hóa chúng ta có rất nhiều phương án khác nhau, ở phạm vi bài viết này sẽ giới thiệu công cụ Mesk Baker. Công cụ này có tác dụng hợp nhất các material và mesh nhằm giảm Draw Call, nghĩa là giảm bớt công việc cho CPU.

2. Hướng dẫn sử dụng Mesk Baker

Mesk Baker yêu cầu Unity 4.6 or higher
Ở đây chúng tôi demo trên Unity 2017

a. Cài đặt

Để sử dụng công cụ này bạn có thể mua trực tiếp trên Asset Store (65$) hoặc vào website : http://digitalopus.ca/site/mesh-baker/ để sử dụng bản Evaluation Version - miễn phí nhưng giới hạn tính năng.
Sau khi download package MeshBaker chúng ta import vào unity. Sau khi import thành công chúng ta sẽ có giao diện như sau

b. Sử dụng Mesk Baker

Để tìm hiểu thêm cách sử dụng Mesk Baker bạn có thể tìm hiểu trực tiếp trên trang chính thức: http://digitalopus.ca/site/mesh-baker-videos/
Ở đây chúng tôi sẽ giới thiệu một trong những trường hợp cơ bản nhất

Bước 1: Tạo một MeskBaker như hình

Ta được

Bước 2: Chọn các mesh cần gộp

Để chọn các mesh Mesk Baker cung cấp 2 lựa chọn

i. List trực tiếp trong Sence

Tại Object MaterialBaker, chọn Open Tools For Adding Objects.
Tại mục Analyse Sense & Generate Bakers, Chọn Select Folder For Combined Material Assets để chọn folder lưu (folder Combined), rồi chọn List Shaders In Scene.

ii. Chọn thủ công từng mesh cần gộp

Bước 3 : Bake

Sau khi chọn xong các mesh cần gộp chúng ta chọn bake để gộp các mesh

Kết quả của việc bake

3. Một số option khác

Việc bake mesh có thể lựa chọn các cách out put khác nhau

• Bake into Prefab
• Bake into Scene Object
• Bake Mesh Asset in place