Blog

iOS: Hướng dẫn tạo certificate, App ID, Provisioning Profile để tải ứng dụng lên App store
Lời mở đầu

Như các bạn đã biết App store là chợ ứng dụng của Apple, nơi chứa tất cả những ứng dụng trên toàn thế giới được apple công nhận. Tất cả những ứng dụng muốn đưa lên Appstore đều phải trải qua những bước kiểm duyệt nghiêm ngặt của Apple. Mà trong các công ty chỉ 1 số người có quyền có thể upload ứng dụng lên store thôi. Vì vậy mình muốn viết bài này để chia sẻ cho tất cả các anh em cùng biết.

Giải thích các thuật ngữ

Trước khi đi vào chi tiết mình muốn các bạn nắm rõ các thuật ngữ trước, để đảm bảo các bạn hiểu rõ vấn đề và giúp mọi việc trở nên dễ dàng hơn

.ipa (iOS App store Package) là file lưu giữ ứng dụng iOS. Nó chỉ có thể được cài đặt trên thiết bị iOS.

Archive: Là hành động tạo file để upload lên app store.

Apple ID: là tài khoản của người dùng được Apple cung cấp để đăng nhập trên các sản phẩm của Apple. Đối với lập trình viên chúng ta cần sử dụng tài khoản thông qua trang App Developer. Để có thể thành apple developer bạn phải nâng cấp tài khoản Apple ID của mình. Và chi phí cho tài khoản cá nhân là 99$/năm. Hoặc nếu bạn làm việc trong công ty bạn cũng có thể yêu cầu người có quyền mời bạn vào dự án và cấp quyền cho bạn.

Certificate: Đây là chứng chỉ của Apple. Apple dùng nó để xác nhận xem app đó có thể hoặc còn hoạt động được nữa hay không. Thường thời hạn của các Certificate sẽ là 1 năm. Có 2 kiểu certificate đó là:
– Development certificate: Nó giúp bạn build app trên thiết bị thật đã được đăng ký(Giới hạn 100 devices)
– Distribution certificate: Nó giúp XCode xác nhận và có thể đẩy file .ipa lên app store connect.

Bundle ID: Nó là duy nhất và định danh ứng dụng của bạn

Device identifiers: là những device được đăng kí sử dụng trong môi trường phát triển(development)

Provisioning profiles: Nó cho phép cài đặt ứng dụng trên môi trường Development và Distribution. Nó bao gồm cả signing certificates, device identifiers và bundle ID.
– Development: Nó giúp bạn có thể cài ứng dụng trên các Device đã được đăng kí
– Distribution: Nó dùng để đưa app lên Itunes connect -> đưa lên store

App store connect: Đây là trang quản lý ứng dụng của bạn. Đây là nơi mà bạn chuẩn bị các tài liệu, hình ảnh(metadata) và các thông tin liên quan tới ứng dụng của bạn. Nó giúp bạn gửi thông tin này đến bên kiểm duyệt ứng dụng của apple và cho biết trạng thái ứng dụng của bạn.

Các bước chuẩn bị

Để tải ứng dụng lên App store connect chúng ta cần phải chuẩn bị các thông tin liên quan đến ứng dụng như: App ID, Certificates, Provisioning profile …

Bước 1: Chuẩn bị một tài khoản apple id đã được nâng cấp lên Apple Developer.

Để có thể tải ứng dụng lên Store. Apple yêu cầu người dùng phải có tài khoản Developer. Để trở thành Apple Developer chúng ta có 2 cách:
- Nâng cấp tài khoản Apple Id thường với giá 99$/năm cho tài khoản cá nhân.
- Sử dụng tài khoản Apple Developer của người khác mời vào dự án đang làm.
Sau khi hoàn tất công việc trên chúng ta đăng nhập vào trang Apple Developer

Bước 2: Tạo distribution certificate

Chọn mục Certificates, IDs & Profiles để mở trang quản lý.

Để tạo mới certificates ta bấm vào dấu +

Nếu bạn đung sử dụng XCode có version >= 11 thì chọn Apple Distribution, nêu không thì chọn iOS Distribution( App store Ad Hoc). Sau đó bấm tiếp tục.

Đến đây Apple bắt chúng ta phải tải lên file Certificate signing request. Để tạo file này chúng ta cần mở ứng dụng Keychain Access để tạo.

Một popup sẽ hiện ra, bạn hãy điền đầy đủ thông tin như dưới hình và chọn Save to disk

Điền đầy đủ thông tin như hình và bấm Continue(tiếp tục). Lúc này nó sẽ hiện popup cho chúng ta lưu file này.
Lưu ý: Bạn nên tạo các thư mục để quản lý các file certificate cho mỗi một ứng dụng. Nhằm mục đích sau này có thể cần đến.

Bây giờ hãy quay lại trang web và chọn file Certificate signing request vừa tạo. Và bấm Continue( tiếp tục).
Vậy là ta đã tạo được Distribution Certificate. Với các Certificate khác, các bạn cũng làm tương tự.

Tiếp theo chúng ta cần mở certificate vừa tạo để tải certificate về cài đặt trên Keychain Access của máy đang sử dụng.

Bấm vào Download để tải về certificate này. Tải về xong bạn bấm double click để cài đặt nó vào Keychain Access.

Lưu ý: Bạn nên export private key của certificate này và lưu nó cẩn thận. Nếu không có private key các device khác sẽ không sử dụng được Certificate này.

Bước 3: Tạo App ID

Với mỗi một ứng dụng trên store đều phải có một App Id nhằm định danh cho nó khi ở trên Store.

Mở tab Identifiers > Bấm dấu +

Một trang mới xuất hiện, bạn chọn App IDs và bấm Continue(Tiếp tục)

Trang đăng ký App ID xuất hiện Bạn hãy điền các thông tin ứng dụng của bạn vào các ô trống và bấm Continue (Tiếp tục) để hoàn thành việc tạo App ID.

Bước 4: Tạo Provisioning Profile – Distribution

Mở tab Profiles > Chọn dấu + để tạo mới provisioning profile

Lúc này màn hình Register A New Provisioning profile được hiển thị. Bạn muốn tạo loại profile nào thì tích vào mục đó. Trong trường hợp này chúng ta cần tạo profile để upload app lên store vì vậy chúng ta sẽ chọn mục Distribution – App Store như hình dưới và bấm Continue(Tiếp tục):

Màn hình Generate A Provisioning Profile được hiển thị:
Bạn muốn tạo Profile cho ứng dụng nào thì chọn AppID của ứng dụng đó và bấm Continue

Tiếp đến bạn cần chọn Distribution certificate mà bạn đã tạo ở Bước 2. Trong trường hợp bạn tạo nhiều distribution Certificate nó sẽ hiển thị dưới dạng list cho bạn chọn.
Chọn certificate và bấm Continue

Vậy là bạn đã tạo thành công profile cho distribution phục vụ cho việc tải ứng dụng lên App store connect.

Tải về profile bạn vừa tạo và bấm double click để cài đặt.

Tổng kết

Trong bài viết này mình đã giúp các bạn làm quen với một số keywords và cách để tạo các file certificates, app id, profile …. Đó là những bước đầu để chuẩn bị cho việc đưa ứng dụng của các bạn lên store.

iOS/App store connect: Các bước đẩy ứng dụng của bạn lên App store
March 19, 2020
iOS/Auto Layout – Phần 7: UI Debugging
Lời mở đầu

Giao diện người dùng(User Interface) của một ứng dụng hiện đại là một cấu trúc phức tạp. Nó liên quan đến các thành phần UI, bố cục và bản thiết kế dẫn đến quá trình gỡ lỗi(debugging) trở nên khá phức tạp. Việc biết các công cụ có sẵn giúp bạn giảm hàng giờ ngồi gỡ lỗi và làm cho việc tìm ra vấn đề trở nên đơn giản hơn.

Trong bài viết này mình sẽ giới thiệu về các công cụ gỡ lỗi giao diện do Apple cung cấp.
1. View Hierarchy Debugger

View hierarchy debugger cung cấp khả năng kiểm tra và hiểu hệ thống phân cấp UI. Các thông tin bao gồm Phân cấp ứng dụng(app’s hierarchy), các view, các ràng buộc và view controller được hiển thị dưới dạng danh sách phân cấp. Object inspector và size inspector và thậm chí là mô hình 3D có thể tương tác được. Xịn sò vl 😀

Nó được đặt ở thanh debug. Để mở tính năng này bạn bấm vào biểu tượng được khoanh đỏ hình dưới đây. Khi ở chế độ này XCode sẽ dừng ứng dụng của bạn ở trạng thái hiện tại.

Mở debug view hierarchy

Tính năng này có thể sử dụng được cho iOS, tvOS, macOS, máy ảo(simulator) và thiết bị thật.

2. lldb

Nếu bạn thích console hơn là các công cụ trực quan thì UIKit cũng cung cấp các APIs logging rất ổn. Có một vấn đề nhỏ đó là những APIs private. Nhưng chúng ta cũng không dùng debug cho các bản release.
```
-[UIView recursiveDescription]
```
Nó sẽ hiển thị dưới dạng như sau:
```
<UIView: 0x7f9b29c08770; frame = (100 100; 50 50); layer = <CALayer: 0x600001b516e0>>
```
Nó sẽ hiển thị các thông tin bố cục, bản vẽ, CALayer và các trường cụ thể bổ sung.
```
-[UIViewController _printHierarchy]
```
Tương tự UIViewController cũng hiển thị các thông tin như dưới đây:
```
(lldb) po [viewController _printHierarchy]
<UISplitViewController 0x7fb23a605920>, state: disappeared, view: <UILayoutContainerView 0x7fb23d80dc60> not in the window
| <UINavigationController 0x7fb23b817000>, state: disappeared, view: <UILayoutContainerView 0x7fb23d80e280> not in the window
|    | <MasterDetailTemplate.MasterViewController 0x7fb23a606140>, state: disappeared, view: <UITableView 0x7fb23b05ac00> not in the window
+ <UINavigationController 0x7fb23b01d600>, state: appeared, view: <UILayoutContainerView 0x7fb23a503150>, presented with: <_UIFullscreenPresentationController 0x7fb23d808f20>
|    | <MasterDetailTemplate.ModalViewController 0x7fb23a409660>, state: appeared, view: <UIView 0x7fb23a51dfc0>
```
- | là biểu tượng cho biết các child view controllers
- + đại diện cho Modal presentation
_printHierarchy là phương thức đặc biệt hữu ích khi được gọi triên rootViewCOntroller của UIWindow:
```
po [[[UIWindow keyWindow] rootViewController] _printHierarchy]
```
Các phương thức ở trên đều dành cho Objective-C. Nếu bạn đang sử dụng swift thì cần tạo một số extension như sau:
```
#if DEBUG

extension UIWindow {

    class var key: UIWindow {
        let selector: Selector = NSSelectorFromString("keyWindow")
        let result = UIWindow.perform(selector)
        return result?.takeUnretainedValue() as! UIWindow
    }
}

extension UIView {
    
    var recursiveDescription: NSString {
        let selector: Selector = NSSelectorFromString("recursiveDescription")
        let result = perform(selector)
        return result?.takeUnretainedValue() as! NSString
    }
}


extension UIViewController {
    
    var printHierarchy: NSString {
        let selector: Selector = NSSelectorFromString("_printHierarchy")
        let result = perform(selector)
        return result?.takeUnretainedValue() as! NSString
    }
}

#endif
```
Khi tạo xong các extension này chúng ta có thể sử dụng nó ở console bằng cách:
```
po view.recursiveDescription
po UIWindow.key.rootViewController!.printHierarchy
```
3. Instruments – Core Animation

Kiểm tra cấu trúc UI để tối ưu hóa hiệu suất. Điều đầu tiên chúng ta cần làm là đo khung hình mỗi giây. Con người có cảm nhận ứng dụng chạy mượt khi nó có thể hoạt động ở ~ 60FPS (Frames per second). Và đó chính là mục đích của chúng ta.

Lưu ý: Nó không hoạt động trên Simulator

Để mở chúng ứng dụng này chúng ta sử dụng tính năng search(command + space) đánh từ khóa Instruments:

Mở ứng dụng Instruments lên và chọn core animation

Core Animation đo hiệu năng đồ họa của ứng dụng. Trong ví dụ này, mình chỉ tập trung vào rendering performance. Ứng dụng của mình hiện tại là một UITableView với các custom cell. Bây giờ nó chỉ hiển thị section và row.

Khi cuộn mình nhận thấy nó hơi giật. Cấu hình ứng dụng với Instruments cho thấy hiệu suất cách xa mức 60 FPS. Khi cuộn (từ giây thứ 4->23) hiệu suất giảm xuống còn ~44 FPS giảm 16 so với mục tiêu đặt ra.

Tôi nghi ngờ vấn đề ở đây liên quan đến cell rendering. Với tính năng Color Blended Layers debug được bật, ta có thể hiểu rõ hơn về những gì đang xảy ra.

Color blended layer chỉ ra các view layers đang được vẽ chiingf lên nhau.

Để hiểu tại sai nó lại là vấn đề, chúng ta cần biết hình ảnh cuối cung được tạo ra như thế nào. Pixel cuối cùng mà người dùng nhìn thấy là một bố cục pha trộn các pixel trên cùng và bên dưới cùng tọa độ. Nó có nghĩa là mọi view layer phải được render để tạo hình ảnh cuối cùng. Khi view layer mờ đục, blending(Pha trộn) có thể được tối ưu hóa bằng cách không vẽ các layer bên dưới.

Để bẻ cong góc và đổ bóng cho View, tôi sử dụng CALayer properties:
```
let cardView = UIView()
cardView.layer.cornerRadius = 10.0
cardView.layer.shadowColor = UIColor.black.cgColor
cardView.layer.shadowOpacity = 0.5
cardView.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
cardView.layer.shadowRadius = 4.0
```
Điều này làm cho các phần view của tôi có các layer trong suốt, nó gây ra việc blending không cần thiết. Bởi vì background color được tô, nên rendering có thể được tối ưu. Ta sẽ set một solid background cho View của mình và sử dụng hình nên mà không có alpha:
```
let cardView = UIImageView(image: UIImage(named: "cardBackground"))
```
Đây là một thủ thuật đơn giản giúp chúng ta giải quyết việc bị blending.

Lúc này hiệu suất của ứng dụng đã tốt hơn, cho cảm giác cuộn rất mượt.

Bạn cũng có trể truy cập nhanh vào Color Blended Layers từ iOS Simulator.

4. Pixie

Pixie giúp bạn thực hiện thiết kế một cách hoàn hảo. Công cụ này cho phép bạn kiểm tra từng pixel của ứng dụng theo đúng nghĩa đen.

Pixie có thể được tải từ website của Apple. XCode > Open Developer Tool > More Developer Tools… trong công cụ bổ xung cho XCode.

Tổng kết

Mình hi vọng bài này giúp các bạn có thể giúp các bạn tận dụng tool debug của apple để làm việc tốt hơn 😀
March 17, 2020
[React] Sử dụng mẫu container trong React như thế nào?
Chắc hẳn ai cũng biết tới nguyên lý đầu tiên của SOLID đó là trách nhiệm đơn nhất. Nghĩa là mỗi một đối tượng chỉ làm một nhiệm vụ duy nhất. Đơn giản vì với tính đơn nhất chúng ta sẽ dễ dàng kiểm soát mã nguồn hơn (cho cả người code lần người review). Chưa kể tới việc với tính đơn nhất thì mã nguồn của bạn cũng trở nên trong sáng hơn. Với anh em lập trình React cũng vậy, bài toán khá đau đầu là làm sao tách logic ra khỏi phần mã nguồn kết xuất HTML. Cách làm như vậy giúp chúng ta thay vì viết một React Component để là cả hai việc thì bây giờ chúng ta sẽ viết hai React Component để làm hai nhiệm vụ khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn sử dụng mấu container để làm việc đó.
Container component là gì?

Chúng ta không có một định nghĩa chính xác nào về container component cả, container component đơn giản là một React Component làm nhiệm vụ goi API để lấy dữ liệu và sau đó truyền nó xuống một React Component để kết xuất mã HTML.

Định nghĩa container

Để các bạn dễ hình dung tôi sẽ viết thử một container, container này sẽ thực hiện lấy thông tin của octocat

src/containers/OctocatContainer.jsx
```
import React, { useState, useEffect } from 'react';
import { Octocat } from '../components/Octocat';
export function OctocatContainer() {
  const [octocat, setOctocat] = useState(null);

  useEffect(() => {
    async function getOctocat() {
      // gọi hàm fetch với phướng thực mặc định là GET
      const response = await fetch('https://api.github.com/users/octocat');
      const body = await response.json();
      // sử dụng React Hook để thông tin octocat vào state
      setOctocat(body);
    }

    getOctocat();
  }, []); // tham số mảng rỗng thể hiện hàm effect không phụ thuộc vào đối tượng nào, nó tương đương với hàm componentDidMount

  return <Octocat {...octocat} />;
}
```
Trong ví dụ trên tôi có sử dụng thêm JSX spread attributes để tránh việc phải khai báo props cho Octocat component. Mẫu này đặc biệt có ý nghĩa đối với các component mà bạn cần khai báo nhiều props.

Định nghĩa component để kết xuất mã HTML

Sau khi có dữ liệu rồi thì chúng ta sẽ kết xuất nó ra HTML như sau:

src/components/Octocat/Octocat.jsx
```
import React from 'react';

export function Octocat(props) {
  const { login, avatar_url, name } = props;
  return (
    <ul>
      <li>{login}</li>
      <li>{name}</li>
      <li>
        <img src={avatar_url} alt={login} />
      </li>
    </ul>
  );
}
```
Như các bạn thấy, component trên chỉ làm nhiệm vụ bind dữ liệu lên màn hình mà thôi.

Cùng xem kết quả nhé 🙂
March 17, 2020
SQLite with FMDB in Swift (P2)
Nội dung bài viết:
- Truy vấn insert
- Truy vấn select
- Truy vấn delete
- Truy vấn update
Truy vấn INSERT
- Câu truy vấn này dùng để thêm bản ghi vào table
- Có 2 cách để viết 1 câu truy vấn insert.
  Cách 1:
Cách 2: Trong trường hợp bạn tạo 1 bản ghi mới đầy đủ các trường của bảng ghi, thì k cần liệt kê cụ thể tên các trường như cách 1:
- Để thực hiện truy vấn INSERT vào table Book ở bài viết trước, việc đầu tiên là viết 1 câu truy vấn:
```
let query = "insert into Book (name, author, price) values ('Kill the mockingbird', 'HarperLee', 85000)"
```
Đây là 1 câu truy vấn thực hiện sự thay đổi đến database, nên ta vẫn sử dụng lệnh executeUpdate(…) để thực hiện câu query:
Ở đây, vì table Book được khởi tạo với thuộc tính id tự động tăng, nên ta có thể bỏ qua việc khai báo id.
```
func insertBook() {
    if openDatabaseConnectionAtPath(path: getDatabasePath()) {
        let query = "insert into Book (name, author, price) values ('Kill the mockingbird', 'HarperLee', 85000)"
        do {
           try database.executeUpdate(query, values: nil)
        } catch let err {
           print("Insert failed, error: \(err.localizedDescription)")
        }
    }
    database.close()
}
```
Ở đây, table Book có cả 4 trường đều khác nil, tuy nhiên trường id và price có thuộc tính default nên có thể không cần khai báo trong câu lệnh insert, nhưng nếu bạn insert thêm 1 bản ghi mà không có trường name hay author thì FMDB sẽ trả về lỗi và không thể insert được.

Note: Bạn có thể thực hiện nhiều câu truy vấn cùng 1 lúc, bằng cách gộp chúng vào 1 câu truy vấn chung, mỗi câu truy vấn nhỏ ngăn cách nhau bằng 1 dấu ;
- Ngoài ra, còn có 1 cách thực hiện câu lệnh executeUpdate thuận tiện hơn bằng cách sử dụng thuộc tính values như sau:
- Ở đây, name và author không được cụ thể ngay từ câu truy vấn, mà được để 1 dấu ? có tác dụng như 1 placeholder để truyền trường name, author vào sau.
- Khi thực hiện lệnh executeQuery, điền lần lượt các giá trị muốn truyền tương ứng vào các dấu ? vào thuộc tính values.
Truy vấn SELECT:
- Câu truy vấn này dùng để lấy các bản ghi từ table.
- Cách viết câu truy vấn Select:
  + SELECT column1, column2,… FROM table_name; // Lấy 1 vài trường cụ thể
  + SELECT * FROM table_name; // Lấy tất cả các bản ghi
  + Ngoài ra có thể kết hợp thêm Where, Order by,… vào câu truy vấn để lọc các bản ghi
- Ví dụ thực hiện câu truy vấn lấy tất cả các sách trong table Book:
Lấy tất cả các bản ghi và sắp xếp theo giá tăng dần

Lấy tất cả các tên tác giả mà có trường id = 2
Câu truy vấn select k làm thay đổi DB, nên sử dụng lệnh executeQuery(…) để thực hiện.

Câu truy vấn này trả về 1 tập dữ liệu FMResultSet, từ đó convert về kiểu dữ liệu mà ta mong muốn.
Truy vấn DELETE
- Dùng để xóa bản ghi đang có trong table.
- Cách viết câu truy vấn delete:
  DELETE FROM table_name WHERE condition;
- Ví dụ thực hiện câu truy vấn delete:
Truy vấn UPDATE:
- Dùng để thay đổi giá trị của bản ghi đang có trong table.
- Cách viết câu truy vấn:
  UPDATE table_name SET column1 = value1, column2 = value2, … WHERE condition;
- Ví dụ thực hiện câu truy vấn:
Kết luận:
- Nên define các trường thành Constant để tránh gõ nhầm khi viết câu truy vấn.
- Sử dụng lệnh executeUpdate để thực hiện thay đổi DB, dùng lệnh executeQuery để thực hiện việc lấy các bản ghi.
- Các câu lệnh có thể gộp vào với nhau, nhưng ngăn cách với nhau bằng dấu ;.
- Luôn đóng liên kết tới DB sau khi thực hiện xong câu truy vấn.
March 15, 2020
iOS/Auto Layout – Phần 6: Những trường hợp đặc biệt trong Auto Layout
Lời mở đầu

Trong bài viết này mình sẽ chia sẻ về cách tạo constraint cho một số view đặc biệt và những lưu ý khi chúng ta tạo các constraint cho các view.
1. UISrollView

UIScrollView là một view tạo constraint khá là phức tạp và khó hiểu với người mới. Thật không may là nó lại được sử dụng trong khá nhiều trong ứng dụng của bạn. Nhưng nó sẽ trở nên đơn giản hơn nếu bạn hiểu được bản chất của nó.

UIScrollView là một view mà nó cho phép cuộn và phóng to nội dung của nó.

Khi tạo constraint cho scroll view bạn cần tạo constraint cho 2 bước:
– Bước 1 là cần phải tạo các constraints cố định khung(kích thước và vị trí) của scroll view so với super view của nó.
– Bước 2 là cần phải tạo các constraint cho các view trong scrollview.

1.1 Tạo constraint cho UIScrollView không sử dụng Content Layout Guide

Sử dụng trong trường hợp bạn sử dụng bản XCode version < 11 hoặc bạn sử dụng XCode 11 nhưng không muốn dùng Content Layout Guide của UIScrollView.

Giờ chúng ta kéo 1 scrollView vào và tạo constraint nó với superview như hình dưới:

Vậy là ta đã hoàn thành bước 1: tạo constraint xác định vị trí, kích thước của Scroll View. Trong trường hợp này mình đang để scrollview có kích thước bằng kích thước của màn hình.

Tiếp theo chúng ta đến bước 2 tạo constraint cho các view trong scroll view.
Chúng ta cần kéo vào 1 UIView để chứa tất cả các View.
Lúc này chúng ta sẽ tạo constraint cho View này bằng cách kéo chuột phải từ view đó vào scrollview và giữ Shift để add nhiều constraint như hình dưới:

Việc Fix equal height, equal width với scroll view giúp các bạn xác định vị trí cũng như kích thước của nội dung scrollview.

Giờ chúng ta có thể kéo các View mình muốn vào trong view này và sắp xếp chúng theo ý muốn. Ở trường hợp này mình muốn kéo vào 1 label và 1 button. Nên mình sẽ constraint theo như hình phía dưới.

Tiếp theo, do trong trường hợp này mình làm scrollview cuộn theo chiều dọc nên mình sẽ bỏ constraint equal height của view với scrollview đi. Khi đó ta cần sửa lại chỉ số constraint bottom của button sao cho phù hợp với thiết kế, giả sử trường hợp này mình sẽ để là 40 points. Ta sẽ được kết quả như hình:

Tiếp đến các bạn cần tìm constraint bottom của View Content và sửa lại giá trị của nó về giá trị mình mong muốn( thường sẽ để là 0) Constraint này đại diện cho khoảng cách bottom giữa scrollview và contentview khi mà content view có size lớn hơn size của scroll view.

Vậy là xong.
Bước cuối cùng chúng ta test lại scroll view bằng cách set 1 đoạn text dài cho Label.
kết quả sẽ được như hình dưới:

1.2 Tạo constraint cho UIScrollView với Content Layout Guide

Từ XCode 11 trở đi Apple đã cho thêm 1 thuộc tính Content Layout Guide cho UIScrollView giúp mọi người tạo constraint cho nó 1 cách dễ dàng hơn. Khi bạn kéo vào 1 UIScrollView ở XCode 11 nó sẽ mặc định được bật tính năng này. Khi này bên trong scroll view sẽ có 2 layout guide là Content Layout guide và Frame Layout Guide

Nó khác với cách tạo 1.1 là thay vì nó constraint trực tiếp với ScrollView thì nó lại constraint với các Layout guide của scroll view.

Content Layout guide: Chọn ContentView sử dụng chuột phải kéo vào Content layout guide và tạo các constraint ContentView với content layout guide leading, top, trailing, bottom như sau:

Frame Layout guide: Chọn content View sử dụng chuột phải kéo vào Frame Layout guide và tạo các constraint equal width nếu muốn cuộn dọc hoặc equal height nếu muốn cuộn ngang.

Còn lại chúng ta vẫn làm giống ở mục 1.1.

2. UILabel

Thông thường 1 UILabel chỉ cần 2 constraint để xác định được vị trí cũng như kích thước của nó. Thế nên rất nhiều bạn khi tạo constraint cho UILabel thường bị thiếu constraint, dẫn đến trường hợp khi build app lên bị vỡ layout.

2.1 Nên tạo ít nhất 4 Constraint cho UILabel

UILabel là view có thể tự thay đổi kích thước của nó dựa trên content size (text, font ..) của nó. Vì vậy nếu bạn không tạo đủ constraint cần thiết cho UILabel trong một số trường hợp nội dung của UILabel sẽ không hiển thị đúng như mong đợi.

Nếu bạn chỉ sử dụng 2 constraint sẽ dẫn đến trường hợp khi nôi dung của label dài ra nó sẽ bị tràn ra ngoài màn hình.

2.2 Nên set thêm constraint height cho các UILabel nếu nó làm nhiệm vụ giữ trục phát triển View

Trong trường hợp UILabel làm nhiệm vụ giữ trục của view mà nó được gán giá trị empty sẽ dẫn đến trường hợp bị vỡ layout vì khi UILabel có text = “” (empty) height của nó sẽ = 0 vì thế ta cần tạo constraint cho nó và để giá trị là greater than or equal (>=). Khi đó các label giữ trục của view sẽ không làm vỡ layout nữa vì giá trị height nhỏ nhất của nó hiện tại không phải là 0 nữa.

Các bạn theo dõi sự khác nhau của 2 hình dưới đây.

Có set height >=

Không set height

3. UIButton

UIButton cũng là một View có thể tự thay đổi kích thước dựa trên nội dung của nó. Vì vậy chúng ta cũng cần lưu ý khi tạo constraint cho nó. Đối với buton chúng ta chỉ cần 2 constraint là có thể xác định vị trí cũng như kích thước của nó. Nhưng để nó có thể hiển thị đúng trong nhiều trường hợp thì chúng ta cần nhiều hơn 2 constraint.

Không nên set width cho button có chứa text

Vì UIButton nó sẽ tự thay đổi kích thước theo nội dung bên trong, nên khi text dài ra hoặc ngắn đi nó sẽ tự thay đổi kích thước của button cho phù hợp. Nếu chúng ta gán constraint width cho nó thì dễ dẫn đến trường hợp khi text dài ra button sẽ hiển thị mất chữ.
Vì vậy thay vì các bạn set constraint width cho UIButton để đạt được kết quả như file design thì chúng ta sẽ sửu dụng thuộc tính insets để căn chỉnh khoảng cách nội dung của UIButton.

Ở đây mình sử dụng content insets để căn khoảng cách của nội dung button với các cạnh của nó.

4. Priority: Độ ưu tiên khi các View

Với mỗi view đều có 2 loại Priority đó là:
– Content Hugging Priority (Vertical, horizontal)
– Content Compression Resistance Priority (Vertical, horizontal)

Content Hugging Priority

Là độ ưu tiên ôm nội dung của View. View nào có độ ưu tiên của nó lớn hơn thì nó sẽ ưu tiên nội dung của view đó hiển thị đúng với các chỉ số. Các view lân cận có độ ưu tiên nhỏ hơn sẽ phải tự dãn content để lấp dầy khoảng trống còn lại theo chiều ngang hoặc dọc.
Nó sẽ hoạt động nếu nội dung của các chiều đang không lấp đầy khoảng trống có sẵn trong super view.

Theo dõi hình ảnh dưới đây để hiểu rõ hơn:

Hình này Label có Hugging priority lớn hơn của Button.
Vì vậy nó sẽ ưu tiên ôm nội dung của Label và dãn button.

Trường hợp này thì Button có Hugging priority lớn hơn của Label.
Nên nó sẽ ưu tiên ôm nội dung của Button và dãn Label.

NOTE: Nếu Priority của 2 View bằng nhau nó sẽ sảy ra lỗi constraint. Vì vậy các bạn cần xác định được View nào cần độ ưu tiên cao hơn ở các trường hợp khác nhau.

Tuy nhiên nó chỉ đúng khi nội dung của các view không chiếm hết khoảng không còn lại ở super view theo chiều của priority.
Khi nội dung của các view vượt quá khoảng không có sẵn thì chúng ta cần sử dụng Content compression resistance priority để giải quyết.

Content compression resistance priority

Đây là thuộc tính thể hiện độ ưu tiên chống lại việc nén nội dung của View. Có nghĩa là View nào có priority lớn hơn sẽ được ưu tiên hiển thị nội dung của nó để lấp khoảng trống còn lại trong super view trước, sau đó nếu còn khoảng trống thì các view còn lại có priority nhỏ hơn sẽ được lấp vào, nếu hết khoảng trống nó có thể sẽ biến mất nếu không có constraint.priority lớn hơn(Priority của các constraint mặc định là 1000).
Priority này sẽ hoạt động khi nội dung của các view được lấp đầy hoặc vươti quá size của super view.

Theo dõi hình dưới đây để hiểu rõ hơn:

Độ ưu tiên chống nén của UILabel cao hơn Button nên nội dung của button sẽ không hiển thị đầy đủ

Trong trường hợp này độ ưu tiên chống nén nội dung của UILabel thấp hơn nên Nội dung của button được hiển thị đầy đủ, còn UILabel trong trường hợp này sẽ mất chữ nếu có line = 1. Vì vậy ở đây mình để line = 0 để label tự co dãn

Tổng kết

Mình hi vọng bài viết sẽ giúp cho các bạn có thêm 1 chút tự tin khi làm việc với Auto Layout 😀
March 15, 2020
[AWS] Lambda và DynamoDB Streams không còn khó nữa!
Với các ứng dụng hiện nay, việc giao tiếp giữa client và server phổ biến đang sử dụng Rest API. Trong một số trường hợp việc phải để client đợi xử lý là điều không thể chấp nhận được. Do đó để giải quyết vấn đề này thì phần lớn cách giải quyết là sử dụng batch process, nghĩa là tại thời điểm đó chúng ta sẽ trả lại dữ liệu cho client ở trạng thái đang xử lý(tránh xảy ra tình trạng timeout). Tuy nhiên ngay tại thời điểm đó một batch process sẽ được khởi động để thực thi tiếp các công việc còn lại. Trong bài viết này tôi sẽ hướng dẫn các bạn viết batch process bằng AWS Lambda bằng cách sử dụng DynamoDB Streams.

DynamoDB Streams

DynamoDB Streams là một tính năng trong DynamoDB cho phép bạn lắng nghe thay đổi trên một bảng dữ liệu nào đó và thực hiện các tác vụ đáp ứng yêu cầu nghiệp vụ trong ứng dụng của bạn. Mỗi khi có sự thay đổi DynamoDB sẽ ghi các bản ghi gần như ngay lập tức là dòng dữ liệu mà các ứng dụng đang lắng nghe.

Với DynamoDB Streams để giải quyết vấn đề timeout của API chúng ta chỉ gần ghi dữ liệu vào bảng trong DynamoDB sau đó dữ liệu được ghi lên dòng dữ liệu mà batch process của chúng ta đang lắng nghe rồi tiếp tục thực hiện nhiệm vụ còn lại.

Các bạn tham khảo link sau để cài đặt DynamoDB ở local nhé.
Định nghĩa bảng trong DynamoDB

Các bạn có thẻ sử dụng NoSQL Workbench for Amazon DynamoDB để tạo bảng hoặc viết code để chia sẻ với các member khác như sau:
```
# -*- coding: utf-8 -*-
import os
from datetime import datetime
import boto3

dynamodb = boto3.client(
    "dynamodb",
    endpoint_url="http://localhost:8000",
    region_name="us-east-1",
    aws_access_key_id="test",
    aws_secret_access_key="test",
)


def create_orders():
    try:
        dynamodb.delete_table(TableName="dev_orders")
    except Exception as exp:
        print(exp)

    response = dynamodb.create_table(
        TableName="dev_orders",
        AttributeDefinitions=[
            {"AttributeName": "id", "AttributeType": "S"},
            {"AttributeName": "status", "AttributeType": "S"},
        ],
        KeySchema=[{"AttributeName": "id", "KeyType": "HASH"}],
        ProvisionedThroughput={"ReadCapacityUnits": 1, "WriteCapacityUnits": 1},
        GlobalSecondaryIndexes=[
            {
                "IndexName": "statusGSIndex",
                "KeySchema": [{"AttributeName": "status", "KeyType": "HASH"}],
                "Projection": {"ProjectionType": "ALL"},
                "ProvisionedThroughput": {
                    "ReadCapacityUnits": 1,
                    "WriteCapacityUnits": 1,
                },
            },
        ],
        # bắt buộc phải có khai báo này để sử dụng DynamoDB Streams cho bảng này
        StreamSpecification={
            "StreamEnabled": True,
            "StreamViewType": "NEW_AND_OLD_IMAGES",
        },
    )
    print(response)


create_orders()
```
Kiểm tra bảng được tạo bằng NoSQL Workbench for Amazon DynamoDB

Các bạn chú ý giá trị bôi vàng nhé. Đây là dòng dữ liệu sẽ được DynamoDB ghi lên đó. Khi ứng dụng của bạn lắng nghe dòng dữ liệu này thì bất kỳ hành động nào xảy ra trên bảng sẽ được ghi lên dòng dữ liệu và ứng dụng của chúng ta sẽ phát hiện được điều đó.
Định nghĩa Lambda lắng nghe dòng dữ liệu từ DynamoDB

Để lắng nghe dòng dữ liệu từ DynamoDB Streams bạn cần thêm serverless-offline-dynamodb-streams và cấu hìn serverless.yml như sau:
```
custom:
  # ...
  serverless-offline-dynamodb-streams:
    endpoint: http://dynamodb:8000
    accessKeyId: root
    secretAccessKey: root
# ...
plugins:
  - serverless-offline
  - serverless-python-requirements
  - serverless-offline-dynamodb-streams
```
Các bạn tham khảo bài viết Mô phỏng AWS Lambda & API Gateway bằng Serverless Offline để biết các viết API bằng Lambda nhé.

Trong bài viết này, dể thực hiện lắng nghe dòng dữ liệu, bạn định nghĩa hàm Lambda trong Serverless như sau:
```
jobs_order:
  handler: src.jobs.order.lambda_handler
  events:
    - stream:
        enabled: true
        type: dynamodb
        # đây là giá trị màu vàng tôi có đề cập ở trên
        arn: arn:aws:dynamodb:ddblocal:000000000000:table/dev_orders/stream/2020-03-15T07:59:46.532
        batchSize: 1
```
Thử viết Rest API ghi dữ liệu vào bảng và kiểm tra DynamoDB Streams

Các bạn định nghĩa một API như sau:
```
functions:
  post_orders:
    handler: src.api.post_orders.lambda_handler
    events:
      - http:
          method: post
          path: api/orders
          cors: true
```
src/api/post_orders.py
```
import json
import logging
from datetime import datetime
from uuid import uuid4
import boto3

LOGGER = logging.getLogger()
LOGGER.setLevel(logging.INFO)


def lambda_handler(event, context):
    headers = {"Access-Control-Allow-Origin": "*", "Accept": "application/json"}
    body = json.loads(event["body"])
    dynamodb = boto3.client(
        "dynamodb",
        endpoint_url="http://localhost:8000",
        region_name="us-east-1",
        aws_access_key_id="test",
        aws_secret_access_key="test",
    )
    now = int(datetime.utcnow().timestamp())
    body = dynamodb.put_item(
        TableName="dev_orders",
        Item={
            "id": {"S": str(uuid4())},
            "name": {"S": body["name"]},
            "status": {"S": " "},
            "created_at": {"N": str(now)},
            "updated_at": {"N": str(now)},
        },
    )
    return {
        "statusCode": 200,
        "headers": headers,
        "body": json.dumps(body),
    }
```
Các bạn thử post dữ liệu bằng Postman nhé

Các bạn để ý Terminal sau khi post dữ liệu nhé
Cám ơn các bạn đã theo dõi bài viết. Hy vọng bài viết đã giúp các bạn có thể sử dùng Lambda và DynamoDB tốt hơn.
March 15, 2020
iOS/Auto Layout – Phần 5: Stack View
Lời mở đầu

Bài viết này mình sẽ giới thiệu với các bạn về một trường hợp đặc biệt trong Auto Layout đó là Stack View. Stack view là một công cụ mạnh mẽ để giúp bạn nhanh chóng cũng như dàng thiết kế giao diện người dùng của bạn.
1. Stack view

Stack view cho phéo bạn tận dụng sức mạnh của Auto Layout, tạo giao diện người dung có thể tự động thích ứng với hướng của thiết bị(Device’s orientation), kích thước màn hình, và mọi thay đổi trong không gian có sẵn. Stack view quản lý layout của tất cả các Views trong nó bằng thuộc tính arrangedSubviews. Độ chính xác của layout phụ thuộc vào các thuộc tính của nó như là: Axis, alignment, distribution, spacing và các thuộc tính khác.

Hình ảnh mô tả các thuộc tính đặc trưng của stack view

Các thuộc tính của stack view

Axis: Định nghĩa trục phát triển của stack view. Có 2 kiểu stack view đó là Vertical và horizontal.

Alignment: Định nghĩa việc căn chỉnh của các View được sắp xếp vuông góc với trục của stack view. Nó có các giá trị như sau:

UIStackView.Alignment.fill: Làm cho các View bên trong stack view lấp đầy khoảng trống có sẵn trong stack view.

UIStackView.Alignment.top: Dùng cho horizontal stack view, nó căn chỉnh cạnh trên của các View trong stack view theo cạnh trên của của nó.

UIStackView.Alignment.leading: Dùng cho vertical stack view. Nó căn chỉnh các cạnh trái của các view trong stack view với cạnh trái của nó.

UIStackView.Alignment.firstBaseline: Dùng trong horizontal stack view. Nó căn chỉnh các view trong stack view dựa trên đường baseline đầu tiên của chúng.

UIStackView.Alignment.lastBaseline: Dùng cho horizontal stack view. Nó căn chỉnh các view trong stack view dưa trên đường baseline cuối cùng của chúng.

UIStackView.Alignment.center: Nó căn giữa các view trong stack view theo chiều của nó.

UIStackView.Alignment.trailing: Dùng cho vertical stack view, căn các cạnh phải của view trong stack view với cạnh phải của stack view.

UIStackView.Alignment.bottom: Dùng cho horizontal stack view. Căn chỉnh các view trong stack view với cạnh dưới của nó.

Distribution: là thuộc tính xác định bố cục của các view được sắp xếp theo chiều của stack view.

Các thuộc tính của nó như sau:

UIStackView.Distribution.fill: Nó giúp các view trong stack view lấp đầy không gian có sẵn trong stack view. Khi các view không xếp vừa stack view, nó sẽ thu nhỏ các view dựa trên độ ưu tiên của kháng nén của chúng (Compression resistance priority). Nếu các views được sắp xếp không lấp đầy được stack view, nó sẽ kéo dài các view theo hugging priority của chúng.

UIStackView.Distribution.fillEqually: Thay đổi kích thước các view bên trong stack view sao cho tất cả các view có cùng kích thước theo chiều của nó và lấp đầy không gian có sẵn theo chiều của stack view. Ví dụ: Horizontal stack view thì các view sẽ bằng nhau về chiều rộng, vertical stack view thì bằng nhau về chiều cao.

UIStackView.Distribution.fillProportionally: Thay đổi kích thước của các view trong stack view sao cho chúng lấp đầy các không gian có sẵn theo trục của stack view. Các view được thay đổi kích thước theo tỉ lệ dựa trên kích thước nội dung bên trong của chúng dọc theo chiều của stack view.

UIStackView.Distribution.equalSpacing: Các view trong stack view sẽ được sắp xếp sao cho khoảng cách giữa chúng bằng nhau. Nếu các view được sắp xếp không vừa stack view nó sẽ thu nhỏ các View dưa trên độ ưu tiên kháng nén của chúng(Compression resistance priority).

UIStackView.Distribution.equalCentering: Làm cho các view strong stack view được sắp xếp sao cho chúng có khoảng cách từ trung tâm bằng nhau theo chiều của stack view. Trong khi duy trì thuộc tính spacing(khoảng cách) giữa các view. Nếu các view được sắp xếp không vừa stack view, nó sẽ thu hẹp khoảng cách cho đến khi đạt khoảng cách tối thiểu được xác định bới thuộc tính khoảng cách của nó. Nếu các view vẫn không phù hợp, stack view sẽ thu nhỏ các view bên trong nó dựa trên thuộc tính Compression resistance priority.

Spacing: Là thuộc tính định nghĩa khoảng cách các cạnh liền kề của các view trong stack view.

Để làm việc với stack view hiệu quả các bạn cần hiểu các thuộc tính của nó. Khi bạn thành thạo nó rồi sẽ giúp bạn tiết kiệm khá nhiều thời gian khi auto layout.

2. Ví dụ đơn giản về Stack View

Ở ví dụ này mình sử dụng stack view bố trí layout theo hàng dọc để xắp xếp Label, ImageView và Button.

2.1 Mô tả Views và Constraints

Sử dụng Interface Builder và kéo vào một vertical stack view. Sau đó các bạn kéo các Label, Image View và Button vào trong stack view đó như hình dưới.

Lúc này stack view của chúng ta chưa có constraint nên chúng ta cần gán constraint cho stack view như sau:
1. Stack View.Leading = Superview.LeadingMargin
2. Stack View.Trailing = Superview.TrailingMargin
3. Stack View.Top = Top Layout Guide.Bottom + Standard
4. Bottom Layout Guide.Top = Stack View.Bottom + Standard
Việc này giúp cho stack view của chúng ta xác định được vị trí và kích thước của nó. Trong trường hợp này stack view của bạn sẽ có kích thước full màn hình.

2.2 Cài đặt các thuộc tính cho stack view

Mở tab Attributes Inspector và set các thuộc tính cho stack view như sau:

Stack Axis Alignment Distribution Spacing
Stack view Vertical Fill Fill 8
1. Axis: Đại diện cho chiều hướng của stack view, Vertical(xếp theo chiều dọc)
2. Alignment: Đại diện cho việc căn chỉnh, Fill(Điền đầy stack view theo chiều của nó)
3. Distribution: Đại diện cho phân chia các view trong stack view. Ta gán giá trị Fill cho nó nhằm mục đích làm các view được lấp đầy các khoảng trống của stack view.
4. Spacing: Giá trị được gán = 8 nhằm tạo khoảng cách giữa các View trong stack view cách đều nhau 1 khoảng = 8 points
Tiếp đến chúng ta cần set thuộc tính của image view như sau:

View Attribute Value
Image View Image Chọn ảnh mà bạn muốn
Image View Mode Aspect fill

Cuối cùng chúng ta mở Size inspector lên để gán lại các giá trị Priorities cho Image View:

Name Vertical hugging Vertical registance
Image view 249 749

Vì chúng ta sử dụng distribution = Fill nên nó sẽ thu nhỏ các View dựa trên độ ưu tiên kháng nén(Compression registance priority) của chúng. Đó là lí do tại sao chúng ta phải giảm độ ưu tiên theo chiều dọc của Image View.

Vậy là ta đã có được kết quả giống như trong hình ở trên.
Để tạo được kết quả như trên mà không dùng stack view chúng ta sẽ phải tạo các constraint cho cả 3 view là label, image view và button. Nhưng với stack view mọi chuyện đã đơn giản hơn nhiều :D.
March 15, 2020
SQLite with FMDB in Swift (P1)
Đối với việc làm ứng dụng phần mềm, đa số đều phải sử dụng đến database. Core Data của Apple cung cấp là 1 trong những sự lựa chọn phổ biến đối với ứng dụng trên iphone.
Theo í kiến cá nhân thì Core Data thường được dùng cho các database được tạo ra trong quá trình sử dụng, còn trong trường hợp nếu bạn có 1 database có sẵn để đưa vào app thì sao? Khi đó thì cần đưa 1 database đã được nhập sẵn vào app. SQlite là 1 lựa chọn tốt Ở bài viết này, mình sẽ giới thiệu cách sử dụng SQLite trong swift bằng thư viện FMDB.
Nội dung bài viết
- Giới thiệu về FMDB
- Tạo đường dẫn cho 1 database
- Khởi tạo 1 database
- Tạo kết nối đến database
- Thực hiện truy vấn
FMDB Library:
- FMDB là 1 thư viện hỗ trợ truy vấn Sqlite và quản lí dữ liệu hiệu quả.
- Giúp bạn xử lí việc open connection/ close connection đến DB.
- Có thể dùng cho cả swift hoặc obj-C.
- Dễ dàng và nhanh chóng để tích hợp vào 1 project.
- Cách sử dụng tương đối đơn giản, cho phép người dùng tự viết câu truy vấn theo ý muốn.
Bài viết này tập trung vào việc sử dụng SQlite bằng thư viện FMDB, không hướng dẫn về phần cài đặt FMDB. Nếu bạn chưa biết về cách cài đặt thư viện, hãy xem thêm tại:

https://guides.cocoapods.org/using/using-cocoapods.html

Trong bài viết này, mình sẽ lấy 1 ví dụ về việc khởi tạo và viết các câu truy vấn đến 1 DB chứa các quyển sách.
Khởi tạo struct Book:
```
struct Book {
    let id: Int
    let name: String
    let author: String
    let price: Double
    
    func toString() {
        print("Book's info: id: \(id), name: \(name), author: \(author), price: \(price)")
    }
}
```
Tạo 1 class DatabaseManager để thực hiện việc truy vấn DB.
Khởi tạo 1 biến database kiểu FMDatabase – Sẽ dùng để truy cập và thực hiện truy vấn đến DB.
```
import Foundation
import FMDB

class DatabaseManager {
    static let shared = DatabaseManager()
    var database: FMDatabase!
}
```
Tạo đường dẫn để lưu DB:

Nếu chưa có 1 DB có sẵn, thì khi tạo 1 DB cần phải có đường dẫn để lưu DB. Khởi tạo 1 đường dẫn cho 1 database có tên bookDB như sau:
```
func getDatabasePath() -> String {
   let directoryPath = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)
   let path = directoryPath.first!.appendingPathComponent("musicDB.db")
   print(path)
   return path.description
}
```
Sau khi print được ra đường dẫn, để xem database vừa tạo: Vào Finder, sử dụng tổ hợp phím Cmd + Shift + G, post đường dẫn vừa lấy được vào, Finder sẽ đưa đến database vừa tạo.

Trong trường hợp đã có 1 DB bookDB có sẵn và được kéo vào trong app, thì lấy đường dẫn như sau:
```
func getPathOfExistDB() -> String? {
   if let path = Bundle.main.path(forResource: "bookDB", ofType: ".db") {
       return path
   } 
   return nil
}
```
Khởi tạo 1 database
```
func createDatabase() {
    if database == nil {
        if !FileManager.default.fileExists(atPath: getDatabasePath()) {
            database = FMDatabase(path: getDatabasePath())
        }
    }
}
```
Nếu 1 DB chưa tồn tại, thì khởi tạo 1 DB mới tại 1 đường dẫn đơn giản bằng cách khởi tạo 1 object FMDatabase tại 1 đường dẫn.

Note: Việc check xem đã tồn tại 1 DB tại 1 path cụ thể trước khi khởi tạo rất quan trọng, bởi nếu ta path đó đã có sẵn 1 DB rồi thì DB đó sẽ bị hủy đi để khởi tạo 1 DB mới.

Tạo kết nối đến Database:

Note: Khi muốn truy suất đến DB thì phải mở 1 liên kết với DB, khi đã hoàn thành việc truy suất thì phải đóng liên kết lại.
- Tạo liên kết tới DB:
```
database.open()
```
- Đóng liên kết tới DB:
```
database.close()
```
2 hàm trên đều trả về giá trị Bool để biết việc mở/đóng liên kết có thành công hay không.
Ta có thể kết hợp việc tạo DB cùng với việc mở/đóng liên kết thành 1 hàm để tiện sử dụng:
```
func openDatabaseConnectionAtPath(path: String) -> Bool {
    if database == nil {
        if !FileManager.default.fileExists(atPath: path) { // don’t want to create the database file again and destroy the original database.
            database = FMDatabase(path: path)
        }
    }
        
    if database != nil {
        if database.open() {
            print("Open Success")
            return true
        }
    }
    print("Open failed")
    return false
}
```
Tạo 1 bảng trong DB:

Câu truy vấn tạo bảng:

Viết câu truy vấn tạo bảng trong FMDB như sau:
```
let query = "create table Book (id integer primary key autoincrement not null, name text not null, author text not null, price float not null default 0)"
```
Để chạy câu truy vấn:
```
database.executeUpdate(query, values: nil)
```
Câu lệnh executeUpdate(…) dùng để thực hiện những câu truy vấn tạo ra sự thay đổi đến DB.
- Thuộc tính values của hàm executeUpdate sẽ được nói ở phần sau, ở đây tạm thời để nil.
- Hàm thực hiện câu truy vấn tạo bảng:
```
func createBookTable() {
    if openDatabaseConnectionAtPath(path: getDatabasePath()) {
        let query = "create table Book id integer primary key autoincrement not null, name text not null, author text not null, price float not null default 0"
        do {
            try database.executeUpdate(query, values: nil)
        } catch let err {
            print("Execute query failed. error: \(err.localizedDescription)")
        }
    }
    database.close()
}
```
Hàm createBookTable ở trên sẽ tạo ra 1 DB nếu DB chưa tồn tại, còn nếu DB đã tồn tại rồi thì sẽ tạo liên kết, thực hiện truy vấn rồi đóng liên kết.
Thực hiện câu truy vấn createBookTable:

Kiểm tra kết quả:

Ở phần tiếp theo, sẽ nói về các câu truy vấn insert, delete,…
March 15, 2020
iOS/Auto Layout – Phần 4: Làm sao để viết constraint dễ dàng hơn? Giới thiệu Snapkit
Lời mở đầu

Ở phần 3 chúng ta đã được làm quen với việc tạo constraints bằng code. Vậy nên bài viết này mình sẽ chia sẻ với các bạn về việc làm sao để tạo constraints bằng code dễ dàng hơn, tiết kiệm thời gian hơn. Và làm thế nào để debug UI.
Sử dụng extension

Việc sử dụng extension để mở rộng các class giúp chúng ta có thể tạo constraint dễ dàng và tiết kiệm nhiều thời gian. Việc của các bạn là nghĩ và tạo ra các func có thể hay được sử dụng.

1. UIView

Ví dụ chung ta có thể tạo ra một func trong extension UIView giúp chúng ta tạo các constraints liên kết với SuperView như sau:
```
extension UIView {

    /// Returns a collection of constraints to anchor the bounds of the current view to the given view.
    ///
    /// - Parameter view: The view to anchor to.
    /// - Returns: The layout constraints needed for this constraint.
    func constraintsForAnchoringTo(boundsOf view: UIView) -> [NSLayoutConstraint] {
        return [
            topAnchor.constraint(equalTo: view.topAnchor),
            leadingAnchor.constraint(equalTo: view.leadingAnchor),
            view.bottomAnchor.constraint(equalTo: bottomAnchor),
            view.trailingAnchor.constraint(equalTo: trailingAnchor)
        ]
    }
}
```
Từ đây các bạn có thể tha hồ nghĩ thêm các func để giúp cho việc tạo constraints của mình trở nên đơn giản và tiết kiệm thời gian hơn nhiều so với việc hì hục ngồi code.

1.2 Xử lí ưu tiên

Khi bạn phải đặt độ ưu tiên cho các constraints của mình để tránh phá vỡ các constraint khác. Bạn có thể sẽ cần đến extension này:
```
extension NSLayoutConstraint {
    
    /// Returns the constraint sender with the passed priority.
    ///
    /// - Parameter priority: The priority to be set.
    /// - Returns: The sended constraint adjusted with the new priority.
    func usingPriority(_ priority: UILayoutPriority) -> NSLayoutConstraint {
        self.priority = priority
        return self
    }
    
}

extension UILayoutPriority {
    
    /// Creates a priority which is almost required, but not 100%.
    static var almostRequired: UILayoutPriority {
        return UILayoutPriority(rawValue: 999)
    }
    
    /// Creates a priority which is not required at all.
    static var notRequired: UILayoutPriority {
        return UILayoutPriority(rawValue: 0)
    }
}
```
Độ ưu tiên của constraint là phần khá là hay ho, nên mình sẽ dành một mục ở bài viết tiếp theo.

1.3 Tạo Auto layout property wrapper

Khi auto layout bằng code, để tránh việc phải viết đi viết lại nhiều lần dòng code dưới đây:
translatesAutoresizingMaskIntoConstraints = false

Chúng ta sẽ tạo ra Property Wrapper như dưới đây:
```
@propertyWrapper
public struct UsesAutoLayout<T: UIView> {
    public var wrappedValue: T {
        didSet {
            wrappedValue.translatesAutoresizingMaskIntoConstraints = false
        }
    }

    public init(wrappedValue: T) {
        self.wrappedValue = wrappedValue
        wrappedValue.translatesAutoresizingMaskIntoConstraints = false
    }
}

final class MyViewController {
    @UsesAutoLayout
    var label = UILabel()
}
```
Lưu ý: Nó không sử dụng được cho biến Local

Giới thiệu về Snapkit

Nếu như các bạn lười nghĩ và viết các extension để hỗ trợ cho việc tạo constraint bằng code. Thì chúng ta lại có một giải pháp khác là dùng của thằng khác :D. Của ăn sẵn nhiều khi cũng tốt mà. Tiện đây mình xin giới thiệu với các bạn về thư viện Snapkit một thư việt rất mạnh về Auto layout bằng code. Giúp chúng ta xử lí Autolayout một cách đơn giản, gọn gàng và tiết kiệm khá nhiều thời gian.

Ưu điểm
– Code nhìn gọn gàng, dễ hiểu hơn
– Tiết kiệm thời gian khi code

Nhược điểm
– Sẽ có những thành viên không sử dụng snapkit mà dùng API default của apple dẫn đến thời gian đầu làm việc gặp khó khăn.

Cài đặt

CocoaPods, Carthage hoặc ném nó vào project của bạn.
Tham khảo link này nhé.

Cách sử dụng

1.Tạo constraint
```
func makeConstraintBySnapkit1() {
        let iView = UIView()
        let oView = UIView()
        iView.backgroundColor = .red
        oView.backgroundColor = .blue

        view.addSubview(oView)
        oView.addSubview(iView)

        oView.snp.makeConstraints { (make) in
            make.width.height.equalTo(200)
            make.center.equalToSuperview()
        }
        iView.snp.makeConstraints { (make) in
            make.top.leading.equalToSuperview().offset(20)
            make.bottom.trailing.equalToSuperview().offset(-20)
        }
    }
```
Để tạo được constraint có kết quả như hình này bằng code sử dụng API mặc định của apple chúng ta sẽ phải viết khá nhiều dòng code.

2. Giữ reference của constraint và thay đổi nó giá trị của nó khi cần.
```
var myConstraint: Constraint?
iView.snp.makeConstraints { (make) in
            self.myConstraint = make.top.leading.equalToSuperview().offset(20).constraint
            make.bottom.trailing.equalToSuperview().offset(-20)
        }
myConstraint?.update(offset: 40)
```
3. Update constraint

Update constraint giúp chúng ta update tùy ý bất kể 1 constraint nào đó của View.
Để update constraint ta chỉ cần viết như sau:
```
iView.snp.updateConstraints { (edit) in
    edit.top.leading.equalToSuperview().offset(0)
}
```
Kết quả thu được sẽ là:

4. Remake constraint

Khác với updateContraint, remake constraint sẽ remove toàn bộ constraints cũ đi và bạn sẽ tạo lại constraint từ đầu như hàm makeConstraint.
Câu lênh của nó sẽ như sau:
```
        iView.snp.remakeConstraints { (remake) in
            remake.top.leading.equalToSuperview().offset(20)
            remake.bottom.trailing.equalToSuperview()
        }
```
Kết quả thu được

Để có thể thành thạo sử dụng Auto Layout và Snapkit chúng ta chỉ có 1 cách đó là làm nhiều, nhiều nữa và nhiều mãi thế thôi =)) Cố gắng lên anh em :))

Tổng kết

Mình hi vọng bài viết này sẽ giúp các bạn phần nào sử dụng Auto Layout dễ dàng và tiết kiệm thời gian hơn.
March 14, 2020
[React] Tôi đã làm toast component như thế nào?
Với bất kỳ ứng dụng nào việc hiển thị thông báo lỗi là không thể thiếu được. Các bạn có thể có rất nhiều cách làm để hiển thị được các thông báo lỗi này. Trong bài viết này tôi xin chia sẻ cách làm của tôi để các bạn cùng tham khảo nhé.

Với bất kỳ ứng dụng nào việc hiển thị thông báo lỗi là không thể thiếu được. Các bạn có thể có rất nhiều cách làm để hiển thị được các thông báo lỗi này. Trong bài viết này tôi xin chia sẻ cách làm của tôi để các bạn cùng tham khảo nhé.

Mục đích của tôi khi viết component này phải đảm bảo nó dễ dùng như hàm window.alert() vậy. Trong bài viết này tôi sẽ sử dụng Material UI để hiển thị thông báo lỗi.
Toast Context

Vì chúng ta cần hàm hiển thị thông báo lỗi có thể sử dụng như window.alert() nên chúng ta cần khai báo một nơi lưu trữ để từ đó chúng ta có thể gọi được ở bất kỳ đâu trong ứng dụng. Có nhiều bạn sẽ nghĩ tới Redux nhưng trong bài viết này tôi sẽ sử dụng React Context API để làm việc đó. Chúng ta bắt đầu bằng việc khai báo ToastContext nào.

src/contexts/toast.js
```
import React, { useContext } from 'react';

export const ToastContext = React.createContext();

export const useToast = () => useContext(ToastContext);
```
Toast Provider

Trong React Context API có định nghĩa Provider để khi có sử thay đổi trong component thì các component bên trong có thể nhận biết sử thay đổi đó và phản anh kết quả thay đổi lên màn hình. Ở đây chúng ta cần hiển thị message lỗi mỗi khi có component nào đó thông báo về việc hiển thị message lỗi.
```
import React, { useState } from 'react';
import { Snackbar } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import { ToastContext } from '../contexts/toast';

export const ToastProvider = (props) => {
  const { children } = props;
  const [state, setState] = useState({ isOpen: false });

  const show = (message) => {
    setState({ isOpen: true, message });
  };

  const hide = () => setState({ isOpen: false });

  const error = (message) => {
    show({ type: 'error', text: message });
  };

  const warn = (message) => {
    show({ type: 'warning', text: message });
  };

  const info = (message) => {
    show({ type: 'info', text: message });
  };

  const success = (message) => {
    show({ type: 'success', text: message });
  };
  const { isOpen, message } = state;
  return (
    <ToastContext.Provider
      value={{
        error: error,
        warn: warn,
        info: info,
        success: success,
        hide: hide
      }}>
      {children}
      {message && (
        <Snackbar open={isOpen} autoHideDuration={6000} onClose={hide}>
          <Alert elevation={6} variant="filled" onClose={hide} severity={message.type}>
            {message.text}
          </Alert>
        </Snackbar>
      )}
    </ToastContext.Provider>
  );
};
```
Sử dụng các hàm error, warn, info, success để hiển thị thông báo

Để sử dụng được các hàm này trong ứng dụng bạn cần khai báo nó trong component chính của ứng dụng
```
import React from 'react';
import { ToastProvider } from './providers/ToastProvider';
import { useToast } from './contexts/toast';
import './App.css';

function ButtonList() {
  const { error, warn, info, success } = useToast();
  return (
    <>
      <button onClick={() => error('error message!')}>error</button>
      <button onClick={() => warn('warn message!')}>warn</button>
      <button onClick={() => info('info message!')}>info</button>
      <button onClick={() => success('success message!')}>success</button>
    </>
  );
}

function App() {
  return (
    <ToastProvider>
      <ButtonList />
    </ToastProvider>
  );
}
export default App;
```
Cám ơn các bạn đã theo dõi bài viết. Hy vọng bài viết đã cung cấp cho các bạn thêm một các để hiển thị thông báo tốt hơn cho ứng dụng của bạn.
March 14, 2020