持ち帰り注文と配達追跡を実装するための UniApp 実装ガイド

テイクアウト注文と配達追跡を実装するためのUniApp実装ガイド

はじめに:
テイクアウト市場の急速な発展に伴い、モバイルアプリを通じてテイクアウトを注文し、配達することを選択する人がますます増えています。ケータリング業界にさらなるビジネスチャンスと課題をもたらしました。クロスプラットフォーム開発フレームワークとして、UniApp はマルチプラットフォーム アプリケーションを迅速かつ効率的に開発できます。この記事では、UniApp を使用してテイクアウト注文と配送追跡機能を実装する方法を紹介し、関連するコード例を添付します。

1. 要件分析

1. ユーザー ログイン: ユーザーは、携帯電話番号またはサードパーティ アカウントを通じてアプリにログインする必要があります。
2. テイクアウト注文: ユーザーはアプリを通じて好きな食事を選択して注文できます。
3. ショッピング カート管理: ユーザーは複数の食事をショッピング カートに追加したり、数量を調整したり削除したりできます。
4. 注文の支払い: ユーザーはアプリを通じて注文の支払いを行うことができます。
5. 注文クエリ: ユーザーは、過去の注文や未完了の注文などの注文をクエリできます。
6. 配達追跡: ユーザーは配達員の位置と配達の進捗状況をリアルタイムで確認できます。

2. テクノロジーの選択

1. フロントエンド開発: UniApp フレームワーク、Vue.js フレームワーク。
2. バックエンド開発: Node.js、Express フレームワーク。
3. データベース: MongoDB。

3. 実装手順

1. UniApp プロジェクトの作成
   コマンド ラインで次のコマンドを実行して UniApp プロジェクトを作成します:

$ uni-create-project myApp

2. フロントエンド ページの作成
   UniApp のページ ディレクトリに、ログイン ページ、注文ページ、ショッピング カート ページ、注文ページ、配送追跡ページなどの対応するページを作成します。同時に、対応する Vue ファイルを作成し、フロントエンド ページのコードを記述します。
3. ユーザーログイン機能の実装
   ログインページで、ユーザーは携帯電話番号とパスワードを入力してログインできます。 uni.request() 関数を呼び出して、ログイン リクエストをバックエンドに送信します。

uni.request({
  url: 'http://yourbackend.com/login',
  data: {
    phone: '手机号',
    password: '密码'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 登录成功
      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      })
      // 将登录状态保存到本地缓存
      uni.setStorageSync('token', res.data.token)
    } else {
      // 登录失败
      uni.showToast({
        title: '登录失败',
        icon: 'none',
        duration: 2000
    })
  }
})

4. テイクアウト注文機能の実装
   注文ページでは、料理、数量、備考をスライドして選択し、注文を確定するボタンをクリックします。 uni.request() 関数を呼び出して、注文リクエストをバックエンドに送信します。

uni.request({
  url: 'http://yourbackend.com/order',
  method: 'POST',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  data: {
    food: '订购的菜品',
    quantity: '订购的数量',
    remark: '备注信息'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 下单成功
      uni.showToast({
        title: '下单成功',
        icon: 'success',
        duration: 2000
      })
    } else {
      // 下单失败
      uni.showToast({
        title: '下单失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

5. ショッピングカート管理機能の実装
   ショッピングカートページでは、ショッピングカート内の食事の一覧を表示し、数量の調整や削除が可能です。 uni.request() 関数を呼び出して、ショッピング カート操作リクエストをバックエンドに送信します。

// 增加购物车中的餐品数量
uni.request({
  url: 'http://yourbackend.com/cart/add',
  method: 'POST',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  data: {
    food: '菜品名称',
    quantity: '数量'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 添加成功
      uni.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 2000
      })
    } else {
      // 添加失败
      uni.showToast({
        title: '添加失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

// 删除购物车中的餐品
uni.request({
  url: 'http://yourbackend.com/cart/delete',
  method: 'POST',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  data: {
    food: '菜品名称'
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 删除成功
      uni.showToast({
        title: '删除成功',
        icon: 'success',
        duration: 2000
      })
    } else {
      // 删除失败
      uni.showToast({
        title: '删除失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

6. 注文支払い機能の実装
   注文ページで、ユーザーは支払い方法を選択し、注文の支払いを完了できます。支払いは uni.requestPayment() 関数を呼び出すことによって行われます。

uni.requestPayment({
  provider: 'wxpay',
  orderInfo: '支付订单的信息',
  success: (res) => {
    // 支付成功
    uni.showToast({
      title: '支付成功',
      icon: 'success',
      duration: 2000
    })
  },
  fail: (res) => {
    // 支付失败
    uni.showToast({
      title: '支付失败',
      icon: 'none',
      duration: 2000
    })
  }
})

7. 注文クエリ機能の実装
   注文ページで、ユーザーは過去の注文や未完了の注文をクエリできます。 uni.request() 関数を呼び出して、注文クエリ リクエストをバックエンドに送信します。

uni.request({
  url: 'http://yourbackend.com/orders',
  method: 'GET',
  header: {
    'Authorization': 'Bearer ' + uni.getStorageSync('token')
  },
  success: (res) => {
    if (res.data.code === 200) {
      // 查询成功
      const orders = res.data.orders
      // TODO: 处理订单数据
    } else {
      // 查询失败
      uni.showToast({
        title: '查询失败',
        icon: 'none',
        duration: 2000
      })
    }
  }
})

8. 配送追跡機能の実装
   配送追跡ページでは、配達員の位置や配送状況をリアルタイムに確認できます。地図APIにアクセスして配達員の位置情報を取得します。

// 获取配送员的位置信息
uni.getLocation({
  success: (res) => {
    const latitude = res.latitude
    const longitude = res.longitude
    // TODO: 显示配送员位置
  },
  fail: (res) => {
    uni.showToast({
      title: '获取位置信息失败',
      icon: 'none',
      duration: 2000
    })
  }
})

4. 概要
この記事では、UniApp フレームワークを使用してテイクアウト注文と配送追跡機能を実装する方法を紹介し、関連するコード例を添付します。 UniApp のクロスプラットフォーム機能により、マルチプラットフォームのテイクアウト注文アプリケーションを迅速に開発し、より便利なテイクアウト注文サービスをユーザーに提供できます。同時に、ケータリング業界により多くのビジネスチャンスと競争力をもたらします。この記事のガイドを通じて、読者はテイクアウトの注文と配達の追跡機能の開発をすぐに始められ、ユーザーにより良いエクスペリエンスを提供できると思います。

以上が持ち帰り注文と配達追跡を実装するための UniApp 実装ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。