Xamarin – Customers Manager – #2 – Pierwsze kroki

Dzisiaj pierwsza praktyczna część serii. Jeżeli nie czytałeś części pierwszej, zachęcam do nadrobienia zaległości. Wyjaśniam tam, co dokładnie będziemy robić. W tej serii zakładam, że masz podstawowe pojęcie na temat platformy Android oraz iOS. Będę starał się wyjaśniać większość rzeczy technicznych, ale nie w każdą będę się zagłębiać.  Okej, dzisiaj dodamy solucję, a wewnątrz niej trzy magiczne projekty. Już za chwilę dowiesz się jakie!

Środowisko

Masz w zasadzie dwie możliwości jeżeli chodzi o IDE, w którym będziesz tworzyć projekt. Mianowicie Rider od JetBrains oraz poczciwy Visual Studio. Ja pracuję w Visualu, choć zdarza mi się od czasu do czasu popracować w Riderze. Swoją drogą, jeżeli jesteś studentem, możesz skorzystać z okazji, jaką daje JetBrains i dostać roczną licencję na ich produkty zupełnie za darmo.

Edytory widoków dla iOS oraz Android w Visual Studio, pozostawiają wiele do życzenia. Dlatego też koniecznie doinstaluj Android Studio oraz Xcode dla iOS (o ile posiadasz dostęp do MacBooka). Należy pamiętać, że do zbudowania wersji iOS koniecznie potrzebujesz komputera od Apple, a na nim zainstalowanego środowiska Xcode, który posiada już zainstalowane wszelkie SDK.

Niezależnie od tego co wybrałeś potrzebujesz odpowiednio skonfigurowanego środowiska. Na Windowsie wystarczy, że doinstalujesz pakiet mobilny przy wyborze modułów dodatkowych przy instalacji Visual Studio, na Macu wystarczy sama instalacja Visual Studio for Mac, podobnie jest z Riderem. Jeżeli korzystasz z produktu JetBrains, koniecznie sprawdź ścieżkę do Android SDK w ustawieniach.

screen_11_sdk_rider

Zakładam, że Twoje środowisko jest poprawnie skonfigurowane i masz możliwość tworzenia mobilnych projektów międzyplatformowych.

Do dzieła

Tak jak pisałem wcześniej będę korzystać z Visual Studio. Gotowy? Zaczynamy!

Najpierw stworzymy sobie pustą solucję, a następnie dodamy sami do niej odpowiednie projekty. Pozwoli Ci to lepiej poznać proces tworzenia solucji Xamarin. Na wstępie jeszcze Ci powiem, że na GitHub dodałem solucję aplikacji. Link znajdziesz na końcu artykułu.

Dodaj nową pustą solucję. Ja nazwałem swoją CustomerManager.

Teraz możemy dodać projekt, który posłuży nam jako core aplikacji. Wykorzystamy  .NET Standard. 

screen_4

.NET Standard jest usystematyzowanym API .NET, który ma gwarantować jednolity dostęp do niego na wielu platformach. Wiele popularnych bibliotek wymaga już projektu .NET Standard.

Projekt nazwij CustomerManager.Core. Warto trzymać się spójnego nazewnictwa w projektach.

[nazwa projektu].[nazwa modułu]

Dodajmy kolejne dwa bardzo ważne projekty. A mowa tu oczywiście o projektach Android oraz iOS. Zaczniemy od Androida. Wybierając rodzaj projekty, wybierz Blank Android App. Dzięki temu dostaniemy prawie czysty projekt bez dodatkowych klas itd. W następnym oknie zmień App Name oraz Organization Identifier. Pierwszy odpowiada za nazwę aplikacji, natomiast drugi za Id aplikacji. Target Platform nie ma teraz większego znaczenia, ponieważ i tak poźniej to zmienimy.

W kolejnym oknie. Zmień nazwę projektu na CustomerManager.Droid i stwórz projekt. Teraz czas na iOS. Jeżeli nie posiadasz komputera Apple, nie przejmuj się. Skup się na wersji Android.

Kroki podobne do poprzednich. Dodaj projekt Single View App, zmień AppName oraz zmień Organization Identifier na dowolny ciąg. W następnym kroku zmień nazwę projektu na CustomerManager.iOS. I stwórz projekt.

Wynikowa solucja powinna wyglądać następująco:

o informacje odnośnie koncepcji wzorca MVVM odsyłam Cię do mojego artykułu, który jakiś czas temu stworzyłem. Sprawdźmy czy wszystko działa jak należy. W tym celu przywitamy się ze światem. Dodajmy Hello World! 

 

Przywitaj się z Androidem

Nie będziemy jeszcze wykorzystywać żadnej z dodatkowych bibliotek. Chcemy tylko sprawdzić czy nasza aplikacja się uruchamia.

Zaczniemy od Androida. Przejdź do projektu CustomerManager.Droid, a następnie do gałęzi Resources-layout-Main.axml. Nie wyobrażam sobie edycji widoku bezpośrednio w Visual Studio, dlatego też kopiuję zawartość xml do testowego projektu stworzonego w Android Studio i edycji tego pliku właśnie tam. Android Studio zadba o poprawne formatowanie i zdecydowanie trafniejsze zgłaszanie błędów. Samo kopiowanie jest procesem żmudnym, ale cóż.

Zachęcam Cię do tego, aby podczas tworzenia widoków Android, pisać kod ręcznie – bez użycia designera. Zapamiętasz znacznie większą ilość informacji, a co więcej będziesz miał pełną kontrolę nad tym co się znajdzie w docelowym widoku. Designer ma to do siebie, że często doda Ci sporo nadmiarowych atrybutów. Wbrew pozorom ręczna edycja nie jest wcale trudna – jak wcześniej wspomniałem Android Studio posiada sprawy system podpowiadania składni.

Do obecnego kodu, dodaj kontrolkę TextView. Po ustawieniu jej wysokości oraz szerokości na wielkość jej rodzica, a następnie ustawieniu właściwości gravity na center, zostanie ona wyśrodkowana. Parametr ten możesz traktować jak ustalenie pozycji tekstu wewnątrz całej kontrolki. Jako, że nasza etykieta ma rozmiar swojego rodzica czyli de facto całego okna, to ustawienie gravity na center daje taki efekt. Na koniec wystarczy wpisać tekst i voila mamy Hello World!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Hello world!"/>
</LinearLayout>
 

Teraz przekopiuj całość layoutu do Visual Studio i zapisz plik. Daj chwilę środowisku na przeładowanie zasobów. Podłącz urządzenie z systemem Android lub skorzystaj z gotowych emulatorów. Wybierz urządzenie i zbuduj projekt. Jeżeli proces się powiedzie, zobaczysz wynik na ekranie urządzenia.

Przywitaj się z iOS

Pora na druga platformę. Będziesz potrzebował komputera od Apple – to nieuniknione. Tutaj nie będziemy edytować ręcznie plików widoków. Jesteśmy skazani na designer, a dokładnie Interface Buildera programu Xcode. Xcode jest podstawowym środowiskiem do tworzenia aplikacji na platformie iOS. Skorzystamy właśnie z tego designera ze względu na wygodniejszy proces tworzenia widoków. W zasadzie Visual Studio posiada własny edytor, ale są z nim problemy. Jeżeli korzystasz z Ridera na MacOS, polecam Ci przejść teraz do Visual Studio. Rider (przynajmniej w wersji na MacOS) nie posiada edytora widoków. Nie udało mi się znaleźć rozwiązania dla tego problemu. Dlatego jeżeli chcesz stworzyć widok uruchom projekt w Visual Studio. 

Samo tworzenie widoków na iOS opiera się na zasadzie drag&drop. Przez co w mojej opinii trwa to znacznie dłużej, aniżeli na Androidzie. Sprawdźmy jak to wygląda w praktyce.

Znajdź w projekcie iOS plik o nazwie Main.storyboard, kliknij prawym i otwórz go za pomocą Interface Buildera.

Xcode Interface Builder

W jednej z najnowszej wersji Xcode zmienione miejsce gdzie możemy znaleźć widgety i przycisk do pokazania okna z nimi znajduje się w prawym górnym rogu. Na screenie poniżej jest to pierwszy przycisk.

W starszych wersjach listę tę znajdziesz w panelu po prawej stronie. Dodamy teraz naszą pierwszą etykietę. W tym celu przeciągnij kontrolkę Label na obszar roboczy. Samo przeciągnięcie jej na obszar roboczy, nie wystarczy, aby na każdym rodzaju urządzenia etykieta ta znajdowała się dokładnie w tym samym miejscu. W tym celu musimy użyć constraint-ów , mechanizmu do pozycjonowania wszelkiego rodzaju widoków na platformie iOS. By poprawnie umiejscowić kontrolkę musisz dostarczyć przynajmniej 3 z nich.

Co to właściwie jest? Są to pewnego rodzaju połączenia pomiędzy dwoma widokami, opisują sposób zależności między nimi. Na przykład:

  • lewa krawędź etykiety ma być przyczepiona do lewej krawędzi rodzica, ale z marginesem równym 25 punktów,
  • prawa krawędź etykiety ma być przyczepiona do prawej krawędzi z marginesem równym 50 punktów.

Słowa ‘przyczepiony’ używam celowo do zobrazowania tego, że mamy tu do czynienia z zależnością. Musimy dodać co najmniej trzy constraint-y, aby iOS był w stanie poprawnie wyliczyć wysokość, szerokość oraz pozycję widoku względem reszty struktury.

Podążaj za mną

No dobrze, spróbujmy wypozycjonować naszą etykietę. Podążaj za mną:

  1. Zaznacz etykietę, w drzewie widoku.
  2. Zwróć uwagę na strukturę (rysunek 2 poniżej). Label jest umieszczone w Parent View. Będziemy właśnie wobec Parent View pozycjonować naszą etykietę. Ustalimy constraint-y.
  3. Trzymając Ctrl pojawi się strzałka, jej grot umieść na Parent View.
  4. Pojawi się submenu(rysunek 3 poniżej, w którym wybierz Leading Space to Container. Co oznacza, że będziemy pozycjonować naszą etykietę w stosunku do lewej krawędzi Parent View.
  5. Wykonaj to samo co w punkcie 4, ale tym razem wybierz Trailing Space to Container, co tym razem da nam pozycjonowanie do prawej strony.
  6. Mając te dwa constraint-y, wycentrujemy kontrolkę. Upewnij się, że label jest zaznaczony i w prawym panelu, przejdź do zakładki Size Inspector i w jej dolnej części znajdziesz listę dodanych przed chwilą constraint-ów (rysunek 6a poniżej). Kliknij dwukrotnie w pierwszy z nich i ustaw jego atrybut Constant na 20 punktów (rysunek 6b poniżej). Jest to standardowy margines używany na iOS. Z drugim zrób to samo. Nasza etykieta będzie wycentrowana horyzontalnie względem Parent View
  7. Jedyne co nam zostało do zrobienia, to ustawienie atrybutu Alignment etykiety na center, co zgodnie z oczekiwaniami pozwoli na wycentrowanie tekstu w ramach wielkości etykiety. Znajdziesz go w zakładce Attributes Inspector w prawym panelu (jeden wcześniej niż Size Inspector).
  8. Pozostało nam dodać kolejny constraint. Jeżeli spojrzysz na górę drzewa widoku, znajdziesz tam czerwoną strzałkę na czerwonym tle. Oznacza ona błędnie określone constraint-y (lub ich brak). Kiedy w nią klikniesz znajdziesz informacje o brakach i błędach. Xcode proponuje tam automatyczne rozwiązanie problemów, ale nie zawsze efekt jest taki jakiego byś oczekiwał. Potrzebujemy pozycjonowania pionowego. 
  9. Powtórz krok 3, ale wybierz tym razem Center Vertically in Container. Teraz nasza etykieta jest wycentrowana. Zmień jej nazwę na Hello world!
rysunek Ad. 2
rysunek Ad. 3
rysunek Ad. 6a
rysunek Ad. 6b

Mamy to co chcieliśmy osiągnąć. Teraz możemy sprawdzić jak to wygląda po uruchomieniu aplikacji. Wróć do edytora. Visual Studio w szybkim czasie przeładuje zasoby.

Spróbujmy uruchomić aplikację. Wybierz projekt CustomersManager.iOS, wybierz urządzenie lub symulator. W przypadku urządzenia będziesz potrzebował wygenerowanego tzw. provisioning profile. W najbliższym czasie dodam wpis, opisujący czy jest provisioning profile i jak go wygenerować do testów, nie posiadając opłaconego konta developerskiego Apple. 

Powinieneś uzyskać efekt jak poniżej.

Mamy strukturę

Dzisiaj to na tyle. Stworzyliśmy solucję dla naszego projektu, dodaliśmy projekty platformowe i uruchomiliśmy je. Stworzyliśmy proste widoki. W następnej części dodamy biblioteki oraz zaczniemy rozwijać architekturę aplikacji. Poniżej oczekiwany wynik, naszej pracy. Być może jeszcze się to zmieni, ale chcemy osiągnąć poniższy efekt.

Lista klientów
Podgląd klienta

Nie jest to szczyt designerskich marzeń i nie mam na celu stworzyć takiej aplikacji w ramach tej serii. Mam nadzieję, że zaciekawiłem Cię i będziemy wspólnie realizować projekt. Jeżeli masz pytania lub pomysły na dodatkowe , skontaktuj się ze mną 🙂

Do następnego,

Cześć!



Github:
 https://github.com/krzbbaranowski/customer_manager_pb

Mam coś dla Ciebie

Zapisz się do mojego newslettera, a ja prześlę Ci zbiór kilkunastu praktycznych wskazówek dla programisty aplikacji mobilnych.

Menu