Prosta lista zakupów w twoim telefonie z Google Glide

Wraz z wejściem do codziennego użytku smartfonów pojawiła się alternatywa do zapisanych drobnym maczkiem karteluszek. Mowa oczywiście o aplikacjach, dzięki którym listę zakupów zawsze możemy mieć przy sobie. Dużą zaletą takich aplikacji jest to, że listy mogą być współdzielone z naszymi bliskimi oraz edytowane w czasie rzeczywistym. Podczas gdy my siedzimy sobie w pracy, nasza druga połowa na smartfonie tworzy listę zakupów spożywczych, którą następnie nam udostępnia. Do nas należy tylko pojechać do sklepu i kupić wymienione produkty. Dodatkowy plus: nie musimy silić się na odszyfrowanie cudzych zapisków.

Niestety pobierając i instalując aplikację na swoim telefonie musimy udzielić zgody na dostęp do zasobów na naszym telefonie. Może to być dostęp do naszej listy kontaktów, dostęp do dokładnej lokalizacji, możliwość modyfikacji zawartości pamięci przez program czy ustawiania alarmu. O ile niektóre uprawnień są niezbędne do korzystania z aplikacji, o tyle co do niektórych można mieć duże wątpliwości.

Jeżeli nie interesują cię bogate w funkcje (z których w większości i tak nie skorzystasz) aplikacje, a zależy ci na prostocie i funkcjonalności zachęcam to utworzenia własnej aplikacji z Google Glide.

Aplikacja do listy zakupów – krok po kroku

Dla tych, którzy jeszcze nie wiedzą czym są Glide Apps polecam mój wcześniejszy post.

Pierwszym krokiem do naszej własnej aplikacji do zarządzania listą zakupów będzie utworzenie arkusza Google Sheet – nazwijmy go Lista zakupów. Będzie one stanowić miejsce, w którym przechowywane będą dane naszej aplikacji.

W arkuszy potrzebować będziemy 2 kart. Pierwszą kartę nazywamy lista zakupów, drugą lista sklepów.

Same nagłówki do testowania nie wystarczą. Warto uzupełnić karty o przykładowe dane. W moim przypadku obie karty wyglądają tak:

Pora przejść do tworzenia aplikacji

Przechodzimy na stronę https://go.glideapps.com/ i logujemy się naszym kontem Google. Wita nas ekran, na którym widnieją dwa kafelki – Pick Google Sheet (z ang. wybierz arkusz Google) oraz Browse templates (z ang. przeglądaj szablony).

Ponieważ mamy już przygotowany arkusz z danymi, wybieramy pierwszą opcję. Następnie odszukujemy na dysku arkusz Lista zakupów i klikamy Select.

Aplikacja pobierze dane z arkusza i na jego podstawie utworzy dwie zakładki. Naszym zadaniem będzie teraz dostosowanie widoku dla użytkownika.

Po prawej stronie znajduje się cały szereg właściwości i funkcjonalności, które możemy wprowadzić do naszej prostej aplikacji.

Z prawego panelu w zakładce Layout wybieramy Style -> Checklist. Możemy zaobserwować, że widok naszej aplikacji do listy zakupów uległ zmianie. Teraz mamy piękną listę produktów, które możemy zaznaczać i odznaczać.

Warto upewnić się, czy pola Title, Details i Check Value wskazują na właściwe kolumny w naszym arkuszu. Jeżeli nagłówki w waszych arkuszach wyglądają tak jak w moim nie powinno być z tym problemów.

Nasza lista jest gotowa, ale przydałaby się jeszcze możliwość dodania i usuwania z niej produktów.

Dodawanie produktów

Przechodzimy na zakładkę Add (panel po prawej) i zaznaczamy check box Allow users to add items. Pojawiają nam się dodatkowe opcje pokazujące jakie dane użytkownik może dodać. Nie musimy tutaj dokonywać żadnych zmian.

Możliwość dodania elementów na danym widoku symbolizuje ikona plusa w prawym górny rogu.

Usuwanie produktów z listy zakupowej

Domyślnie w aplikacji klikając w dany produkt, możemy przejść do widoku szczegółowego. Tam też można będzie dodać funkcjonalność umożliwiającą edycję lub usunięcie produktu.

Przechodzimy na widok szczegółowy, klikając w dowolny produkt. Następnie w zakładce Edit zaznaczamy checkbox Allow user to edit. W pojawiających się dodatkowych informacjach zaznaczamy też checkbox Allow user to delete. Tak jak w przypadku dodawania produktów, także tutaj mamy możliwość ustawienia, jakie dane podlegać mogą modyfikacji.

Modyfikacja widoku szczegółowego dla produktu

Glide domyślnie w widoku szczegółowym wyświetla wszystkie dane zawarte w karcie. Nie zawsze jednak chcemy, aby tak było. Będąc w widoku szczegółowym w zakładce Layout możemy dostosować wygląd do naszych potrzeb.

Najeżdżając myszką na elementy w sekcji Components w widoku aplikacji możemy zaobserwować zielone koło wskazujące, który komponent będzie modyfikowany. Kliknięcie w niego powoduje przejście do jego edycji. Duży niebieski plus w prawym górnym rogu pozwala na dodanie dodatkowych elementów. Polecam poeksperymentować z różnymi ustawieniami. U mnie końcowy efekt wygląda tak:

Przechodzimy teraz do edycji zakładki sklepów. Tak jak w przypadku zakładki Lista zakupów także tutaj Glide zaimportował domyślny widok. Warto więc go trochę podrasować. W pierwszej kolejności w panelu po prawej stronie w zakładce Layout wybieramy styl naszego widoku. Najlepszy będzie List lub Tiles (ja wybrałem Tiles).

Następnie w sekcji Data z pozycji Details usuwamy dane Lokalizacja (z listy wybieramy „-„).

W sekcji Design możemy zadecydować, jak będą wyglądały nasze kafelki. Tutaj zachęcam do samodzielnego testowania.

Oto jak wygląda moja lista sklepów:

Klikając kafelek zostajemy przeniesieni do widoku szczegółowego sklepu. Pora popracować nad jego wyglądem. Zasada edycji jest taka sama, jak w przypadku produktów.

Dzięki temu, że w jednej z kolumn dodaliśmy współrzędne geograficzne sklepu, teraz do naszej aplikacji możemy dodać mapę.

Klikamy w plus w prawym górnym rogu i z dostępnych opcji wybieramy Map. W sekcji Data zmieniamy Address na Lokalizacja. Zoom zostawiamy na maksymalnym przybliżeniu. Klikając strzałkę < przy nagłówku Components kończymy edycję elementu. Obecny widok szczegółowy sklepu:

Czegoś jednak brakuje. Czy nie byłoby fajnie wybierając sklep widzieć, jakie produkty musimy w nim kupić?

Oczywiście, że tak. Aby było to możliwe musimy połączyć dane między kartami arkusza Google.

Po lewej stronie ekranu znajduje się niewielki sidebar z ikonkami. Pierwsza z nich, od której zaczęliśmy to widok naszej aplikacji. Dokonujemy w niej zmian wizualnych i dodajemy funkcjonalności. Druga to menu zakładek. Możemy tam zmienić ikonki oraz nazwy zakładek.

Trzecia – ta która nas w tej chwili interesuje – to Dane. Po kliknięciu w ikonę naszym oczom ukazują się tabelki łudząco podobne do tych z arkusza Google.

Łączenia danych dokonujemy w prosty sposób.

Klikamy w Add Column w prawym górnym rogu ekranu. Pojawia się dodatkowa kolumna. Jako Label wpisujemy Relacja lub dowolny inny tekst. Jako typ kolumny pozostawiamy Relation. Ważne są natomiast ustawienia (Configuration).

W pierwszej pozycji (Relate to items where the value in) ustawiamy element, który jest wspólny dla obu tabel. W naszym przypadku będzie to Sklep.

Druga pozycja (Matches the value in) wskazuje w jakiej tabeli Glide będzie szukał powiązania. Ustawiamy tutaj tabelę Lista sklepów ze wskazaniem na kolumnę Sklep. I klikamy Done.

Możemy zauważyć, że Glide już skojarzył produkty z danym sklepem.

Podobnie postępujemy dla drugiej tabeli, tylko że tutaj zaznaczamy dodatkowo opcję Match multiple. Dzięki temu do jednego sklepu będzie można przyporządkować więcej niż jeden produkt.

Pora na pokazanie listy dla wybranego sklepu. Przechodzimy w lewym sidebarze do widoku aplikacji (pierwsza ikona), a następnie do widoku szczegółowego sklepu.

Dodajemy nowy komponent (plusik w prawym górnym rogu). Z dostępnych opcji wybieramy Inline list. Zmieniamy styl na Checklist a w polu Source wybieramy utworzoną poprzednio tabelę z relacją. Tabela ta, jakkolwiek ją nazwaliście, będzie mieć ikonę przedstawiającą dwa prostokąty ze strzałką pośrodku.

Voilà. Nasza pierwsza aplikacja „Lista zakupów” niemal gotowa.

W panelu po lewej stronie są jeszcze ikony pomocne przy tworzeniu aplikacji.

Ikona czwarta – Preview as – umożliwia sprawdzenie jak dana aplikacja wyglądać będzie na telefonach z systemem Android lub iOS.

Ikona piąta – Settings – tutaj dokonujemy zmiany ikony widocznej na naszym telefonie, koloru dominującego oraz motywu. Opcji do wyboru jest kilka. Można eksperymentować do woli. Ja osobiście zauważam jeden duży minus. Jeżeli wybierzemy kolor dominujący, pojawi się on też na ikonie, co wg. mnie nie wygląda dobrze. No chyba że wybierzemy ascetyczny Theme i wtedy kolor dominujący nie ma znaczenia.

Ustawienia aplikacji mają jeszcze dwie kolejne zakładki – General i Privacy. W zakładce General możemy wybrać nazwę dla naszego programu, dodać krótki opis oraz podać autora. Zakładka Privacy zawiera ustawienia prywatności aplikacji, czyli na jakich zasadach może ona być udostępniania.

Szósta ikona – Edit sheet – otwiera arkusz kalkulacyjny aplikacji.

Siódma ikona – Reload sheet – odświeża dane w aplikacji.

Jeżeli uznamy naszą aplikację za gotową, aby pokazać ją światu, musimy ją najpierw opublikować poprzez kliknięcie w Publish w górnej części ekranu. Po akceptacji zobaczymy kod QR, który możemy zeskanować i pobrać gotową aplikację, skopiować link i wysłać na pocztę lub przesłać na nasz telefon podając jego numer.

Jak pisałem w poprzednim artykule nie możemy udostępnić naszej aplikacji w sklepach Google Play i App Store. Aby udostępnić ją rodzinie lub znajomym należy podać im adres URL lub kod QR do zeskanowania.

Jeżeli jesteście ciekawi, jak wygląda apka z listą zakupów przygotowana wg tego kursu wystarczy, że klikniecie w ten link -> Pobierz

Przygotowanie własnej aplikacji (np. do tworzenia list zakupów), którą będziecie mogli dzielić z innymi jest banalnie proste. Wystarczy trochę samozaparcia, pomysł i odrobina wolnego czasu. Mam nadzieję, że ten krótki poradnik pomoże wam postawić pierwsze kroki w usłudze Google Glide.

Jeżeli będziecie mili jakieś pytania lub sugestię to jestem dostępny na jednym z podanych w sekcji kontakt sposobów. Znajdźcie mnie na portalach społecznościowych i napiszcie, jak podobał wam się ten krótki przewodnik.