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 到這裡告一個段落，謝謝各位~~~