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:
-
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.
-
Opcjonalny ekran wyszukiwania adresu korzystający z autouzupełniania miejsc Google.
-
Kategorie pozwalają użytkownikowi wybrać jedną z predefiniowanych kategorii restauracji do znalezienia.
-
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:
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:
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".
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.
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:
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!
Możesz sprawdzić ostateczną wersję kodu tutaj.
Autor: JCD
Stale łączymy metody kreatywne z systematycznym, badawczym podejściem, przekonani, że jedynie przez dogłębną analizę i zrozumienie specyfiki wyzwań, jesteśmy w stanie w pełni współpracować z naszymi klientami w celu kreowania innowacyjnych rozwiązań. Te rozwiązania nie tylko ulepszają doświadczenie użytkowników, ale również zapewniają naszym klientom strategiczną przewagę na rynku. Nasze procesy projektowe są zatem oparte na aktywnym słuchaniu, szczegółowej analizie i ciągłym dialogu z klientami. W ten sposób nieustannie pracujemy na rzecz tworzenia nie tylko technologii, ale także wartości, które wyznaczają nowe standardy w cyfrowym krajobrazie biznesu.
Newsletter
Zero spamu - tylko wartościowe treści!:
