EP 1: Create empty Xamarin.Forms project for TopStore App

Hello, 各位 iT邦帮忙 的粉丝们大家好~~~

本篇是 Re: 从零开始用 Xamarin 技术来复刻过去开发的一个 App: TopStore 系列文的 EP1。

当然呢~~~

看到此本系列文章的标题就很明确的看是会利用 Xamarin 的技术，来去做一个这个 App 的一个开发，并将 TopStore 这个 App 给复刻出来。

那这一个 TopStore App 我们在後续的篇章有一些机会再来做一些介绍，有关它的一些功能跟它需要做的一些事情。

一开始，毕竟要符合本系列文章的主题 "从零开始用 Xamarin 技术"

我们就先来做一个最基本的 Xamarin 的使用以及专案的一个开发介绍吧~~~

GoGoGo!!!

首先，先打开我们的 Visual Studio，在这个 Visual Studio 里面，我们就直接建立新的专案。

那建立新的专案的部分，我们就选择搜寻 Xamarin.Forms。

当你在这里搜寻 Xamarin.Forms 之後，理论上在 Visual Studio 你有安装完成 Xamarin 的必要安装的时候，就会看到这边会有一个 行动应用装置多重专案范本

那就可以直接点选 "下一步"

那在这边的一个开发上，由於这个这个专案，我们要去复刻过去曾经开发过的一个 App，所以专案名称直接取名叫做 "TopStoreApp"。

另外，这个专案直接放置在我的(电脑) C 槽底下的一个 Tmp 资料夹，并且那在这里的选择我直接 "将解决方案与专案建置於相同目录" 维持 不 勾选的部分。

之後就直接点选 Visual Studio 对话视窗当中的 "建立"。

那在接下来的画面当中，目前 Visual Studio 这个新增 Xamarin.Forms 应用程序专案的方式，可以选择有飞出视窗的，也可以选择有索引页签式的，也可以选择空白的。

那因为我们今天是要做 "Re: 从零开始复刻一个过去开发过的一个 App: TopStore" 的部分，所以当然只是选择空白的应用程序。

而预计开发这个 App，目前就是朝向两个主要的行动装置平台 Android 跟 iOS，所以在这边就不选择 UWP 了，那在接下来我们点选 "建立"。

BTW，建立完成这个过程会花一些时间，那当然就根据各位电脑本身的一个效能，有可能电脑等级比较差，开发建立专案的时间就会比较久，这个时间上面就根据电脑效能的状况建立整个方案。

以目前在 Xamarin.Forms，建立专案的一个过程当中，目前在这个时间点仍是 .NET 5 的时候，它还是维持利用多重专案的一个方式，建立这个App的部分。

如果有继续要往下一个阶段 .NET 6 使用 MAUI 的部分迈进的话，它就变成一个 Single Project 单一的一个专案，来後建置不同的平台应用程序。

理论上会看到 Visual Studio里面的方案总管，会有三个专案:

1. 一个是 Xamarin.Forms 本身的共用专案
2. 一个是 Xamarin.Forms 要建立 Android 平台的一个专案
3. 一个是 Xamarin.Forms 要建立 iOS 的专案

在这个建立专案完成的时後大概就会像是这样的一个结果。

在预设的 Xamarin.Forms 空白专案，里面也会建立一个 MainPage.xaml 的页面部分，然後再由一个 App.xmal 的App 设计。

在 Android 的部分还是 Android 的基本架构:

在 iOS 的部分还是 iOS 专案的基本架构:

在这里，我们就建立好专案，没有什麽问题的话，就先试着来帮整个方案里面的 Nuget 套件的更新，因为在建立这个专案的过程，它使用的是预设 Template，所以可能根据当初安装 Visual Studio 的版本，它的 Template 里面的 Nuget 使用，可能没有这麽的新，所以在当下通常建立完成的时候，我们就会去做一个更新的动作。

在这里就很简单的点选两个所有的封装，勾选之後点选更新，更新的过程就会出现这个变更预览的动作。

提醒一下，点选确定後还有授权与变更的部分需要点选 "我接受"。

这个更新完成之後就没有问题，通常在这个时候你可能会注意到，下面会有一个警告讯息，这个警告讯息是在跟各位讲说，因为现在 Android 专案预设，通常会需要你选到目标方案为 "Android 10" 的部分，就是因为Xamarin.Forms 在它的 Nuget 的部分就有一个预设的设定。

接着就来调整一下这个社定，在这边 Android 专案上面就透过滑鼠右键点选 "属性"，在这边会出现应用程序，目标的 Framework 我们把它调到 "Android 10 Q 的版本"

就会理当来讲等到这边接受它变更完成之後，下面这个警告 Visual Studio 当中输出警告就消失了。

所以目前来讲，就是最基本的 Xamarin.Forms 的一个专案，再做一开始的建立的时候，我们可能会遇到的一些情况，我们这样子调整完成之後，就要尝试做一下整个方案的一个建置。

所以在这里可以透过 Visual Studio 方案总管当中，透过这个方案上按滑鼠右键，在这个方案选单当中点选重建整个方案。

当点选整个重建方案的时候，各位会发现这个建置的时间上，毕竟要建置三个专案当然会稍微比较久一点点。

这里就先略过这样一个等待，我们就先看一下启动 Android 的一个模拟器。

从 Visual Studio 的选单 "工具" -> "Android 的装置管理员" 这里，去启动这个 Android 的装置。

在 "Android 的装置管理员" 里面，看到本身有设立几个常用的模拟器版本:

在这边选择使用 Android 8.1 (API 27)版本的模拟器就做一个测试，就直接点选启动後，就能将 "Android 装置管理员" 关闭，并等待 "Android 的模拟器" 启动起来。

再来的话目前在前面已经开始 "重建方案" 的过程当中，Mac 的编译也开始在跑了，而当这边的建置也完成了，三个专案全部都建置成功时，在 Visual Studio 的输出窗格的这个地方会有去写这件事。

再来就试试看跳到 iOS 的部分，iOS 的部分如果没有要接实际的 iPhone 装置，就直接把这里的这个组态管理员这里面的版本，把它选到 "iPhone Simulator"，当今天的 Mac 有连线完成的时候，这个时候上面本身的 Simulator 的一些装置，就会在这边去做一个列出的动作。

目前在各位看到的文章中的画面是以 iOS 14.4 的版本。

这边就不罗嗦，就直接 "Debug Mode" 来跑一下，如果直接用 "Debug Mode" 来跑，当然建置与部署的速度上会比较慢一点，因为毕竟是 "Debug Mode" (废话!?)

如果各位只是要看一些 App 画面调整与变化，或者是一些程序小异动处理的话，其实可以不要用到 "Debug Mode"，直接 "Ctrl + F5" (执行但不侦错) 来执行会是比较好的作法。

因为前面有重建整个方案，它编译已经编译过一次了，就直接将建置的 "Debug Mode" 一个App，直接部署到这个 "iPhone Simulator" 里面去。

那各位就可以看到说最基本的 Xamarin.Forms 专案 的 App 就这样建立起来。

其画面的这个部分，就是介绍的 Xamarin.Forms 一个最基本的应用程序到两个(Android & iOS)行动平台，从建立专案到执行的一个呈现罗。

本系列文章的 EP1 到这里告一个段落，谢谢各位~~~