Free Press

Začněme společně vytvářet krásné nativní multiplatformní aplikace pomocí .NET, Xamarinu a Visual Studia! V tomto blogu vás provedu celým procesem a popíšu vše, co je v Souboru -> Novinka pro Xamarin. Pokud se učíte spíše vizuálně, mám pro vás celé video, na které se můžete podívat:

Nejprve položíme základy tím, že odpovíme na některé časté otázky:

Co je to .NET?
.NET je multiplatformní, vysoce výkonný a otevřený běhový systém, který se používá s mnoha jazyky, editory a knihovnami a který umožňuje vytvářet aplikace pro web, mobilní zařízení, počítače, hry a další. Je to základ, který umožňuje spouštět kód na různých platformách, jako jsou iOS, Android a Windows. Pokud jste webový vývojář, je to něco jako runtime V8, který spouští JavaScript, nebo pokud jste vývojář Javy, JVM, který spouští Javu.

Co je Xamarin?
.NET má řadu frameworků, které jsou pro něj vytvořeny a které umožňují jedinečné scénáře pro vývojáře pro konkrétní platformy. Například ASP.NET Core a Blazor jsou frameworky vytvořené pro .NET pro vývoj webových aplikací. WPF a UWP jsou frameworky vytvořené pro .NET pro vývoj desktopů. Xamarin je framework a nástroje, které umožňují vytvářet aplikace pro iOS, Android a macOS. Obsahuje také několik knihoven, které umožňují vývoj napříč platformami iOS, Android, macOS a Windows, včetně Xamarin.Forms pro multiplatformní uživatelské rozhraní a Xamarin.Essentials pro multiplatformní přístup k funkcím nativní platformy.

Jaké programovací jazyky mohu použít?
.NET podporuje několik jazyků včetně C#, F# a Visual Basic. Pro tvorbu aplikací s Xamarinem můžete použít kterýkoli z těchto programovacích jazyků, nicméně já jsem vývojář jazyka C# a ten je pro vývoj aplikací primární. Pro jazyk F# však existují fantastické frameworky, například Fabulous pro funkční vývoj.

XAML je další „jazyk“, který se bude používat k vytváření uživatelského rozhraní s Xamarinem. XAML se již dlouhou dobu používá k vytváření aplikací pro Windows s WPF a UWP a má několik skvělých funkcí, včetně snadno čitelného značkování, technologie Hot Reload a pokročilého vázání dat, které usnadňují vývoj uživatelského rozhraní.

Jaké nástroje mohu používat?
.NET umožňuje vývojářům používat širokou škálu nástrojů včetně příkazového řádku, editorů kódu, jako je Visual Studio Code, a plnohodnotných IDE (Integrated Development Environment) s Visual Studio 2019 a Visual Studio 2019 pro Mac. Pro vývoj mobilních aplikací s Xamarinem budeme muset používat buď Visual Studio 2019, nebo Visual Studio 2019 pro Mac, protože mají plné funkce pro vytváření aplikací.

Začněme tedy vytvářet naše první mobilní aplikace s Xamarinem!

Instalace Visual Studia pro mobilní vývoj

Prvním krokem na vaší multiplatformní cestě je instalace Visual Studia 2019 pro Windows nebo Visual Studia 2019 pro Mac.

Při instalaci Visual Studia 2019 v systému Windows stačí vybrat možnost Mobile development with .NET:

V případě Visual Studia 2019 pro Mac můžete zvolit instalaci pro Android a iOS.

Pokud se zabýváte vývojem pro iOS, budete muset na svůj počítač s MacOS nainstalovat také Xcode.

Poté máte vše připraveno a můžete se pustit do mobilního vývoje!

Při vytváření a spouštění projektu pro Android můžete být vyzváni k instalaci dalších sad SDK pro Android a vytvoření emulátorů Androidu.

Vytvoření projektu

Teď, když máme nainstalované Visual Studio 2019 a Xamarin, pusťme se do práce! Po spuštění aplikace Visual Studio 2019 se zobrazí možnost vytvořit nový projekt. V systému Windows můžete vyhledat Xamarin.Forms nebo použít filtr typů projektů a vybrat Mobile. My budeme chtít vybrat možnost Mobilní aplikace (Xamarin.Forms).

Po výběru tohoto nového projektu se zobrazí nové dialogové okno s dotazem, jaký typ šablony pro aplikaci chcete použít:

Máme na výběr několik možností podle typu aplikace, kterou chceme vytvořit.

Flyout, Tabbed, & Blank

Flyout & Šablony aplikací Tabbed jsou založeny na nejnovější technologii Xamarin.Forms s názvem Shell. Umožňuje rychlejší tvorbu lešení aplikací a nabízí jedinečné funkce, například navigaci založenou na URL. Tyto šablony jsou si podobné s hlavním rozdílem, jestli chcete pro základ aplikace vysouvací menu nebo spodní záložky.

Blank app je právě taková a nabízí poměrně jednoduchou šablonu s jedinou stránkou a ničím jiným.

Přejděme na Flyout! Chci, abychom začali tady, protože většina tutoriálů se Shellem nezabývá a podle mě je to budoucnost vývoje aplikací pro Xamarin. Tato šablona toho má v sobě hodně, takže v dalších příspěvcích si projdeme jednotlivé části, ale pro dnešek si jen vytvoříme projekt a projdeme si, co je Shell.

Pokud používáte Visual Studio 2019 pro Mac, budete chtít vybrat Multiplatform > App > Flyout Forms App

Co je v projektu?

Po vytvoření projektu aplikace uvidíte několik projektů uvnitř jednoho řešení.

Projdeme si, co se zde v našem novém řešení nachází:

První projekt obsahuje několik složek, souborů kódu a souborů uživatelského rozhraní. Tento projekt je projektem standardu .NET, který nám umožňuje mít jeden projekt, který lze sdílet v různých operačních systémech. V tomto projektu budeme psát většinu našeho kódu.

iOS & Projekty pro Android jsou „hlavním“ nebo „nadřazeným“ projektem, který slouží k umístění kódu specifického pro danou platformu, nastavení, prostředků a dalších prvků. Zde budete chtít nakonfigurovat různá nastavení, jako je název zobrazení, ikona aplikace, čísla verzí a veškerý kód potřebný pro věci specifické pro iOS nebo Android, které nejsou k dispozici napříč platformami. V určitém okamžiku budete muset přejít do těchto projektů a upravit některé věci, ale prozatím zůstaneme v multiplatformním projektu.

Xamarin.Forms Cross-Platform UI

Uvnitř našeho multiplatformního projektu .NET Standard najdeme část kódu pro naši aplikaci. Tato šablona ukazuje ukázkovou aplikaci, která obsahuje seznam položek a stránku o aplikaci. Položky jsou uspořádány do složek:

• Modely: Jedná se o třídy, které reprezentují data v aplikacích, například Osoba, Auto, Pes, Kočka atd. V této aplikaci máme jeden model nazvaný Položka.
• Služby:
• Model položky: Uvnitř této složky je umístěn kód, který přistupuje k věcem nesouvisejícím s uživatelským rozhraním, jako jsou volání webových služeb, databáze atd. V projektu v jednoduchém MockDataStore, který se používá k ukládání položek do paměti.
• Pohledy: Zde budou umístěny naše soubory uživatelského rozhraní XAML!
• ViewModels: V této složce najdete soubory, které se téměř 1:1 mapují na složku Views. Je to proto, že každé View má ViewModel, který je svázán tak, že Xamarin.Forms může tyto dva modely propojit, takže View může zobrazovat informace nebo volat metody v každém ViewModelu.

Podívejme se na AboutPage.xaml, což je první stránka, kterou uvidíme po spuštění aplikace. Zde vidíme několik věcí, první je element nejvyšší úrovně ContentPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyAwesomeApp.Views.AboutPage" xmlns:vm="clr-namespace:MyAwesomeApp.ViewModels" Title="{Binding Title}">

Tady je několik značek xmlns, které představují místo, kde se nachází konkrétní kód. Výchozí a x jsou obsaženy v každém souboru a slouží pro základní funkčnost. Značka xmlns:vm nám umožňuje přistupovat k vlastnímu kódu z XAML, což si ukážeme za chvíli. Značka x:Class je odkaz na jmenný prostor a název stránky, to odpovídá kódu za ní. Nakonec je zde vlastnost Title, která je datově vázaná na vlastnost Title v našem ViewModelu.

Můžeme nastavit další vlastnosti, například BindingContext a Resources s obsahem XAML. Zde použijeme tuto značku xmlns:vm k nastavení BindingContext na novou instanci AboutViewModel:

<ContentPage.BindingContext> <vm:AboutViewModel /></ContentPage.BindingContext>

Další je prostředek Color, který lze použít na stránce. Zdroje nám umožňují odstranit duplicitní kód a vytvořit opakovaně použitelné dvojice klíč/hodnota. Svým způsobem se to podobá CSS při vývoji webových stránek.

<ContentPage.Resources> <ResourceDictionary> <Color x:Key="Accent">#96d1ff</Color> </ResourceDictionary></ContentPage.Resources>

Do zdrojů můžeme přidávat další věci, včetně řetězců, stylů a dalších.

Nakonec může mít každá stránka jeden řídicí prvek root. Tím je obvykle Rozložení, například StackLayout, ScrollView nebo Mřížka, jako máme zde. Mřížka je úžasný ovládací prvek, který má řádky a sloupce. Nebudeme se zabývat podrobnostmi rozvržení, ale tento zobrazuje obrázek, nějaký text a tlačítko, na které lze kliknout a otevřít tak webový prohlížeč.

<Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />

Všimněte si {StaticResource Primary}, což je odkaz na prostředek, který jsme definovali Accent dříve, ale Primary se nachází v našem souboru App.xaml, což jsou prostředky dostupné v celé aplikaci.

Chcete-li najít další rozvržení a ovládací prvky, můžete otevřít panel nástrojů a podívat se, co je k dispozici:

Nakonec, pokud vyberete ovládací prvek nebo rozvržení, zobrazí se v panelu vlastností všechny různé vlastnosti, které jsou u daného ovládacího prvku k dispozici.

Jednou z velmi důležitých věcí je, že každá z těchto stránek XAML má za sebou kód, který je důležitý pro zobrazení XAML a má specifické metody pro konstruktor a události, například když se stránky zobrazí nebo zmizí. Můžete použít malou rozbalovací šipku, abyste viděli kód za souborem .xaml.cs.

Pokud jej otevřete, uvidíte, že je velmi jednoduchý, protože pro tento pohled nejsou nyní potřeba žádné zvláštní události.

public partial class AboutPage : ContentPage{ public AboutPage() { InitializeComponent(); }}

Interakce s uživatelem a ViewModely

Nyní si promluvme o ViewModelu pro tuto stránku, který byl vytvořen v XAML. Otevřete soubor ViewModels -> AboutViewModel.cs dvojitým kliknutím na něj.

public class AboutViewModel : BaseViewModel{ public AboutViewModel() { Title = "About"; OpenWebCommand = new Command(async () => await Browser.OpenAsync("https://aka.ms/xamarin-quickstart")); } public ICommand OpenWebCommand { get; }}

Jedná se o úžasně jednoduchý ViewModel, který je však pozoruhodnou ukázkou toho, jak funguje datová vazba. Zde ViewModel nastaví Title na About a pak vytvoří nový Command, který volá Browser.OpenAsync, aby se na stránce otevřel webový prohlížeč.

Ten Command je něco zvláštního. Na rozdíl od Title, což je prostý string, který se zobrazí, je Command speciální třída, kterou můžeme použít k tomu, abychom našemu uživatelskému rozhraní řekli, že má něco udělat, když s ním uživatel interaguje. Například na našem Button jsme viděli následující kód:

Command="{Binding OpenWebCommand}"

Tento kód říká Xamarin.Forms, že v našem ViewModelu je příkaz public, který obsahuje kód, který se má provést, když uživatel klikne na tlačítko. V tomto případě chceme otevřít prohlížeč, což je jedna z mnoha nativních funkcí dostupných v Xamarin.Essentials. Volání Browser.OpenAsync spustí prohlížeč specifický pro iOS a Android pomocí jediného řádku kódu.

Rychlé změny pomocí XAML Hot Reload

Nyní je čas spustit naši aplikaci. Rád začínám na systému Android, protože emulátory jsou k dispozici lokálně v systémech Windows i MacOS. V nabídce aplikace Visual Studio uvidíte, že Android je výchozí projekt a bude k dispozici tlačítko ladění a zobrazí se vaše dostupné emulátory Androidu. Po kliknutí na tlačítko ladění, pokud nemáte žádné emulátory, budete vyzváni k jejich vytvoření.

Po spuštění aplikace přejde do režimu ladění, který nám umožňuje nastavit body přerušení na našem kódu, abychom viděli hodnoty, ale také umožňuje XAML Hot Reload, kde můžeme provádět změny v uživatelském rozhraní, aniž bychom museli zastavit ladění.

Otevřeme soubor AboutPage.xaml a změníme barvu Accent na jinou barvu. Zde ji aktualizuji na oranžovou a stisknu tlačítko uložit, aby se změny zobrazily.

V tuto chvíli můžeme přidat nové ovládací prvky, aktualizovat uživatelské rozhraní a pokračovat v práci na naší aplikaci na Androidu.

Deploy na iOS pomocí horkého restartu

Přejděme k nasazení na iOS! Klikněte pravým tlačítkem myši na projekt iOS a vyberte možnost Nastavit jako spouštěcí projekt:

V systému iOS je situace pro vývojáře trochu jiná. Pokud jste v systému macOS a nainstalujete si Xcode, budete mít k dispozici simulátory iOS. Pokud je to váš případ, můžete si vybrat simulátor a pak ladit aplikaci. Ve Windows žádné simulátory iOS nejsou 🙁 takže existují dva způsoby, jak získat svůj

• Simulátor vzdáleného iOS: Pokud máte počítač se systémem MacOS, můžete si nainstalovat Visual Studio 2019 pro Mac a Xcode a připojit se k němu ze svého počítače se systémem Windows a používat ho jako vzdálený sestavovací stroj. Simulátor iOS pak můžete spustit ze zobrazeného počítače se systémem Windows, což je velmi skvělé!
• iOS Hot Restart: Jedná se o novou technologii náhledu, která umožňuje nasadit odladěné sestavení aplikace přímo do zařízení iOS, které je připojeno k počítači se systémem Windows. To je skvělé, pokud nemáte počítač Mac a chcete ladit svou aplikaci a používat úžasné funkce, jako je XAML Hot Reload.

V závislosti na vašem nastavení a dostupném vybavení existuje skvělá možnost, jak začít ladit svou aplikaci iOS ze systému Windows. Přečtěte si dokumentaci, na kterou jsem odkázal, kde najdete úplného průvodce nastavením.

Poznání aplikace a shellu

Poslední věc, o které bych chtěl mluvit, je to, co je v naší *Aplikaci a co v našem shellu:

Vnitřek naší aplikace.xaml najdete globální prostředky, jako je Primary, který jsme dříve použili na tlačítko, ale také styly, jako je globální styl Button, který používáme u stavů při zapnutí a vypnutí. Pokud otevřete kód App.xaml.cs za sebou, uvidíte vytvořeníg App, který nastavuje MainPage na náš AppShell a má také další události podobné naší stránce, ale pro aplikaci, například když se spustila, přešla do režimu spánku (neboli na pozadí) a obnovila se.

V AppShell.xaml se nachází Shell struktury naší aplikace. Obsahuje styly a barvy pro shell naší aplikace a pak má další položky pro karty, výsuvné okénka a zobrazené stránky. Najdeme zde dva prvky FlyoutItem, které představují AboutPage a BrowsePage. Kromě toho má prvek MenuItem pro zobrazení tlačítka pro přihlášení/odhlášení. Element ShellContent má vazbu na naši stránku, kterou jsme vytvořili, a automaticky se zobrazí stránky a po jejich výběru se přejde na každou z nich.

Ve frameworku Xamarin.Forms Shell a vytváření aplikací pomocí Xamarinu je toho mnohem více, ale doufejme, že vás to přivede na startovní cestu k tomu, abyste mohli začít pracovat na své aplikaci. Nezapomeňte sledovat účet .NET dev.to, kde najdete další příspěvky z této série.

Další informace

.