Phát triển React Native Đơn giản hơn với Expo

() translation by (you can also view the original English article)

Expo là một bộ công cụ giúp dễ dàng viết các ứng dụng React Native. Trong bài này, tôi sẽ hướng dẫn cho bạn cách bạn có thể nhanh chóng tạo ra các ứng dụng React Native bằng Expo.

Với Expo, các nhà phát triển có thể tạo ra các ứng dụng React Native mà không gặp bất kỳ sự phiền toái nào giống như khi cài đặt và cấu hình các phần mềm phụ trợ như Android Studio, Xcode hoặc tất cả các công cụ khác cần thiết để phát triển và chạy ứng dụng React Native.

Trong này, tôi sẽ hướng dẫn cho bạn cách viết một trò chơi trí nhớ đơn giản bằng Expo. Cùng với đó bạn sẽ được tìm hiểu về những kiến thức sau đây:

Cách sử dụng các công cụ do Expo cung cấp. Chúng bao gồm CLI, SDK và ứng dụng Expo client.
Cách tạo ứng dụng React Native bằng Expo.

Expo là gì?

Expo là một framework dùng để phát triển nhanh các ứng dụng React Native. Nó giống như Laravel hay Symphony cho các nhà phát triển PHP, hoặc Ruby on Rails cho các nhà phát triển Ruby. Expo cung cấp một lớp nằm trên cùng của React Native API để giúp chúng dễ sử dụng và quản lý. Nó còn cung cấp các công cụ giúp bạn dễ dàng khởi tạo và kiểm thử các ứng dụng React Native. Sau cùng, nó cung cấp các thành phần UI và các dịch vụ thường chỉ có sẵn khi bạn cài đặt một thành phần React Native của bên thứ ba. Tất cả đều được cung cấp thông qua Expo SDK.

Những hạn chế của Expo

Trước khi đi sâu hơn, điều quan trọng là cần phải biết được một số hạn chế của Expo:

Expo không hỗ trợ thực thi code trong nền. Điều này có nghĩa là bạn không thể, ví dụ, chạy code để lắng nghe những thay đổi vị trí khi ứng dụng bị đóng.
Các ứng dụng Expo bị giới hạn trong các API gốc mà Expo SDK hỗ trợ. Điều này có nghĩa là nếu ứng dụng của bạn cần sử dụng một tính năng đặc trưng như giao tiếp với thiết bị ngoại vi thông qua Bluetooth, thì lựa chọn duy nhất để cài đặt chức năng đó là với React Native đơn thuần, hoặc bằng cách viết code bằng một thư viện có tên ExpoKit.
Expo trói buộc bạn vào bộ công cụ của họ. Điều này có nghĩa là bạn không thể đơn giản là cài đặt và sử dụng hầu hết các công cụ tuyệt vời có sẵn để phát triển React Native chẳng hạn như công cụ dòng lệnh, scaffolders và các framework UI. Nhưng điều tốt là Expo SDK tương thích với các ứng dụng React Native thuần tuý, vì vậy bạn sẽ không gặp bất kỳ vấn đề nào khi bạn gỡ ứng dụng khỏi Expo.
Mã nhị phân độc lập của các ứng dụng Expo chỉ có thể được built trực tuyến. Expo cung cấp một công cụ dòng lệnh có tên là Exp. Công cụ này cho phép các nhà phát triển bắt đầu quá trình built trên các máy chủ Expo. Khi đã hoàn tất, một URL sẽ được cung cấp để tải về tập tin .apk hoặc .ipa.

Ngay cả với những hạn chế này, điều quan trọng cần lưu ý là Expo là một framework đầy đủ chức năng với rất nhiều hỗ trợ cho các API thông dụng trên Android hoặc iOS. Điều này có nghĩa là nó đã bao quát cho bạn hầu hết các chức năng mà các ứng dụng thường cần. Vì vậy, thường không cần phải tìm bên ngoài Expo để cài đặt các tính năng gốc.

Tổng quan về ứng dụng

Ứng dụng mà chúng ta sắp tạo ra là một trò chơi trí nhớ. Bạn có thể đã từng chơi loại trò chơi này - người dùng phải tìm những cặp phù hợp bằng cách mở hai thẻ cùng một lúc. Màn hình mặc định trông như sau:

Và đây là minh hoạ một khi tất cả các cặp đã được mở ra:

Một khi họ đã giải quyết được trò chơi, người dùng có thể nhấn vào nút reset để đặt lại các mục về trạng thái ban đầu. Điều này cho phép họ bắt đầu lại trò chơi.

Cài đặt Expo

Không giống với React Native thuần tuý nơi bạn phải cài đặt và cấu hình Android Studio hoặc Xcode và các phụ thuộc khác, với Expo chỉ có một vài bước để làm theo để bắt đầu phát triển các ứng dụng:

Tải về và cài đặt Node.js. Expo phụ thuộc vào nền tảng Node.js để cho các công cụ dòng lệnh và quản lý phụ thuộc của nó hoạt động.
Cài đặt Expo Client trên thiết bị iOS hoặc Android của bạn. Cái này được dùng để xem trước ứng dụng trong khi bạn đang phát triển nó.
Cài đặt công cụ dòng lệnh. Công cụ này cho phép bạn tạo một dự án Expo mới, bắt đầu một quá trình build và những thứ khác. Thực thi lệnh sau để cài đặt nó:

1	npm install exp --global

Tạo một ứng dụng Expo mới

Khi bạn đã cài đặt tất cả các phụ thuộc, thì giờ đây bạn có thể tạo một ứng dụng Expo mới:

1	exp init MemoryGame

Một khi đã tạo xong, nó sẽ tạo ra một thư mục mới gọi là MemoryGame. Chuyển vào bên trong thu mục đó và bắt đầu chạy máy chủ phát triển:

1	cd MemoryGame
2	exp start

Ngoài ra, bạn cũng có thể sử dụng Expo XDE. Công cụ này cho phép bạn tạo và chạy ứng dụng Expo thông qua một giao diện. Bạn có thể tải trình cài đặt từ repo GitHub của Expo. Hiện tại, nó chỉ hỗ trợ Windows và Mac. Vì vậy, nếu bạn đang chạy Ubuntu hoặc Linux, tốt hơn hết là bạn nên sử dụng dòng lệnh ngay lúc này.

Một khi máy chủ phát triển đang chạy, bạn sẽ có thể thấy một thứ gì đó như sau:

Đó là mã QR trỏ đến bản preview trực tiếp của dự án. Hãy mở ứng dụng Expo client trên điện thoại của bạn và quét mã bằng QR scanner. Lúc này, bạn sẽ có thể xem được màn hình mặc định. Mỗi khi bạn nhấn Control-S trên bất kỳ tập tin nào của dự án, bản xem trước sẽ tự động tải lại để phản ánh những thay đổi.

Bạn có thể tìm thấy mã nguồn đầy đủ của dự án trên repo GitHub. Hoặc nếu bạn muốn thử ứng dụng, bạn có thể xem bản demo. Chỉ cần chọn Mã QR và quét nó trên điện thoại của bạn bằng ứng dụng Expo client.

Viết Ứng dụng

Bây giờ chúng ta đã sẵn sàng để viết ứng dụng. Hãy bắt đầu với một số thành phần UI trước khi chúng ta quay trở lại và cài đặt thành phần chính.

Thành phần Header

Header được sử dụng để hiển thị tiêu đề của ứng dụng. Tạo một thư mục components. Bên trong nó, tạo một tập tin Header.js và thêm các code sau:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Header extends React.Component {
  
  render() {
    return (
      <View style={styles.header}>
        <Text style={styles.header_text}>MemoryGame</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  header: {
    flex: 1,
    flexDirection: 'column',
    alignSelf: 'stretch',
    paddingTop: 20,
    paddingBottom: 5,
    backgroundColor: '#f3f3f3'
  },
  header_text: {
    fontWeight: 'bold',
    fontSize: 17,
    textAlign: 'center'
  }
});

Đây chỉ là một thành phần React Native cơ bản, với một số style để phù hợp với giao diện người dùng của ứng dụng.

Hợp phần Score

Tiếp theo là thành phần để hiển thị số điểm (components/Score.js):

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Score extends React.Component {
  
  render() {
    return (
      <View style={styles.score_container}>
        <Text style={styles.score}>{this.props.score}</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  score_container: {
    flex: 1,
    alignItems: 'center',
    padding: 10
  },
  score: {
    fontSize: 40,
    fontWeight: 'bold'
  }
});

Một lần nữa, chỉ là một thành phần hiển thị đơn giản với một cái text view và một số style cơ bản.

Thành phần Card

Thành phần card (components/Card.js) sẽ hiển thị các thẻ. Các thẻ này sử dụng các biểu tượng từ bộ biểu tượng vector của Expo. Đây là một trong những tính năng có sẵn khi bạn sử dụng Expo: nó bao gồm các biểu tượng từ các bộ biểu tượng như FontAwesome, Entypo và Ionicons.

Trong đoạn code ở dưới đây, bạn có thể thấy rằng chúng ta chỉ sử dụng FontAwesome. Nó có biểu tượng mà chúng ta muốn hiển thị trạng thái mặc định của thẻ: một dấu chấm hỏi. Như bạn sẽ thấy trong phần chính của ứng dụng, chúng ta cũng sẽ sử dụng các biểu tượng từ Entypo và Ionicons. Tham chiếu đến nguồn các biểu tượng này sẽ được chuyển tới thành phần này, do đó, không cần chỉ định chúng ở đây:

1	import React from 'react';
2	import { StyleSheet, Text, View, TouchableHighlight } from 'react-native';
3	import { FontAwesome } from '@expo/vector-icons'; // use FontAwesome from the expo vector icons

Bên trong phương thức render(), chúng ta chỉ sử dụng nguồn và biểu tượng được truyền dưới dạng props nếu thẻ được mở ra. Mặc định, nó sẽ chỉ hiển thị biểu tượng dấu chấm hỏi từ FontAwesome. Nhưng nếu thẻ mở ra, nó sẽ sử dụng nguồn biểu tượng, biểu tượng, và màu sắc đã được truyền dưới dạng props.

Mỗi thẻ có thể được chạm vào. Khi chạm, hàm clickCard() sẽ được chạy, nó cũng được truyền thông qua props. Sau này bạn sẽ thấy những gì hàm thực hiện, nhưng bây giờ, chỉ cần biết rằng nó cập nhật trạng thái để hiện ra biểu tượng trên thẻ:

export default class Card extends React.Component {

  render() {
    
    let CardSource = FontAwesome; // set FontAwesome as the default icon source
    let icon_name = 'question-circle';
    let icon_color = '#393939';
    
    if(this.props.is_open){
      CardSource = this.props.src;
      icon_name = this.props.name;
      icon_color = this.props.color;
    }
    
    return (
      <View style={styles.card}>
        <TouchableHighlight onPress={this.props.clickCard} activeOpacity={0.75} underlayColor={"#f1f1f1"}>
          <CardSource 
            name={icon_name} 
            size={50} 
            color={icon_color} 
          />
        </TouchableHighlight>   
      </View>
    );
  }
}

Đừng quên thêm style:

const styles = StyleSheet.create({
  card: {
    flex: 1,
    alignItems: 'center'
  },
  card_text: {
    fontSize: 50,
    fontWeight: 'bold'
  }
});

Hàm trợ giúp

Chúng ta cũng sẽ sử dụng một hàm trợ giúp gọi là shuffle(). Hàm này cho phép chúng ta sắp xếp mảng các thẻ theo thứ tự ngẫu nhiên để thứ tự của chúng sẽ khác nhau mỗi khi trò chơi được đặt lại:

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if(i == 0) return this;
  while(--i){
   j = Math.floor(Math.random() * (i + 1));
   temp = this[i];
   this[i] = this[j];
   this[j] = temp;
  }
  return this;
}

Thành phần Chính

Thành phần chính (App.js) chứa logic của chính ứng dụng và kết nối tất cả mọi thứ lại với nhau. Bắt đầu bằng cách bao gồm các gói React và Expo mà chúng ta sẽ sử dụng. Lần này, chúng ta sẽ sử dụng tất cả các nguồn biểu tượng từ các biểu tượng vector của Expo:

1	import React from 'react';
2	import { StyleSheet, View, Button } from 'react-native';
3	import { Ionicons, FontAwesome, Entypo } from '@expo/vector-icons';

Tiếp theo, hãy bao gồm các thành phần và hàm trợ giúp mà chúng ta đã tạo ra trước đó:

import Header from './components/Header';
import Score from './components/Score';
import Card from './components/Card';

import helpers from './helpers';

Bên trong constructor, trước tiên chúng ta tạo ra mảng đại diện cho các thẻ đơn nhất. src là nguồn biểu tượng, name là tên của biểu tượng (bạn có thể tìm thấy tên trên GitHub nếu bạn muốn sử dụng các biểu tượng khác), và color, dĩ tự nhiên là màu sắc của biểu tượng:

export default class App extends React.Component {

  constructor(props) {
    super(props);
    // bind the functions to the class
    this.renderCards = this.renderCards.bind(this);
    this.resetCards = this.resetCards.bind(this);
    
    // icon sources
    let sources = {
      'fontawesome': FontAwesome,
      'entypo': Entypo,
      'ionicons': Ionicons
    };

    // the unique icons to be used
    let cards = [
      {
        src: 'fontawesome',
        name: 'heart',
        color: 'red'
      },
      {
        src: 'entypo',
        name: 'feather',
        color: '#7d4b12'
      },
      {
        src: 'entypo',
        name: 'flashlight',
        color: '#f7911f'
      },
      {
        src: 'entypo',
        name: 'flower',
        color: '#37b24d'
      },
      {
        src: 'entypo',
        name: 'moon',
        color: '#ffd43b'
      },
      {
        src: 'entypo',
        name: 'youtube',
        color: '#FF0000'
      },
      {
        src: 'entypo',
        name: 'shop',
        color: '#5f5f5f'
      },
      {
        src: 'fontawesome',
        name: 'github',
        color: '#24292e'
      },
      {
        src: 'fontawesome',
        name: 'skype',
        color: '#1686D9'
      },
      {
        src: 'fontawesome',
        name: 'send',
        color: '#1c7cd6'
      },
      {
        src: 'ionicons',
        name: 'ios-magnet',
        color: '#d61c1c'
      },
      {
        src: 'ionicons',
        name: 'logo-facebook',
        color: '#3C5B9B'
      }
    ];

    // next: add code creating the clone and setting the cards in the state
  }

}

Lưu ý rằng, thay vì trực tiếp chỉ định src là FontAwesome, Entypo hoặc Ionicons cho mỗi đối tượng, chúng ta đang sử dụng các tên thuộc tính được sử dụng trong đối tượng sources. Điều này là do chúng ta cần phải tạo một bản sao của mảng các thẻ để mỗi thẻ có một cặp. Tạo một bản sao bằng cách sử dụng các phương thức của mảng như slice() sẽ tạo ra một bản sao của mảng, nhưng vấn đề là một khi các đối tượng riêng lẻ được sửa đổi trong bản sao hoặc bản gốc, thì cả hai mảng cũng được sửa đổi.

Điều này mang đến cho chúng ta giải pháp dưới đây là tạo ra một đối tượng hoàn toàn mới bằng cách chuyển đổi mảng cards thành một chuỗi và sau đó phân tích nó để chuyển đổi nó trở lại một mảng. Đây là lý do tại sao chúng ta đang sử dụng chuỗi vì các hàm không thể được chuyển đổi thành các chuỗi. Sau đó chúng ta kết hợp cả hai để thành mảng, trong đó có chứa tất cả các thẻ mà chúng ta cần:

1	let clone = JSON.parse(JSON.stringify(cards)); // create a completely new array from the array of cards
2
3	this.cards = cards.concat(clone); // combine the original and the clone

Tiếp theo, lặp qua mảng đó và tạo ra một ID duy nhất cho mỗi cái, thiết lập nguồn biểu tượng, và sau đó thiết lập cho nó một trạng thái mặc định là closed - đóng:

// add the ID, source and set default state for each card
this.cards.map((obj) => {
  let id = Math.random().toString(36).substring(7);
  obj.id = id;
  obj.src = sources[obj.src];
  obj.is_open = false;
});

Sắp xếp các thẻ một cách ngẫu nhiên và thiết lập trạng thái mặc định:

this.cards = this.cards.shuffle(); // sort the cards randomly

// set the default state
this.state = {
  current_selection: [], // this array will contain an array of card objects which are currently selected by the user. This will only contain two objects at a time.
  selected_pairs: [], // the names of the icons. This array is used for excluding them from further selection
  score: 0, // default user score
  cards: this.cards // the shuffled cards
}

Phương thức render() kết xuất header, cards, score và nút để đặt lại trò chơi hiện tại. Nó sử dụng hàm renderRows() để kết xuất các hàng thẻ riêng lẻ. Màn hình sẽ có sáu hàng chứa bốn thẻ:

render() {
  return (
    <View style={styles.container}>
      <Header />
      <View style={styles.body}>
        { 
          this.renderRows.call(this) 
        }
      </View>
      <Score score={this.state.score} />
      <Button
        onPress={this.resetCards}
        title="Reset"
        color="#008CFA" 
      />
    </View>
  );
}

Dưới đây là code cho hàm renderRows(). Hàm này sử dụng hàm getRowContents(), chịu trách nhiệm tạo ra một mảng của các mảng với bốn phần tử mỗi cái. Điều này cho phép chúng ta kết xuất mỗi hàng, và sau đó sử dụng một hàm khác để kết xuất cards cho mỗi lần lặp của hàm map():

renderRows() {
 
  let contents = this.getRowContents(this.state.cards);
  return contents.map((cards, index) => {
    return (
      <View key={index} style={styles.row}>
        { this.renderCards(cards) }
      </View>
    );
  });
 
}

Dưới đây là hàm getRowContents():

getRowContents(cards) {
  let contents_r = [];
  let contents = [];
  let count = 0;
  cards.forEach((item) => {
    count += 1;
    contents.push(item);
    if(count == 4){
      contents_r.push(contents)
      count = 0;
      contents = [];
    }
  });

  return contents_r;
}

Tiếp theo là hàm renderCards(). Hàm này nhận mảng các đối tượng thẻ và kết xuất chúng thông qua thành phần Card. Tất cả những gì chúng ta cần làm ở đây là truyền vào từng thuộc tính của mỗi đối tượng thẻ dưới dạng props. Hàm này sau đó được sử dụng để hiển thị chính xác biểu tượng, như bạn đã thấy trong code cho thành phần Card. Hàm clickCard() cũng được truyền qua như là một prop. ID của thẻ được truyền vào hàm đó do đó một thẻ đơn nhất có thể được xác định và cập nhật:

renderCards(cards) {
  return cards.map((card, index) => {
    return (
      <Card 
        key={index} 
        src={card.src} 
        name={card.name} 
        color={card.color} 
        is_open={card.is_open}
        clickCard={this.clickCard.bind(this, card.id)} 
      />
    );
  });
}

Bên trong hàm clickCard(), chúng ta có được các chi tiết của thẻ đã được chọn và xem nó có cần được xử lý thêm nữa không:

clickCard(id) {
  let selected_pairs = this.state.selected_pairs;
  let current_selection = this.state.current_selection;
  let score = this.state.score;
  
  // get the index of the currently selected card
  let index = this.state.cards.findIndex((card) => {
    return card.id == id;
  });

  let cards = this.state.cards;
  
  // the card shouldn't already be opened and is not on the array of cards whose pairs are already selected
  if(cards[index].is_open == false && selected_pairs.indexOf(cards[index].name) === -1){

    // next: add code for processing the selected card

  }

}

Bây giờ hãy điền vào code để xử lý một thẻ đã được chọn.

Trước tiên, chúng ta mở thẻ và thêm nó vào mảng của các thẻ hiện đang được chọn:

cards[index].is_open = true;
    
current_selection.push({ 
  index: index,
  name: cards[index].name
});

// next: add code for determining whether the user has selected the correct pair or not

Một khi đã có hai phần tử trong mảng của các thẻ hiện đang được chọn, chúng ta kiểm tra tên biểu tượng có giống nhau không. Nếu giống thì có nghĩa là người dùng đã chọn đúng cặp. Nếu không thì họ chọn sai. Trong trường hợp đó, chúng ta đóng thẻ đầu tiên đã được chọn và sau đó thêm một chút độ trễ trước khi đóng thẻ thứ hai. (Bằng cách này người dùng có thể nhìn thấy biểu tượng thẻ trước khi nó quay lại trạng thái đóng).

if(current_selection.length == 2){
  if(current_selection[0].name == current_selection[1].name){
    score += 1; // increment the score
    selected_pairs.push(cards[index].name); 
  }else{
    cards[current_selection[0].index].is_open = false; // close the first
    
    // delay closing the currently selected card by half a second.
    setTimeout(() => {
      cards[index].is_open = false;
      this.setState({
        cards: cards
      });
    }, 500);
  }

  current_selection = [];
}

// next: add code for updating the state

Điều cuối cùng chúng ta cần làm trong click event handler là cập nhật trạng thái để phản ánh những thay đổi trong giao diện người dùng:

this.setState({
  score: score,
  cards: cards,
  current_selection: current_selection
});

Một hàm liên quan đó là reset event handler. Khi nhấn nút reset, chúng ta chỉ cần khôi phục lại trạng thái mặc định bằng cách đóng tất cả các thẻ và xáo trộn chúng.

resetCards() {
  // close all cards
  let cards = this.cards.map((obj) => {
    obj.is_open = false;
    return obj;
  });

  cards = cards.shuffle(); // re-shuffle the cards
  
  // update to default state
  this.setState({
    current_selection: [],
    selected_pairs: [],
    cards: cards,
    score: 0
  });
}

Cuối cùng, chúng ta sẽ thêm một vài style cơ bản để làm cho ứng dụng của chúng ta trông đẹp hơn.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff'
  },
  row: {
    flex: 1,
    flexDirection: 'row'
  },
  body: {
    flex: 18,
    justifyContent: 'space-between',
    padding: 10,
    marginTop: 20
  }
});

Chạy thử Ứng dụng

Vì máy chủ phát triển Expo của bạn đã chạy từ đầu đến giờ, nên mọi thay đổi sẽ được đẩy lên thiết bị di động của bạn bằng live reload. Hãy thử ứng dụng và đảm bảo rằng nó hoạt động như mong đợi.

Tóm tắt

Như vậy là chúng ta đã hoàn tất bài viết! Trong bài hướng dẫn này, bạn đã học được cách sử dụng Expo XDE để nhanh chóng tạo ra một ứng dụng React Native. Expo là một cách hay để bắt đầu phát triển ứng dụng React Native vì nó loại bỏ sự cần thiết phải cài đặt nhiều phần mềm thường là nguyên nhân gây ra sự nhàm chán, đặc biệt là đối với người mới bắt đầu. Nó còn cung cấp các công cụ giúp thật sự dễ dàng để xem trước các ứng dụng trong khi nó đang được phát triển. Hãy tìm hiểu các tài nguyên được đề cập trên trang web Expo nếu bạn muốn tìm hiểu thêm.

Và hãy tìm hiểu thêm một số bài viết khác của chúng tôi về Phát triển ứng dụng React Native!