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!

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s