使用SAP AppGyver-low-code-no-code-challenge创建一个图书馆应用程序

211 阅读6分钟

在上一篇博客中,我已经解释了如何使用条形码扫描器功能来扫描任何书籍的条形码,从而使用Google API获取它们的详细信息。

要创建这个应用程序,请参考我的博客

第一部分:https://blogs.sap.com/2022/05/16/isbn-barcode-scanner-using-sap-appgyver/

第二部分:创建一个图书馆移动应用程序

在这篇博客中,我们将学习如何增强应用程序,以创建一个实时的应用程序,可用于任何图书馆发行/归还书籍。 这个应用程序将有能力在条形码扫描的帮助下识别任何书籍的细节,任何拥有图书馆ID的人都可以以他们的名义获得书籍或归还书籍。

先决条件。

  • 在这里创建一个AppGyver试用账户。
  • SAP AppGyver Preview移动应用程序可以从你的应用程序商店下载。
  • 谷歌Firebase用于存储数据

创建图书馆应用程序的步骤。

  • 使用本博客系列的第一部分创建登陆页面
  • 将登陆页面重命名为 "图书馆应用程序主页",标题为 "图书馆应用程序"
  • 添加一个容器,把标题放在它下面。将容器的布局设置为水平布局
  • 在容器中的标题后面添加一个图标(Refresh)。

**请注意:**你可以编辑现有的应用程序并加强它或创建一个相同的副本。

  • 再创建两个页面 "返回"和 "问题"。
  • 导航到变量窗口并创建以下应用程序变量

bookAuthor。类型(文本)

bookID: 类型(文本)

bookName。类型(文本)

libraryID:类型(文本)

issueDate。Type(date/time text)

returnDate。Type(date/time text)

variable1:类型(true/false)

  • 将风格下的页面背景颜色设置为 "警告"。
  • 在Scan Button后面添加一个按钮,并命名为Action。设置风格为 "危险按钮"。
  • 点击 "行动 "按钮,添加下面的逻辑,以导航到返回和发布各自的页面。

  • 行动表(可以从Flow Function Market下载)。
  • 在动作表选项下添加两个自定义值

Label(Return Book): value(return)

Label(Issue Book): value(issue)

  • 如果条件:output["Action sheet"].pickAction.value=="return"
  • 点击扫描条码按钮,并将样式设置为 "二级按钮"
  • 进入逻辑流程,做如下修改。

  • 设置应用程序变量:bookAuthor, bookName, bookID, variable1为。

data.GoogleBook1.items[0].volumeInfo.author[0]。

data.GoogleBook1.items[0].volumeInfo.title。

data.GoogleBook1.items[0].id

数据。GoogleBook1.items[0].volumeInfo.imageLinks.thumbnail。

  • 可见性。

设置动作按钮的可见性为:IF(appVars.variety1,true,false)

将扫描按钮的可见性设置为:IF(appVars.variable1,false,true)

将父容器的可见性设置为:IF(appVars.variable1,true,false)

将图像的可见性设置为:IF(appVars.variable1,true,false)

  • 在图标刷新的流程逻辑下,将Variable1设置为false。

  • 在谷歌Firebase中创建一个项目

添加一个Firestore数据库为 "Books"。设置集合为书籍,文档为书籍并添加以下字段。

bookID, issueDate, libraryID, returnDate

从项目概览页面添加一个Android类型的应用程序。

在AppGyver下,导航到数据,在连接器下添加Firebase项目的android应用配置。

添加数据资源作为书籍,并从Firebase添加字段作为新的属性

选择Global Canvas页面,在App Variable logic flow下添加Initialize Firebase(可以从Flow Function Market安装)。从App Launched Event中连接它。

添加一个Google Firebase/Cloud Firestore类型的数据存储 "books"。

导航到问题页面,将标题改为 "问题书"。

  • 将风格下的页面背景颜色设置为 "警告"。

  • 在上述瓦片下添加另一个瓦片,并将其内容设置为 "图书详情"

  • 添加三个布局为水平的容器,每个容器中添加两个文本字段。

  • 在各自的容器中设置第一个文本字段为图书名称、图书作者、图书ID

  • 将第二个文本字段映射为应用程序变量 "bookName"、"bookAuthor"、"bookID"

  • 在容器下面添加一个标题,并将内容设置为 "输入以下详细信息:"

  • 添加一个容器,然后在里面添加两个容器(比如C1和C2)。将布局设置为水平

  • 在C1中添加两个文本字段,并设置内容为 "输入图书馆ID","选择发行日期"

  • 在C2中添加一个输入字段,映射到变量libraryID和日期字段(可以从组件市场下载),映射到变量issueDate

  • 添加一个按钮,并将标签设置为 二级按钮样式。

  • 点击 "发行"按钮,创建以下逻辑流程。

  • IF条件。IF(IS_EMPTY(pageVars.libraryIDPV),true,false) || IF(IS_EMPTY(pageVars. issueDatePV),true,false)

  • 提醒:请输入图书馆ID和发行日期

  • 创建记录。

资源名称:书籍

自定义对象: issueDate, libraryID, bookID

对话:对话信息。"你想发行这本书吗?"

对话框。"书已经发行了

返回到主页"

  • 导航到返回页,将标题改为 "返回图书"。

将风格下的页面背景颜色设置为 "警告"。

导航到变量窗口并创建以下页面变量。

issueDatePV : 日期/时间文本

libraryIDPV : 文本

在页面上添加逻辑,如下所示。

  • 获取记录。

资源名称:books

Id:bookID

  • 将变量issueDate和libraryID设置为数据库中的issueDate和libraryID值。

  • 在上述瓦片下添加另一个瓦片,并将内容设置为 "图书详情"

  • 添加四个布局为水平的容器,每个容器中添加两个文本字段。

  • 在各自的容器中设置第一个文本字段为图书名称、图书作者、图书ID、图书馆ID。

  • 将第二个文本字段映射为应用程序变量 "bookName"、"bookAuthor"、"bookID"、"libraryID"

  • 在容器下面添加一个标题,并将内容设置为 "输入以下详细信息:"

  • 添加一个容器,然后在里面添加两个容器(比如C1和C2)。将布局设置为水平

  • 在C1中添加两个文本字段,并设置内容为 "发行日期"、"选择返回日期"

  • 在C2中添加一个输入字段,映射到变量issueatePV和日期字段(可以从组件市场下载),映射到变量returnDate

  • 对于issueDate的映射,使用公式为FORMAT_DATETIME_LOCAL(pageVars.issueDatePV, "DD.MM.YYY")

  • 添加一个按钮,并将标签设置为 二级按钮样式

  • 点击返回按钮并创建以下逻辑流程。

  • IF条件。I F(IS_EMPTY(appVars.returnDate),true,false)

  • 如果是真的: 对话à请选择返回日期

  • 如果是假的。 IF条件。DATETIME_IS_BEFORE(appVars.returnDate, appVars.issuedate)

  • 如果为真:对话框。 返回日期不能在发行日期之前

  • 如果是假的。 创建记录

  • 资源名称:书籍

  • 自定义对象: issueDate, libraryID, bookID, returnDate

  • 对话框:对话信息。"你想发行这本书吗?"

  • 对话框。"书已被退回

  • 返回到主页"

演示视频。

结论。

使用SAP AppGyver创建应用程序是非常容易的,不用担心怎么做,而是把重点放在需要什么上。从一个逻辑思维过程到创建一个实时企业就绪的应用程序的过程,是我过去从未见过的,而且是在没有一行代码的情况下。
欢迎再次来到LCNC(Low Code No Code)的世界 !!!!
我真的希望这个博客能对你们中的一些人有用。我很高兴看到你的想法和评论,请在下面的评论区留言。
,也请你关注我的个人资料,了解类似内容。

快乐学习 !!!!!!!

#SAPLowCodeNoCodeChallenge #SAPAPPGYVER