在本文中,我将向您介绍我在开发名为Marketron的新应用程序过程中遇到的想法、执行和问题。

理念

你有没有想过为你的网站创建一个简单的模型,看看它在其他设备上的样子?而且我的意思不是打开 Chrome Inspector 并启用响应式视图,而是将设备的实际图像(无论是 iPhone、台式计算机还是任何其他设备)与您的网站放在上面?这当然是可能的,但它很耗时,即使只有一台设备也是如此。首先,您必须创建具有正确分辨率的网站屏幕截图,以便与您设备上的显示尺寸相匹配。然后,您必须找到带有您想要的设备的图像。找到它后,您必须打开一个图像编辑软件(例如 Photoshop),并花一些时间调整屏幕截图的大小并将两张图像组合在一起,以使模型看起来不错。

但我的想法是简化整个过程。我只想输入我的网站的 URL 并选择我希望我的网站图像位于的设备图像,然后让应用程序完成工作。这就是我提出Marketron的想法的方式。

[的屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s--p9Hxhz5D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/4aqvrtas9t00mukw4z32.png)

执行

样机发生器

我必须做的 Web 应用程序的第一部分是创建一个简单的 CLI 工具,它将:

1.创建网站截图

2. 使用透视变换变换该图像以适合所选模板

3.将转换后的截图与模板图像合并

我决定使用 Python 来创建 CLI 应用程序,因为它提供了一些用于图像处理的出色库(Pillow 和 OpenCV),以及用于获取网站屏幕截图的库(Selenium)。

Python 应用程序建立在Click库之上,这使得 CLI 应用程序的开发变得更加容易。我预定义了一些带有透视变换参数的模板图像并创建了应用程序,它接受网站 URL 和预设作为输入参数。然后,Python 应用程序将获取网站的屏幕截图,对其执行透视变换,并保存生成的图像。

Web API

API 是项目中最简单的部分。对于 API 项目,我选择了Laravel,因为我对它非常熟悉,它提供了我所需的一切开箱即用。我创建了身份验证控制器和图像服务,它只是从用户到 Python 应用程序的代理。我将生成的图像保存为 AWS S3 存储桶上的私有对象。当授权用户想要访问图像时,仅为该用户生成预签名 URL。这使得图像仅对授权用户是私有的,未经授权的用户无法访问。

前端应用

创建 API 和 Python 应用程序后,我快速为网站创建了一个简单的设计。网站只有 3 个主屏幕:

• 登陆页面

• 生成器页面:用户可以为模型选择所需配置的页面

• 我的模拟:登录用户的页面,以及他们模拟的历史

整个前端应用程序是使用NuxtJS和Bootstrap框架创建的。

[的生成器页面](https://res.cloudinary.com/practicaldev/image/fetch/s--owVVn8Xd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/otn2smjgp10ubafcnp14.png)

后续步骤

由于应用程序仍处于早期阶段,因此有些事情需要改进。主要是:

• 速度:我想提高 Python 应用程序的性能,以提高模型生成速度

• 更多模板:让用户在创建模型时有更多选择

• 可配置:在创建模型时为用户提供更多选择

谢谢!

感谢您花时间阅读这篇文章。我想听听您对 Marketron 应用程序的想法和批评,因为它还远未完成😊。该应用程序可在https://www.marketron.app上找到。