目的
如果我们学习任何新的编程语言，我们将创建的第一个应用程序要么是一个天气应用程序，要么是一个待办事项列表。所以我想做一些新的东西，于是就想出了这个电影票预订的应用程序。
我的应用程序
内置的导航功能被禁用，因为我想要一个自定义的导航标签，包括一个返回按钮、品牌名称和预订历史图标。所有的页面都被拉伸到了视图端口，占据了整个屏幕的宽度和高度。
我的应用程序
我的应用程序总共由六个页面组成：
我的应用程序的页面
主页
它有一个在电影院播放的电影列表。对于电影的细节和海报，我正在使用OMDbAPI的RESTful网络服务。
如果我们使用上述服务调用RESTful API，输出将是JSON格式，其中包括电影列表、找到的电影总数和对我们调用的响应。
API输出
下面是在AppGyver中完成的配置，作为REST API直接集成的一部分，只为我们的应用程序获得所需的信息。
REST API直接集成资源 基础细节
我们需要配置GET COLLECTION，因为输出将是基于API调用期间传递的过滤条件的多个记录。
获取集合
如你所知，从API的输出图像中可以看出，我们是在JSON键的搜索下获得对象格式的电影细节列表。因此，搜索被保留在响应键路径中，以便只检索必要的细节到我们的应用程序。
从API检索到的细节的模式
在主页上，在导航容器之后，列表项容器在滚动视图中重复出现，它是基于页面加载时使用Get record Collection流程逻辑从REST API调用中检索的列表。
我希望当应用程序第一次打开时，能有几秒钟的欢迎屏幕显示。这是通过创建一个新的容器来实现的，它的位置是绝对的，Z-index是1，可见性属性被设置为应用程序变量flag，当页面第一次被加载时，它在一段时间后被设置。
现在主页已经完成，我需要在点击电影项目容器上的订票容器时导航到演出时间页。
用选定的电影细节作为页面参数导航到下一个页面
显示时间
演出时间页面由五个部分组成，即电影海报、电影名称、演出时间、电影日期和座位导航按钮。电影海报和电影标题是使用页面参数中的图像和标题基础组件显示的。
对于放映时间，我想对所有电影的固定时间进行硬编码。所以我创建了一个名为ShowTime的应用程序变量，作为一个带有时间的对象列表，并为其提供初始值。
由于我们需要不同的日期，我添加了一个自定义的JavaScript逻辑，从当前日期中获取一周的日期，并将其设置为一个页面变量，以便在页面被加载或聚焦且页面变量为空时显示。
const DateList = [];
const noOfDays = [0,1,2,3,4,5,6];
noOfDays.forEach( i => {
let ipaDate = new Date();
let b = new Date(ipaDate.setDate(ipaDate.getDate() + i));
let DateNumber = b.getDate();
let DateChar = DateNumber.toString();
if (DateNumber<10){
DateChar = '0' + DateChar;
}
let MonthNumber = b.getMonth() + 1;
let MonthChar = MonthNumber.toString();
if (MonthNumber<10){
MonthChar = '0' + MonthChar;
}
let YearNumber = b.getFullYear();
let YearChar = YearNumber.toString();
let x = b.toLocaleString("en-US",{ day: 'numeric' });
let y = b.toLocaleString("en-US",{ weekday: 'short' });
let z = b.toLocaleString("en-US",{ month: 'short' });
DateList.push({ Day: y,Date:x, Month:z, FullDate: ( DateChar+'-'+ MonthChar+'-'+ YearChar ) });
})
return { result: DateList };
使用ShowTime和DateIteration的重复属性，电影的时间和日期被显示在屏幕上，并有一个选择座位的按钮。
三个名为FullDate、ShowDateSelected和ShowTimeSelected的页面参数被创建，以记下用户的选择。
当用户选择了放映日期或放映时间时，各自的页面参数被设置，容器被高亮显示，用公式表示用户选择。
用户显示时间的选择逻辑
用户显示日期选择逻辑
突出显示用户选择的公式
当你点击选择座位按钮时，应该通过传递页面参数来触发座位选择页面。
座位选择
电影的座位可用性将基于电影、日期和放映时间。所以我创建了一个名为ReservedSeats的设备上存储，其中有座位可用性的关键字段和预订的座位列表。
ReservedSeats集合的样本记录
在加载页面上，通过传递关键字段如imdbId、日期和时间来获取ReservedSeats上的记录集合（这三个字段是作为前一页的页面参数传递的），检索到一个预订的座位列表。
座位选择页面分为电影细节、可选择的座位、总价和确认座位按钮。
一个座位基本上有三种状态，即已预订、可用和选定。所以我创建了一个名为Seats的页面变量，作为一个对象的列表，其中提到的状态为布尔类型。
我考虑在这个应用中，剧院的容量为50。座位变量将有50个对象，当一个节目的预订没有完成时，IsAvailable标志为真。假设所有的座位都被预订了，那么座位变量将有50个IsBooked标志为真的对象。基于座位的状态，它的颜色将被改变，以便使用公式选项更好地指示给用户。
自定义JavaScript逻辑被写入，以生成一个具有各自IsAvailable标志和IsBooked标志的对象列表，基于ReservedSeats资源上的获取集合记录输出。
let arrayTemplete = [...Array(50).keys()];
let reservedData = inputs.input1;
let reservedSeats = [];
let seats = [];
let recordId = "";
if (reservedData != []){
reservedSeats = reservedData[0].ReservedSeats;
recordId = reservedData[0].id;
}
arrayTemplete.forEach( a =>{
let c = (a + 1).toString();
if (reservedSeats.indexOf(c) < 0) {
seats.push( { id:a , IsAvailable:true , IsBooked: false, IsSelected: false } )
} else {
seats.push( { id:a , IsAvailable:false , IsBooked: true, IsSelected: false }
)
}
})
return { result: seats, oldId: recordId , reservedData: reservedSeats };
当用户选择了可用的座位，对象的值就会用自定义的JavaScript代码改变。
座位对象的价值根据状态改变
总额应该根据选择的座位数乘以一张票的费用来计算。所以一个名为NoOfSeatsSelected的页面变量被创建，并在自定义JavaScript逻辑流程后根据用户的选择进行更新。
当确认座位按钮被点击时，用户选择的座位号和之前预订的座位号被合并成一个列表，资源ReservedSeats被更新。
为了存储预订的座位信息，我创建了另一个设备上的存储资源，名为BookedHistory，其中包括一个ID、电影名称、日期、时间、海报URL、预订的座位列表和票号。一旦资源被成功更新，所需的细节就会在BookedHistory上更新。然后用所需的页面参数触发票务页面。
票务
票务页面包括一张票，其中有预订的电影表演的QR细节和相同的文本细节。
为了生成带有电影细节的QR码，我使用了goqrAPI调用。我们只需要结合所有的细节，并将其编码为一个URI。编码细节的自定义JavaScript代码如下。
var QrData = "Movie:"+ inputs.title+",date:" +inputs.date+ ",time:" + inputs.time +",Seat:" + inputs.seats;
var QrUrl = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURI(QrData) + "&size=100x100";//&color=FFFFFF&bgcolor=161621";
return { result: QrUrl };
当在这个页面上按下返回按钮时，它应该回到主页，而不是座位选择页面。因此，从市场上导航到根是用来实现这一点的。
预订历史
预订历史页面由使用列表项容器从BookedHistory资源中检索的细节组成。当预订的票被点击时，票务页面将通过传递各自的列表项的细节而被触发。
后台数据
这只是一个空页面，用来重置开发和测试过程中保存的数据库条目。这个页面不与应用程序中的任何其他页面相连。
我的经验
我可以肯定地说，这是我学习前端开发的一个非常好的开始。在屏幕的左侧拖放所需的组件以实现我心中的设计是非常容易的。好消息是，像流程图一样的逻辑映射使我的工作变得简单。
- 样式和布局。组件的样式有很多绑定选项，可以满足不同的需求。一旦我们完成绑定，就可以看到布局选项的预览。
- 公式。预定义的公式是惊人的，因为它们是根据类型进行分类的，右侧的文档和基于为变量提供的示例值的样本输出会让人知道这个公式是否合适。
- 自定义JavaScript。 如果我们需要一些有点复杂或不可能使用简单或预定义公式的逻辑，可以在流程之上编写自定义代码。我在我的应用程序中使用了一些自定义的JavaScript代码，但那是通过网上冲浪来满足我的要求。我确实遇到了一些困难，因为错误的发生是由于一个错字。我的建议是，先从网上获取代码，然后将其粘贴到一个在线编译器中，再粘贴到自定义代码窗口中。
- 改进。 可以进行一些改进，如从云端存储和检索细节，可以创建具有认证功能的用户登录屏幕，在生成或存储在设备路径中后将票据下载到设备上，并进行良好的用户界面改进。
总结
AppGyver是一种非常简单的方法，可以在短时间内创建应用程序。
