Tworzenie strony internetowej z wykorzystaniem nowoczesnych rozwiązań i automatyzacji

Proces tworzenia stron internetowych przeszedł poważną przemianę – zmieniły się nie tylko dostępne narzędzia, optymalne technologie i sposób organizacji pracy, ale także standardy oraz wymagania użytkowników.  

W ręce programistów trafiły użyteczne narzędzia AI, które potrafią znacząco skrócić fazę projektowania aplikacji. Frameworki takie jak React, Angular czy Vue zmieniły sposób budowania struktury projektu i interfejsu użytkownika. Rozwinęły się zaawansowane systemy automatyzacji i organizacji pracy, takie jak Git lub narzędzia CI/CD. Pojawiły się też jednak nowe wyzwania i całe specjalistyczne dziedziny będące nowym standardem w procesie tworzenia stron internetowych, m. in.: 

• Budowanie interfejsu skupionego na doświadczeniu użytkownika, który oprócz prostej funkcjonalności jest też intuicyjny i responsywny 
• Wdrażanie nowych rozwiązań w dziedzinie bezpieczeństwa danych w zgodności z aktualnymi standardami przeglądarek 
• Optymalizacja pod kątem zasięgów i widoczności strony w wynikach wyszukiwania (SEO) 

Załóżmy więc, że naszym celem jest stworzenie witryny internetowej zawierającej elementy logiki biznesowej, wdrożenie jej na platformę hostingową oraz utrzymywanie korzystając z optymalnych rozwiązań deweloperskich. 

Jakie narzędzia faktycznie się sprawdzają oraz jak wygląda proces powstawania strony internetowej z wykorzystaniem nowoczesnych technologii i automatyzacji? 

Platformy typu AI Web Builder 

Dobrym pierwszym krokiem jest rozpatrzenie i przetestowanie aplikacji pomocnych w tworzeniu stron internetowych oraz utworzenie zestawienia najlepszych z nich.  Zadaniem takiej platformy jest w tym przypadku skrócenie czasu dostarczenia prototypu aplikacji internetowej, bez utraty jej skalowalności i z zachowaniem kontroli nad wszystkimi jej aspektami. 

Narzędzia te podzieliłem na trzy kategorie: 

Klasyczne kreatory stron internetowych  

Zawierają one mechaniki ‘drag and drop’, atrybuty obiektów oraz inne mechanizmy opierające się na kontroli wyglądu i rozmieszczenia elementów bez pisania kodu.  Bardzo często dostęp do kodu jest ograniczony do elementów CSS lub całkowicie niedostępny. 

Narzędzia te czasami wykorzystują sztuczną inteligencję do stworzenia szablonu komponentu, opisu lub nawet wygenerowania grafiki, jednak ich funkcje AI są na ogół marginalne a wyniki nieprecyzyjne. 

Są to narzędzia, które deweloperom oprogramowania mogą posłużyć w fazie tworzenia prototypu lub aplikacje typu Proof of Concept, jednak ich funkcjonalność skupia się przede wszystkim na użytkownikach mających podstawową wiedzę na temat powstawania stron internetowych. 

AI Web Buildery  

Platformy do tworzenia aplikacji internetowych za pomocą zapytań do SI, często z możliwością manualnej modyfikacji jedynie poprzez podgląd i edycję kodu strony. Są to narzędzia bardziej specjalistyczne i mimo sterowania nimi za pomocą zapytań, wymagają znajomości kluczowych aspektów powstawania stron internetowych. 

Poziom i zakres działania SI znacznie przewyższa klasyczne kreatory, w których sztuczna inteligencja jest raczej dodatkiem. 

Dla programistów, użyteczność takiej aplikacji jest również największa na początkowych etapach produkcji, ale poszerzona o wygodne rozwiązania w postaci modyfikacji kodu źródłowego lub podpięcia projektu do GitHub i zarządzania nim z własnego środowiska programistycznego. 

Generatory Kodu 

Służą one do generowania komponentów lub stron w oparciu o zapytania do SI. Nie posiadając bardziej zaawansowanego podglądu graficznego, są w pełni skupione na tworzeniu i refaktoryzacji kodu. Niektóre posiadają opcję generowania całej witryny internetowej, złożonej z kilku podstron, jednak nie jest to ich główny zamysł. 

Są to narzędzia deweloperskie, niemal wyłącznie dla programistów. Zawierając wiele przydatnych funkcji i obsługując różne technologie oraz języki stanowią świetną pomoc na każdym etapie powstawania projektu, ale nie wpływają w tak znaczący sposób na prędkość produkcji prototypu i modelu Proof of Concept. 

Przeprowadzenie takiej analizy pozwali określić, który typ platformy najlepiej odpowiada rzeczywistym potrzebom projektu. Uwzględnienie przeznaczenia aplikacji i zakresu umiejętności dewelopera znacząco ułatwi wybór odpowiedniej platformy oraz pozwali uniknąć kompromisów, które mogłyby ograniczyć dalszy rozwój rozwiązania. 

GitHub 

Platformy kontroli wersji, takie jak GitHub, są bezsprzecznie narzędziami ściśle powiązanymi z rozwojem aplikacji każdego typu, w tym również witryn internetowych.  Historia zmian, oddzielne gałęzie (branche) oraz prosta i szybka synchronizacja ze zdalnymi repozytoriami są fundamentem pracy programistów – szczególnie w przypadku zespołów deweloperów. GitHub oferuje jednak znacznie więcej niż tylko kontrolę wersji, udostępniając również narzędzia wspierające automatyzację procesów wytwórczych, takich jak testowanie, budowanie i wdrażanie aplikacji. 

GitHub Actions 

To narzędzie wbudowane w platformę GitHub służące do automatyzacji procesów związanych z wdrażaniem oprogramowania.  Pozwala ono definiować ‘workflow’, czyli zestaw poleceń automatycznie uruchamianych w odpowiedzi na wybrane zdarzenia.  

Używając GitHub Actions można zarządzać całym procesem wdrożenia z jednego pliku i przykładowo, w odpowiedzi na instrukcję ‘Pull’ na branchu produkcyjnym, wykonać: 

• instalację wymaganych zależności projektu i budowanie aplikacji 
• uruchomienie testów automatycznych i sprawdzenie jakości kodu 
• korzystanie z sekretów do bezpiecznego przechowywania wrażliwych danych 
• uwierzytelnienie w środowisku docelowym 
• wdrożenie aplikacji na serwer lub do chmury 
• uruchomienie migracji bazy danych 
• wysłanie powiadomienia o statusie wdrożenia 

Stosowanie tej funkcji umożliwia stosowanie podejścia CI/CD, czyli ciągłej integracji oraz dostarczania oprogramowania na środowisko produkcyjne lub testowe. Automatyzacja procesu zmniejsza ryzyko popełniania błędów wynikających z ręcznych wdrożeń i znacząco przyspiesza cały proces rozwoju aplikacji. 

Microsoft Azure 

Ta platforma chmurowa jest powszechnie stosowana i przyjazna dla projektów każdej skali. Oferuje hosting oraz bogate środowisko zaawansowanych usług chmurowych, w tym bazy danych, funkcje bezserwerowe czy kontenery, a także wygodne integracje z zewnętrznymi serwisami, takimi jak GitHub. 

Model płatności ‘pay-as-you-go’ pozwala płacić jedynie za faktyczne wykorzystanie zasobów, co jest szczególnie korzystnym rozwiązaniem dla małych i średnich projektów, w tym prostych witryn internetowych. 

Azure Functions 

W przypadku potrzeby dodania do aplikacji logiki biznesowej, integracji z zewnętrznymi serwisami lub innej akcji wymagającej backendowego zaplecza możemy umieścić go na Azure jako zasób App Service i połączyć z nim istniejący Static Web App. Wiąże się to jednak z koniecznością przejścia na płatny plan subskrypcji, co nie zawsze jest optymalną decyzją, zwłaszcza, jeśli chcemy jedynie sprawdzić możliwości platformy lub przetestować aplikację w środowisku produkcyjnym. 

W takim wypadku warto rozważyć realizację serwisu na zasadzie Azure Functions.  
To usługa bezserwerowego kodu backendowego, wkomponowanego w projekt aplikacji klienta. Jest to bardzo dobre rozwiązanie w przypadku małej i średniej skali logiki biznesowej, która będzie wymagać częstych aktualizacji a niekoniecznie musi być wysoko skalowalna. Funkcja ta nie wymaga uruchamiania osobnego serwisu i tym samym podniesienia opłat za subskrypcję, tylko odpowiedniej konfiguracji Statycznej Aplikacji Internetowej, a w szczególności, pliku workflow.yml wspomnianego przy GitHub Actions. 

Wykorzystanie omówionych technik tworzenia, wdrażania i utrzymywania aplikacji stanowi nowoczesne, komfortowe i efektywne podejście do wytwarzania oprogramowania. Integracja i właściwe korzystanie z tych technologii pozwala na znaczące skrócenie cyklu życia aplikacji, zwiększenie jej jakości oraz obniżenie kosztów i poprawienie wygody utrzymania infrastruktury – nie tylko w przypadku witryn internetowych.