目录

Travel Booking

Overview

This topic uses travel booking apps as a typical example to detail how the feature of one-time development for multi-device deployment is applied in actual development. The following describes how to develop 11 typical pages (the home page and pages for time selection, ticket query, ticket information filling, order submission, etc.) by complying with Differentiation, Consistency, Flexibility, and Compatibility principles of multiple devices. This enables you to quickly and efficiently master the capabilities of one-time development for multi-device deployment and implement features related to travel booking apps.

There are unique designs for core features of travel booking apps in vertical markets:

Currently, the following device types are supported: bar-type phones, bi-fold phones (Mate X series), and tablets. The following practices will focus on these product forms and provide reference examples from the perspectives of UX design, architecture design, and page development, helping you develop travel booking apps.

Before reading this topic, you need to be familiar with the ArkUI framework and the capabilities of one-time development for multi-device deployment for page development. The following sections describe how to use them in app development.

UX Design

For multi-device responsive design guide for travel and accommodation apps, see Travel and Accommodation Applications.

Architecture Design

The HarmonyOS project architecture uses a tiered architecture encompassing three layers: product customization layer, basic feature layer, and common capability layer. It provides a clear, efficient, and scalable design architecture. For details, see the logical design in Layered Architecture Design.

Page Development

This section describes how to use layout capabilities in travel booking apps to adapt a set of code to multiple devices at the page level. The following describes the layout capabilities used by each page area, helping you develop travel booking apps from scratch.

[h2]Home Page

The home page provides a ticket purchase window to meet users' requirements for booking tickets and reserving hotels.

[h2]Time Selection Page

The time selection page provides a calendar and timetable to help users quickly determine the travel date and filter a ticket on the corresponding date.

[h2]Ticket Query Page

The ticket query page is used to filter tickets by date and departure station, and sort tickets by departure time, price, and total duration.

[h2]Swiping Up to Query Tickets

The motion effect of swiping up to query tickets is mainly used to hide some filtered information when the user swipes up, so that the user can obtain more information in immersive browsing.

[h2]Ticket Information Filling Page

The ticket information filling page provides the features of confirming orders and selecting passengers to facilitate ticket booking.

[h2]Order Submission Page

The order submission page mainly displays ticket and passenger information, helping users confirm order information.

[h2]Order Information Page

The order information page displays the order details and ticket information for users to check.

[h2]Paid Order Information Page

The paid order information page allows users to view paid orders and confirm order information.

[h2]Hotel Home Page

The hotel home page provides hotel reservation services.

[h2]Hotel Ranking Page

The hotel ranking page displays the ranking of hotels for users to select.

[h2]Hotel Details Page

The hotel details page provides detailed information about the hotel, including preview images, room types, and prices, facilitating room selection and reservation for users.

The effect of the top banner varies with the device type. The motion effect of sliding up the top banner and expanding the image is supported on smartphones. Foldable phones support the Scroll component to display small images. After you tap them, large images are displayed. Tablets support the Swiper component for switching between views.

The onReachStart and onWillScroll attributes of the Scroll component are used when a user swipes up to expand or swipes down to collapse the banner.

Scroll(this.scroller) {
  HotelDetailsPictureView({ topLength: this.topLength })
}
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
.onReachStart(() => {
  if (!this.isInitialization) {
    this.topLength = 225;
    this.isInitialization = true;
  } else {
    this.topLength = 460;
  }
})
.onWillScroll((xOffset: number, yOffset: number)=>{
  if (yOffset > 0) {
    this.topLength = 225;
  }
})

The Scroll component is used to support scrolling on a foldable phone. When a small image is tapped, the index value is passed as a parameter to change the content of the large image.

Scroll() {
  Row() {
    ForEach(CommonConstants.HOTEL_PICTURE_MESSAGE, (item: Resource, index: number) => {
      Column() {
        Image(item)
          .width(CommonConstants.THIRTY_PERCENT)
          .borderRadius($r('app.float.hotel_grade_border'))
          .margin(index === CommonConstants.NUMBER_FOUR ? {} : { right: CommonConstants.FIVE_PERCENT })
          .onClick(() => {
            this.getMainPicture(index);
          })
      }
    }, (item: Resource) => JSON.stringify(item))
  }
}
.scrollBar(BarState.Off)
.margin({ top: $r('app.float.calendar_column_margin') })
.width(CommonConstants.NINETY_PERCENT)
.scrollable(ScrollDirection.Horizontal)
getMainPicture(index: number) {
  this.mainPictureResource = CommonConstants.HOTEL_PICTURE_MESSAGE[index];
}

The Swiper component is used for tablets to scroll views.

Swiper() {
  ForEach(CommonConstants.HOTEL_PICTURE_MESSAGE, (item: Resource) => {
    Image(item)
      .width('100')
  }, (item: Resource) => JSON.stringify(item))
}
.width('40%')
.height('100%')

[h2]Low Price Calendar Page

The low price calendar page allows users to locate the most affordable time slots for booking a hotel room.

Sample Code