WebApp 开发一个自己的app（自己的课程大作业）

一、项目背景

由于疫情，大家都待在家里，想点外却又害怕不健康，那么自己煮的才是最健康、最好吃的。而对于很多人来说或许是小白厨艺，甚至没有进过厨房，则疫情期间就是提升自己厨艺的大好良机，本项目主要为各位厨房小白提升厨艺、为各位美食爱好者提供一个分享自己菜品做法的平台。

二、开发环境与工具

PC、Adobe Dreamweaver CC 2019、Cordova、SDK、JDK、夜神模拟器

三、网站介绍

1.主题

以分享菜谱做法和学习美味菜谱做法为主题的WebApp

2.目标

让厨房小白学会做出属于自己的美味菜品，让厨神分享更多美味的菜谱做法，致力于美食、享受于美食。

3.用户

提升厨艺的小白、爱好分享美食的用户、喜欢做美食的大家

四、功能介绍

该项目主要有用户注册与登录、分享自己的美食做法、学习高质量的美食做法、VIP用户视频教学、App问题反馈等功能

五、用户文档

以下将介绍该App的功能使用：
首先是在用户打开App之后，会进入到首页的界面：

在这里可以看到有搜索框，这里可以搜索你想要查看的菜谱做法；下来会有一个滚动轮播图，这里可以告诉用户一些推荐的菜谱；接下来就是“精品好菜”栏目了，这里是推荐的菜，用户不知道做什么菜可以先看这里的精品好菜；当我们点击之后，会弹出一个模态框，里面会有这道菜需要的材料和做法过程，也会有 上传这道菜的用户的一个心得体会等；如下：

当用户看完或者不喜欢这道菜的时候，可以点击返回按钮进行返回，然后查看其他菜的做法；

接着是第二个界面，就是VIP专属界面，当我们点击导航栏的“VIP”之后，如下：

就来到了VIP的界面，这里比普通的用户高级一点的是可以播放视频，跟着视频一起做菜。这里分三个栏目，分别是VIP最新推荐、VIP限时免费（这是普通用户可以限时观看视频学习的栏目）、猜你喜欢。

当我们点击导航栏中的“晒美食”的时候

这时用户可以选择不登录继续使用，也可以登录。
接下来就是该平台的一个菜谱菜系分类界面，当用户点击导航栏中的“分类”；

这时就进入到了各菜式菜品的分类，如下：


我们可以点击左侧的主题，从主题再去寻找分支的分类，这里总有一种菜系或者糕点值得用户去学习。

最后来到“我的”界面；

可以看到在这个界面，用户可以点击“登录”、“我的收藏”、“浏览记录”、“反馈问题”、“关于我们”、“给我们评分”等。当我们点击“登录”时，来到登陆界面：

如果没有账号，就可以点击“没有账号？点击注册”进行账号注册。

这里只需要简单的信息就能注册，这个头像时可以实时拍照或者本地相册上传，简单的信息填完之后，点击提交就可以查看是否注册成功，界面如下：


点击确定之后，就会跳转到“我的”界面，这时候点击登录，输入刚刚的用户名和密码就可以进行登录了。

登录成功之后，会显示你当时注册的用户头像和用户名。

而且也多了“分享美食做法”和“退出登录”两个功能，当用户点击“分享美食做法”，就会有下面界面：

这里的分享除了心得可以不填，其他都是必填，否则就会弹出“信息不完整，无法通过审核”的提示！

如果信息填写完整就会提交到后台进行审核

如果审核通过就会有通过的提示：

当用户遇到问题，可以点击“反馈问题”进行问题反馈：

在输入所遇到的问题之后，点击提交给我们即可。

想知道我们，点击关于我们即可查看


当我们不使用app，就可以点击“退出登录”，更好的保护隐私

六、小结

该项目是基于bootstrap的框架基础上，实现了用户登录和注册、查看美食做法、分享美食做法、问题反馈、VIP用户视频观看等界面功能。在开发过程中也有遇到的问题，比如使用Cordova获取权限的时候，容易出现无法取得权限；在网页版的屏幕适应，需要调整图片的适应大小问题。因为bootstrap本身有自适应的功能，但是图片适应这一块我是还需要去学习的，当然也有更多的地方我还没有接触到的或者需要更深入的了解，才能让我自己更快的完成一个项目的开发。

七、参考文献

1.菜鸟教程.https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
2.W3Cschool.https://www.w3cschool.cn/cordova/cordova_overview.html

喜欢的话，给个赞再走呗！有问题也欢迎留言评论或者私信我！

附：
完整项目下载地址https://download.csdn.net/download/weixin_44857413/20286989