这节内容就是应用大致的规划,使用的技术栈以及後台开发环境建立

1. 应用大致的规划

2. 使用的技术栈

目前要开发的应用大致在後端使用 Django, 资料库使用使用 PostgreSQL , 前端在 Web 部分使用 React js 加上 Antd 的模板,　在手机端则是使用 Flutter 进行开发。另外後台, 前台以及资料库都是使用 Docker 进行部属。

而工厂端的主机则主要是负责收集以及传输机台与 Web Server资料的中介站。

由於在这边的规划只是我简单做的，可能跟有经验的比起来相对的简单跟简陋一点。

• 2.0 Django介绍(主要):

Django 是一个架构在 Python 语言上的网路框架，因为这个框架中有许多的开发包以及设定能开箱及用，所以有经验的开发者能在开发时更快的开发业务逻辑以及项目中较核心的部分。

目前在 Python 的开发框架中有为数不少的开发者使用，由於框架本身是免费的，所以开发以及维护的成本也比一些商业的解决方案低。

在这个应用中我主要是拿来当作回应前端对 Api 资料的读取, 对资料库的 CRUD 以及对机台设定以及状态资料的收集。

• 2.1 PostgreSQl:

许多使用 django 框架都会搭配使用的 SQL Server，我作为一个新手就先按照官方建议的设定搭配使用。这里就不多做介绍。

• 2.2 React js介绍:

前端三大框架(React js, Angular, Vue js)中的一个，这边主要因为之前有一个玩具项目有使用过，所以就想继续使用。

• 2.3 Ant-design-pro:

Antd 是基於Ant Design 设计体系的React UI 组件库。

• 2.4 Flutter:

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。(Copy 自官网-偷懒ing)

这边主要是用在移动端上面，不过假如之後桌面以及 Web 端成熟之後，或许也能当作另一个除了 Web 之外的全平台开发方案。

Flutter 主要的优势在於能直接调用 GPU 的图像库或是画布，不过现在好像有开发者拿来做 3D 影像的 DEMO。

另外在 Mac 这边的阵营原生的桌面以及手机的开发方案就是 object C 以及 Swift。

• 2.5 Docker:

-这边用於前,後台的部属。

3.後台开发环境建立

後台的建立是参考 https://github.com/twtrubiks/docker-django-nginx-uwsgi-postgres-tutorial

会使用 Docker 的原因是因为具体的後台 Prototype 是在树梅派以及一些 Linux 机台上启

动。

目前使用 Docker 部属的前後端开发环境是混合的，之後会进一步把前後端的环境

分离以方便整体方案的开发。

在後端这边我主要是把业务逻辑写在 View 上面，後台主要就是把抓取机台的资料到

Server 以及传到前端，主要就是做机台相关资料的 CRUD 以及透过 OPCUA 回传资

料藉以操作机台的特定数值。

4.网站UI流程设计

可以参考下面的影片流程:

下面这个影片比较是 UI/UX 兼前端的开发过程，

另外网路上也有许多的 Figma 教学，例如下方影片：

其实类似 Figma 之类的软件也不少，感兴趣的话可以自行在网路上面 Google 一下其他类似的软件。

不过由於目前我负责的案子主要是先做原型验证功能，

所以在 UI 以及前端方面就没有太多的要求，大致上能动就可以。

Web 端大致上流程接近於下面这个状况