Budowanie backendless aplikacji przy użyciu Angular & Appwrite

We współczesnym rozwoju aplikacji internetowych korzystanie z platformy typu backend-as-a-service (BaaS, często nazywanej „backendless”), takiej jak Appwrite, pozwala programistom skupić się bardziej na dostarczeniu rozwiązań wspierających user experience, jednocześnie minimalizując złożoność backendu. Ten poradnik pokazuje, jak zbudować aplikację bez backendu, używając Angular i Appwrite.

Czym jest Appwrite?

Appwrite to open-source’owy serwer backendowy zaprojektowany, aby przyspieszyć i zabezpieczyć rozwój aplikacji internetowych, mobilnych oraz Flutter. Dzięki Appwrite możesz zarządzać uwierzytelnianiem, bazą danych, przechowywaniem plików i wieloma innymi funkcjami bez konieczności pisania rozbudowanego kodu po stronie serwera. Modułowa architektura Appwrite i ekosystem napędzany przez społeczność sprawiają, że jest on niezwykle elastyczny i dostosowany do różnych przypadków użycia.

Krok 1: Skonfiguruj swój serwer z Appwrite

Możesz stworzyć prywatny serwer i przejść przez proces instalacji samodzielnie lub, dla wygody, skorzystać z instalacji za pomocą jednego kliknięcia. Obecnie niektórzy dostawcy, tacy jak DigitalOcean, Gitpod, Akamai Compute i AWS Marketplace, oferują łatwą instalację Appwrite.

Gitpod jest darmowy do rozpoczęcia pracy i zapewnia 50 godzin darmowego korzystania miesięcznie bez konieczności podawania danych karty kredytowej. To wystarczająco dużo, aby przetestować Appwrite. Po zalogowaniu się na swoje konto GitHub proces instalacji rozpocznie się w kilku kliknięciach i zostanie ukończony w ciągu kilku minut.

Jeśli wolisz, możesz użyć profesjonalnego IDE zainstalowanego na swoim urządzeniu lub skorzystać z chmurowego edytora kodu Gitpod. Aby to zrobić, kliknij przycisk Więcej akcji (More Actions), a następnie wybierz opcję Otwórz w przeglądarce (Open In Browser). Jeśli wszystko zostało poprawnie skonfigurowane, powinieneś zobaczyć stronę podobną do tej pokazanej na obrazku.

Najważniejsze pliki to .env oraz docker-compose.yml. Zaleca się dokładne zapoznanie się z zawartością tych dwóch plików.

Na przykład opcja _APP_CONSOLE_WHITELIST_ROOT jest bardzo ważnym ustawieniem, które należy skonfigurować w pliku .env. Zgodnie z dokumentacją Appwrite, ta opcja pozwala wyłączyć możliwość tworzenia nowych użytkowników w konsoli Appwrite.

Gdy jest włączona, tylko jeden użytkownik będzie mógł korzystać z formularza rejestracji. Nowych użytkowników można dodać wyłącznie poprzez zaproszenie ich do projektu. Domyślnie ta opcja jest włączona.

Jeśli ta opcja nie zostanie poprawnie skonfigurowana, Twoja usługa będzie dostępna dla innych użytkowników, co może prowadzić do marnowania zasobów serwera. W przypadku pozostałych opcji zaleca się zapoznanie z dokumentacją zmiennych środowiskowych dostępną na oficjalnej stronie Appwrite.

Przejdźmy teraz przez kolejne kroki, a szczegóły dotyczące konfiguracji zostawmy na później.

Po wypełnieniu formularza rejestracyjnego moje dane zostaną zapisane w bazie danych, a ja będę mógł korzystać z Appwrite zainstalowanego na moim prywatnym serwerze.

Na początek musisz zdefiniować organizację. Może to być nazwa Twojej firmy lub unikalny identyfikator. Każda organizacja posiada nazwę oraz identyfikator (ID). Nazwę organizacji można zmienić, ale jej identyfikator (ID) jest niezmienny.

Jeśli nie określisz identyfikatora (ID), Appwrite automatycznie przypisze unikalny identyfikator dla tej organizacji.

Każda organizacja ma projekty. Teraz musisz utworzyć projekt do swojej pracy. To właśnie ten projekt, nad którym aktualnie pracujesz.

Podobnie jak organizacje, projekty również mają nazwę i identyfikator (ID), a w przyszłości można zmienić jedynie ich nazwę.

Dla mnie to najbardziej interesująca część. Używamy Angulara, który koncentruje się na aplikacjach webowych. Dlatego musimy kliknąć Web w sekcji Dodaj platformę (Add a platform), aby zostać przekierowanym na stronę.

Na tym etapie wybiorę nazwę (Name) i nazwę hosta (Hostname) dla mojej aplikacji. Warto zauważyć, że obecnie korzystam z usługi hostingu współdzielonego, dlatego wybrałem ten host. Jeśli masz dedykowaną domenę (na przykład angular.love), musisz ją tutaj wpisać.

Appwrite posiada oficjalną paczkę, która przyspiesza proces tworzenia aplikacji. Pakiet ten można zainstalować za pomocą NPM i jest bardzo prosty w użyciu. Dostępna jest również opcja CDN, jednak nie jest ona zalecana.

To ostatni krok. Po zainstalowaniu paczki NPM w projekcie Angular, serwer, na którym pracujemy z Appwrite, musi zostać wprowadzony do osobnej paczki. W tym celu użyjemy następującej konfiguracji.

Teraz już mamy wykonaną częsć backendową, z wieloma funkcjami, które są również bardzo łatwe do nauki. Ale to nie wystarczy. Musimy wykonać prawdziwe zadanie z użyciem Appwrite i Angular, a to zobaczysz w dalszej części artykułu.

Krok 2: Zintegruj Angulara z Appwrite

Po upewnieniu się, że Twój serwer Appwrite działa, nadszedł czas, aby zintegrować go z aplikacją Angular. Ta lekcja dotyczy uwierzytelniania użytkowników, dlatego będziesz się uczyć kroków, jak to zrobić. Dowiesz się, jak wygląda proces autentyfikacji, w tym opisy tekstów i obrazków, które można zintegrować z Twoją aplikacją.

Chociaż Appwrite oferuje funkcje takie jak przechowywanie plików, powiadomienia push, usługi wiadomości, własną bazę danych, skrypty po stronie serwera i wiele innych, ten poradnik skupi się na funkcji uwierzytelniania. W przypadku innych funkcji możesz zapoznać się z dokumentacją Appwrite lub poradnikami, które być może powstaną 

Poniżej znajduje się struktura aplikacji Angular, nad którą będziemy pracować. Jeśli utkniesz na jakimkolwiek etapie, wróć do tej sekcji, aby znaleźć konkretny plik, który musisz zmodyfikować.

Zacznijmy od początku. Pierwszym krokiem w tworzeniu jakiegokolwiek projektu przy użyciu Angular jest utworzenie nowego projektu.

Zainstalowaliśmy i skonfigurowaliśmy Appwrite na naszym serwerze, ale jeszcze nie używaliśmy jego SDK w Angularze. Teraz musimy pobrać paczkę Appwrite z NPM.

Aby wprowadzić mój prywatny serwer do pakietu Appwrite, muszę zdefiniować niezbędne adresy URL w pliku środowiskowym.

W tym celu używam następującego polecenia, aby stworzyć pliki środowiskowe:

Moja konfiguracja wygląda tak jak pokazałem poniżej. Ty możesz zrobić to na swój sposób.

To nie jest konieczne, ale wolę stworzyć dedykowany serwis dla mojego projektu, aby zachować czystość kodu i mieć łatwy dostęp do pożądanych metod, za pomocą których będę mógł wywoływać metody Appwrite.

Obecnie używane są tylko metody createAccount i login. Pozostałe są wykorzystywane wyłącznie do celów edukacyjnych. Oczywiście, ta lista nie obejmuje wszystkich metod dostępnych w Appwrite. Te dwie metody są importowane odpowiednio do komponentów RegisterComponent i LoginComponent.

Korzyści połączenia Angulara i Appwrite

• Redukuje złożoność backendu
  
• Przyspiesza czas rozwoju
  
• Obniża koszty dla startupów i małych zespołów
  
• Zapewnia bezpieczne i skalowalne rozwiązania
  
• Oferuje elastyczność dzięki modułowym funkcjom

Wyzwania i dobre praktyki

W tym rozdziale omawiamy powszechne wyzwania napotykane podczas korzystania z Appwrite i przedstawiamy praktyczne najlepsze rozwiązania, które pomogą skutecznie je rozwiązać. Poniżej znajduje się zwięzła lista problemów wraz z zalecanymi rozwiązaniami. 

Zarządzanie skalowalnością przy dużym ruchu

• • Używanie systemu sieci dostarczania treści (CDN), takiego jak Cloudflare
  • Używanie cache do tymczasowego przechowywania często używanych danych
  • Używanie preładowania danych
  • Implementacja Lazy-loading w Angularze

Ensuring data security against external attacks

• • Używanie TLS do szyfrowania informacji
  • Zapobieganie atakom DDoS jest możliwe dzięki CDN i wewnętrznym ustawieniom Appwrite
  • Zmiana haseł do bazy danych
  • Zamykanie niepotrzebnych portów
  • Ustawianie uprawnień na wszystkich poziomach systemu

Koordynacja z dużymi zasobami danych

• • Używanie funkcji optymalizacji wyszukiwania w Appwrite
  • Implementacja efektywnych strategii cache’owania danych
  • Używanie możliwości indeksowania bazy danych
  • Używanie Virtual Scrolling w Angularze dla dużych list

Zarządzanie użytkownikami i poziomami dostępu

• • Ustawianie poziomów dostępu w kolekcjach dla każdej bazy danych
  • Ustawianie poziomów dostępu dla każdej funkcji
  • Korzystanie z wbudowanego antywirusowego Appwrite i stosowanie uprawnień do bucketów
  • Zachowanie ostrożności przy tworzeniu kluczy prywatnych i ustawianiu niezbędnych uprawnień dostępu dla każdego z nich
  • Używanie zmiennych środowiskowych do przechowywania ważnych danych, takich jak tokeny API firm trzecich

Trudności w implementacji zaawansowanego uwierzytelniania

• • Prawie wszystkie ważne usługi uwierzytelniania są dostępne w Appwrite. Dzięki temu implementacja tej usługi i zarządzanie użytkownikami stały się bardzo proste.
  • Jeśli Twój projekt wymaga niestandardowej i skomplikowanej struktury logowania, funkcja Custom token login w Appwrite jest bardzo przydatna.
  • Jeśli proces logowania i wylogowywania użytkownika nie jest odpowiednio zarządzany, użytkownicy mogą napotkać błąd 401 od Appwrite po każdym pomyślnym logowaniu. Oznacza to, że istnieje już aktywna sesja i nie jest możliwe utworzenie nowej.
  • Korzystanie z TLS jest kluczowe. Jeśli nie jest używane, niektóre informacje nie zostaną załadowane przez przeglądarkę, a proces logowania napotka błąd.

Brak precyzyjnych możliwości analitycznych dla danych

• • Możesz w pełni wykorzystać wbudowaną tablicę Appwrite, aby przeglądać informacje, na przykład:
    • Przegląd bazy danych
      • Całkowita liczba baz danych
      • Pełne szczegóły dla każdej bazy danych
    • Przegląd kolekcji
      • Całkowita liczba kolekcji
      • Pełne szczegóły dla każdej kolekcji
    • Statystyki użytkowników
      • Całkowita liczba użytkowników
      • Liczba użytkowników online
    • Metryki systemu
      • Liczba żądań
      • Wykorzystanie pasma

• W przypadku problemów z systemem, należy używać Dockera i Docker Compose. Powinieneś być przygotowany do korzystania z CLI w przypadku bardziej skomplikowanych błędów. Twój problem może zostać rozwiązany za pomocą prostego resetu, ale czasami trzeba dokładniej przeanalizować logi. Tak było w moim przypadku, kiedy TLS nie został wystawiony dla mojej domeny, a po przejrzeniu logów zobaczyłem, że Let’s Encrypt wystawił błąd Too many requests.

Wyzwania związane z aktualizowaniem i utrzymaniem usług backendu

• • Kiedy używasz systemu własnościowego, masz pełną kontrolę nad nim, co ułatwia aktualizację, ponieważ dokładnie wiesz, które części programu musisz zmienić i jakie będą korzyści oraz konsekwencje tych zmian. W przypadku systemów takich jak Appwrite, które nie są własnościowe, jest to bardzo ryzykowne. Ważne jest, aby wykonać kopię zapasową swojego systemu przed wprowadzeniem jakichkolwiek zmian. Lepiej jest wykonać ją całego systemu operacyjnego.
  • Migracja danych to również ogromne wyzwanie. System migracji Appwrite prawie zawsze zawodzi. Ale nawet jeśli migracja zakończy się sukcesem, pojawiają się liczne negatywne skutki. Na przykład daty utworzenia lub aktualizacji elementów w bazie danych są resetowane. Niektóre funkcje, kolekcje lub buckety mogą zostać zaimportowane niekompletnie, co jest bardzo powszechne. Rozwiązaniem jest wykonanie ręcznej kopii zapasowej. Jeśli wykonasz ręczną kopię zapasową Appwrite za pomocą Dockera, problemy te będą zredukowane.
  • Możesz zaimplementować bardzo unikalne funkcje w swoim systemie, korzystając z funkcji Functions w Appwrite. Wsparcie dla wielu języków programowania i łatwa implementacja funkcji bardzo Ci pomoże. Jednak jeśli chcesz edytować rdzeń Appwrite, jest to bardzo trudne. Istnieją dwa ogólne rozwiązania dla tego problemu.
    • Zdobądź forka Appwrite i dostosuj go (niezalecane)
    • Złóż prośbę do społeczności Appwrite, co zajmuje trochę czasu.

Problemy związane z implementacją i używaniem niestandardowych API

• • Zacznijmy tę sekcję od przykładu. Appwrite domyślnie obsługuje uwierzytelnianie za pomocą kodu OTP. W ten sposób SMS jest wysyłany na telefon komórkowy użytkownika, a użytkownik wprowadza go. Następnie proces uwierzytelniania jest zakończony, a rejestracja użytkownika jest ukończona. Jednak w czasie pisania tego tekstu nie było możliwości podania kodu przy użyciu połączenia głosowego. Edytowanie rdzenia Appwrite w celu dodania tej funkcji jest trudne. Rozwiązaniem tego problemu jest użycie funkcji w Appwrite. W sekcji powyżej wspomnieliśmy o funkcji Custom token login, która jest rozwiązaniem tego problemu.
  • Jedną z zalet Appwrite jest to, że umożliwia dostęp do funkcji bez użycia własnościowego SDK Appwrite. Aby to zrobić, przypisujesz subdomenę do każdej funkcji i ustawiasz jej poziomy dostępu. Następnie możesz korzystać z funkcji za pomocą zapytania HTTP.

Potrzebna jest specjalistyczna szkolenie do korzystania z usług zaplecza

• • Kiedy używamy nowego narzędzia, musimy się go nauczyć. Appwrite jest łatwe do nauki, ale wymaga czasu, a to oznacza koszty dla organizacji. Koszt ten nie obejmuje tylko szkolenia pracowników organizacji. Wiele kodu musi zostać zmienione. W zależności od sytuacji Twojej firmy lub zespołu, musisz zdecydować, która opcja będzie najlepsza dla Ciebie.
  • Proste koncepcje nie wymagają skomplikowanych rozwiązań. Jeśli próbujesz zaimplementować prostą lub średnio zaawansowaną stronę internetową, która nie ma skomplikowanej logiki, prawdopodobnie nigdy nie napotkasz problemów omówionych w tym artykule.

Wnioski

Tworzenie aplikacji bez backendu z użyciem Angulara i Appwrite jest łatwiejsze, zapewniając jednocześnie dużą szybkość i skalowalność. Dzięki usługom Appwrite i interfejsowi użytkownika Angulara, deweloperzy mogą szybciej budować wydajne i dobrze strukturalizowane aplikacje internetowe.

Aby zapoznać się z pełnym kodem źródłowym oraz metodami łączenia Appwrite z Angular, odwiedź ich repozytorium na GitHubie: AngularAppwriteIntegration.

Zawiera ono samodzielną aplikację, która demonstruje, jak szybko skonfigurować backend Appwrite dla aplikacji Angular. Kody są dostępne do wykorzystania i ulepszania!