Archiwa tagu: Xamarin.Forms

ShopHelper – Unit testy

Poprzedni wpis na temat projektu ShopHelper: lokalna lista zakupów

No i przyszedł czas na testy jednostkowe. Być może trochę późno powiedzą fani TDD 🙂 Ogólnie dodając pierwsze komponenty starałem się mieć gdzieś z tyłu głowy, że będę testy pisał ale jak to bywa nie wszystko się odrazu wie… Ten wpis będzie tak naprawdę o dostosowaniu projektu do testów jednostowych i małym refactorze, który musiałem zrobić aby móc testować 🙂

Pierwszy być może mały błąd popełniłem decydując się na SharedProject zamiast Portable class library. Dlaczego?

Rozwiązaniu typu SharedProject kompiluje się razem z binarką, do której został dołączony, oznacza to, że tak naprawdę nasz kod nie kompiluje się do samodzielnej biblioteki. Wyjścia są dwa, a może i nawet trzy. Pierwsze dodać po projekcie do każdej platformy czyli Android.Tests, UWP.Tests, iOS .Tests – masakra. Drugie dodać sztuczną bibliotekę typu portable, do której dołączymy nasz SharedProject, następnie tą bibliotekę podłączymy do naszego projektu z testami. Trochę sztuka dla sztuki ale powinno się udać. Zdecydowałem się na trzecie rozwiązanie – zwykłe klasyczne windowsowe class library (oczywiście jeśli ktoś programuje na Mac-u to rozwiązanie odpada). Problem jaki wynika z tego rozwiązanio to tak naprawdę to, że nasz kod musi obsługiwać tak naprawdę platformę Windows Desktop…  Spowodowało to konieczność wydzielenia poszczególnych implementacji komponentów specyficznych dla danej platformy, jak np. ścieżki do plików. Zaimplementowałem to tak, że we wspólnym kodzie dodałem interfejs IFileService (wcześniej korzystałem ze statycznego Utils-a). W natywnych projektach dla każdej z platform dodałem po klasie implementującej ten interfejs (również do projektu z testami).

Przykład dla Androida:

Kolejny typowy problem, który się pojawił to, że nie wstrzykiwałem zależności do komponentów oraz nie korzystałem z interfejsów co utrudnia Mockowie. Jak napisać test sprawdzający czy wywołano metodę Show, która ma pokazać komponent listy?

Raczej się nie da, pomijając już, że metoda jest prywatna ale taka miała być ponieważ jest podpięta to Command, więc test planowałem wykonać porzez Command.Execute(null). Jednak to się też nie uda ponieważ nie wstrzykuję ani Command ani ViewModel-u, który trzyma Command… Zrobiłem refactor tego komponentu no i udało się osiągnąć zamierzony efekt 🙂

Kod jest prosty, a zarazem napisanie testu sprawdzającego czy komenda ShowShoppingListCommand otwiera komponent ShoppingList to formalność.

Do obsługi testów skorzystałem z Framework-a NUnit oraz Moq. Natomiast sam test jest napisany zgodnie ze wzorcem Arrange-Act-Assert co pozwola na czytelne formatowanie kodu testów. W sekcji arrange umieściłem kod odpowiedzialny za stworzenie obiektów potrzebnych do przeprowadzenia testu. Sekcja Act to tylko wywołanie testowanego polecenia. Assert sprawdza czy na Mock-u wykonano dokładnie raz metodę Show. Jak pewnie zauważyłeś testy wymusiły na mnie dodanie interfejsów również dla widoków, dzięki czemu w testach nie korzystam z prawdziwych widoków tylko mockuje interfejs, dzięki czemu testy są zupełnie odseparowane od warstwy prezentacji.

Na koniec tego wpisu jeszcze inny przykład testu:

Test ma za zadanie sprawdzić czy polecenie AddShoppingListItem wykonuje dodanie elementu do usługi przechowującej dane oraz czy element jest dodawany do listy bindowanej do widoku. Na koniec czy wartość NewShoppingListItemValue jest czyszczona. Przy okazji zacząłem się zastanawiać czy nie zacząć utrzymywać kolekcji ObservableCollection, która jest bindowana do widoku tylko w serwisie.

Właśnie na tym polega magia testów jednostkowych, testy nie tylko pomagają znaleźć błędy ale jeśli zastosujemy technikę TDD to pomagają pisać lepszy kod! Warto już na początku projektu zacząć pisać testy, dzięki temu unikniemy późniejszych bolesnych zmian. Oczywiście refator to powinna być nieodłączna czynność w TDD ale warto już na starcie przygotować nasz projekt tak aby był łatwo testowalny:

  • zapewnić odpowiednią abstrakcję poprzez interfejsy tam gdzie będziemy chcieli skorzystać z Mocków
  • generalnie nie twórzmy samodzielnie zależności tylko wstrzykujmy je z zewnątrz, np. poprzez konstruktor jako abstrakcję
  • jak najmniej starajmy się korzystać ze statycznych Utilsów, Helpersów itp. ponieważ zmockowanie takiej metody jest bardzo trudne, nawet zamiast DateTime.Now zalecałbym jakiś interfejs albo własny obiekt, który na potrzeby testu można podmienić

To chyba na dziś wszystko, zapraszam do komentowania 🙂 Pełny kod znajdziesz na GitHubie.

ShopHelper – lokalna lista zakupów

Poprzedni wpis na temat projektu ShopHelper: Pierwsze kroki i trochę o MVVM

W tym wpisie chciałbym napisać trochę o przechowywaniu danych listy zakupów. Na tą chwilę zdecydowałem się zrobić to jak najprościej, tj. dane będę zapisywał do lokalnego json-a. Na razie nie potrzebuję zarówno serwera jak i nawet lokalnej bazy danych, być może w przyszłości tak ale teraz chcę uruchomić jak najprostrzą funkcjonalność.

Przejdźmy teraz do implementacji, dodałem klasę ShoppingListService, która będzie odpowiedzialna za zapis nowych elementów listy zakupów oraz odczyt listy – czyli poprostu CRUD.

Generalnie chodzi o to aby na urządzeniu mobilnym trzymać gdzieś nasze dane w pliku, myślę, że na tą chwilę wykorzystanie np. SqlLite byłoby nadmiarowe. Do przechowywanie i późniejszej serializacji / deserializacji wykorzystałem prostą klasę ShoppingListData:

Aby zapewnić prostą i szybką serializację / deserializację obiektów dodałem do projektu chyba najpopularniejszą bibliotekę w świecie .NET czyli Newtosoft.Json. Poniżej obsługa ładowania i zapisywania danych z pliku json:

Jak pewnie już zauważyłeś nasz serwis nie zapewnia jeszcze żadnego publicznego API do pobierania listy i dodawania nowych elementów. Jednak dzięki poprzedniej wewnętrznej implementacji API to już formalność 🙂

Pozostało mi już tylko zaprezentować jak komponent listy korzysta z nowo dodanego serwisu. Z pobierania danych korzysta metoda odpowiedzialna za odświeżanie listy.

Efekt jest taki jaki chciałem osiągnąć cała lista jest przechowywana lokalnie na urządzeniu mobilnym. Czyli pomału można zacząć korzystać z aplikacji… No dobra może jeszcze trochę brakuje 🙂

Myślę, że przedstawione rozwiązanie może się przydać wszystkim osobom, które nie potrzebują relacyjnej bazy danych ponieważ chcą zapisywać proste dane albo całe grafy obiektów. Bardziej  spostrzegawczy pewnie już zauważyli, że można łatwo przerobić ten serwisik do wersji generycznej. Kod źródłowy oczywiście znajdziecie na GitHubie.

 

CrossPlatform Logger

Dziś chciałbym pokazać jak zaimplementować prostego loggera na platformie Xamarin.Forms. Nie znalazłem żadnego dedykowanego rozwiązania oferowanego przez twórców tego Frameworka więc stworzymy dziś bardzo prosty logger,  który pozwoli na logowanie do pliku.

Zaczynamy od utworzenia prostego interfejsu ILogger oraz jego generycznej wersji, która będzie służyć do definiowania kategorii na podstawie typu.

Do zdefiniowania poziomów logowania wykorzystam prostego enuma.

Stworzę teraz klasę FileLogger,  aby umożliwić logowanie na każdej z platform użyje najprostszego mechanizmu, statycznej metody File. AppendAllText. Natomiast odpowiedzialność za tworzenie ścieżki do pliku oraz samej wiadomości przenoszę w inne miejsce za pomocą delegatów. W ten sposób mamy uniwersalny mechanizm,  który możemy wykorzystać na wielu platformach.

Jak widać powyżej pojawił się jeszcze jeden typ LogItem, jest to prosta struktura, która zastąpi przekazanie wielu parametrów do delegatów zgodnie z zasadą, że im mniej parametrów tym lepiej.

Odpowiedzialność za tworzenie ścieżki do pliku oraz samej wiadomości umieściłem w FileLoggerFactory. Klasa ta ma za zadanie stworzyć katalog gdzie zapisywane będą logi oraz zdefiniować delegaty. Oczywiście samo generowanie ścieżki oraz wiadomości jest bardzo proste i niekonfigurowalne, pozostawiam decyzję Tobie czy chcesz użyć jakiejś innej własnej implementacji.

Tak zbudowane rozwiązanie możemy zarejestrować w dowolnym kontenerze Dependency Injection. Jedyne o czym należy pamiętać to, że definicja katalogu gdzie przechowywane będą logi będzie różna dla każdej z platform, poniżej mały przykład z użyciem symboli kompilacji dla różnych platform.

To chyba właściwie wszystko jeśli chodzi o uniwersalne logowanie do pliku dla Androida, iOS-a i UWP przy użyciu framework-a Xamarin.Forms. Każda z platform dostarcza również natywne sposoby logowani ale to nie było celem tego wpisu. Jeśli chcesz dodaj kolejną implementację ILogger, np. AndroidUtilLogger i wykorzystaj Android.Util.Log.Info(„MyApp”, „Hello”).

Cały kod z przykładów znajdziesz na GitHubie.

ShopHelper – Pierwsze kroki i trochę o MVVM

Poprzedni wpis na temat projektu ShopHelper: Start

W tym artykule chciałbym zaprezentować pierwszą implementację komponentów UI. W poprzednim poście zakończyliśmy na założeniu solucji i dodaniu domyślnych komponentów z użyciem frameworka Xamarin.Forms. Naszym celem na tym etapie jest:

  • stworzenie podstawowych wspólnych komponentów z użyciem wzorca MVVM (Model-View-ViewModel)
  • zapewnienie podstawowej nawigacji
  • wyświetlenie prostej listy zakupów z możliwością dodawania nowych elementów.

Zaczynamy od stworzenia dwóch klas i jednego interfejsu, które pomogą nam modelować komponenty według wzorca MVVM, oczywiście nie jest to wymagane ale bardzo uspójni architekturę i implementację przyszłych komponentów aplikacji. Tak więc tworzymy interfejs IView:

Interfejs ten jak widać powyżej zawiera tylko jedną właściwość BindingContext, która zapewni  „połączenie” pomiędzy widokiem, a ViewModel. Generalnie interfejs ten powinny implementować wszystkie widoki naszej aplikacji. Czym są widoki? To nic innego jak graficzne komponenty, które udostępnia nam framework Xamarin.Forms, może to być m.in. ContentPage, ContentView lub inne kontrolki… Następnie dodajmy klasę abstrakcyjną ViewModel oraz generyczny ViewModel:

Przedstawiony ViewModel posłuży nam do implementacji bazowego mechanizmu eksponującego model dla widoków. Mówiąc inaczej to w tym miejscu (w klasach pochodnych) znajdą się właściwości, które chcemy udostępnić do warstwy prezentacji. ViewModel implementuje interfejs INotifyPropertyChanged, za pomocą tego interfejsu możemy powiadomić widok, że jakaś wartość jednej z naszych właściwości uległa zmianie. Dzięki takiemu rozwiązaniu otrzymujemy rozdzielenie warstwy prezentacji (widoków) od modelu / logiki. I tak zadaniem widoku jest wyłącznie prezentować dane, nie wykonuje on żadnej logiki.

Przejdźmy teraz do stworzenia podstawowych elementów naszej aplikacji. Każda aplikacji musi mieć jakiś główny komponent, nazwę go po prostu Main. Tworzę więc katalog Main i umieszczam w nim klasę MainComponent, to tu umieszczę logikę związaną z tym komponentem, myślę tu głownie o nawigacji do innych komponentów aplikacji. W tym samym katalogu tworzę MainView.xaml używając szablonu oferowanego przez Visual Studio.

Tak jak wspomniałem wcześniej każdy widok powinien implementować interfejs IView:

Dzięki temu, że ContentPage dziedziczy po BindableObject, w którym już znajduje się właściwość o tej samej nazwie nic więcej nie musimy implementować. W konstruktorze naszego bazowego ViewModel wykona się cała „magia” MVVM – ViewModel zostanie powiązany z widokiem. Następnie utworzyłem klasę MainViewModel, która dziedziczy po generycznym ViewModel. Zwróćmy uwagę jak ViewModel udostępnia informacje do widoku, zobaczmy na właściwości Title oraz ShowShoppingListCommand udostępniane przez nasz MainViewModel:

Jak widać powyżej w widoku mamy odwołanie do tych właściwości poprzez wykorzystanie mechanizmu Binding (wiązania). Dodałem w MainView również jakąś prostą nawigację, wykorzystałem do tego kontrolkę StackLayout i trzy przykładowe przyciski, pod jeden z nich podpinam właśnie wspomniany wcześniej ShowShoppingListCommand, to nic innego jak implementacja System.Windows.Input.ICommand – komendy, która zapewnia przekazanie wykonania do wskazanej metody. Właściwość ShowShoppingListCommand korzysta z metody udostępnianej przez bazowy ViewModel SetProperty. Zadaniem tej metody jest ułatwić wykorzystanie notyfikacji INotifyPropertyChanged i skrócić kod przypisania nowej wartości do jednej linii. Dzięki takiemu mechanizmowi przypisując wartość naszej właściwości powiadamiamy widok o zmianie.

Nową instancję komponentu Main tworzymy w klasie App zaraz po uruchomieniu aplikacji, do metody Run przekazujemy obiekt Application. W metodzie Run uruchomimy nawigację oferowaną przez Xamarin.Forms dodając nasz widok do globalnej nawigacji. W skrócie MainComponent rozpoczyna nawigację globalną dla całej aplikacji oraz tworzy polecenia definiując metody do nawigowania do innych komponentów.

Teraz czas na komponent ShoppingList czyli naszą na razie prostą listę zakupów. Tworzę katalog ShoppingList, a w nim umieszczam kolejno ShoppingListView, ShoppingListViewModel oraz ShoppingListComponent. Widok listy zakupów przedstawia się następująco:

Dzięki prostemu zastosowaniu kontrolek oferowanych przez Xamarin.Forms umieściłem wszystkie komponenty w StackLayout co pozwoli na rozmieszczenie elementów pod sobą na całym ekranie. Dodałem listę, a pod nią kontrolkę Entry, w której możliwe będzie wprowadzanie nowych pozycji. Obok umieściłem przycisk, którym użytkownik będzie mógł dodawać pozycje do listy. Na razie jest bardzo prosto ale tak miało być :). ShoppingViewModel ma za zadanie eksponować właściwości dla widoku i tak też robi, nic innego się tam nie dzieje:

Tu można zauważyć, że pojawiła się jeszcze jedna klasa, jest to ShoppingListItem, na razie bardzo prosty model. ViewModel udostępnia kolekcję ObservableCollection<ShoppingListItem>, dzięki czemu po każdym dodaniu, usunięciu elementów z kolekcji widok zostanie automatycznie powiadomiony o zmianach.

Zadaniem komponentu ShoppingList jak na razie jest stworzyć wszelkie potrzebne dla widoku powiązania i zapewnić obsługę listy zakupów. Jak na razie obsługujemy tylko dodawanie nowych elementów do listy, dzieje się to w metodzie AddShoppingListItem, która została podpięta do AddShoppingListItemCommand. Tak więc zbieramy wprowadzoną przez użytkownika wartość pola NewShoppingListItemValue, jeśli nie jest pusta to dodajemy nowy element do kolekcji i czyścimy właściwość, czyszcząc w ten sposób kontrolkę Entry.

Na początek to chyba tyle 🙂 wychodzę z założenia, aby iść małymi krokami. Dziś chciałem też napisać trochę o MVVM ponieważ korzystając z Xamarin.Forms po prostu nie wypada inaczej, a dzięki zachowaniu prostych zasad tego wzorca nasza aplikacja będzie dobrze napisana. Cały kod znajdziecie oczywiście na GitHubie.

 

ShopHelper – Start :)

1,2,3 Start… Rozpoczynam udział w konkursie Daj Się Poznać 2017 🙂

Na początek nie mogło zabraknąć oczywiście wpisu na temat założenia projektu oraz tego co w ogóle będzie robił ShopHelper!

ShopHelper będzie aplikacją mobilną, której główną funkcjonalnością będzie lista zakupów. Lista zakupów powinna być łatwo edytowalna tak aby z ekranu głównego można było dodać nowe pozycje i odhaczyć już zakupione. Dodatkową opcją będzie udostępnianie listy pomiędzy różnych użytkowników, tak aby każdy mógł edytować listę. Kolejna opcja to historia zakupów. W maksymalnym streszczeniu narazie chyba tyle, choć jeśli starczy czasu i inwencji może coś się jeszcze fajnego pojawi 🙂

Jako technologię wybrałem .NET i Xamarin. Planuję aby aplikacja była uruchamia na wielu platformach więc zdecydowałem się użyć framework-a Xamarin.Forms, który pozwoli na równoczesne pisanie kodu pod Androida, iOS-a oraz UWP z użyciem xaml-a. Do pracy z kodem wykorzystam Visual Studio 2015 Update 3 w wersji Community. Zaczynamy!

 

Utworzyłem solucję w VS, nazwałem ją ShopHelper, natomiast sam projekt ShopHelper.Client. Na tą chwilę nie planuję innych komponentów niż aplikacja kliencka ale nigdy nic nie wiadomo, więc w przyszłości nie będę musiał robić refactoringu w nazwach projektów.

Do udostępniania kodu pomiędzy platformy użyję SharedProject, jest to o tyle fajne rozwiązanie, że kod źródłowy jest automatycznie kompilowany razem z każdym osobnym projektem każdej z platform.

Oznacza to tyle, że o tym jak ma zostać skompilowany decyduje projekt, do którego dodana została referencja do SharedProject. Jak widać poniżej po utworzeniu solucji mamy jeden projekt typu SharedProject oraz 3 natywne odpowiadające konkretnym platformą. W skrócie kod „wspólny” umieszczony w ShopHelper.Client korzysta z framework-a Xamarin.Forms, następnie każdy z projektów z aplikacją natywną pod każdą z platform  posiada referencję do SharedProject oraz wszystkich potrzebnych bibliotek.

Tak wygląda solucja zaraz po utworzeniu:

Cała „filozofia” współdzielenia kodu pomiędzy różne platformy polega na tym, że każda z platform wykorzystuje wspólny komponent App, ładując go w odpowiedni dla konkretnej platformy sposób. Poniżaj klasa App oraz załadowanie jej przez natywną aplikację Android.

Po skompilowaniu i uruchomieniu aplikacja na razie nic nie robi i wygląda tak na tablecie z Androidem:

Podsumowując dziś udało mi się stworzyć „pusty” projekt, który pozwoli na pisanie kodu pod różne platformy, kod oczywiście udostępniam na GitHubie, w następnych dniach utworzę pierwsze prawdziwe komponenty i podzielę się nimi w następnych wpisach. Ufff jak na pierwszy wpis poszło mam nadzieję nieźle, i że nic istotnego nie pominąłem. Zachęcam do zostawienia komentarzy oraz lektury następnych wpisów już wkrótce!