Widok do prowadzenia rozmowy w czacie aplikacji Mobile Second Hand

Siemanko.

W niedzielę poszły pierwsze commit’y do repo związane z czatem, a dziś lecą kolejne z m.in. z nowym activity do prowadzenia rozmów real time (oczywiście  w deweloperskim wyglądzie jak to przystało na takie totalne bezguście jak ja ;))

IMAG0082

Bubble Chat

To wyrażenie przewija się w internetach i oczywiście wśród użytkowników fejsbukowego messenger’a. Wiadomości wyświetlane w formie bąbelków, dymków itp. jak zwał tak zwał. Moja aplikacja nie może być gorsza i musi nadążać za trendami 🙂 Sama implementacja jest bardzo prosta. Każda z wiadomości to osobny row view zamknięty w relative layout, a ten z kolei odpowiednio ostylowany w momencie bind’owania view holder’a na podstawie informacji czy autorem wiadomości jest użytkownik. Informacja tą zawarłem w modelu wiadomości przekazywanego do list adaptera.

Co nowego na serwerze

W momencie łączenia się usera z serwerem SignalR zapisuję sobie do cache’a (serwera) jego id wraz z id połączenia. W ten sposób będę łatwo mógł sprawdzić, który user jest online, a także pobrać jego id połączenia w przypadku potrzeby wysłania do niego wiadomości. Oczywiście w przypadku rozłączenia się usera aktualizuję listę użytkowników online w cache’u. Dlaczego cache? Bo szybki. Co będzie jak trzeba będzie zrestartować aplikację na serwerze i dane z cache’a znikną? Nic nie będzie bo tym samym użytkownicy zostaną rozłączeni i po restarcie będą się ponownie łączyli więc cache znowu się zapełni 🙂

Podsumowanie

Podsumowując to wiecie, że to już mój 11sty tydzień aktywnego rozwijania projektu i blogowania w konkursie #dajsiepoznac? Tym samym spełniłem już warunki konkursu, aby być branym pod uwagę przy wynikach choć te nie są najważniejsze bo największą frajdę podczas mojego uczestnictwa w konkursie sprawia mi nauka nowych rzeczy. Jestem zadowolony, że udaje mi się znaleźć czas, aby troszkę pokodować oraz popisać głupot w internetach, dlatego nie zamierzam na tym poście poprzestać i będę męczył Was dalej! 😉

Pjona!

Pierwsze kody związane z czatem już na guthub’ie.

Siemanko

W od kilku postów wiecie, że przymierzałem się do rozpoczęcia prac na czatem i ogólnie komunikacją między użytkownikami aplikacji mobilnej w czasie rzeczywistym. Dziś nastał ten dzień , że już pierwsze kody możesz zobaczyć w repo, a w tym poście pierwsze screen’y i zdjęcia z wymiany informacji pomiędzy klientem, a serwerem. W tym odcinku klientem jest nasz (mój i mojej narzeczonej) „pitbull” o imieniu Dosia 😉

Aplikacja mobilna klientem SignalR

W projekcie Xamarin napisałem w portable class library klienta SignalR dzięki czemu będę mógł go wykorzystać cross-platform’owo (może kiedyś)Z tego klienta korzystam w projekcie androidowym w nowo utworzonym serwisie, który będzie odpowiedzialny za komunikację z serwerem SignalR. Połączenie i komunikacja odbywa się w oddzielnym wątku przez co nie będzie ona wpływać na responsywność apki.

Serwer SignalR

W projekcie backend’u napisałem (zbyt dużo powiedziane bo to dopiero kilka linijek) serwer SignalR. Będzie on oczywiście odpowiedzialny za komunikację, ale chcę aby działo się w nim znacznie więcej. Mianowicie chcę zapisywać sobie informację o tym, który użytkownik jest online, zapisywać do bazy konwersacje między użytkownikami i wiele innych. Nad tym będę pracował w najbliższym czasie. Jak na razie serwer SignalR tylko odbiera jedną określoną wiadomość i na nią odpowiada.

Pierwsza komunikacja real time

Odpalając aplikację mobilną wysyłam wiadomość do serwera SignalR:

a1

Screen serwera SignalR w trybie debug

w odpowiedzi zwracam wiadomość, którą obsługuję w aplikacji poprzez odpalenie tzw. notification – czyli powiadomienia:

2

IMAG0058

Po kliknięciu powiadomienia przeniosę użytkownika na widok wiadomości (którego jeszcze nie ma). Na tę chwilę przenoszę go na listę ogłoszeń, ale to jest teraz nieistotne bo najważniejszym było obsłużenie komunikacji.

Serwis android’owy korzystający z klienta SignalR działa w tle, także mimo iż aplikacja nie jest odpalona (tzn. nie ma jej na ekranie, ale jej proces działa) wiadomości są odbierane.

IMAG0061

3

IMAG0071

W tym momencie kliknięcie powiadomienia przeniesie użytkownika do aplikacji. Normalnie jak w messengerze! 😉

Podsumowanie

Trochę się obawiałem, ze będzie to trudny task i zajmie mi to trochę czasu zanim cokolwiek zacznie działać,  a ku mojemu zaskoczeniu SignalR jest na tyle zajebisty, że wystarczy tylko kilka linijek aby już zacząć komunikację. To już za mną dlatego teraz muszę ogarnąć cały tzw. workaround żeby w pełni zaimplementować funkcjonalność komunikacji między użytkownikami aby mogli bez problemów dogadać szczegóły dotyczące transakcji ;).

Pjona!

Kolejny widok w aplikacji Mobile Second Hand. Tym razem szczegóły ogłoszenia.

Siemanko.

Dziś króciutko o kolejnym ficzerze apki mobilnej – oczywiście w mocno deweloperskim stanie 😉 – przejście na szczegóły ogłoszenia oraz ich wyświetlenie.

Wejście w szczegóły po naciśnięciu elementu na liście

Pokazywałem już we wcześniejszych postach jak wygląda lista ogłoszeń pobranych z serwera, ale dla przypomnienia:

13177151_1011632882250440_2934029842522300517_n

To jest lista okrojonych wersji ogłoszeń, którą można sobie scrollować od góry do dołu i odwrotnie 😉 Jeśli któreś ogłoszenie jest szczególnie interesujące wystarczy w nie kliknąć aby przejść do jego szczegółów.

13177393_1011632665583795_5778124407927892321_n

Widok jest oczywiście scrollowalny dlatego szczegółów mogę tam zamieścić więcej jeśli przyjdą mi jakieś do głowy.

Co jest na szczegółach

Pewnie powiesz, że nie wiele więcej niż na liście 😉 Tak, w tej chwili tak, ale wynika to z faktu, że na tę chwilę nie główkuję co by się tu jeszcze przydało, a nie z ograniczeń technologicznych. Wracając do nagłówka:

  • odległość do sprzedającego – jest też na liście
  • informacja o stanie sprzedającego online/offline  – to będzie powiązane z chatem (nad którym zaczynam pracować)
  • informacja o tym czy sprzedającego interere tylko sprzedaż rzeczy czy jest tez zainteresowany wymianką – nie ma na liście
  • button do nawiązania kontaktu – związane z chatem i komunikacją real-time (nad którym zaczynam pracować). Przeniesie na widok wiadomości
  • zdjęcie – będzie większe i po kliknięciu wypełni ekran
  • tytuł – jest też na liście
  • dokładny opis – nie ma na liście
  • button do zobaczenia innych ogłoszeń autora tego ogłoszenia – przeniesie na listę ogłoszeń tylko tego sprzedającego (prawie jak na allegro ;))

Jak się to odbywa

W momencie kliknięcia elementu listy rzucam zdarzenie, którego argumentem jest Id danego ogłoszenia. Przy obsłudze zdarzenia startuje nowe Activity, do którego przekazuje to Id i w nim pobieram z serwera model z danymi dla tego ogłoszenia.

Podsumowanie

Jako tako to wygląda i nawet działa 😉 Teraz jak wspomniałem zaczynam bawić się z chatem i powiadomieniami. To ma być jeden z głównych ficzerów aplikacji. W niedzielę  o pierwszych kodach z tym związanych.

Pjona!

Wracam po tygodniu przerwy. Podsumowanie dwóch miesięcy pracy nad projektem „Mobile Second Hand”

Siemanko

Chciałbym sobie schlebić i napisać, że pewnie zauważyłeś/łaś przerwę w moim blogowaniu oraz commitowaniu do repo na tydzień, jednak stąpam twardo po ziemi i godzę się z tym, że oprócz mnie samego nikt zapewne nie dostrzegł tej ogromnej luki w polskim internecie 😉 Jeśli jednak chcesz się ujawnić i pochwalić, że należysz do, bądź co bądź, elitarnego grona czytelników (jak czegoś mało tzn., że nie dla wszystkich ;)) to daj znać pod spodem. W dzisiejszym poście podsumowanko dwumiesięcznego blogowania i kodowania.

Staty z wodpressa

Nie wiem czy to śmiesznie mało, czy normalnie jak na początek, ale na dziś tj. 04.05.2016 wordpress zanotował przez niewiele ponad dwa mieisące 794 wyświetlenia i 439 gości na blogu.

1

Blogowanie

17 postów konkursowych i 2 posty niezwiązane z #dajsiepoznac opublikowane zaraz po stworzeniu bloga, ale jeszcze przed startem konkursu. Staram się nie pisać żadnego pierdololo, by tylko spełnić wymóg dwóch postów tygodniowo, dlatego przyjąłem zasadę: najpierw kodowanie potem blogowanie, aby mieć się czym dzielić. Posty publikuje w regularnych odstępach czasu w te same dni tygodnia – środa i niedziela.

Kodowanie

Android Studio – moim zdaniem bardzo young developer friendly środowisko. Wiele gotowych template’ów z których, świeżaki mogą szybko wgryzać się w Androida. Fajne funkcjonalności wspomagające refaktoryzację kodu i wiele innych.

Java – podobna do C#. W przypadku potrzeby przebranżowienia powinno pójść gładko

Asp.Net Core 1.0 – wersja RC1-final. Wszystko spoko. Wszystko wskazuje na to,  że będą musiał zrobić upgrade do wersji RC2 nightly builds ponieważ, chcę skorzystać z SignalR do zrobienia chatu dla userów aplikacji mobilnej. Mam nadzieję, że pójdzie w miarę gładko

Entity Framework Core 1.0 – trzeba zapomnieć o sposobie pracy z EF6. Brak automatycznej konfiguracji relacji wiele do wielu, kaskadowy zapis nie zawsze działa, usuwanie obiektów z kontekstu nie odzwierciedla się nigdzie do momentu wywołania SaveChanges(), bugi przy self reference i wiele innych ciekawostek. Zobaczę co poprawili w wersji RC2 jeśli uda mi się zupgradować projekt

Xamarin – fajne środowisko. Trochę wolne, ale .NETowe dobroci rekompensują wszystko. Przyspieszyłem z aplikacją mobilną od momentu rozstania z Android Studio, a kod jest dużo bardziej schludny i czysty.

Podsumowanie

Na pewno nie uda mi się skończyć projektu przed końcem konkursu. Im głębiej w las tym więcej chciałoby się funkcjonalności, a co za tym idzie jest więcej roboty przy niezmiennie małej ilości wolnego czasu. Po konkursie będę na pewno dalej pracował nad projektem. Czy blogował? Na pewno nie dwa razy w tygodniu, ale może raz na jakiś czas opowiem jakiś dowcip 😉

Pjona!

Dodawanie nowego ogłoszenia w Mobile Second Hand

Siemanko

Widziałeś/aś już jak się będzie można w apce mobilnej zalogować do systemu (tak, do systemu bo aplikacja mobilna w projekcie to tylko klient), jak wygląda teraz (mocno dewelopersko) lista ogłoszeń więc teraz czas pokazać jak wygląda i działa na tę chwilę tworzenie nowego ogłoszenia wraz z dodaniem go do systemu.

IMAG0037

Tworzenie nowego ogłoszenia w aplikacji mobilnej

Na powyższym zdjęciu widzisz listę ogłoszeń. W prawym dolnym rogu jest widoczny tzw. FAB. Przycisk który przy przewijaniu listy jest cały czas w tym samym miejscu (btw. można zrobić tak aby przy przewijaniu w dół znikał i pojawiał się po powrocie na początek listy, ale nie o tym). Pewnie się domyślasz do czego służy? 🙂 Po kliknięciu przechodzimy do tworzenia nowego ogłoszonka.

IMAG0038

Tadam. Oto formularz do nowego ogłoszenia. Elementy (kontrolki) do wprowadzania danych umieściłem na scroll’owalnym layoucie, dzięki czemu nie ogranicza mnie wysokość ekranu oraz intuicyjnie przesuwając w dół użytkownik przejdzie do końca formularza.

IMAG0039

Kolejny babol w designerze Xamarin’a

Wspominałem już w wcześniejszych postach o nierenderujących się komponentach w designerze (np. guzik do logowania z facebookiem czy FAB). Mam kolejnego babola. W designerze nie podejrzysz kontrolek, które nie mieszczą się na widoku, a są faktycznie na layoucie (mimo iż przesuniesz pasek scrolla)

1.jpg

Także zostaje tylko xml i „kodowe” dodawanie i ustawianie widoków. Oczywiście po starcie apki na telefonie widok jest scroll’owalny.

Pola formularza

Które pole do czego to chyba się orientujesz z opisów 🙂 Pokrótce:

  • tytuł główny, który będzie widoczny na liście ogłoszeń
  • dodatkowe informacje gdzie można się rozpisać, a te będą widoczne na detalu ogłoszenia (po wejściu na niego z listy)
  • cena bez częsśi dziesiętnych
  • pola radio do określenia jaka forma pozbycia się ciucha interesuje użytkownika, a ta z kolei będzie umieszczona jako jakaś ikonka na liście ogłoszeń
  • zdjęcie – oczywiście robione z poziomu aplikacji. Na razie tylko jedno, ale w kodzie zostawiłem sobie furtki aby można było robić i dołączyć kilka zdjęć
  • znów pola radio, tym razem do określenia czy do ogłoszenia ma być dołączona lokalizacja aktualna czy domowa zapisana w ustawieniach (np. wystawiam ogłoszenie u koleżanki, ale zaraz wracam do domu 30 km i tam będę przesiadywał ;))
  • guzior do opublikowania ogłoszenia

W momencie naciśnięcia guzika do publikacja sprawdzam czy wszystkie pola zostały wypełnione oraz czy zostało zrobione zdjęcie. Jeśli tak to idą requesty do serwera. Najpierw jeden ze zdjęciem, a po udanym zapisie drugi z modelem. To jak to ogarniam na serwerze jest tematem na jeden z kolejnych wpisów.

Podsumowanie

W ramach podsumowania przejdziemy razem przez proces dodawania ogłoszenia 🙂

  • wypełniamy formularz i robimy zdjęcie

IMAG0047

IMAG0040

  • naciskamy guzik „OPUBLIKUJ” i czekamy sekundkę, aż się wszystko zapisze

IMAG0042

  • po wszystkim jesteśmy przeniesieni z powrotem na listę ogłoszeń, gdzie możemy podziwiać nasze nowoutworzone ogłoszenie i czekać na kontakt od chętnego kupującego (kontakt także będzie się odbywał w aplikacji) 🙂
IMAG0045

0 km ponieważ się nie ruszyłem 😉 Jednak gdybym odszedł i odświeżył listę zobaczyłbym ile dzieli mnie do miejsca, w którym opublikowałem ogłoszenie.

Pjona!

Xamarin’owa apka doprowadzona do stanu jaki prezentuje w Android Studio.

Siemanko.

Dziś króciutko.

W dniu dzisiejszym udało mi się doprowadzić aplikację mobilną do stanu jaki prezentowała w Android Studio w momencie podjęcia decyzji o przesiadce na Xamarin’a, więc nareszcie będę mógł jechać z nowymi tematami. Nie zliczałem czasu, ale szacuję, że zajęło mi to ok 20 godzin. Biorąc pod uwagę, że nie miałem wcześniej z Xamarin’em nic wspólnego to myślę, że to dobry wynik, a przyjemność jaką sprawia mi pisanie w nim jest o wiele większa niż w Android Studio. Ostatnie posty nie dotykały funkcjonalności rozwijanych w projekcie dlatego pozwolę sobie przypomnieć Ci co jest zrobione i za co zabieram się od jutra (dziś już dość kodzenia ;)).

Jest zrobione (zarówno po stronie aplikacji mobilnej jak i na serwerze):

  • autentykacja za pomocą tokena JWT (logowanie/rejestracja za pomocą formularza lub facebooka)
  • ustalanie lokalizacji w aplikacji mobilnej
  • pobieranie listy ogłoszeń na podstawie lokalizacji użytkownika uderzającego do API z uwzględnieniem zadeklarowanego przez niego obszaru z jakiego chce zobaczyć ogłoszenia (na podstawie zadeklarowanego promienia – wszystko wyliczam na serwerze)
  • tworzenie nowego ogłoszenia wraz ze zdjęciem i zapis do bazy na serwerze co skutkuje natychmiastowym pojawieniem się ogłoszenia w systemie

Co będzie robione:

  • predefiniowane hasła kluczowe dotyczące rodzaju ubrania (np. sukienka, bluzka itp.) oraz koloru, które będę wyłapywał na serwerze z tytułu i opisu ogłoszenia aby następnie je powiązać z sobą powiązać. W aplikacji nie będę wymagał wybierania ręcznego kategorii, itp. jak to jest np. na Allegro. Ma to być maksymalnie proste dlatego przypisywaniem haseł zajmie się system.
  • pobieranie listy ogłoszeń z zawężeniem do predefiniowanego hasła (np. tylko ogłoszenia ze spodniami)
  • powiadomienia w tle o pojawieniu się nowych ogłoszeń w zadeklarowanym przez usera obszarze
  • wyświetlanie szczegółów ogłoszenia po kliknięciu go na liście
  • komunikacja między użytkownikami systemu (kupujący – sprzedający)

Podsumowanie

Cieszę się, że będę już mógł pracować nad nowymi rzeczami, a nie odgrzewać stare kotlety ;). Jeśli Ty też się cieszysz moim szczęściem to daj feedback ;). A jeśli nie – to nie ;p

Pjona!

Wrażenia po pierwszych randkach z Xamarinem cz. 1

Siemanko.

Jak wiesz z tego wpisu, postanowiłem porzucić projekt aplikacji mobilnej w Android Studio i zacząć wszystko od nowa w Xamarin’ie (w związku z tym, że stał się darmowy). Wiązało się to oczywiście z dodatkowym nakładem pracy na doprowadzenie apki do stanu jaki już prezentuje w projekcie z Android Studio, ale ekscytacja nową technologią, o której coraz więcej się słyszy oraz perspektywa pracy w znanym mi środowisku (Visual Studio) wzięły zdecydowanie górę i już dziś poszedł do repo pierwszy push z projektem Xamarin’owym. Jakie wrażenia po ok 10ciu godzinach pracy w Xamarinie?

Powolny start aplikacji

To było pierwsze moje spostrzeżenie po przesiadce z Android Studio gdzie start apki z debuggerem trwał w porywach do 10ciu sekund, a bez debuga niemal natychmiast, tak start nawet czystego wygenerowanego templat’u w Visual Studio trwa znacznie dłużej. Nie mierzyłem stoperem, ale jest to na prawdę znacząca różnica w szczególności jeśli wprowadzam jakieś drobne zmiany w kodzie i chcę szybko zobaczyć ich wpływ na działanie aplikacji. Niestety aplikacja dłużej się uruchamia niż ja potem w niej klikam. W zasadzie nie ma co się dziwić bo przy każdym uruchomieniu aplikacja chyba jest publikowana (z tego co widać w output’cie) i przerabiana na jave więc to musi trwać. Dodam, że nie korzystam z emulatora tylko z fizycznego urządzenia.

Nie wszystko na co IDE pozwoli zostanie zatwierdzone przy build’zie.

Napisałem jakiś kod, który był poprawny dla .NETu natomiast przy buildzie czy próbie uruchomienia aplikacji dostałem wiele mówiący błąd:

1

I tyle. Żadnego wskaźnika do miejsca w kodzie. Domyśliłem się co mogło być problemem więc zlokalizowanie kodu, z którym maszynka do javy miała problem nie trwało długo lecz kiszka była by gdybym naklepał sporo kodu bez buildów w między czasie opierając się tylko na informacjach od IDE. Weź bądź mądry i szukaj wiatru w polu.

Jeśli coś się nie renderuje w designerze niekoniecznie nie będzie się renderować po starcie.

No właśnie. Na tym straciłem ze dwie godziny. Dodałem do projektu komponent: Facebook Android SDK (przez Component Store – taki Xamarinowy nuget). Nie jest to oficjalne SDK wydane przez Facebooka tylko przez grupę Xamarina. I tak jak w Android Studio dodałem sobie na widok (w .xml) guzior do logowania z facebookiem. Przełączam się na widok designera, a tu bach:

2

Mówię sobie: trudno – nikt nie powiedział, że będzie łatwo 🙂 Grzebałem w necie, sprawdzałem sample tego SDK, odinstalowywałem i instalowałem ponownie komponent itp. itd. tak przez jakieś 2 godziny bez rezultatów.  W końcu uruchomiłem aplikację z ostatnią nadzieją, że to designer sobie nie radzi i ku mojej radości przez zaciśnięte zęby tak się właśnie dzieje. W uruchomionej aplikacji guzik jest wyrenderowany.

IMAG0025

I tak jest również z innymi komponentami androida, które w Android Studio są dostępne „z pudełka” natomiast w Xamarin’ie trzeba je pobierać prze Comeponent Store do swojej aplikacji i oglądać dopiero po uruchomieniu apki 😉 Mam nadzieję, że chociaż Tobie zaoszczędzę trochę czasu i sporo frustracji jeśli napotkasz na ten sam problem.

Podsumowanie

Z dzisiejszego wpisu pewnie wnioskujesz, że nie jestem zbyt zadowolony z przesiadki na Xamarin’a oraz w ogóle z pracy, z tym ustrojstwem 😉 Otóż nie. Skupiłem się na tych skrajnych przypadkach ponieważ to one rzuciły się najbardziej w oczy w pierwszej kolejności. Dobrodziejstwa? Największą zaletą jest C# i .NET. Nie muszę korzystać z zewnętrznej biblioteki do asynchronicznej komunikacji z rest api bo z pudełeczka mam HttpClient i operatory async/await. Nie muszę korzystać z Gsona (które jest mega powolny) do konwersji jsona na obiekty bo mam z nugeta Newtonsoft.Json. Nie fiksuję się tylko i wyłącznie na jedną platformę bo mam PortableClassLibrary i jak mi odpierdoli to kupie sobie iPhona i będę mógł wykorzystać ten sam kod do pisania apki na iOSa 🙂

W środę dalsza część wrażeń z pracy w Xamarin’ie.

Pjona!

Bye bye Android Studio. Hello Xamarin!

Siemanko.

poprzednim poście zaanonsowałem, że dzisiejszy wpis będzie traktował o części Asp.Net’owej projketu, a konkretnie o Entity Framework Core. Jednakże breaking news z czwartku spowodował, że postanowiłem zmienić technologię (a raczej narzędzie) w jakiej piszę aplikację mobilną na androida, dlatego jednocześnie dzisiejszym tematem są zmiany w projekcie.

Xamarin za darmochę!

Jeśli pochodzisz ze światka .NET’owego to wiesz o co kaman. Jeśli nie – dowiesz się z następnych zdań. Xamarin to platforma do pisania aplikacji tzw. „crossplatform”, na trzy mobilne systemy operacyjne:

  • android
  • iOS
  • windows phone

Aplikacje piszę się w języku C# i .NET. Teoretycznie jeden kod – trzy systemy. Teoretycznie bo warstwa UI każdego z systemów jest różna:

  • android – .xml
  • iOS – chuj wie jak się to nazywa ale potrzeba do tego maca
  • windows phone – .xaml

Jednak jeśli dobrze rozgraniczymy warstwę prezentacji od pozostałych (dostępu do danych, samych danych, itp.) to średnio ok 60% kodu (tak mówi gościu z kursu na pluralsite) można wykorzystać do zbudowania apki na każdy z systemów mobilnych. Brzmi super? Tak, tylko, że jeszcze do czwartku (30.03.2016) Xamarin był komercyjny i drogi, a jego wersja trial opiewała na jedyne 30 dni. To się zmieniło i dla pojedynczych devów Xamarin jest za darmochę. Pozdrowienia dla hejterów Microsoft’u! Bang!

Przesiadka na Xamarin’a.

Podjąłem decyzję, że dotychczasowy kod i w ogóle cały projekt w Andriod Studio puszczam w niepamięć i zaczynam pisać aplikację od zera w Xamarin’ie.

Zalety:

  • znam C# i .NET
  • znam Visual Studio
  • nie fiksuję się tylko na andrioda jeśli chodzi o kod niezwiązany z UI
  • nie muszę błądzić po środowisku i języku, którego nie znam
  • to jest wg mnie przyszłość

Wady:

  • sporo (niezbyt ładnego swoją drogą) kodu java idzie do kosza
  • muszę zacząć od zera aplikację mobilną co oznacza, że praca nad rozwijaniem dotychczasowych funkcjonalności nie jest możliwa

Jak widać zalety przewyższają (ilościowo) wady. Trochę czasu stracę na robienie od początku tych funkcjonalności, które już napisałem w javie, ale później nowe rzeczy będą szły znacznie szybciej i będą lepiej wykonane – jestem o tym przekonany!

Podsumowanie

Czasu i pracy poświęconych na poznawanie i naukę Android Studio, javy i androida od jego naturalnego środowiska nie żałuję , wręcz przeciwnie – uważam to za świetny epizod. Mam teraz pewny ogląd na te technologie, a wcześniej nie miałem o nich zielonego pojęcia. Teraz czas na kolejny (mam nadzieję, że dłuższy) epizod – XAMARIN bejbe!

IMAG0008

A tu foto mojego miejsca w domu gdzie zaczynam naukę Xamarin’a 🙂

Pjona!

Lista ogłoszeń w aplikacji Mobile Second Hand – cz. 3.

Siemanko.

Dziś trzeci i zarazem ostatni wpis w tej serii dotyczącej tylko i wyłącznie części androidowej projektu, a konkretnie listy ogłoszeń. Sama lista nie jest jeszcze skończona i będę pracował nad nią nadal, ale dla zachowania parytetu między technologiami użytymi w projekcie staram się dzielić wpisy między owe technikalia. Zgodnie z zapowiedzią we wcześniejszym poście, dziś przybliżę nieco w jaki sposób ustalam lokalizację oraz jak pakuję zdjęcie z tablicy bajtów na widok. Z ogłoszeń parafialnych to wraz z nadejściem wiosny, mimo iż dzień dłuższy to czasu na klepanie w domu mam niestety mniej (sezon ligowy, sezon ogarniania podwórka, itp. ;)). Jednakże staram się jak mogę aby ciągnąć do przodu. Jako inną ciekawostkę przytoczę to, że zamówiłem sobie dwie książki do nauki androida. Jedna z serii „Head First” na temat programowania (tak na marginesie bardzo lubię tę serię i szczerze polecam) oraz jakąś na temat filozofii UI w aplikacjach androidowych. To tyle z ogłoszeń. Jedziemy z tematem.

GoogleApiClient i LocationManager

Z tego co wiem na tę chwilę to lokalizację telefonu można uzyskać dwojako. Za pomocą GoogleApiClient dostarczanego przez Google Play Services oraz za pomocą LocationManager wbudowanego w system androida. Jeśli chodzi o klienta google to jest on rekomendowany na stronie androida w sekcji treningu dotyczącej lokalizacji. Na pewno wymaga niewiele naszego kodu jednakże ja mam jakieś mieszane odczucia (może dlatego, że bawiłem się tym na samym początku gdy jeszcze moja znajomość androida była mikroskopijna?) bo miałem jakieś problemy z pobraniem lokalizacji. Szukając innych sposobów znalazłem właśnie rozwiązanie systemowe. Nie będę ukrywał, że implementacje jego wykorzystania zerżnąłem ze stacka, ale ważne że mniej więcej wiem o co kaman ;). W celu pobrania lokalizacji musimy w pliku AndroidManifest.xml dodać uses-permission dotyczące lokalizacji. „uses-permission” to wpisy, które informują system o tym do jakich modułów telefonu aplikacja ma mieć dostęp (sam to sobie tak tłumacze, ale może się mylę).

1

Jadąc od góry:

  • lokalizacja na podstawie sieci (stacje bazowe)
  • lokalizacja na podstawie sieci (stacje bazowe) i wi-fi
  • lokalizacja full wypas z powyższymi oraz z gps

Bez tych wpisów aplikacja się sypnie jeśli będziemy pytali o lokalizację. Ze względu na sporą ilość kodu serwisu GpsLocationService (tak go nazwałem) nie będą tutaj się więcej rozpisywał, ani wklejał screenów. Wszystko możesz oblukać w repo. Dodam tylko, że jest także obsłużona sytuacja gdy proszę o lokalizację, a tel ma wyłączony gps – wtedy wyświetlam monit z pytaniem czy user chce przejść do ustawień aby włączyć gps.

BitmapOperationService

Jak wiesz z poprzedniego wpisu zdjęcia ogłoszeń przesyłam jako tablice bajtów. Tę tablicę bajtów przerabiam na bitmapę w serwisie BitmapOperationService i łąduję ją do ViewImage poprzez setImageBitmap().

2

Jak widzisz oprócz tablicy bajtów (MainPhoto) do serwisu przekazuję także szerokość oraz wysokość ImageView, które znajduje się na fragmencie. Przekazuję wymiary po to aby wyskalować fotkę do wymiarów kontrolki. Jeśli jesteś ciekawy w jaki sposób to ponownie zapraszam do repo.

AdvertisementItemListActivityService

Po zmianie orientacji telefonu (nie, nie seksualnej) Activity czyli widok ulega zniszczeniu (nie jestem pewien czy całkowitemu) i zabawa zaczyna się od początku – czyli wywołanie metody onCreate(), ładowanie layout’u, kontrolek, danych itp. czyli wszystko zaczyna się od nowa w nowej konfiguracji urządzenia (czyli zmianie wymiarów ekranu). W przypadku mojej listy ogłoszeń wiązało się to z wysłaniem request’u do serwera, przeparsowaniu odpowiedzi na javove obiekty i ustawianiem adaptera. Ogólnie działo się to co przy pierwszym odpaleniu widoku z listą. Oczywiście nie było to przeze mnie pożądane działanie. Tuż przed zmianą konfiguracji urządzenia (czyli np. zmiana orientacji (też nie seksualnej) telefonu) można nadpisać metodę onSaveInstanceState(Bundle outState). Jeśli wpiszemy coś do obiektu Bundle poprzez jedną z jego metod put….(), możemy to potem wyciągnąć z Bundle przy starcie Activity w jej metodzie onCreate(Bundle savedInstanceState). Jednakże w ten sposób możemy wpisać tylko typy proste (string, int, bool, itp.). Dlatego tez zrobiłem sobie statyczny singleton AdvertisementItemListActivityService, w którym zapisuję listę ogłoszeń znajdującą się aktualnie w adapterze. W metodzie onCreate() odczytuje z serwisu zapisane obiekty i przekazuję je adapterowi. W ten sposób uniknąłem ponownego pobierania tych samych danych, a widok jest w tym samym miejscu listy ogłoszeń.

3

Metoda wywoływana tuz przed zmianą konfiguracji urządzenia

4

Kod w metodzie tworzącej activity. 

Podsumowanie

Zostało mi tu do ogarnięcia jeszcze page’owanie do infinity scrolla, który opisałem we wcześniejszym poście, oraz przejście do widoku detalu po kliknięciu na dane ogłoszenie. Oczywiście zostaje jeszcze kwestia ubrania tego wizualnie, ale najpierw ma działać, a później wyglądać. W następnych postach wracam do Asp.Net Core 1.0. O czym bedzie? No chyba coś o Entity Framework Core wypadałoby napisać 😉

Pjona!

Lista ogłoszeń w aplikacji Mobile Second Hand – cz. 2.

Siemanko.

Dziś druga część informacji na temat listy ogłoszeń w aplikacji mobilnej. Z poprzedniej części dowiedzieliście się, że skorzystałem z Fragment (List) – template’u  wbudowanego w Android Studio do generowania listy elementów widoku – który przerobiłem po swojemu. W tej części o tym jak go dostosowałem do swoich potrzeb.

Pobieranie ogłoszeń.

W metodzie onCreateView() activity (klasy) AdvertisementItemFragment będącej fragmentem (pojedyńczym elementem listy czyli ogłoszeniem) następuje wywołanie metody getAdvertisements(). Metoda ta, wywołuje serwis do pobierania ogłoszeń przekazując jego metodzie model ze współrzędnymi lokalizacji telefonu, z którego jest wysyłany request (o pobieraniu lokalizacji w następnym poście). Po co wysyłam współrzędne? To jest właśnie główny pomysł na tę aplikację – kojarzenie ze sobą ludzi w celu wymiany/sprzedaży ubrań w zadeklarowanym przez nich samych obszarze :). Wspomniany serwis z wykorzystaniem biblioteki Android Asynchronous Http Client (opisałem ją krótko w tym poście) uderza do WebApi w Asp.Net. W odpowiedzi dostaję jsona z listą ogłoszeń. Przy pomocy biblioteki Gson (którą również opisałem krótko w tym poście) parsuje stringi na javove obiekty ogłoszeń.

1

Parsowanie odpowiedzi (jsona) na obiekty javove z wykorzystaniem Gson.

Skrócony model ogłoszenia.

Aby nie pobierać całych ogłoszeń ze wszystkimi danymi, których i tak nie byłoby gdzie wyświetlić na liście (przy zachowaniu przejrzystości), zrobiłem skrócony model ogłoszenia do obsługi listy ogłoszeń.

2

Model ogłoszenia do wyświetlania na liście ogłoszeń

Modelu chyba nie muszę tłumaczyć poza polem Distance – jest to przybliżona odległość między użytkownikiem przeglądającym ogłoszenie, a autorem ogłoszenia w momencie jego utworzenia (wyliczona na serwerze). Zdjęcie przysyłam jako tablice bajtów (główne zdjęcia ogłoszeń, które mają być tzw. miniaturkami zmniejszam na serwerze w momencie zapisywania nowego ogłoszenia) i tu mam dla Was tipa co byście się nie musieli frustrować tak jak ja. Przy korzystaniu z Gsona’a do parsowania tablicy bajtów z jsona na obiekt javovy należy zadbać o to aby przy zwracaniu odpowiedzi z WebApi w Asp.Net skorzystać z JavaScriptSerializer i dane z kontrolera wypuścić jako string. Tablica bajtów zwracana przez wbudowany w Asp.Net Core 1.0 WebApi parser danych do jsona jest interpretowana (po stronie Androida) przez Gson jako ciąg znaków (string), a nie tablica bajtów.

Tak przygotowaną listę obiektów ładuję do ViewAdpatera.

3

Parsowanie odpowiedzi w formacie json na listę obiektów javovych oraz ustawianie ViewAdaptera .

Obsługa ViewAdaptera i customowy infinite scroll

ViewAdapter jest odpowiedzialny za wyświetlanie fragmentów. W metodzie onBindViewHolder(), która jest wywoływana tuż przed każdym wyświetleniem fragmentu, ustawiam wartości poszczególnych kontrolek widoku fragmentu odpowiednimi wartościami z modelu ogłoszenia.

4

Bindowanie danych z modelu ogłoszeń do kontrolek widoku fragmentu.

Holder to kasa, która trzyma referencje do kontrolek znajdujących się na widoku fragmentu. Jeden fragment na liście – jeden holder. Na powyższym screenie tuż przed zamykającym nawiasem klamrowym widać wywołanie metody:

checkIfThisItemIsLastAndRaiseOnInfinityScroll(holder, position)

Jest to mój pomysł na infinite scroll. W metodzie tej, sprawdzam index bindowanego obiektu ogłoszenia i porównuje go z długością listy wszystkich obiektów aktualnie znajdujących się w ViewAdapter’ze. Jeśli index jest ostatni to wywołuje odpowiednią metodę listenera, która odpala pobieranie danych.

5

Moja implementacji infinite scroll’a w ViewAdapterze.

Jak widać, zmienne lastHolder i lastPosition przechowują dane ostatnich elementów przed wywołaniem infinite scrolla, w celu doklejenia nowych danych do istniejącej listy bez zmiany widoku.

Screenshot_2016-03-23-18-16-03.png

Po doładowaniu danych użytkownik przegląda listę dalej od tego samego miejsca, w którym zaczęło się doładowywanie. Oczywiście będę musiał dopisać jakąś logikę dotyczącą pobierania danych wywołanych przez zdarzenia infinite scroll’a (jakiś paging itp.), ale to przecież się wciągnie noskiem 🙂

W następnej i ostatniej części opiszę co nieco jak ustalam lokalizację oraz jak ładuję fotkę z tablicy bajtów na widok.

Także Stej In Tacz!

Pjona!