Article

AI-aplikacje-webowe-main

Category: Expertise strategy

AI zbuduje aplikację webową? To możliwe!

Konrad Kaliciński, Software Developer, 30/10/2023

Wielu web deweloperów na różnych etapach swojej kariery tworzy różne projekty “do szuflady” - czasem w celach edukacyjnych, innym razem z chęci zbudowania konkretnej aplikacji. Niestety, bardzo trudno wydaje się dzielić czas między praca zawodową, a projektami, nad którymi pracujemy 'dla siebie' i często tylko po godzinach. Z tego powodu wiele takich projektów nigdy nie ujrzy światła dziennego, albo nie zostanie rozwinięta do takiego stopnia, aby osiągnęły zamierzony cel. Jednak od jakiegoś czasu dysponujemy narzędziem, które (moim zdaniem) jest w stanie przezwyciężyć początkowe trudności w zbudowaniu prototypu projektu. Jest nim oczywiście AI (Sztuczna Inteligencja), która - w odpowiednich rękach - może stać się bardzo przydatnym narzędziem w pracy dewelopera.

Ponieważ mam nieco doświadczenia w pracy z Chat GPT, bardzo interesuje mnie, jak dużo można osiągnąć przy użyciu właśnie tego rozwiązania. Czy możliwe jest zbudowanie prototypu aplikacji, począwszy od bazy danych a na interfejsie kończąc? Wydaje mi się, że tak. Celem tego artykułu jest udowodnienie tej tezy.

Założenia

 

Technologia

Moją specjalizacją jest głównie front-end i Angular, ale mam też nieco doświadczenia w aplikacjach back-endowych. Nie będę próbował budować czegoś za pomocą narzędzi, których nie znam, zatem jako stack technologiczny wybieram typescript/nestjs/neo4j/graphql/angular.

Całość obudujemy monorepo nx.

Będę używać zapytań w języku angielskim (chociaż GPT nie ma problemu z językiem polskim), a przyczyna jest prozaiczna - ewentualna angielska wersja artykułu nie miałaby wtedy sensu 🙂

Postaram się nie pisać własnego kodu, a polegać wyłącznie na GPT - zrobię to tylko, jeśli to będzie konieczne, aby kontynuować.

Wykorzystam wersję GPT 4, (ChatGPT July 20 Version) oraz plugin Code GPT do Webstorm IDE.

I wreszcie: pominę testy czy przestrzeganie SOLID/KISS/DRY i tym podobnych, zgodnie z dwiema poniższymi zasadami:

 

Done is better than perfect

Fake it till you make it

 

Wymagania biznesowe

Następnym problemem jest wybór samego aplikacji. Ponieważ próbujemy zbudować coś na kształt realnej aplikacji, stworzymy bazę wiedzy z suplementami, ich składnikami, oddziaływaniami oraz interakcjami między nimi. Aplikacja powinna:

 

  1. pozwalać na dodawanie nowych elementów poziomu UI (administratorowi)
  2. pozwalać na przegląd danych anonimowi
  3. umożliwiać przeglądanie suplementów razem z ich składami i oddziaływaniami

 

Zaczynamy

 

Jeśli chcesz pozyskać większe zrzuty ekranu, wszystkie screeny 
z odpowiedziami Chat GPT na zadane pytania można znaleźć w poniższej galerii:
https://imgur.com/gallery/dCuGFpx

 

Przygotowanie

Chcemy dowiedzieć się, jakie ostatnie wersje naszych bibliotek/frameworków są zaindeksowane przez GPT.

I need applications/frameworks/libraries version numbers you're aware of: nx, angular, nodejs, typescript, nestjs, neo4j

Ai-dla-aplikacji-1

Od czasu publikacji powyższych wersji wiele się zmieniło, więc musimy mieć to na uwadze.

how to start a nx monorepo with multiple applications, with angular preset? I need cli commands for creation only

Ai-dla-aplikacji-2

Ostatni krok jest nadmiarowy, niemniej możemy utworzyć projekt za pomocą poniższego polecenia (nieco zmodyfikowany wariant)

npx create-nx-workspace@latest ai-suple --preset=angular --style=scss --appName=app

oraz wybieramy opcje jak poniżej:

Ai-dla-aplikacji-3

Teraz chcemy dodać aplikację backendową

how to install and add nestjs application named "api" to existing nx monorepo?

Ai-dla-aplikacji-4

Uruchamiam powyższe polecenia, wszystko działa. Ostatni element struktury - baza danych. Tutaj mamy 3 opcje:

docker image

Neo4j Desktop  

lub

AuraDB (usługa w chmurze).

Każda jest ok, ja będę używać neo4j desktop, ale często też mamy dockera. Będziemy potrzebować skryptu w package.json aby uruchamiać bazę

I need to start docker image with exposed ports for neo4j database, and I need to create a command "start:db" in package.json to start database

Ai-dla-aplikacji-5

Teraz chcę za pomocą jednej komendy uruchamiać nasz projekt

I need a script in package.json to start my nx applications named "app" and "api". I also want to create a command that with concurrently will start both of those apps in the same process, naming them app and api and giving them different colors: #2571c7 and #e0234e

Ai-dla-aplikacji-6

Instaluję concurrently, modyfikuję nieco skrypt (zmieniam start:both na start), uruchamiam - wszystko ok, aplikacje działają na portach 4200 i 3000.

Ai-dla-aplikacji-7


 

Czy możliwe jest zbudowanie prototypu aplikacji, począwszy od bazy danych a na interfejsie kończąc? Wydaje mi się, że tak.

 

Modelowanie baz danych

 

Skoro wszystkie składowe naszego systemu działają, możemy przejść do budowy naszego modelu. Jeśli chcesz dowiedzieć się więcej o Neo4j, zachęcam do zapoznania się z:

artykułem co to Neo4j.

Za pomocą: arrows.app

zbudowałem model danych dla Neo4j, wizualizacja zależności pomoże lepiej zrozumieć ten model. Tu warto zwrócić uwagę na przejrzystość modelu - zależności między poszczególnymi węzłami są czytelne już na pierwszy rzut oka, czego nie można powiedzieć o bazach relacyjnych.

Ai-dla-aplikacji-8

Propose a data model for @neo4j/graphql of the supplements, where:

 

  1. supplements may have multiple ingredients
  2. ingredients can support or inhibit various processes
  3. supplements can be compatible/incompatible with other supplements
  4. supplement can have a brand (make 2 way relationship)
  5. supplement can be sold in a store (make 2 way relationship
  6. supplement, ingredient and process may be mentioned in the publication

 

Wygenerowany model wygląda dobrze, uzupełnimy go w dalszej części o odpowiednie pola. Teraz ten model musimy dodać do naszej aplikacji back-endowej do odpowiedniej biblioteki nx. Mamy bardzo przydatne narzędzie do weryfikacji modeli dla @neo4j/graphql: toolbox

, w którym po połączeniu z naszą bazą danych (lokalną lub zdalną) możemy sprawdzić, czy model jest poprawny oraz wykonywać wszystkie operacje w graphql.

how to add this model to the nestjs application in the nx monorepo. application is called api, add it as a nest library located in libs/api/…

Niestety, kilka prób wygenerowania poprawnie działającego modułu do graphql nie powiodło się. GPT trafił na duży problem i nie potrafił dostarczyć działającej konfiguracji, mimo wielu prób i zmian zapytania. Wykorzystałem więc konfigurację, którą stworzyłem na potrzeby: tego artykułu

Model został wygenerowany dla starszej wersji @neo4j/graphql, zatem musimy zmienić kilka rzeczy, aby wszystko zadziałało poprawnie:

 

  1. wywołanie dyrektywy @relation trzeba zmienić na @relationship
  2. relacje oznaczyć jako wymagane (znak !), czyli zamiast ingredients: [Ingredient] należy użyć ingredients: [Ingredient!]!
  3. zmiana nazwy relacji - zamiast “name” należy użyć “type”
  4. brakuje biblioteki APOC - trzeba ją zainstalować i zrestartować serwer neo4j

 

Ai-dla-aplikacji-9

 

Po tym nasz moduł działa poprawnie, sprawdzamy nasz model w aplikacji toolbox i oto efekt:

Ai-dla-aplikacji-10

To zapytanie stworzyłem w toolboxie, z pomocą autopodpowiadania składni. Sprawdźmy, czy GPT sobie poradzi z takim zadaniem:

having @neo4j/graphql model defined as below, create a graphql mutation that will create a supplement with: name, brand, 2 ingredients, publication and store. the database is empty so all nodes needs to be created <pasted model>

Ai-dla-aplikacji-10

Gdy spojrzymy na poprzedni przykład da się zauważyć, że tym razem mutacja nie jest poprawna, ale sprawdzamy w toolboxie.

Ai-dla-aplikacji-11

Zasugeruję poprawkę:

wrap all create content in {node}, so it will look like: {create: {node: {...} }

Ai-dla-aplikacji-12

Teraz jest w porządku. 

 

Podsumowanie

Udało mi się przetestować możliwości GPT w kontekście budowania aplikacji webowej. Wydaje się, że AI jest przydatnym narzędziem, które może znacznie przyspieszyć proces tworzenia prototypu aplikacji. Jednakże, nie wszystko poszło tak gładko - napotkałem na problemy, które wymagały ręcznej interwencji.

Nie podjąłem też jeszcze tematu autoryzacji (zostawię to na integrację z front-endem), ale GPT na pewno ma nieaktualne dane i wygenerowany model będzie błędny - sprawdziłem.

Poza tym, aby odpowiedzi były jak najbardziej trafne i kompletne, niektóre pytania zadawałem kilka razy doprecyzowując szczegóły - nie zajęło to dużo czasu, ale z dziennikarskiego obowiązku należy o tym wspomnieć.

Mimo to, udało się osiągnąć zamierzony cel. To tyle jeśli chodzi o pierwszą część artykułu. W drugiej części zajmiemy się budowaniem interfejsu dla aplikacji webowej, która będzie dodana do obecnej aplikacji.

 

konrad-kalicinski-emagine

Konrad Kaliciński

W emagine na stanowisku Senior Front-end Developer
Software developer realizujący projekty dla klientów emagine. Karierę w IT rozpoczynał w 2007 r. Absolwent Politechniki Wrocławskiej na kierunku inżynieryjnym. Od ponad roku certyfikowany specjalista w obszarze Neo4J.

Chcesz wiedzieć więcej?

Pomożemy Ci odnieść sukces w roli niezależnego konsultanta IT.

Blog

Więcej wpisów na blogu

left-arrow
right-arrow

Grafowa baza danych rewolucjonizuje zarządzanie informacjami
Expert stories
Webinar

Grafowa baza danych rewolucjonizuje zarządzanie informacjami – odpal zapis webinaru

Już jest! Zapis webinaru pt. Grafowa baza danych rewolucjonizuje zarządzanie informacjami… czyli o Neo4j z perspektywy front-endowca.

Expert stories

Crunch w IT – czy wiesz, jak mu zapobiec?

Temat crunchu pojawia się zwykle w kontekście branży, która tworzy gry komputerowe. Problem jednak nie dotyczy tylko tego sektora rynku. Crunch zdarza się wszędzie. Są jednak sposoby, aby mu zapobiec.

Expert stories

Idealna współpraca testera z programistą – czy to w ogóle możliwe?

W idealnym zespole programistycznym feedback od klienta przekłada się na świetne wymagania. Są one następnie zamieniane na dokładnie opisane zadania, w których jest wszystko ,co niezbędne do wykonania i testowania aplikacji. W rzeczywistości jednak taka sytuacja nigdy nie występuje. Jak to zmienić?

Wszystko o pracy testera oprogramowania - odpal zapis webinaru
Expert stories
Webinar

Wszystko o pracy testera oprogramowania – odpal zapis webinaru

„5 najważniejszych lekcji, które wyniosłem w ciągu 5 lat testowania oprogramowania” … czyli o ewolucji tego obszaru IT, umiejętnościach testera oraz efektywności w zawodzie opowiada konsultant emagine – Piotr Tuński.

Expert stories

Różne podejścia do generowania kodu front-end – czy znasz je wszystkie?

Jak pisałem w poprzednim artykule, kod front-endowy jest w pewnej mierze powtarzalny. Szczególnie dużo powtarzalności jest na granicy back-endu i front-endu. Ponieważ obiekty z bazy są przesyłane z back-endu, frontend odbiera je i typuje (jeśli używamy np. TS) w celu dalszego przetwarzania. Co dzieje się dalej?

Expert stories

AI zbuduje aplikację webową? To możliwe!

Od jakiegoś czasu dysponujemy narzędziem, które jest w stanie przezwyciężyć początkowe trudności w zbudowaniu prototypu aplikacji webowej. Jest nim oczywiście Sztuczna Inteligencja, która – w odpowiednich rękach – może pomóc rozwiązać wiele problemów deweloperów.

Expert stories

Nx dla Angular jako niezawodne narzędzie upraszczające pracę przy projektach IT

Nx to narzędzie, które upraszcza budowanie projektów typu monorepo. W tym artykulę skupię się na jego głównych zastosowaniach w aplikacjach używających Angulara. Narzędzie pozwala także na współpracę z wieloma innymi technologiami, jak React czy Node.

Expert stories

7 grzechów głównych w zapewnianiu jakości: błędy, których powinien unikać każdy tester!

Zagłębimy się w mroczne zakamarki branży testowania oprogramowania. Odkryjemy siedem grzechów głównych, które mogą zaszkodzić dążeniu do doskonałej jakości produktu. Poznaj, jakie pułapki czyhają na testerów i jak unikać tych błędów, prowadząc swój zespół ku ścieżce doskonałości w testowaniu.

Expert stories

Zarządzanie finansami w chmurze, czyli wszystko o FinOps

W miarę jak organizacje coraz bardziej polegają na chmurze obliczeniowej, pojawia się potrzeba skutecznego zarządzania kosztami i optymalizacji wydatków związanych z usługami chmurowymi. FinOps to obszar działalności, który w znacznym stopniu zmienia sposób tego zarządzania. Chcesz wiedzieć więcej?

Dyrektywa NIS2 dot. cyberbezpieczeństwa
Expert stories
Webinar

Już jest – zapis webinaru “Dyrektywa NIS2 dot. cyberbezpieczeństwa”

W obliczu coraz bardziej skomplikowanych zagrożeń związanych z cyberprzestrzenią, bezwzględnym priorytetem dla organizacji na całym świecie staje się zabezpieczenie danych oraz infrastruktury online. Nasz ekspert Grzegorz Powichrowski wesprze Was w ocenie przygotowania firm do spełnienia wymogów Dyrektywy NIS2 w dziedzinie cyberbezpieczeństwa.

Expert stories

Dla specjalistów IT: W jaki sposób odciążyć umysł w pracy

Od kilku lat interesuję się wydajnością pracy i w tym artykule chciałbym przedstawić najważniejsze metody, które wg mnie pozwolą pracować łatwiej i wydajniej w środowisku IT.

Expert stories

Microsoft Dev Box – nowoczesna maszyna robocza

Microsoft Dev Box to zwirtualizowane rozwiązanie, które umożliwia inżynierom IT szybkie uruchamianie samoobsługowych stacji roboczych wstępnie skonfigurowanych do ich zadań, przy jednoczesnym zachowaniu scentralizowanego zarządzania w celu maksymalizacji bezpieczeństwa i zgodności ze standardami w organizacji. Czy już je znasz?

Expert stories

Wymagania niefunkcjonalne w procesie tworzenia aplikacji

Podczas rozwijania aplikacji webowej zwykle odkrywamy szereg specyficznych funkcjonalności, wedle których ma ona działać. Niektóre z nich mogą wydawać się oczywiste dla części członków zespołu IT pracującego nad rozwiązaniem, jednak inni wolą mieć je spisane w szczegółowej formie, aby móc je wszystkie zaimplementować lub testować.

Expert stories

Najlepsze praktyki w zakresie bezpieczeństwa łańcucha dostaw oprogramowania

Łańcuch dostaw oprogramowania to „proces dostarczania produktu do klienta” w domenie IT, odnosi się do procesu projektowania, budowania, dostarczania i utrzymania. Jego bezpieczeństwo jest nie tylko ważnym, ale wręcz kluczowym aspektem współczesnego świata IT.

AI: Nowa fala przyszłości"
Expert stories
Webinar

Obejrzyj zapis webinaru “AI: Nowa fala przyszłości”

Szansa cywilizacyjna, czy też zagrożenie? Algorytmy sztucznej inteligencji od wielu lat stanowią jeden z centralnych punktów dyskusji o przyszłości technologii. Rozwiązania oparte na AI, niezależnie od poziomu organizacji na którym zostaną wykorzystane, pomogą stworzyć nowatorskie modele biznesowe. Sprawdźcie zatem, czy Wasza organizacja jest do tego dobrze przygotowana. Czego się spodziewać? Jak wykorzystać AI, aby tworzyć przewagę konkurencyjną na rynku?

Expert stories

Snapshot testing w aplikacjach front-endowych – czy wiesz już wszystko?

Jednym z największych wyzwań podczas tworzenia aplikacji front-endowych jest unikanie wprowadzania niechcianych zmian. Testowanie logiki biznesowej jest możliwe za pomocą testów jednostkowych, jednak nie sprawdzają one zwykle całej struktury HTML. Rozwiązaniem problemu regresji w plikach HTML może być snapshot testing.

Expert stories

Przyszłość sztucznej inteligencji – jakie wyzwania i możliwości stoją przed światem IT?

Przyszłość sztucznej inteligencji (SI) niesie ze sobą zarówno wyzwania, jak i ogromne możliwości rewolucji technologicznej. Zewsząd słyszymy, że SI przejmie we wszystkim kontrolę i my jako ludzie będziemy już mniej potrzebni lub wręcz zbędni – czy aby na pewno?

Expert stories

Efektywne sposoby na pracę z back-endem

Aby tworzyć rozwiązania front-endowe, zwykle pobieramy dane z aplikacji back-endowej. W tym artykule chciałbym przedstawić, w jaki sposób możemy udoskonalić i przyspieszyć tę pracę. Podstawowe czynniki, które wziąłem pod uwagę podczas analizy, to elastyczność pracy oraz to, czy programista używający API, może edytować dane zwracane przez back-end.

Expert stories

Neo4j: Grafowa baza danych rewolucjonizuje zarządzanie informacjami

Wraz z gwałtownym wzrostem ilości danych na znaczeniu zyskują nowoczesne rozwiązania bazodanowe. Jednym z najciekawszych i najbardziej innowacyjnych rozwiązań jest neo4j – grafowa baza danych, która rewolucjonizuje sposób przechowywania i analizy informacji. W tym artykule przyjrzymy się bliżej temu fascynującemu narzędziu, poznamy jego zalety, funkcje oraz praktyczne zastosowanie.

Expert stories

Jak AI wspiera pracę Front-end developerów – praktyczny poradnik

Z perspektywy front-endowca w ostatnim roku zauważyłem jak bardzo zastosowanie nowoczesnych narzędzi pomaga w szybszym tworzeniu aplikacji i sprawia, że pozbawione są one błędów. W artykule opisuję zastosowanie ChatGPT, Github Copilot oraz Github Copilot Chat, określając je skrótowo mianem AI.

Expert stories

Wypalenie zawodowe specjalistów IT – jak je przewidzieć i jak mu zapobiec?

Na pewno każdy z nas chociaż raz czuł, że w jego pracy coś idzie inaczej, niż by chciał. Dochodzi to tego zmęczenie, stres, spadek motywacji i nagle cały zawodowy świat się wali – zaczynamy myśleć, czy to, co robimy ma sens, czemu dotychczasowe działania nie przynoszą pożądanych efektów. Innymi słowy, wpadamy w rozmyślania nad tym, jak jest ciężko. Najczęściej to tylko zmęczenie, brak odpoczynku, stres, natomiast kiedy warto zadbać o siebie bardziej i przekonać się, czy to nie jest wypalenie zawodowe?

Expert stories

Jak skutecznie zbudować i utrzymać relację z kandydatem podczas procesu rekrutacyjnego w IT

Branża IT od dawna  jest  jedną z najbardziej dynamicznie rozwijających się dziedzin rynku, niezależnie od szerokości geograficznej. Tym bardziej, znalezienie odpowiedniego kandydata do realizacji projektów IT, który spełniałby wszystkie wymagania zarówno pod względem wiedzy i umiejętności technicznych, jak i kompetencji miękkich nigdy nie było czymś prostym.

Expert stories

Poznaj kompetencje miękkie przyszłości w obszarze sprzedaży

Inwestycja w kompetencje miękkie może szczególnie opłacić się w zawodach przyszłości. W przeciwieństwie do twardych, kapitałem nie jest wykształcenie czy fachowa wiedza. Soft skills pozwolą tym, którzy je wdrożą i oswoją, z lekkością adaptować się do zmian jakie czekają rynek pracy.

Paweł Pancerz
Expert stories

Rozwój Chmury – co czeka nas w najbliższej przyszłości?

W ciągu ostatnich lat rozwój technologii chmurowych zmienił się bardzo dynamicznie. Wymogi rynkowe oraz coraz większa świadomość w zakresie potencjału technologii chmurowych sprawiają, że obawy przed tą technologią IT są coraz mniejsze.

Marcin Kosiński
Expert stories

Efektywna praca zdalna w innej strefie czasowej

Zdalna praca w innej strefie czasowej  jest możliwa, gdy w zespole panuje odpowiednia dyscyplina.

ichał Mrozowski, Starszy Analityk Biznesowy, Scrum Master
Expert stories

10 cech dobrego Scrum Mastera

Czy każdy nadaje się na Scrum Mastera? Jeśli zespół poszukuje Scrum Mastera, który wniesie wartość dodaną i będzie dla niego wsparciem – a nie tylko prowadzącym ceremonie – powinien szukać osoby posiadającej konkretne cechy.