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!

Reklamy

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. 1.

Siemanko.

Dzisiaj znów wracamy do części androidowej projektu. Ostatnio skupiłem się nad zwróceniem z serwera listy ogłoszeń z konkretnego obszaru wokół obecnej lokalizacji użytkownika (w sumie core aplikacji), przeparsowaniu jsona na Javove obiekty ogłoszeń i w końcu wyświetlenie ich na ekranie. Oto pierwszy „ładniejszy” efekt pracy. W tej serii (dwa lub trzy wpisy) postów skupię się tylko i wyłącznie nad częścią androidową. Pobieranie ogłoszeń z bazy oraz zwracanie ich z serwera opiszę w kolejnej serii.

WP_20160323_18_16_16_Pro

Zdjęcie prezentuje odpaloną aplikację na telefonie oraz rozlaną kawę na podkładko/notatniku.

Fragment i ViewAdapter.

Wiadomym dla mnie było, że ogłoszenia muszą być wyświetlane na scroll’owalnej liście. Tylko jak się do tego zabrać? Jak to jak?! Jak każdy szanujący się Full StackOverflow Developer zacząłem od grzebania w internecie 😉 Szybkie przetwarzanie informacji i już wiadomo, że do tego służą m.in Fragmenty i ViewAdaptery.

Fragment, to jak sama nazwa wskazuje, osobny byt reprezentujący jakiś element.

1

Screen z designera w Android Studio.

Na powyższym zdjęciu widoczne jest Activity (dziedziczące po Fragment) zawierające layout do prezentowania jednego ogłoszenia. W połączeniu z ViewAdapterem tworzy się lista takich fragmentów.

2

Screen z designera w Android Studio.

Ogólnie rzecz ujmując ViewAdapter zajmuje się wyświetlaniem elementów z kolekcji, którą mu przekażemy.

W najprostszy sposób taką listę można zrobić korzystając z gotowca wbudowanego w Android Studio (kolejny raz propsuje Android Studio i jego template’y).

3

Dodawanie template’u listy fragmentów do projektu w Android Studio.

Po wybraniu Fragment (List) do projektu wpadają dwa (dwie?) Activity (pliki .java z kodem i .xml z widokami), oraz klasa DummyContent.java, której obiekty będą wyświetlane na liście. Oczywiście template generuje dużo kodu do tworzenia fake’owych (DummyContent) obiektów, ładowania ich do adaptera, wyświetlania itp.. Jest to super punkt wyjścia do własnej implementacji. Ja oczywiście sporo zbędnego kodu pokasowałem i zaimplementowałem swoje rozwiązanie. Jakie? O tym w następnej części już w niedzielę.

Na koniec jeszcze jeden screen apki z telefonu:

Screenshot_2016-03-23-18-15-43

Screen aplikacji z małą czarną:)

Pjona!

 

MobileSecondHand – pierwsze widoki i funkcjonalności związane z autentykacją.

Siemanko.

Niedzielny wieczór więc pora skończyć kodzenie na dziś i naklepać trochę tekstu, którego nie da się skompilować 😉

Dziś trochę o starcie aplikacji i związanymi z tym faktem działaniami. Na zdjęciu wyżej widać ekran startowy. Prosty widok fullscreen z polem tekstowym i spinnerem, który ma dla bajeru pokazywać, że coś się w tle dzieje 🙂 Jako, że założenia aplikacji nie uwzględniają użytkowników anonimowych (żeby coś wystawić, lub żeby się skontaktować z właścicielem ogłoszenia to i tak trzeba będzie mieć konto) dlatego na dzień dobry po uruchomieni apki sprawdzam czy user jest zalogowany.

1

Autentykacja bazuje na tokenie, dlatego :

  • sprawdzam czy aplikacja ma zapisane w czymś co się nazywa SharedPreferences (to jest jakieś miejsce w pamięci przydzielone przez Android dla każdej z aplikacji – a przynajmniej tak mi się wydaje :)). Jest to kolekcja elementów klucz – wartość, czyli słownik. Jeśli wartość wyciągnięta z tego słownika jest różna od nulla tzn., że coś tu było działane i user może być zalogowany, ale token może być już przeterminowany dlatego uderzam na serwer.
  • jeśli nie ma w SharedPreferences tokena tzn., że jest to pierwsze uruchomienie apki po zainstalowaniu. MobileSecondHand – jak każda szanująca się apka 😉 – umożliwia zalogowanie przez facebook’a. Do tego wykorzystałem po stronie androida gotową biblioteczkę przygotowaną oczywiście przez facebook’a. Sprawdzam czy user logował się już do apki przez fejsa co sprowadza się do poproszenia o AccesToken. Jeśli jest różny od nulla to idzie na serwer i tam dokonuje się cała robota, a zwracany jest świeżutki bearer tokenik, który ląduje we wcześniej wspomnianych SharedPreferences . Jeśli jest nullem to ręcznie zwracam status 401 do activity, w którym wszystko się zaczęło, co jest informacją, że user musi się zalogować.2

WP_20160313_17_14_17_Pro

Wyżej widok logowania. Jak widać można to zrobić dwojako. Loginem i hasłem lub przez facebook’a. Jeśli standardowo to po prostu na serwer idzie POSTem model do logowania (już za chwilę opiszę jak obsługuje komunikację z serwerem). Jeśli user nie ma jeszcze konta i nie ma też facebook’a, może przejść do prostego widoku rejestracji.

WP_20160313_17_15_23_Pro

Tutaj to samo. Wypełnić, kliknąć i idzie model na serwer, a wraca token autentykacji.

Jeśli jednak w sytuacji gdy user nie ma konta, ale ma facebook’a i chce się przez niego lognąć (co jest jak wszyscy wiemy bardzo wygodne na mobilnych urządzeniach) to wystarczy, że kliknie na button, który jest także przygotowany przez facebook’a. Obsłużenie logowanie przez fejsa sprowadza się do zaimplementowania callbacka do buttona logowania z facebook’iem.

3.png

Resztę wykona za nas kod z biblioteczki facebooka.

WP_20160313_17_15_45_Pro

Jeśli wszystko pójdzie ok to mamy token od facebooka, który ja wysyłam na serwer i rejestruje/loguje usera oraz zwracam mój token autentykacji.

Android Asynchronous Http Client

Jako, ze na głównym wątku jedzie UI, do wykonywania czasochłonnych operacji trzeba tworzyć i wykorzystywać inne wątki. Niewątpliwie takimi operacjami są requesty do serwera. Znalazłem do tego świetną bibliotekę (tutaj). Jest bardzo prosta w użyciu dzięki dobrej dokumentacji. Wysłanie requesta sprowadza się do podania urla, i danych oraz obsłużenia zdarzeń po skończonym requeście.

4

Trzeba tylko mieć na uwadze to, że onFailure() nie będzie wywołane tylko wtedy gdy z serwera dostaniemy błąd. onFailure()  jest wywoływane gdy nie uda się odpowiedzi przerobić na obiekt JSON (w przypadku widocznym na zdjęciu, ale biblioteka umożliwia castowanie na wiele innych typów) choć status odpowiedzi może być 200.

GSON

GSON to biblioteczka to konwertowania obiektów Javovych na obiekty JSON oraz w druga stronę. Tutaj jest do niej link. Wystarczy podać typ obiektu, na który chcemy przerobić JSONa, lub wywołać toJson() jeśli chcemy obiekt Javovy przerobić na JSONa

56

Podsumowanie

Od autentykacji zacząłem projekt, także już kilkanaście albo nawet więcej godzin przy tym spędziłem. Mam na myśli oczywiście część androidową. Wygląd apki jak na razie jest prosty, bez fajerwerków. Skupiam się na funkcjonalnościach, a wygląd zostawię na koniec. W środę opiszę autentykację po stronie Asp.Net.

Pjona!

Start #dajsiepoznac 2016 – opis projektu „Mobile Second Hand”.

Siemanko.

Dziś wystartował konkurs #dajsiepoznac także pora na kilka słów o tym co zamierzam robić przez najbliższy czas. Mam nadzieję, że uda mi się wygospodarować wolnego czasu na tyle aby mieć o czym pisać dwa razy w tygodniu do połowy maja.

Projekt ma na celu stworzenie aplikacji mobilnej, która ma służyć do kojarzenia ze sobą użytkowników w zadanym przez nich obszarze w celu pozbycia się/nabycia w maksymalnie uproszczony sposób starych/niepotrzebnych/nietrafionych z kolorem, rozmiarem itp. ubrań czyt. odzieży. Aplikacja będzie skierowana głównie do kobiet, które uwielbiają kupować lub zdobywać nowe (w ich garderobie) ciuchy jednocześnie nie mając co zrobić z rzeczami, które się Im już znudziły. Oczywiście jest mnóstwo platform do sprzedania takich niepotrzebnych rzeczy jednak wiąże się to najczęściej z :

(dla chcącej się pozbyć)

  • rejestracją
  • wypełnianiem dość sporych formularzy z wymaganymi polami
  • robieniem zdjęć, które najczęściej następnie należy zgrać na kompa
  • używane rzeczy nie cieszą się zbyt dużym powodzeniem (najczęściej kupują je kobiety mające fioła na punkcie second handów)
  • przy ew. sprzedaży trzeba zapakować przesyłkę
  • udać się na pocztę lub umówić z kurierem (trzeba znaleźć czas najczęściej w godzinach pracy)
  • czekać na zwrot pobrania
  • ogólnie sporo roboty i zachodu

(dla chcącej coś kupić)

  • rejestracją
  • śledzeniem aukcji/ogłoszeń
  • wysyłaniem zapytań do sprzedającego, na których odpowiedź trzeba czekać
  • brak pewności czy to co na zdjęciu wydaje się być ok w realu też jest ok
  • brak możliwości przymierzenia
  • oczekiwaniem na przesyłkę

 

A gdyby tak:

(dla chcącej się pozbyć)

wyciągnąć telefon, zrobić zdjęcie np. sukienki, której chcemy się pozbyć, wpisać np. „Sukienka czerwona rozm. 38 raz użyta. Sprzedam lub zamienię na inną” i kliknąć OK. Po pewnym czasie dostajemy powiadomienie, że użytkowniczka XYZ jest zainteresowana i chce nawiązać kontakt. Klikamy ok i otwiera nam się mini czat. Użytkowniczka oznajmia, że znajduje się od sprzedającej 2km więc za 15 min. mogą się umówić na mieście. Tak też się dzieje i dokonują transakcji. Obie użytkowniczki są zadowolone 🙂

(dla chcącej coś kupić)

idziemy ulicą i dostajemy powiadomienie, że w odległości ok 2 km jest do kupienia jakiś ciuch. Otwieramy ogłoszenie, oglądamy zdjęcia i klikamy nawiąż kontakt. Otwiera nam się okno mini czatu prosimy sprzedającego o nr telefonu i uzgadniamy miejsce gdzie możemy obejrzeć ciuch i ew. dokonać transakcji. Obie użytkowniczki są zadowolone 🙂

 

Teraz trochę o technologiach:

Java_logo

android

 

Jak widać po logach apka jest pisana na androida w Android Studio. Jestem całkowicie zielony jeśli chodzi o Javę i w ogóle development mobilny no ale to jest główny powód tego projektu – chcę się czegoś nowego nauczyć 🙂 Apka będzie korzystać, z internetu, lokalizacji i multimediów.

aspnetcore

Backendem jest nowe ASP.NET Core czyli jeszcze do niedawna nowe ASP.NET5. REST API, dostęp do danych i cała logika. Tu już czuję się znacznie mocniej ponieważ jestem .NETowcem, ale oczywiście też mam zamiar wielu nowych rzeczy w nowym frameworku się nauczyć.

maxresdefault

Jak starczy czasu to chciałbym też nieco liznąć tematu Machine Learning. W tym tez jestem zielony ale mam nadzieję, że się to zmieni. A czego maszyna miałaby się w tym projekcie uczyć? Jakie ciuchy, jakie kolory i rozmiary itp. najczęściej i najchętniej dany użytkownik przegląda, i na tej podstawie wyświetlać mu spersonalizowane reklamy.

 

To by było na tyle jeśli chodzi o wstęp. W następnych postach będę pisał co i jak zrobiłem oraz jaki będzie dalszy plan zadań.

Jak dotąd zrobiłem kilka bardzo prostych widoków w androidzie na potrzeby logowania i autentykacji, wysyłanie/odbieranie requestow oraz proces autentykacji w ASP.NET obsługujący logowanie przez facebook’a.

Pjona!