Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Rozumiem
Jakub Pawlak / 22.10.2018

Restaurant Finder - Część 1

Jest wiele powodów, żeby zacząć używać NativeScript do pisania aplikacji mobilnych. W poprzednim artykule wyjaśniłem dlaczego zdecydowaliśmy się korzystać z {N} w naszych projektach, teraz nadszedł czas aby zabrać was w małą podróż - ale bez obaw, będę waszym przewodnikiem. Pokażę jak od zera stworzyć prostą aplikację mobilną krok po kroku.

 

Niedawno, na potrzeby tego samouczka, opracowaliśmy przykładową aplikację o nazwie Restaurant Finder. Celem aplikacji jest znalezienie najbliższej restauracji w wybranej lokalizacji w danej kategorii. Oczywiście nie jest ona konkurencją dla aplikacji Mapy Google, jest jedynie pokazem możliwości, jakie daje framework NativeScript.

Aplikacja składa się z czterech ekranów:

  1. Ekran główny, na którym użytkownik może wybrać lokalizację do dalszego wyszukiwania. Aplikacja prosi o pozwolenie na lokalizację. Po zezwoleniu pojawiają się dwa przyciski - przekierowanie do ekranu kategorii lub do ekranu wyszukiwania miejsca.

  2. Opcjonalny ekran wyszukiwania adresu korzystający z autouzupełniania miejsc Google.

  3. Kategorie pozwalają użytkownikowi wybrać jedną z predefiniowanych kategorii restauracji do znalezienia.

  4. Strona wyników przedstawia mapę z trasą od lokalizacji użytkownika do znalezionej restauracji z dodatkowymi informacjami o miejscu.

W tym tutorialu przedstawię pierwszy, prosty ekran z małą animacją pojawiania się treści na ekranie. Funkcja lokalizacji zostanie omówiona w następnym samodzielnym samouczku. Aby uprościć start, skorzystam z NativeScript Playground. Strona ta pozwala nowym programistom na natychmiastowe uruchomienie aplikacji bez konieczności instalowania lokalnego środowiska programistycznego. Kolejną ogromną zaletą tej platformy, szczególnie dla użytkowników Windows / Linux, jest możliwość przetestowania aplikacji na iOS, funkcji niedostępnej lokalnie.


Struktura widoku

Wejdź na stronę NativeScript Playground i utwórz nowy projekt NativeScript + Angular. W lewym panelu bocznym, widoczna jest podstawowa struktura aplikacji. Będziemy używać domyślnego komponentu home. Efekt końcowy będzie wyglądał następująco:
 

restaurant_finder

 

Usuń domyślne znaczniki szablonu - ActionBar i ScrollView z GridLayout. W naszym układzie będziemy używać tylko jednego kontenera i będzie to pozostały GridLayout (omówiłem kilka dobrych praktyk dotyczących tworzenia layoutu tutaj). Taki sam efekt można osiągnąć używając kontenera typu Flexbox i zachęcam do dalszych eksperymentów z jego użyciem.

Nasz widok ma obraz w tle, etykietę i przycisk z małą ikoną. Etykieta jest rozłożona na trzy wiersze tekstu. Masz tu 3 opcje do wyboru - użyj trzech etykiet, zakodowanego znaku nowej linii ‘
‘ (nie zapomnij o średniku!) lub FormattedString. Najlepszą opcją zapewniającą elastyczność w przyszłych tłumaczeniach na różne języki będzie użycie zakodowanego znaku nowej linii. Nie zapomnij ustawić wartości atrybutu textWrap elementu Label na true. Pod etykietą dodaj komponent Button i dodaj odpowiednią wartość tekstową. Mamy zatem dwa rzędy, które powinny zajmować minimalną przestrzeń. Dodaj dwie wartości "auto" do atrybutu ‘rows’ kontenera GridLayout i przypisz indeksy wierszy w naszych elementach. Aby je ustawić na środku ekranu, ustaw atrybut verticalAlignment na ‘center’.


Po dodaniu kilku domyślnych klas zawartych w CSSowym motywie NativeScript, ekran powinien wyglądać tak:
 

restaurant_finder_basic

 

Twój projekt w Playground powinien wyglądać tak.


Do ikony w naszym przycisku użyjemy czcionki z ikonami. FormattedString jest najlepszym rozwiązaniem dla tego rodzaju zadań. Jest to kontener wewnątrz etykiet, pól tekstowych i przycisków, który zawiera elementy typu span. Daje nam to możliwość korzystania z różnych klas dla naszych fragmentów tekstowych. Jeśli chcesz dowiedzieć się więcej o stosowaniu czcionek w {N}, sprawdź świetny artykuł na ten temat na oficjalnym blogu NativeScript.

Usuń atrybut ‘text’ z elementu Button i dodaj znacznik FormattedString między tagiem otwierającym i zamykającym znacznik Button, tak jak w przypadku layoutów.


Następnie utwórz nowy folder w menu struktury projektu po lewej stronie o nazwie "fonts". W tym celu umieść kursor nad folderem ‘app’, kliknij przycisk z trzema kropkami po prawej stronie i kliknij "Add folder".
 

more


Zrób to samo dla nowo utworzonego folderu, ale tym razem z menu wybierz "Upload resources". Ze strony FontAwesome pobierz czcionkę z ikonami. W pobranym i rozpakowanym folderze otwórz folder "webfonts", znajdź plik .ttf i prześlij go do swojego Playground (w moim projekcie fa-regular-400.ttf nie działa poprawnie, zamiast niego użyj fa-solid-900.ttf). Chcemy mieć dostęp do naszej nowej czcionki w całym projekcie dlatego dodajmy nową klasę do app.css.

Aby wykończyć wygląd ekranu, dodaj margines do etykiety za pomocą klasy "m-x-16" i dodaj kilka stylów do przycisku.

Zdjęcie w tle

Przygotowałem fikuśny obrazek tła z pomocą darmowych ikon z flaticon, aby nadać aplikacji ładny wygląd. Możesz pobrać obraz poniżej i wstawić go bezpośrednio do projektu w folderze ‘app’ lub utworzyć dla niego folder.
 

bg

 

Przy obecnej strukturze naszego widoku nie możemy po prostu dodać obrazu w tle. GridLayout zajmuje tylko minimalną ilość miejsca na ekranie. Aby to zmienić, możemy dodać dwa dodatkowe wiersze zajmujące maksymalną przestrzeń w następujący sposób: rows = "*, auto, auto, *". Zauważ, że verticalAlignment jest teraz zbędny.


Umieść element typu ‘Image’ przed ‘Label’. Kolejność ma znaczenie - szczególnie w iOS. Jeśli umieścimy obraz poniżej przycisku, zakryje on inne komponenty. Pamiętaj, aby ustawić indeks wiersza, właściwość rowSpan, a żeby pokryć całą widoczną przestrzeń, dodaj atrybut stretch="aspectFill".

Jeśli testujesz aplikację na iPhonie, układ wygląda na gotowy, ale na Androidzie system dodaje domyślny ActionBar na górze ekranu. Aby go usunąć przejdź do home.component.ts, importuj element Page z tns-core-modules/ui/page, wstrzyknij Page w konstruktorze i ustaw jego właściwość actionBarHidden na true.

Możesz sprawdzić aktualny stan projektu tutaj. Twój ekran powinien wyglądać teraz tak:

 

restaurant_finder_css

Wykończenie


Aby ukończyć ten samouczek, dodajmy ostatni akcent - animację pojawiania się treści w CSS. Dodaj klasę "home-page-content" do GridLayout.


Ponieważ animacja będzie tylko w tym komponencie, możemy zamknąć ją wewnątrz modułu ‘home’, co oznacza, że zdefiniujemy klasę CSS w pliku home.component.css. Zastąp bieżącą zawartość CSS tego pliku poniższym kodem:


W powyższym fragmencie zdefiniowaliśmy naszą klasę dodającą do danego elementu animację zdefiniowaną poniżej w elemencie @keyframes. Następnie zdefiniowaliśmy niektóre opcje odtwarzania animacji, takie jak czas jej trwania lub liczba powtórzeń. Definicja @keyframes naszej animacji opisuje niektóre właściwości klasy, które płynnie zmieniają się w czasie. Zapisz projekt i powiedz "Wow" na widok swojej aplikacji mobilnej!

 

restaurant_finder

 


Możesz sprawdzić ostateczną wersję kodu tutaj.

Udostępnij:
Jakub Pawlak
Programista aplikacji mobilnych

Programista mobile i front-end. Po godzinach saksofonista i kitesurfer.

Stwórzmy coś niesamowitego, poznaj nas i zatrudnij.

Wyceń projekt