4

Trong khi làm việc với các ứng dụng phức tạp với vô số yêu cầu, các nhà phát triển phải đối mặt với rất nhiều thách thức không lường trước được. Tôi đang làm điều này đúng, bởi vì điều này không đúng? Tất cả chúng ta đã ở giai đoạn phát triển ứng dụng, phải không?

Các ứng dụng lai được xây dựng bằng React cho web và React Native cho thiết bị di động đang trở nên phổ biến. Tôi có thể xây dựng các ứng dụng phức tạp bằng ngăn xếp này không? Đầu tư vào React có đáng không? Bạn sẽ làm gì nếu gặp phải một lỗi không có giấy tờ mà chưa có bản sửa lỗi? Ở đây, chúng tôi xem xét các tình huống này và các kịch bản tương tự khi chúng tôi cố gắng xây dựng một ứng dụng mặt trước cho một nhà hàng.

Điều kiện tiên quyết

Đối với những người thích làm việc thông qua mã, tôi có một số mã mẫu cho một ứng dụng nhà hàng rất cơ bản . Nó được tạo bởi đồng nghiệp của tôi, một nhà phát triển ứng dụng có sở thích và mã này đã được chia sẻ với sự cho phép của anh ta. Chúng tôi sẽ sử dụng một số ví dụ từ mã và quay lại vấn đề này sau. Bạn có thể nhân bản repo đầu tiên.

git clone https://github.com/syamjayaraj/WillingstonRestaurantApp_Frontend 

Bạn có thể cần cài đặt watchman của Facebook để chạy ứng dụng này.

npm install
npm start

Bạn có thể quét mã QR trên ứng dụng Expo cho Android / iOS.

Có thể truy cập vào hầu hết các nền tảng di động và web

Điều quan trọng về nhà hàng là cơ sở người dùng hoặc thị trường luôn có sẵn - mọi người đều phải ăn! Do đó, điều quan trọng là đảm bảo rằng ứng dụng phân phối thực phẩm của bạn có thể tiếp cận càng nhiều người càng tốt. Điều này bao gồm tất cả các nhân khẩu học, trên các thiết bị - máy tính để bàn, thiết bị di động và máy tính bảng và trên các nền tảng - Android và iOS.

Sử dụng công nghệ lai như React, bạn có thể chuyển ứng dụng của mình sang tất cả các nền tảng mà không cần nhiều nỗ lực. React hỗ trợ các nền tảng web, iOS, Android và Windows. Cho rằng điện thoại thông minh là thiết bị dành cho hầu hết các khách hàng mục tiêu, bạn cũng có thể xem xét ưu tiên cho các ứng dụng di động.

Tin vui là bạn có thể giới hạn mọi thứ với JavaScript vì môi trường React là tất cả JavaScript. Tuy nhiên, hãy nhớ rằng React Native có thể không trưởng thành của một hệ sinh thái như bạn mong đợi. Airbnb đã rời React Native vào đầu năm nay và bạn cũng có thể gặp phải những trở ngại tương tự trong khi xây dựng ứng dụng của mình.

Sử dụng Điểm cuối chung và Redux

Tuy nhiên, điều này không cần phải nói, đây là điều quan trọng mà các nhà phát triển mới không coi trọng. Một giải pháp ngăn xếp đầy đủ sẽ làm cho các điểm cuối chung có sẵn cho tất cả các tính năng có sẵn để giảm sự trùng lặp của nỗ lực. Chẳng hạn, cả ứng dụng di động và web của ứng dụng đặt hàng thực phẩm sẽ cần các yếu tố UI để tìm kiếm, đặt hàng, thanh toán, kiểm tra trạng thái giao hàng, trạng thái hậu cần, v.v. Tất cả các thành viên cốt lõi nên hoạt động trên cùng một bộ dữ liệu và mỗi bên liên quan chỉ có quyền truy cập để cập nhật phần dữ liệu liên quan.

Vì vậy, bất kể bạn đang sử dụng React hay React Native, các lệnh gọi API của bạn sẽ trông giống như thế này:

componentDidMount() {
   return fetch('http://192.168.1.9/willingston_app_backend/public/api/people')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         people: responseJson.data
       }, function() {
           // Comment
       });
     })
     .catch((error) => {
       console.error(error);
     });
}

Sử dụng thư viện quản lý nhà nước hoặc sử dụng API ngữ cảnh chắc chắn sẽ giúp ích trong các tình huống như thế này. Cách dữ liệu được hiển thị cho web và ứng dụng di động hầu như luôn luôn khá giống nhau. Nếu bạn chưa quen với quản lý nhà nước, đây là một hướng dẫn tốt mà tôi đã viết khi bắt đầu với Redux .

Sử dụng Redux để quản lý trạng thái, bạn có khả năng tạo một cửa hàng duy nhất cho mỗi ứng dụng của mình. Redux middleware có thể được sử dụng để lọc dữ liệu cho một nền tảng cụ thể và tạo một lớp trừu tượng nhưng phổ biến cho các ứng dụng web và di động. Vì vậy, bất kể bạn đang thực hiện các cuộc gọi API từ ứng dụng web hay ứng dụng di động, bạn chỉ có thể thực hiện một số thứ như thế này:

componentDidMount() {
    dispatch(restaurantActions.fetchData();

 }

Ngoài ra, cửa hàng Redux cho phép bạn kết hợp tất cả các yếu tố UI khác nhau. Ví dụ: đối với ứng dụng nhà hàng, bạn có thể tạo một trạng thái riêng cho webUI, mobileUI và tabletU. Ngoài ra, bạn cũng có thể lưu trữ dữ liệu UI ở trạng thái thành phần. Dưới đây là một ví dụ về cách tổ chức nhà nước của bạn có thể được tổ chức:

{
	alerts: Object,
	notifications: Object,
	user: Object,
	location: Object,
	restaurantResults: Object,
	webUI: Object,
	mobileUI: Object
}

Điều này hỗ trợ trong việc trừu tượng hóa các chi tiết cửa hàng cho mỗi ứng dụng thành một lớp duy nhất. Các nhà phát triển thấy tương đối dễ dàng để làm việc thông qua các tính năng khác nhau cho các nền tảng khác nhau bằng cách sử dụng React và React Native.

Dịch vụ dựa trên địa điểm

React có API trưởng thành để thiết lập các dịch vụ dựa trên vị trí. Bạn có thể sử dụng các thành phần bản đồ gốc hoặc sử dụng các thành phần của bên thứ ba như React Native Maps hoạt động với cả iOS và Android. Những phụ thuộc này là trưởng thành và dễ dàng tích hợp với ứng dụng của bạn. Để hiển thị một điểm đánh dấu (hoặc nhiều điểm đánh dấu), bạn chỉ cần làm một cái gì đó như thế này:

import { Marker } from 'react-native-maps';
<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

Tạo các thành phần tái sử dụng bằng HOC

Sử dụng React, các nhà phát triển có thể soạn các thành phần có thể được sử dụng ở nơi khác. Các nhà phát triển có thể tạo ra các thành phần có thể tái sử dụng bằng cách sử dụng một khái niệm gọi là các thành phần bậc cao. Thậm chí còn có một thư viện gọi là recompose bao gồm các HOC có thể tái sử dụng cho ứng dụng của bạn. Nếu bạn đang tự hỏi làm thế nào để tạo một gif tải hoạt động trơn tru trên tất cả các cơ sở mã bạn sử dụng, các thành phần bậc cao hơn là câu trả lời.

Dưới đây là một ví dụ về bộ tải HOC có thể tái sử dụng.

import React, { Component } from 'react';
import './LoadIndicator.css';

/* Method that checks whether the props is an empty prop and it can be an object, string or an array */

const isEmpty = (prop) => (
  prop === null ||
  prop === undefined ||
  (prop.hasOwnProperty('length') && prop.length === 0) ||
  (prop.constructor === Object && Object.keys(prop).length === 0)
);

const withLoader = (loadingProp) => (WrappedComponent) => {
  return class LoadIndicator extends Component {

    render() {
      console.log(this.props);

      return isEmpty(this.props[loadingProp]) ? <div className="loader" /> : <WrappedComponent {...this.props} />;
    }
  }
}

export default withLoader;

Như minh họa ở trên, các phần có thể tái sử dụng được chia thành các thành phần riêng biệt và chúng có thể được sử dụng trong các dự án khác.

Thiết kế cân nhắc cho một ứng dụng

Không có quy tắc cứng trong thiết kế, tuy nhiên, các ứng dụng nhà hàng dự kiến ​​sẽ trực quan. Lựa chọn thiết kế tồi và hành động UI nghiệt ngã có thể ảnh hưởng trực tiếp đến trải nghiệm của khách hàng của bạn. Mục đích là để làm cho ứng dụng hoàn hảo, mượt mà và đáp ứng về hệ thống thanh toán, xử lý menu và lựa chọn đơn hàng.

Với React Native, bạn có thể dễ dàng dựa vào một thư viện như NativeBase để tạo các thành phần đa nền tảng. Tuy nhiên, nếu bạn cần một cái gì đó độc đáo, bạn có thể cần nhìn xa hơn các thiết kế thông thường để lấy cảm hứng. Chúng tôi đã liệt kê dưới đây một số địa điểm nổi tiếng nơi bạn có thể tìm thấy những ý tưởng thiết kế thú vị và lấy cảm hứng.

Uplabs dành cho nhà thiết kế - Uplabs là một nền tảng nơi các nhà phát triển và nhà thiết kế có thể chia sẻ và bán các thiết kế, mockup và khái niệm của họ. Bạn có thể dễ dàng tìm thấy các thiết kế được cấp phép theo giấy phép CC BY ở đó. Một tìm kiếm đơn giản cho các ứng dụng nhà hàng cho thấy một số thiết kế đầy cảm hứng - một vài trong số đó có sẵn miễn phí.

Chuyển động UI - Chuyển động UI là một nền tảng dựa trên cộng đồng nơi người dùng có thể khám phá các thiết kế và nhà thiết kế. Thiết kế các hành động UI thực tế và cách các thành phần hoạt hình khi được nhấn đòi hỏi một số ý nghĩa thẩm mỹ. UI Movement có các thiết kế hoạt hình sẽ giúp bạn cải thiện sự tương tác. Hơn nữa, bạn có thể kiểm tra một số ứng dụng giao hàng của nhà hàng và nhà hàng hiện có để hiểu rõ hơn những gì hoạt động và những gì không. Dưới đây là một số ví dụ hay:    

  • Ứng dụng phân phối thực phẩm EatStreet - Ứng dụng EatStreet Food là một ví dụ tuyệt vời về cách tích hợp danh sách nhà hàng với đặt hàng theo nhóm và đánh giá Yelp.

  • GrubHub - Đây là một ứng dụng đặt hàng thực phẩm phổ biến. Ứng dụng cho phép bạn đặt món ăn từ một danh sách các món ăn có sẵn hoặc tìm kiếm dựa trên sở thích của bạn. Trải nghiệm UI là hoàn hảo và phù hợp nhất từ ​​góc độ đặt hàng thực phẩm.

  • Ứng dụng giao hàng của Bringg cho các nhà hàng - Bringg cung cấp một vài ứng dụng tập trung vào hậu cần và giao đồ ăn. Nếu bạn cần nguồn cảm hứng để tích hợp các khía cạnh phân phối và phân phối của ứng dụng, đây có thể là một nơi tốt để bắt đầu.

Tạo các thành phần trình bày tái sử dụng

Một thành phần trình bày trong React là một thành phần chức năng kết xuất một phần của UI của bạn. Chúng có thể được sử dụng lại trên các phiên bản khác nhau của ứng dụng và trên các nền tảng khác nhau. Ví dụ: nếu bạn có kế hoạch xây dựng một trang đăng nhập, hãy suy nghĩ xem có thể sử dụng cùng một trang đăng nhập cho cả ba bên liên quan riêng biệt hay không. Đối với ứng dụng nhà hàng, các bên liên quan bao gồm ứng dụng khách hàng, ứng dụng nhà hàng và ứng dụng giao hàng. Trong trường hợp các trang không quá khác biệt, điều này khá dễ thực hiện. Dưới đây là một số yếu tố trình bày mà tôi cảm thấy có thể tái sử dụng:

Trang đăng ký và đăng nhập trang

Tất cả khách hàng, nhà hàng và đại lý giao hàng đều phải đăng ký và tạo một tài khoản mới với thông tin đăng nhập an toàn khi họ sử dụng ứng dụng lần đầu tiên. Tất cả họ cũng cần phải đăng nhập để sử dụng tiếp theo. Nếu các yêu cầu của bạn bao gồm nhiều ứng dụng, bạn có thể tạo một Thành phần Đăng ký duy nhất và sử dụng lại cho tất cả các ứng dụng.

Quản lý đơn hàng

Đây cũng là điều mà khách hàng, nhà hàng và đại lý giao hàng đều cần.

Các nhà hàng có thể quản lý các đơn đặt hàng mở của họ theo thời gian thực và xử lý các đơn đặt hàng nhanh chóng và hiệu quả nhất có thể. Mặt khác, các đại lý giao hàng có thể sử dụng không gian này cho một kho lưu trữ mở của các đơn hàng mà họ phải giao.

Khách hàng có thể sử dụng trang này để kiểm tra trạng thái đơn hàng của họ.

Trung tâm liên lạc

Tính năng trung tâm liên lạc sẽ cho phép nhà hàng liên lạc với đại lý giao hàng và ngược lại, để đảm bảo đơn hàng được giao hiệu quả nhất có thể và trong cửa sổ thời gian đã hứa. Nó cũng có thể được sử dụng để truyền đạt thông tin liên quan đến người tiêu dùng.

Đây là một thành phần khác hoàn toàn có thể tái sử dụng cho cả ba bên liên quan.

Tóm lược

Điều này là dành cho hôm nay. Trong bài viết này, tôi đã chia sẻ một số mẹo hữu ích mà bạn có thể thấy hữu ích khi tạo ứng dụng bằng React và React Native. Tôi hy vọng bạn đã tìm thấy những lời khuyên hữu ích.

Nếu bạn có bất cứ điều gì để chia sẻ về việc tạo các ứng dụng nhà hàng hoặc phát triển React nói chung, hãy thoải mái chia sẻ suy nghĩ của bạn trong các bình luận.

|