手机APP开发之MIT Appinventor详细实战教程(十),标准登陆界面的逻辑设计和数据库的有效使用

目录

(一)APP功能介绍

(二)设计流程

(三)知识点

(四)问题

(五)总结


(一)APP功能介绍

今天我们来学习设计一个登录界面的APP,虽然界面有些简陋,但其内在的逻辑设计却并不简单。我们首先来看一看它的基本功能:

 第1个是登录和注册界面 ,也就是当我们点开APP的初始界面。第2个是注册界面,当注册完成后,我们返回登录界面重新登录。然后就生成了第3个界面,登录成功界面。

其中第2个注册界面包含有头像的功能,当你在注册时候设计了头像,那么在你登录成功后,你的头像就会正确的显示出来。

App内置数据库,用来保存你的账号和密码。

当然,如果你的账号和密码是错误的,是不能正常登录的。

同时还具备删除账号的功能,这就使得其内部的原理结构相对有些复杂了。我们来一起看一看,这是如何设计的吧。

 这是我们设计的第1个uI屏幕 ,细心的同学可能会发现,这个界面和我们APP产品的界面有些不同。

(二)设计流程

 这个界面相对于成品功能更加完善,按钮和排列也较多,这是因为在我们的成品APP界面中是隐藏了很多组件的。     

实际上,在APP里面的第1个界面和第2个界面是一个界面。 只不过是当不同的按钮触发后,将一部分组件隐藏起来了而已。所以就显示出我们所看到的两个界面。 其本质是一个界面的隐藏组件来实现的。我们来看一看其内部的逻辑设计。  

大家只需要找到那个真和假这两个字。真就代表显示假就代表不显示。

通过按钮的触发来使页面布局发生变化,这是我们在APP经常使用的一种方式。 

 通过这种方式,我们可以按照客户的需求来实现相应的界面。

如果还不是很明白,我可以将这个APP发给大家,大家根据操作来认真体会一下这个过程。 

 这个是页面初始化的相关逻辑设计。

(三)知识点

第1个知识点是: 其中紫色部分是数据库的相关逻辑了,这是执行储存账号信息的第1个步骤。

第2个知识点是橙色模块。他把全局变量类型设置为1或者是0。 是为了复选框的需求,这个以后会用到。  

 这个是图像选择框的一个简单逻辑。就是当我们在第2个注册界面的时候。我们要从手机本地相册选择自己的头像。当选择完成的时候,我们设置图像选择框的图像为我们选择的图像而已。相对来说比较好理解。

 这是当确定按钮按下后,其内部所执行的所有逻辑过程。

也是我们最复杂的模块。由于一张图片无法证全部显示,所以我给大家添了三幅图片。其内在的逻辑设计和思路,我给大家简单的介绍一下。

 因为是注册界面,所以我们首先要保持用户注册的账号不是空号。

(四)问题

这是第1个要注意到的问题。

第2个问题便是需要用户两次的密码输入保持一致。如果不一致,需要重新输入。

第3个要求便是以上的情况全部是正确的,我们将其保存在数据库中。方便用户下一次登录。

当用户第2次登录的时候,可能会出现账号输入错误的情况。

当账号输入错误或密码错误时候,我们要提示其错误情况,要求其改正,这就需要对话框的出现。

基于以上的要求,我们根据逻辑设计来实现相关的需求,就成了上图的逻辑设计了。 

  这是第2个uI界面的设计,功能是删除账号和显示头像和账号Id。内置数据库。  我们来看一下其内部的逻辑设计。 

 这是其内部的逻辑设计了,我们来简单的了解一下。

首先我们设置全局变量为文本空变量。当屏幕二初始化的时候,我们显示其上一个界面中用户储存的账号和头像。当删除按钮被点击时。我们首先提示用户是否需要删除账号。如果需要则从数据库中清除标签和数据。

删除完毕后,我们打开第1个用户注册和登录的界面。这个相对比较直观,也从侧面为我们展示的数据库如何删除标签和如何打开屏幕的一些相关操作。

(五)总结

以上就是这个APP主要的制作流程和思路以及方法。感兴趣的小伙伴可以私聊我领取相关软件。这主要是培养我们一个逻辑思维和实际操作能力的一个小锻炼。在实际上其实并没有太大的实用价值。但是这可以作为一个比较优秀的软件的精美的包装。有了这个精美的包装,会让你的软件看起来更加的高端大气,当你有了服务器之后,还可以管理这些账号,让你更加的专业。有哪些不懂可以在下方评论。 

 

 

  • 36
    点赞
  • 161
    收藏
    觉得还不错? 一键收藏
  • 23
    评论
### 回答1: MIT App Inventor是一款用于创建安卓应用程序的免费软件。它是一个基于可视化编程的开发工具,用户不需要具备高超的编程技能,只要简单拖拽各种组件,就能够实现一个基本的应用程序。MIT App Inventor支持多种传感器,用户可以在自己的应用中加入地理定位、照相机等功能。用户创建完毕应用程序后可以进行实时测试,确保应用功能符合自己的预期。 ### 回答2: 随着移动互联网的发展,手机APP已经成为了人们日常生活中必不可少的工具。对于那些想要学习开发手机APP的人来说,有很多不同的工具和平台可以选择。其中,MIT App Inventor是一款非常受欢迎的应用程序开发工具。 MIT App Inventor为用户提供图形化的编程环境,可以快速地将代码块拼接成完整的APPMIT App Inventor还提供了一组强大的模块和组件,可以用于构建丰富的交互式用户界面,添加各种功能和特性。 在实战教程方面,由于MIT App Inventor是基于图形化编程的工具,因此比较容易上手。以下是一些常见的步骤和技巧: 1.创建新的APP项目并命名 在App Inventor的页面上,点击“Create new project”按钮,填写APP名称和描述,并点击“OK”按钮,就可以创建一个新的APP项目。 2.拖拉组件并调节大小和位置 在“Designer”模式下,用户可以选择不同的组件,例如按键、文本框、图像、列表等等,将它们拖拉到画布上,并设置它们的大小和位置。 3.设置组件的属性和行为 在“Blocks”模式下,用户可以为不同的组件设置属性和行为。例如,可以为按键设置响应事件、为文本框设置默认值、为图像设置来源等等。 4.使用块拼接代码 在“Blocks”模式下,用户可以将不同的代码块拼接在一起,实现各种功能和特性。例如,可以将用户输入的文本保存到文件中、调用摄像头拍照并显示图片等等。 以上是MIT App Inventor的一些常见实战教程步骤和技巧,当然还有很多其他的功能和特性可以继续探索。总的来说,MIT App Inventor是一款非常适合初学者的应用程序开发工具,它提供了简单易懂的图形化界面和丰富的组件和模块,可以轻松地实现自己的APP想法。 ### 回答3: 手机APP开发是当下最热门的技术领域之一,随着移动互联网的快速发展,越来越多的人开始关注APP的开发和推广。其中,MIT App Inventor是一款非常受欢迎的开发工具,它能够让任何人都可以轻松地开发出自己的APP。下面我将为大家详细介绍MIT App Inventor实战操作教程。 一、安装MIT App Inventor 首先,我们需要在官网上下载并安装MIT App Inventor软件。只需要在谷歌浏览器中输入“MIT App Inventor”,打开官网即可。在官网上,我们会看到“Build Your Own APPS”这个页面,这个页面上有详细的安装教程和下载链接。我们只需要根据提示下载并安装即可。 二、创建新APP 安装完MIT App Inventor后,我们就可以开始创建新APP了。首先,在软件中点击“New Project”按钮,然后输入APP的名称和包名。 三、添加组件 添加组件是APP开发的重要步骤之一,下面我们来介绍一下如何添加组件。 1.在组件栏中选择要添加的组件,比如说我们要添加一个按钮,只需要在组件栏找到“Button”组件并拖动到画布上即可。 2.设置组件属性。在组件的属性栏中,我们可以设置组件的各种属性,比如按钮的文本、颜色、大小等等。 四、设计界面 设计界面是APP开发的另一个重要步骤,下面我们来介绍一下如何设计界面。 1.在画布上拖动组件。我们可以通过拖动组件来设计APP界面的布局,比如在画布上拖动多个按钮,并设置它们的位置和大小。 2.编辑UI主题。我们可以在UI主题中编辑APP的样式,包括字体、颜色、背景图等等。 五、添加代码 添加代码是APP开发的最后一步,下面我们来介绍一下如何添加代码。 1.选择组件。在MIT App Inventor中,我们可以通过选择组件来添加事件和代码。比如,要为一个按钮添加点击事件,只需要在设计界面中选择这个按钮。 2.添加代码。我们可以在事件编辑器中添加相应的代码,当用户点击按钮时,程序会自动运行我们添加的代码。 以上就是MIT App Inventor实战操作教程,通过这个教程,我们可以轻松地开始自己的APP开发之路。当然,APP的开发还需要不断的学习和实践,希望大家能够在这个领域中不断进步,取得更好的成果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值