Miesięczne archiwum: Styczeń 2017

Xamarin Forms i MVVMLight

Chcecie napisać aplikacje mobilną? Pokażę wam jak to zrobić w Xamarin Forms razem z MVVMLight

Witajcie cześć i czołem pytacie skąd się wziąłem… A na imię mi Xamarin Forms razem z MVVMLight i pokrótce chciałbym wam pokazać jak łatwo można użyć wzorca Model-View-ViewModel w aplikacji mobilnej.

Instalacja MVVMLight

MVVMLight jest pakietem NuGet, który może pobrać używając konsoli NuGet Package Manager Console.NuGet Package Manager Console

W tym celu w naszej aplikacji należy otworzyć konsolę NuGet Package Manager w Visual Studio, szukam pakietu MvvmLightLibs i instalujemy go w naszych wszystkich projektach.

Konfiguracja kontenera Inversion Of Control

Na początek czeka nas odrobina konfiguracji naszego nowego projektu. Na razie konfiguracja kontenera IoC wygląda na nadmiarową pracę ale zapewniam was, że później to zaprocentuje w postaci łatwego przełączania się pomiędzy kodem „produkcyjnym” i „mock”.

Na początek stwórzmy prosty ViewModel o nazwie MainViewModel, który będzie korzystał z interfejsu IAccountService.

MainViewModel

using Client_BankOfSanEscobar.Interfaces;
using Client_BankOfSanEscobar.Models;
using GalaSoft.MvvmLight;
using System;
using System.Collections.ObjectModel;
using System.Linq;
using System.Threading.Tasks;

namespace Client_BankOfSanEscobar.ViewModels
{
    public class MainViewModel : ViewModelBase
    {
        private readonly IAccountService accountService;

        public string Title { get; set; }
        public ObservableCollection<Account> Accounts { get; set; }
        public float AvailableBalance { get; set; }
        
        public MainViewModel(IAccountService accountService)
        {
            if (accountService == null)
                throw new ArgumentNullException("accontService");

            this.accountService = accountService;

            Task.Run(() => Init());
        }

        public async Task Init()
        {
            if (Accounts != null)
                return;

            Accounts = new ObservableCollection<Account>(await accountService.GetAll());
            foreach (var balance in Accounts.Select(a => a.Balance))
                AvailableBalance += balance;
        }
    }
}

Teraz stwórzmy interfejs IAccountService

IAccountService

using Client_BankOfSanEscobar.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace Client_BankOfSanEscobar.Interfaces
{
    public interface IAccountService
    {
        Task<IEnumerable<Account>> GetAll();
    }
}

oraz jego implementację w postaci obiektu „mock”

AccountServiceMock

using Client_BankOfSanEscobar.Interfaces;
using Client_BankOfSanEscobar.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace Client_BankOfSanEscobar.Mock
{
    public class AccountServiceMock : IAccountService
    {
        public Task<IEnumerable<Account>> GetAll()
        {
            const int numberOfAccountsToGenerate = 4;
            return Task.Run(() => GenerateAccounts(numberOfAccountsToGenerate));
        }

        private IEnumerable<Account> GenerateAccounts(int numberOfAccounts)
        {
            var accounts = new List<Account>(numberOfAccounts);
            for (int i = 0; i < numberOfAccounts; i++)
            {
                accounts.Add(new Account(name: $"Account {i}", number: $"26200400001545234{i}", balance: 150.56f + i));
            }
            return accounts;
        }
    }
}

Uff prawie dobrnęliśmy do końca jeszcze tylko….Konfiguracja kontenera IoC.

W naszym kodzie użyjemy myśli technologicznej firmy Microsoft w postaci ServiceLocator, a implementacja wygląda następująco. Niektórzy twierdzą, że jest fajny The Service Locator Pattern, a inni twierdzą, że nie Antywzrorzec Service Locator.

Locator

using Client_BankOfSanEscobar.Interfaces;
using Client_BankOfSanEscobar.Mock;
using Client_BankOfSanEscobar.ViewModels;
using GalaSoft.MvvmLight.Ioc;
using Microsoft.Practices.ServiceLocation;

namespace Client_BankOfSanEscobar
{
    public class Locator
    {
        public Locator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

            //ViewModels
            SimpleIoc.Default.Register<MainViewModel>();

            //Services
            SimpleIoc.Default.Register<IAccountService, AccountServiceMock>();
        }

        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }
    }
}

Musimy jeszcze zainicjować nasz Locator możemy to zrobić w klasie App.cs

App

using Xamarin.Forms;

namespace Client_BankOfSanEscobar
{
    public partial class App : Application
    {
        private static readonly Locator locator = new Locator();

        public static Locator Locator
        {
            get
            {
                return locator;
            }
        }

        public App()
        {
            InitializeComponent();

            MainPage = new Views.MainPage();
        }
    }
}

Cała konfiguracja i robota papierkowa za nami teraz możemy dojść do mięcha.
Mięcho

Binding ViewModel do UI

A więc żeby użyć naszego nowego pachnącego ViewModel należy go „podłączyć” do naszego widoku. Robimy to poprzez odpowiednie skonfigurowanie BindingContext.

        public MainPage()
        {
            InitializeComponent();
            BindingContext = App.Locator.Main;
        }

Podsumowanie

A więc jak widzicie użycie MVVMLight i Xamarin Forms jest możliwe. Na początku konfiguracja i powiązanie wszystkiego zajmuje trochę czasu ale w przyszłości będzie miało to plusy. Cały kod źródłowy możecie znaleźć na GitHub

Nauka programowania od metalu czy od klawiatury

Nauka programowania od samego metalu czy od klawiatury

A więc stanęliśmy przed zadaniem nauki nowego adepta. Jak do tego podejść, jak zacząć?

Zanim pójdziemy dalej zdajmy sobie sprawę, że są dwa typy osób „Uczące się od metalu i od klawiatury”.

Pomysł jest taki poznajmy naszych uczniów, dowiedzmy się jaki styl nauki im najbardziej odpowiada.

Nauka od metalu

Wszystko zaczyna się od metalu, w końcu CPU powstał z metalu. Zaczynasz naukę od tego poziomu poznajesz zasadę działania procesora, pamięci. Idziesz dalej poznajesz assembler, C, dowiadujesz się o modelu OSI. Przechodzisz do języków wysokiego poziomu uczysz się Java, C#, Python, poznajesz JSON.

  • Jak wpisujesz allegro.pl jesteś w stanie powiedzieć co się dzieje pod spodem od adresu URL do serwera.
  • Otwierasz de-kompilator i grzebiesz w bebechach

Jesteś taką osobą? Lubisz zaglądać pod maskę? Jeżeli twoi uczniowie mają podobnie to jest ok i oboje wygrywacie.

Nauka od klawiatury

Wszystko zaczyna się od klawiatury. Rysujesz ekrany, piszesz scenariusze użycia i jak to wszystko ma wyglądać na ekranie. Masz świadomość istnienia CPU i jak to wszystko mniej więcej działa.

  • Jak wpisujesz allegro.pl wiesz jak jest tworzony interfejs i całe UX. Dalej to już są szczegóły implementacji o których zawsze możesz doczytać

Jesteś taką osobą? Wolisz szybko przejść do konkretnego zadania? Jeżeli twoi uczniowie mają podobnie to jest ok i oboje wygrywacie.

Podsumowanie

Każdy jest inny i uczy się w inny sposób. Jeżeli zaczynamy kogoś uczyć musimy o tym pamiętać.

Ja osobiście lubię wiedzieć co dzieje się pod spodem i jak to wszystko działa. Ale ktoś inny może już nie odczuwać takiej potrzeby i to jest ok.

Legacy code. Jak rozwijać i co można z nim zrobić?

Legacy code. Jak rozwijać i co można z nim zrobić?

Jak rozwijać legacy code, czyli jak dodawać nowe funkcjonalności w najmniej bolesny sposób. Opisuję tutaj swoje własne doświadczenia i przemyślenia na ten temat. A więc…

Czy jest legacy code

Według nomenklatury sprzedawców samochodów kod jest przestarzały po wyjechaniu za bramę salonu, a według Wikipedia przestarzały kod to

More recently, the software engineering communty has developed other interpretations for the term legacy code. Among the most prevalent are source code inherited from someone else and source code inherited from an older version of the software.

Jak rozwijać przestarzały kod?

Praca z zastanym kodem bywa często bardzo bolesna. Niestety w naszym dev-życiu najczęściej trafiamy w bagno aplikacji, którą dostaliśmy w utrzymanie od jakiegoś korporacyjnego klienta lub utrzymujemy nasz produkt napisany w czasach kiedy po świecie chodziły dinozaury. Co zrobić kiedy pojawia się wymaganie dodania nowej wypasionej funkcjonalności?

Można do tego podejść na kilka sposobów:

  • brnąć dalej w depresyjny kod napisany przez całe stado programistów
  • napisać bibliotekę/komponent/plugin (nie to może nie jest odpowiednie słowo :))

Brnięcie dalej

Kto z nas nie próbował pisać kolejnej funkcji w VB6? Ten nie wie jaki jest to czasami ból, a ten ból jest tym większy im więcej linijek kodu jest w funkcji w której musimy wywołać nasz nowy super kawałek kodu. Ot cała ta integracja oł jeee…

Napisać coś nowego

Można podejść do tego z drugiej strony i stworzyć jakiś komponent\moduł, który będzie posiadał zestaw funkcjonalności wymaganych przez aplikację.

Jest to według mnie lepsze podejście można użyć np. architektury micro-services i stworzyć komponent\moduł hostowany na IIS.

Podsumowanie

Technik radzenia sobie z legacy code jest tyle co programistów. Każdy ma jakieś swoje pomysły i sposoby. Dla mnie najciekawszym sposobem jest tworzenie komponentów w myśl architektury micro-services.

A wy jakie macie sposoby na radzenie sobie ze starymi systemami?

Programowanie cross-platform. Jak to zrobić inaczej?

Programowanie cross-platform. Jak to zrobić inaczej?

Programowanie cross-platform. Jak to zrobić inaczej? Dlaczego wybrałem React Native i w czym jest on lepszy od Xamarin Forms. Czas zacząć, a więc…

Czym jest programowanie cross-platform

In computing, cross-platform software (multi-platform, or platform independent software) is computer software that is implemented on multiple computing platforms.[1] Cross-platform software may be divided into two types; one requires individual building or compilation for each platform that it supports, and the other one can be directly run on any platform without special preparation, e.g., software written in an interpreted language or pre-compiled portable bytecode for which the interpreters or run-time packages are common or standard components of all platforms.[

Programowanie cross-platform w wypadku mobile jest to tworzenie jednej bazy kodu i UI, który będzie wyglądał i dostarczał tą samą funkcjonalność na każdej z platform. Ułatwia to później utrzymanie aplikacji, oraz dostarczanie nowej funkcjonalności dla użytkowników.

Największym benefitem jest łatwość utrzymania i zarządzania kodem. Tworzymy aplikację tylko raz od razu na wszystkie platformy.

Wprowadzenie, czyli czym jest React Native

Jest to biblioteka stworzona przez Facebook umożliwiająca pisanie aplikacji w JavaScript, używając tych samych technik co w React. Dzięki temu otrzymujemy aplikację zbudowaną z komponentów. Została ona oficjalnie zaprezentowana na konferencji React.js Conf w 2015 roku.

Co mnie przekonało do niej przekonało

Lubię React i jest to chyba jedne z nielicznych JS framework-ów, które polubiłem. Z benefitów, które mnie do niego przekonały to:

  • Debugowanie kodu w Chrome (kod, który jest uruchomiony na urządzeniu)
  • Live reload (aplikacja aktualizuje się na urządzenie wraz ze zmianami kodu aplikacji)
  • Łatwość tworzenia UI (dzięki komponentom React)
  • Możemy korzystać z natywnych modułów i elementów UI (możemy ładować elementy napisane w np. Objective-C, Swift, Java)

Jak zacząć

Najłatwiej jest zacząć instalując wymagane pakiety przy użyciu Chocolatey.

Jeżeli jeszcze nie mamy instalujemy Chocolatey, otwieramy konsolę PowerShell v3+ z prawami administratora. Należy się upewnić czy Get-ExecutionPolicy nie zwraca wartości Restricted. W innym wypadku odpalamy komendę

Set-ExecutionPolicy Unrestricted

Do czego jest to nam potrzebne? Aby wykonać skrypt PowerShell ściągnięty z Internetu 🙂 A więc odpalamy komendę

iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

Mamy zainstalowane Chocolatey możemy teraz zainstalować Node i Python2 używając komend

choco install nodejs.install
choco install python2

Kolejnym krokiem jest instalacja The React Native CLI, używamy do tego Node Package Manager

npm install -g react-native-cli

A więc dotarliśmy do końca przygotowania środowiska. Czas zacząć pisać naszą pierwszą aplikację.

The Basics, czyli jak zrobić prostą aplikację

Naszym przykładem będzie prosta aplikacja prezentująca mapę dostarczaną przez Google Maps.

W celu stworzenia naszego pierwszego projektu w React Native uruchamiamy konsolę i piszemy

react-native init MapSample

następnie zmieniamy katalog i piszemy

cd MapsSample
react-native run-android

Strukturę naszego projektu mamy już gotową. Teraz pora podłączyć plugin mapy. W tym celu wykorzystamy plugin React Native Maps. Uruchamiamy konsolę i piszemy

npm install react-native-maps --save
react-native link

Co zrobić w razie problemów z kompilacją

Jeżeli pojawiają się nam jakieś problemy z kompilacją należy wykonać sekwencję poniższych komend.

npm cache clean
cd android
gradlew clean

Plus i minusy React Native vs Xamarin Forms

Oba środowiska dają nam na wyjściu kod natywny działający ze zbliżoną prędkością.

W mojej ocenie na plus Xamarin to możliwość pisania w C# lub F# używając naszego ulubionego IDE. Minusem jest niestety potrzeba kompilowania kodu żeby zobaczyć zmiany na UI.

Plusem React Native jest natomiast niewątpliwie Live reload. Minusem brak wsparcia dla rozwiązań monitorujących działania aplikacji w produkcji jak np. Xamarin App Insight.

Podsumowując nie ma jednoznacznego zwycięzcy. Oba rozwiązania mają swoje plusy i minusy, oraz dla obu można znaleźć miejsce w którym sprawdzą się lepiej.

Linki

Develop ReactNative apps in Visual Studio Code

React Native

Przykładowy kod

https://github.com/marcshilling/react-native-image-picker

https://github.com/lwansbrough/react-native-camera

https://github.com/airbnb/react-native-maps

Jak wyznaczać cele: Metoda SMART

Jak wyznaczać cele: Metoda SMART

A więc mamy nowy rok czas podejmowania decyzji, planowania i wyznaczania celów. Z pomocą przychodzi metoda SMART.

Definicja według Wikipedia

SMART criteria

SMART is a mnemonic acronym, giving criteria to guide in the setting of objectives, for example in project management, employee-performance management and personal development. The letters S and M usually mean specific and measurable. The other letters have meant different things to different authors, as described below. Additional letters have been added by some authors.

SMART criteria are commonly associated with Peter Drucker’s management by objectives concept.[1] The first-known use of the term occurs in the November 1981 issue of Management Review by George T. Doran.[2] The principal advantage of SMART objectives is that they are easier to understand and to know when they have been done.

Metoda SMART

Do wyznaczania celów możemy użyć metody SMART, czyli 5 angielskich słów Specific, Measurable, Achievable, Relevant, Time-bound.

Specific

Prosty – cel powinien być prosty i jasno zdefiniowany, nie może być zbyt ogólnikowy np. Więcej się uczyć.
Dobrze zdefiniowanym przykładem jest np. Chce przebiec maraton w 2018 roku. Naszym celem jest przebiec maraton w 2018 roku, czyli mamy czas do 31.12.2018.

Measurable

Mierzalny – cel powinno dać się łatwo określić liczbowo. Musimy wiedzieć kiedy zadanie ma się rozpocząć, kiedy zakończyć i jaki czas jest potrzebny na jego wykonanie. Powinniśmy również określić punkty w których będziemy sprawdzać stan wykonania zadania.

Wracając do przykładu z maratonem. Mamy jasno określony czas zakończenia 31.12.2018, musimy określić czas startu. Należy więc przeredagować zadanie np. Od stycznia 2017 chce zacząć się przygotowywać do maratonu w 2018 roku.

Achievable

Osiągalny – cel powinno dać się go wykonać. Powinien on być realistyczny nie przebiegniemy ultra maratonu jeżeli dopiero zaczynamy biegać. Cel zbyt ambitny podkopie nasze morale i w ogóle odpuścimy ten cel.

Relevant

Ważny – powinien on mieć dla nas znaczenie. Jego wykonanie spowoduje jakąś istotną dla nas zmianę np. Poprawę kondycji i samopoczucia.

Time-bound

Określony w czasie – gdy mamy harmonogram w którym widzimy początek, koniec i poszczególne etapy będzie nam łatwiej się trzymać tego celu i powoli małymi krokami dojdziemy do końca.

Podstawowym błędem jest zakładanie sobie nierealistycznych terminów i wrzucanie za dużo na barki.

Podsumowanie

Jakie wy macie cele na 2017 i jak podchodzicie do ich planowania? Czy używacie metody SMART, a może wystarcza wam po prostu GTD.