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 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 ReactJS là gì

• 

  React là một thư viện JavaScript mã nguồn mở, được xây dựng và phát triển bởi Facebook, giúp xây dựng giao diện người dùng. Rất nhiều thương hiệu lớn hàng đầu trên thế giới sử dụng React như Facebook, Instagram, Lazada, Mashable, Twitter,…

• React JS là một thành phần trong ngôi nhà React, nó giúp xây dựng giao diện cho các ứng dụng trên nền tảng web. Ngoài ra, còn nhiều thành phần khác như React native được sử dụng xây dựng các ứng dụng di động, React VR được sử dụng để xây dựng các website và tương tác 360 độ, React Desktop xây dựng các ứng dụng trên desktop,… Vì thế đây là một thư viện giúp ta học một lần viết mọi nơi

• React JS chỉ là một thư viện, không phải là một framework và trong mô hình MVC nó ứng với tầng View (V)

2 Dùng để làm gì, khi nào thì dùng

2.1 Dùng để làm gì

• React JS dùng để xây dựng các ứng dụng trên nền tảng web
• React JS có thể dùng xây dựng giao diện hoặc dùng để xây dựng các server

2.2 Khi nào thì dùng

• React JS dễ dàng quản lý khi quy mô mở rộng, lớn, dữ liệu thay đổi liên tục theo thời gian, nó không dành cho những ứng dụng nhỏ cần hoàn thành sớm
• React JS hỗ trợ rất tốt cho việc xây dựng các ứng dụng web Single Page

3 Cấu trúc, thành phần của ReactJS

React được xây dựng xung quanh các thành phần nhỏ gọi là component nhằm mục đích dễ quản lý và tái sử dụng. Dưới đây là các thành phần của một ứng dụng ReactJS

3.1 Component

Trong React JS, chúng ta xây dựng trang web sử dụng các component nhỏ. Chúng ta có thể tái sử dụng lại các component đó ở nhiều nơi một cách linh hoạt với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể có nhiều thành phần khác. Mỗi component có một trạng thái riêng có thể thay đổi được gọi là state. Trạng thái của component thay đổi thì component cũng được render lại một cách real-time.
Ví dụ: Một trang web sẽ có các component như Header, Content, Footer. Trong component Header có các component như Title, SearchBar,… Trong Content có các component như Form, Button,…

3.2 Props

Props chính là các thuộc tính của một component. Props giúp các component tương tác với nhau, component nhận input gọi là props và trả thuộc tính mô tả những gì component con sẽ render. Props giống như hằng số, không thay đổi được giá trị.

3.3 State

State là trạng thái của component, khi state thay đổi thì component cũng được render lại một cách đồng thời để cập nhật UI.

4 Cài đặt thế nào

Có nhiều cách cài đặt, dưới đây là cách đơn giản nhất để bắt đầu xây dựng một ứng dụng React mới. Trước hết, chúng ta cần cài đặt NodeJS phiên bản mới nhất, có thể cài thêm Yarn và một công cụ để viết code như Sublime Text, Atom, Visual Studio Code,…

4.1 Cài đặt create-react-app

Create-react-app là một câu lệnh giúp bạn khởi tạo một ứng dụng web reactjs ở bất cứ đâu, bất cứ hệ điều hành nào trên máy tính. Để sử dụng được lệnh này, rất đơn giản, bạn tiến hành: Mở công cụ dòng lệnh ưa thích của bạn (Command Line, Windows Power Shell,…) và thực hiện câu lệnh: npm install -g create-react-app.
Sau khi cài đặt xong, chúng ta có thể dùng lệnh create-react-app để tạo một ứng dụng web sử dụng react ở bất kỳ đâu.

4.2 Tạo ứng dụng

Sử dụng câu lệnh create-react-app <tên app> và đợi cho tới khi cài đặt xong. Sau đó, thực hiện câu lệnh cd <tên app> để di chuyển vào thư mục của ứng dụng.

Sử dụng câu lệnh npm start để chạy ứng dụng. Sau khi thực hiện câu lệnh, các mã nguồn của ứng dụng sẽ được build ra các file thực thi và được mở trực tiếp ngay trên trình duyệt trên địa chỉ: http://localhost:3000
Dưới đây là cấu trúc các thành phần của một ứng dụng reactjs

• Thư mục node_modules chứa các thư viện, các thành phần cần thiết cThư mục public chứa các file tài nguyên mà người dùng có thể tải trực tiếp về máy
• Thư mục src chứa source code của ứng dụng
• File package.json chứa các cấu hình cho ứng dụng

4.3 Xuất bản ứng dụng

Sau một thời gian phát triển ứng dụng, bạn muốn đưa ứng dụng của bạn lên host để mọi người cùng sử dụng. Khi đó, bạn cần xuất bản ứng dụng của mình. Để xuất bản, bạn thực hiện câu lệnh npm run build. Sau khi thực hiện xong, ứng dụng của bạn được lưu trong thư mục build, bạn có thể up các file này lên host để tiến hành sử dụng.

5 Demo

Dưới đây là hình ảnh của trang login sử dụng react js:

Để kiểm tra xem ứng dụng của bạn hay một trang web nào đó bạn đang xem có sử dụng reactjs không, bạn có thể cài đặt tiện ích React Developer Tools trên trình duyệt. Tiện ích này do chính Facebook phát triển và có thể sử dụng trên trình duyệt Chrome và Firefox. Sau khi cài đặt tiện ích này, bạn vào một trang web nào đó, nếu biểu tượng của tiện ích có màu:

• Trắng: trang web đó không sử dụng reactjs
• Vàng: trang web đó đang trong chế độ phát triển, chưa xuất bản phiên bản chính thức
• Xanh: trang web đó đã ở chế độ xuất bản chính thức