XenShop

XenShop：移动工程师试用评估

功能

产品功能

XenShop

XenShop 是印度尼西亚的一家在线商店。为了促进业务增长，商店经理计划构建一个移动应用程序，让客户可以在线购买产品。XenShop 的目标是评估移动工程师在与我们在 Xendit 日常工作中相关的软件工程方面的熟练程度。
此存储库的目的是提交试用演示以供 Xendit 进行内部评估。

API 文档

XenShop 已使用 FakeStoreApi 的 API 开发。您可以在此处查看 API 文档。

设计

XenShop 仅用于内部评估的演示/试用，因此所有设计均来自互联网。如果您想查看项目中使用的图片，请随意导航至assets文件夹。下方所有部分均提供设计预览。

版本

XenShop 是基于以下版本详细信息开发的。

开发

XenShop 是一个简单的电子商务领域应用程序，为内部评估而开发。以下是每个功能的详细说明，包括 API 和预览。

启动画面

启动画面是应用程序的初始路由，每次用户启动应用程序时都会显示 3 秒。

预览

主屏幕

主屏幕在启动画面后立即启动。主屏幕是应用程序的基础。所有路由和导航都从主屏幕开始和结束。从主屏幕，用户可以导航到产品列表和购物车。主屏幕以水平列表形式的缩略图显示类别列表，以垂直列表形式显示类别横幅。名称为类别的资源用于显示图片。

预览

分类列表

类别以缩略图（水平）和横幅（垂直）的形式显示在主屏幕上。

使用的 API

https://fakestoreapi.com/products/categories

响应

[
    "electronics",
    "jewelery",
    "men's clothing",
    "women's clothing"
    ]

产品列表

产品以垂直列表视图显示。产品根据其类别获取。产品包含有关产品的基本信息，如标题、描述、图片、价格、评分等。

使用的 API

https://fakestoreapi.com/products/category/${categoryName}

响应

[
    {
        id:5,
        title:'...',
        price:'...',
        category:'jewelery',
        description:'...',
        image:'...'
    }
    /*...*/
    {
        id:8,
        title:'...',
        price:'...',
        category:'jewelery',
        description:'...',
        image:'...'
    }
]

预览

产品详情

产品详情根据上述 API 收到的产品信息显示。显示的参数如下。

显示的参数

{
    id:8,
    title:'...',
    price:'...',
    category:'jewelery',
    description:'...',
    image:'...'
}

预览

购物车列表

购物车以垂直列表视图显示。产品列表中显示的产品项与此处非常相似。唯一的区别是评分条被数量选择器替换。响应中的产品数组包含一个包含 productId 和 quantity 的对象数组。

使用的 API

https://fakestoreapi.com/carts/${userId} （目前考虑 userId: 1）

响应

{
    id:5,
    userId:1,
    date:...,
    products:[...]
}

预览

添加到购物车

添加到购物车功能允许用户将商品添加到购物车并继续结账。商品以 JSON map 的形式发布到 API。该 map 由产品 ID 和产品数量组成一个数组。此外，userId、日期等参数也在此 map 中发布。它还显示了目前静态的价格摘要。

使用的 API

https://fakestoreapi.com/carts/

请求 - POST

{
    userId:5,
    date:2020-02-03,
    products:[{productId:5,quantity:1},{productId:1,quantity:5}]
}

响应

{
    id:21
    userId:5,
    date:2020-02-03,
    products:[{productId:5,quantity:1},{productId:1,quantity:5}]
}

预览

结账页面

结账页面是完全静态的。它取决于上述 API 的成功响应。收到上述 API 的成功响应后，应用程序会导航到此页面。它向用户显示交易成功的确认，并允许用户选择继续购物。

预览

注意事项

在 FakeStoreApi 中，POST 请求会返回一个带有新 ID 的对象。需要注意的是，实际数据不会插入数据库。因此，如果您想访问新 ID，将会收到 404 错误。

重要提示

此存储库仅供 Xendit 的移动工程师进行内部评估。请勿滥用。

作者

• Amit Mishra

如果您喜欢本教程，请不要忘记点赞Star。也请关注以获取即将发布的教程通知。

GitHub

查看 Github