[React Native Nâng Cao] Ứng dụng Google Translate bằng React Native – Phần 2

Link phần 1 : https://www.dotplays.com/react-native-nang-cao-ung-dung-google-translate-bang-react-native/

Nối tiếp phần 1, trong bài này mn cùng tạo giao diện cho bài tập Google Translate bằng React Native Exo CLI nhé.

Tạo 1 dự án mới, mở bằng Visual Studio Code rồi tạo lần lượt các thành phần giao diện như hình.

Nếu bạn nào mới học thì đọc lại seri React Native Cơ Bản ở website dotplays.com trước nhé

Phần quan trọng nhất trong bài này là viết câu lệnh request vào link API để lấy giá trị text được dịch. Thầy hướng dẫn cách test và lấy câu lệnh bằng phần mềm Post Man như sau :

Mở phần mềm Post Man và làm như hình để chạy thử code request API .
Cách sử dụng Post Man

Bước 1 : Mở Post man, ấn vào Import

Bước 2 : Bấm vào Raw Text

Bước 3 : Paste code vừa copy bên trang API

Bước 4 : Bấm Continue rồi Import

Kết quả chúng ta được màn hình thiết lập request dạng POST vs 3 tham số trong body như trên
3 tham số trong body lần lượt là :
q : nội dung cần dịch
target : ngôn ngữ muốn dịch
source : ngôn ngữ hiện tại của nội dung cần dịch
(giá trị của target và source là hằng số đc lấy từ API khác trong mô tả của API, mn xem trên site nhé)

PostMan hỗ trợ trích xuất code mẫu cho React Native nên chúng ta làm như sau để lấy code request

Bấm nút như hình khoan tròn đỏ
Chọn ngôn ngữ lập trình và thư viện Fetch rồi copy code

Kết quả

var myHeaders = new Headers();
myHeaders.append("accept-encoding", "application/gzip");
/*
 mn chú ý nếu trong code có content-type là application/x-www-form-urlencoded thì phần body cần nhúng trong URLSearchParams 
còn nếu content-type là application/json thì body cần nhúng dạng JSON
const obj = {name: "John", age: 30, city: "New York"};
const myJSON = JSON.stringify(obj);
var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: myJSON,
  redirect: 'follow'
};
*/
myHeaders.append("content-type", "application/x-www-form-urlencoded");
myHeaders.append("x-rapidapi-host", "google-translate1.p.rapidapi.com");
myHeaders.append("x-rapidapi-key", "16a490b4f8msh223ff679ca0b62fp181abdjsnc4beeb2c44d0");

var urlencoded = new URLSearchParams();
urlencoded.append("q", "Hello, world!");
urlencoded.append("target", "es");
urlencoded.append("source", "en");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded,
  redirect: 'follow'
};

fetch("https://google-translate1.p.rapidapi.com/language/translate/v2", requestOptions)
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Kiểu dữ liệu trả về là JSON nên mình sẽ truy cập dạng như sau để lấy text

.then(response => response.json())
   .then(result => result.data.translations[0].translatedText)