Monthly Archives: Maj 2016

Podsumowanie „Daj się poznać”

Nadszedł ten dzień, koniec „Daj się poznać”, koniec ciężkich nieprzespanych nocy, wreszcie można wyjść z jaskini 😛 Ok, to teraz na poważnie. Minęły już trzy miesiące od momentu rozpoczęcia konkursu „Daj się poznać”. Dla większości był to pewnie ciężki czas pracy po godzinach nad własnym projektem, ale i przyjemny czas. Trzeba przyznać było ciężko, szczególnie, że w ciągu tych trzech miesięcy w moim przypadku było bardzo dużo zmian (zmiana pracy, itd, itp). Dlatego było bardzo mało czasu na rozwój projektu, w zasadzie to nie było go w ogóle, ale jakoś dotrwałem do końca. Jestem zadowolony, że wystartowałem w konkursie, dzięki temu mogłem w końcu zacząć przygodę z blogowaniem, co chciałem zrobić już od dawna, ale jakoś tak brakowało motywacji. Teraz się udało, trochę wpisów powstało, co prawda nie za wiele, ale to już jest coś ;). Uważam, że była to bardzo dobra decyzja. Nauczyłem się wielu nowych rzeczy, co z pewnością przydało mi się w nowej pracy, ale też chciałem je poznać dla siebie. Żałuję tylko, że nie mogłem więcej czasu znaleźć na rozwój projektu. Zdecydowanie większość czasu zajęło pochłonięcie wiedzy nt. technologii i przygotowanie wpisów, przez to trochę zaniedbałem kodowanie, ale nie wszystko stracone, bo nie zamierzam przestać blogować 🙂 Oczywiście będę to robił z mniejszą częstotliwością, ale jednak chce dalej iść za ciosem, dlatego zachęcam gorąco do odwiedzania mojego bloga i śledzenia mnie na twitterze i facebooku. Niestety nie udało się dokończyć projektu, ale z pewnością jeszcze będę go rozwijał. Podczas tego czasu nasunęło się trochę przemyśleń, czy wybrałem dobrą drogę w związku z technologiami i czy sam pomysł jest odpowiedni, dlatego koncepcja raczej ulegnie drobnej modyfikacji w przyszłości.

Pozostało jeszcze tylko kilka godzin zanim DSP oficjalnie się zakończy, dlatego chciałem serdecznie podziękować Maciejowi za organizację konkursu i dzięki temu zmotywowaniu do działania nas uczestników. Gdy tylko będzie kolejna edycja, z pewnością wystartuję jeszcze raz 😛 Dzięki wielkie!

Hello AngularJS

Planując pracę nad aplikacją, założyłem sobie cel zapoznania się z frameworkiem AngularJS. W końcu przyszedł czas przyjrzenie się tej bibliotece. Zaczniemy słowem wstępu. Z czym to jeść?

Angular jest to framework napisany w języku JavaScript i wykorzystuje on HTML. Dzięki niemu możliwe jest tworzenie dynamicznych i łatwych w utrzymaniu (wzorzec MVC) aplikacji internetowych działających po stronie klienta.
Ok wszystko super, ale to na pewno jest ciężkie do ogarnięcia, pomyślicie. Otóż nie, zobaczcie jakie to proste. Poniżej znajduje się kod pierwszej aplikacji. Nie trzeba pobierać żadnych bibliotek. Wystarczy napisać kawałek kodu w notatniku i działa. Magic 😀

Przeanalizujmy kod od początku. Jak widać wygląda jak zwykły HTML, ale coś tu dodano dodatkowo. W oczy rzuca się dyrektywa ng-app, jest ona dodana po to, aby określić jaką część drzewa DOM będzie zarządzał AngularJS. W tym przypadku Angular będzie zarządzał całością, ale nic nie stoi na przeszkodzie aby był to np. tylko jeden <div>.
Następnie mamy kontrolkę input z atrybutem ng-model, chodzi o to aby powiedzieć Angularowi, że to jest nasz model o nazwie input.
Kolejna linijka kodu zawiera takie dziwne znaki {{ input }}, to właśnie tutaj Angular wstrzyknie nową wartość, odświeży ją dynamicznie. W tym przypadku wartość z pola input.
Na końcu sekcji body określamy skrypt Angularowy, lepiej określić go w ten sposób, aby klient nie musiał go za każdym razem pobierać. Skrypt będzie przechowywany w pamięci cache przeglądarki, który jest dostępny dla wielu aplikacji.
To na tyle słowem wstępu do Angulara. W kolejnym wpisie/wpisach przyjrzymy się bliżej tej bibliotece.

Deploy web aplikacji do chmury

Jeżeli przy tworzeniu nowego projektu w Visual Studio nie zaznaczyliśmy opcji „Host in the cloud”, ale chcemy opublikować naszą aplikacje w chmurze Azure, to ten krótki poradnik może okazać się przydatny. Pierwszą rzeczą jaką musimy zrobić jest stworzenie web aplikacji w Azure.
Wybieramy Usługi aplikacji z portalu i klikamy dodaj

clip_image001

Po stworzeniu aplikacji, możemy pobrać profil jej ustawień klikając „Pobierz profil…”

clip_image002

Otwieramy solucję w Visual Studio, wybieramy projekt do deployu i wybieramy Publish, a następnie Import i wybieramy plik z profilem *.PublishSettings pobrany z portalu Azure.

clip_image003

clip_image004

clip_image005

Dla pewności możemy wykonać test połączenia oraz upragniony Publish. That’s it. Nasza aplikacja już działa na Azure, przynajmniej powinna, o ile stworzyliśmy wcześniej także bazę danych i zmieniliśmy odpowiednio ConnectionStringa w web.configu.

Logowanie za pomocą konta google

userLogin

W aplikacji ASP.NET MVC mamy możliwość rejestracji kont użytkowników, jednak co w przypadku gdy chcielibyśmy dać użytkownikom możliwość logowania kontami zewnętrznymi, takimi jak google, facebook, itp? Aby umożliwić logowanie kontami zewnętrznymi, musimy przede wszystkim zajrzeć do pliku Startup.Auth.cs i w metodzie ConfigureAuth odkomentować odpowiednie linie kodu.

Jak widać możemy użyć kont Microsoft, Twitter, Facebook oraz Google. W tym poście skupimy się na logowaniu za pomocą konta Google. Tak więc musimy odkomentować ostatnią opcję:

Niezbędne będzie podanie ClientId i ClientSecret, aby je uzyskać udajemy się pod adres: https://console.developers.google.com i tworzymy nowy projekt. Następnie przechodzimy do zakładki Credentials i wybieramy Create creadentials określając nazwę naszej aplikacji, rodzaj, itd. Należy wpisać także odpowiednie redirect Url. Authorized JavaScript origins: http://localhost:portNumber oraz Authorized redirect URls: http://localhost:portNumber/signin-google . Zamiast localhost:portNumber podajemy adres naszej aplikacji. Jeżeli uruchamiamy ją na localhoście to adres powinien tak właśnie wyglądać, tylko trzeba wpisać odpowiedni port z jakiego korzysta aplikacja. Oprócz tego musimy jeszcze aktywować Google+ API, w tym celu przechodzimy do naszego projektu i z głównego ekranu wszystkich dostępnych API wybieramy Google+ API i klikamy enable. Po przeklikaniu się przez kilka kroków dostaniemy wygenerowane klucze ClientId i ClientSecret, które należy skopiować do powyższej metody. Po uruchomieniu aplikacji naszym oczom ukaże się dodatkowa opcja logowania.

clip_image001

clip_image002

I w ten oto sposób użytkownicy będą mogli logować się do naszej aplikacji kontami google.

Atrybuty walidacji w modelu

Projektując formularze, chcielibyśmy aby użytkownik podał w polach odpowiednie dane. Co zrobić aby sprawdzić poprawność wpisywanych danych? Z pomocą przychodzą nam atrybuty walidacji, które udekorują właściwości naszego modelu. Pisząc o walidacji, trzeba wspomnieć że możliwości są dwie: walidacja po stronie klienta oraz walidacja po stronie serwera. Dobrze jest skorzystać z obu opcji i walidować dane już po stronie klienta, aby nie przesyłać żądań do serwera dla każdego pola. Aby aktywować walidację po stronie klienta w aplikacji ASP.NET MVC należy upewnić się czy w pliku web.config, w sekcji appSettings widnieje taki oto wpis:

Dzięki temu oraz atrybutom w modelu uzyskamy walidację w obu przypadkach. Jakie atrybuty mamy do dyspozycji? Poniżej przedstawiam listę, mam nadzieję że żadnego nie pominąłem 😉

[Required(ErrorMessage = „This field is required”)]

[EmailAddress(ErrorMessage=”Incorrect e-mail address”)]

[Range(1, 99, ErrorMessage = „Incorrect value, please type value 1-99″)]

[RegularExpression(@”^[A-Z]+[a-zA-Z’’-‘\s]*$”)]

[Compare(„NewValue”, ErrorMessage = „Values are not the same”)]

[DataType(DataType.Time)]

[StringLength(256, MinimumLength=3)]

[MaxLength(500)]

Przykład:
Mamy w modelu właściwość:

Spróbujmy teraz wpisać w to pole wartość z poza podanego zakresu

clip_image001

Jak widać walidacja zadziałała, bez wysyłania żądania do serwera. W przypadku wyłączonego wykonywania JavaScript w przeglądarce użytkownika, walidacja po stronie klienta nie zadziała, ale walidacja po stronie serwera się wykona.