Jak zbudować i wdrożyć klonowaną aplikację ChatGPT za pomocą API React i OpenAI

Ponieważ wykorzystanie chatbotów i wirtualnych asystentów stale rośnie, wiele firm i programistów szuka sposobów na stworzenie własnych chatbotów opartych na sztucznej inteligencji. ChatGPT to jeden z takich chatbotów, stworzony przez OpenAI, który jest w stanie prowadzić rozmowy przypominające ludzi i odpowiadać na szeroki zakres pytań.

Co zamierzasz zbudować

W tym samouczku dowiesz się, jak zbudować klonowaną aplikację ChatGPT przy użyciu React i API OpenAI. Jeśli chcesz spróbować swoich sił w zabawnym i wciągającym projekcie w weekend, jest to świetna okazja, aby zanurzyć się w React i OpenAI.

Dowiesz się również, jak wdrażać bezpośrednio z repozytorium GitHub na platformie hostingu aplikacji Kinsta, która zapewnia bezpłatną domenę .kinsta.app , aby szybko uruchomić Twój projekt. A dzięki bezpłatnemu okresowi próbnemu Kinsta i poziomowi Hobby możesz łatwo zacząć bez żadnych kosztów.

Oto demo na żywo aplikacji do klonowania ChatGPT.

Jeśli chcesz dokładniej przyjrzeć się temu projektowi, możesz uzyskać dostęp do jego repozytorium GitHub.

Alternatywnie możesz również sklonować projekt startowy aplikacji React, który zawiera podstawowe elementy, takie jak style, łącze Font Awesome CDN, pakiet OpenAI i podstawową strukturę, aby pomóc Ci w rozpoczęciu pracy.

Wymagania/warunki wstępne

Ten samouczek został zaprojektowany jako doświadczenie „kontynuowania”. Dlatego zaleca się, aby z łatwością kodować następujące elementy:

• Podstawowa znajomość HTML, CSS i JavaScript
• Pewna znajomość React
• Node.js i npm (Node Package Manager) lub przędza zainstalowane na twoim komputerze

Co to jest API OpenAI?

Interfejs API OpenAI to platforma oparta na chmurze, która zapewnia programistom dostęp do modeli językowych OpenAI, takich jak GPT-3, za pośrednictwem interfejsu API. Umożliwia programistom dodawanie funkcji przetwarzania języka naturalnego, takich jak uzupełnianie tekstu, analiza tonacji, podsumowywanie i tłumaczenie, do ich aplikacji bez opracowywania i szkolenia ich modeli.

Aby korzystać z OpenAI API, programiści muszą założyć konto w witrynie OpenAI i uzyskać klucz API. Klucz API służy do uwierzytelniania żądań API i śledzenia użycia.

Po uzyskaniu klucza API programiści mogą używać interfejsu API do przesyłania tekstu do modelu języka i otrzymywania odpowiedzi.

Dlaczego warto reagować?

React to popularna biblioteka JavaScript do budowania interfejsów użytkownika. Według ankiety deweloperów Stack Overflow z 2022 r. jest to druga najczęściej używana technologia internetowa z 42,62% udziałem w rynku.

React umożliwia programistom tworzenie deklaratywnych komponentów reprezentujących różne części interfejsu użytkownika. Te komponenty są definiowane przy użyciu składni o nazwie JSX, która jest połączeniem JavaScript i HTML.

Dzięki dużemu ekosystemowi bibliotek i zestawów komponentów programiści mogą łatwo pracować i integrować interfejsy API, takie jak OpenAI API, w celu tworzenia złożonych interfejsów czatu, co czyni go doskonałym wyborem do tworzenia klonów aplikacji ChatGPT.

Jak skonfigurować środowisko programistyczne React

Najlepszym sposobem na zainstalowanie Reacta lub utworzenie projektu React jest zainstalowanie go za pomocą aplikacji create-react-app. Jednym z wymagań wstępnych jest zainstalowanie Node.js na komputerze. Aby potwierdzić, że masz zainstalowany węzeł, uruchom następujące polecenie w swoim terminalu.

 node -v

Jeśli wyświetla wersję, oznacza to, że istnieje. Aby używać npx, musisz upewnić się, że wersja Node jest nie starsza niż 14.0.0, a wersja NPM nie jest starsza niż 5.6; w przeciwnym razie może być konieczna aktualizacja, uruchamiając npm update -g . Po ustaleniu npm możesz teraz skonfigurować projekt React, uruchamiając poniższe polecenie:

 npx create-react-app chatgpt-clone

Uwaga: „chatgpt-clone” to nazwa aplikacji, którą tworzymy, ale możesz ją zmienić na dowolną wybraną przez siebie nazwę.

Proces instalacji może zająć kilka minut. Po pomyślnym zakończeniu możesz przejść do katalogu i zainstalować pakiet Node.js OpenAI, który zapewnia wygodny dostęp do OpenAI API z Node.js za pomocą poniższego polecenia:

 npm install openai

Możesz teraz uruchomić npm start , aby zobaczyć swoją aplikację na żywo na localhost:3000 .

Kiedy projekt React jest tworzony za pomocą polecenia create-react-app , automatycznie tworzy szkielet struktury folderów. Głównym folderem, który Cię dotyczy, jest folder src , w którym odbywa się programowanie. Ten folder domyślnie zawiera wiele plików, ale należy się martwić tylko plikami App.js , index.js i index.css .

1. App.js : Plik App.js jest głównym komponentem aplikacji React. Zwykle reprezentuje komponent najwyższego poziomu, który renderuje wszystkie inne komponenty w aplikacji.
2. index.js : Ten plik jest punktem wejścia dla Twojej aplikacji React. Jest to pierwszy plik ładowany podczas otwierania aplikacji i jest odpowiedzialny za renderowanie komponentu App.js w przeglądarce.
3. index.css : Ten plik jest odpowiedzialny za zdefiniowanie ogólnego stylu i układu aplikacji React.

Jak zbudować klon ChatGPT za pomocą API React i OpenAI

Aplikacja do klonowania ChatGPT będzie składać się z dwóch komponentów, aby aplikacja była łatwiejsza do zrozumienia i utrzymania. Te dwa komponenty to:

1. Sekcja formularza : ten komponent zawiera pole tekstowe i przycisk umożliwiający użytkownikom interakcję z chatbotem.
2. Sekcja odpowiedzi : pytania i odpowiadające im odpowiedzi zostaną zapisane w tablicy i wyświetlone w tej sekcji. Przejdziesz przez tablicę chronologicznie, pokazując najnowsze jako pierwsze.

Konfigurowanie aplikacji do klonowania ChatGPT

W tym samouczku zacznijmy od zbudowania interfejsu aplikacji, a następnie zaimplementuj funkcjonalność, aby aplikacja współdziałała z interfejsem API OpenAI. Zacznij od utworzenia dwóch komponentów, których będziesz używać w tym samouczku. Aby zapewnić odpowiednią organizację, utworzysz folder komponentów w folderze src , w którym będą przechowywane wszystkie komponenty.

Komponent sekcji formularza

Jest to prosty formularz, który składa się z textarea i button wysyłania.

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

Tak powinien wyglądać formularz po zaimportowaniu go do pliku App.js :

Komponent sekcji odpowiedzi

W tej sekcji zostaną wyświetlone wszystkie pytania i odpowiedzi. Tak będzie wyglądać ta sekcja po zaimportowaniu jej również do pliku App.js.

Pobierzesz te pytania i odpowiedzi z tablicy i pętli, aby ułatwić czytanie i konserwację kodu.

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

Strona główna

Masz teraz utworzone oba komponenty, ale nic nie pojawi się po uruchomieniu aplikacji, ponieważ musisz zaimportować je do pliku App.js. W przypadku tej aplikacji nie zaimplementujesz żadnej formy routingu, co oznacza, że ​​plik App.js będzie służył jako główny komponent/strona Twojej aplikacji.

Możesz dodać trochę treści, na przykład tytuł i opis swojej aplikacji, przed zaimportowaniem komponentów.

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

W powyższym kodzie oba komponenty są importowane i dodawane do aplikacji. Po uruchomieniu aplikacji aplikacja będzie wyglądać tak:

Dodawanie funkcjonalności i integracja API OpenAI

Masz teraz interfejs użytkownika swojej aplikacji. Następnym krokiem jest sprawienie, aby aplikacja działała tak, aby mogła wchodzić w interakcje z OpenAI API i otrzymywać odpowiedzi. Po pierwsze, musisz pobrać wartość z przesłanego formularza, ponieważ zostanie ona użyta do wysłania zapytania do API OpenAI.

Pobieranie danych z formularza

W React najlepszym sposobem przechowywania i aktualizowania danych jest używanie stanów. W komponentach funkcjonalnych hak useState() służy do pracy ze stanami. Możesz utworzyć stan, przypisać wartość z formularza do stanu i aktualizować ją za każdym razem, gdy zmienia się jej wartość. Zacznijmy od zaimportowania hooka useState() do komponentu FormSection.jsx , a następnie stworzenia stanu do przechowywania i aktualizowania newQuestions .

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

Następnie możesz przypisać wartość pola textarea do stanu i utworzyć zdarzenie onChange() w celu aktualizacji stanu za każdym razem, gdy zmieni się wartość wejściowa:

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

Na koniec możesz utworzyć zdarzenie onClick() , aby ładować funkcję za każdym razem, gdy zostanie kliknięty przycisk wysyłania. Ta metoda zostanie utworzona w pliku App.js i przekazana jako rekwizyty do komponentu FormSection.jsx z wartościami newQuestion i setNewQuestion jako argumentami.

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

Utworzyłeś teraz stan do przechowywania i aktualizacji wartości formularza, dodałeś metodę, która jest przekazywana jako rekwizyt z pliku App.js i obsłużyłeś zdarzenie kliknięcia. Tak będzie wyglądał ostateczny kod:

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

Kolejnym krokiem będzie utworzenie w pliku App.js metody, która obsłuży cały proces interakcji z OpenAI API.

Interakcja z API OpenAI

Aby wchodzić w interakcję z OpenAI API i uzyskiwać klucze API w aplikacji React, musisz utworzyć konto OpenAI API. Możesz zarejestrować konto w witrynie OpenAI za pomocą konta Google lub adresu e-mail. Aby wygenerować klucz API, kliknij opcję Osobiste w prawym górnym rogu strony; pojawi się kilka opcji; kliknij Wyświetl klucze API .

Kliknij przycisk Utwórz nowy tajny klucz , skopiuj gdzieś klucz, tak jakbyś go używał w tej aplikacji do interakcji z OpenAI. Możesz teraz przystąpić do inicjalizacji OpenAI, importując pakiet openai (już zainstalowany) wraz z metodą konfiguracji. Następnie utwórz konfigurację z wygenerowanym kluczem i użyj go do zainicjowania OpenAI.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

W powyższym kodzie klucz API OpenAI jest przechowywany jako zmienna środowiskowa w pliku .env . Możesz utworzyć plik .env w folderze głównym aplikacji i przechowywać klucz w zmiennej REACT_APP_OPENAI_API_KEY .

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

Możesz teraz przystąpić do tworzenia metody generateResponse w pliku App.js i przekazać dwa parametry oczekiwane z formularza, który już utworzyłeś, aby obsłużyć żądanie i uzyskać odpowiedź z interfejsu API.

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

Możesz teraz wysłać żądanie do API OpenAI. Interfejs API OpenAI może wykonywać wiele operacji, takich jak zadawanie pytań i odpowiedzi (Q&A), korekta gramatyczna, tłumaczenie i wiele innych. Dla każdej z tych operacji dostępne są różne opcje. Na przykład wartością silnika dla pytań i odpowiedzi jest text-davinci-00 , podczas gdy dla tłumaczenia SQL to code-davinci-002 . Zachęcamy do zapoznania się z przykładową dokumentacją OpenAI dla różnych przykładów i ich opcji.

W tym samouczku pracujemy tylko z pytaniami i odpowiedziami, tak wygląda ta opcja:

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

Uwaga: zmieniłem wartość zachęty.

Monit to pytanie wysyłane z formularza. Oznacza to, że będziesz musiał otrzymać go z danych wejściowych formularza, które przekazujesz do metody generateResponse jako parametr. W tym celu zdefiniujesz opcje, a następnie użyjesz operatora rozkładania, aby utworzyć kompletną opcję zawierającą monit:

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

W tym momencie pozostaje tylko wysłać żądanie za pomocą metody createCompletion do OpenAI w celu uzyskania odpowiedzi.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

W powyższym kodzie tekst odpowiedzi zostanie wyświetlony na konsoli. Możesz przetestować swoją aplikację, zadając dowolne pytanie. Ostatnim krokiem byłoby utworzenie stanu, który będzie zawierał tablicę pytań i odpowiedzi, a następnie wysłanie tej tablicy jako rekwizytu do komponentu AnswerSection . Tak będzie wyglądał końcowy kod App.js :

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

Możesz teraz edytować komponent AnswerSection , aby pobierał on wartość props z App.js i używał metody JavaScript Map() do przeglądania tablicy storedValues :

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Gdy uruchomisz aplikację i przetestujesz ją, zadając pytania, odpowiedź wyświetli się poniżej. Ale zauważysz, że przycisk kopiowania nie działa. Będziesz musiał dodać zdarzenie onClick() do przycisku, aby wyzwoliło metodę obsługi tej funkcjonalności. Do obsługi tej funkcji można użyć metody navigator.clipboard.writeText() . Tak będzie teraz wyglądał komponent AnswerSection :

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Kiedy uruchomisz swoją aplikację, aplikacja do klonowania ChatGPT będzie działać idealnie. Możesz teraz wdrożyć swoją aplikację, aby uzyskać do niej dostęp online i udostępnić ją znajomym.

Jak wdrożyć aplikację React w Kinsta

Nie wystarczy zbudować tej aplikacji i pozostawić ją na komputerach lokalnych. Będziesz chciał udostępnić go online, aby inni mogli uzyskać do niego dostęp. Zobaczmy, jak to zrobić za pomocą GitHub i Kinsta.

Prześlij swój kod do GitHub

Aby przesłać swój kod do GitHub, możesz użyć poleceń Git, które są niezawodnym i wydajnym sposobem zarządzania zmianami kodu, współpracy nad projektami i utrzymywania historii wersji.

Pierwszym krokiem do wypchnięcia kodów będzie utworzenie nowego repozytorium poprzez zalogowanie się na konto GitHub, kliknięcie przycisku + w prawym górnym rogu ekranu i wybranie z rozwijanego menu opcji Nowe repozytorium .

Nadaj swojemu repozytorium nazwę, dodaj opis (opcjonalnie) i wybierz, czy ma być publiczne, czy prywatne. Kliknij opcję Utwórz repozytorium , aby je utworzyć.

Po utworzeniu repozytorium upewnij się, że uzyskałeś adres URL repozytorium ze strony głównej repozytorium, który będzie potrzebny do wypchnięcia kodu do GitHub.

Otwórz terminal lub wiersz polecenia i przejdź do katalogu zawierającego projekt. Uruchom kolejno następujące polecenia, aby przekazać swój kod do repozytorium GitHub:

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init inicjuje lokalne repozytorium Git, git add . dodaje wszystkie pliki w bieżącym katalogu i jego podkatalogach do nowego repozytorium Git. git commit -m "my first commit" zatwierdza zmiany w repozytorium za pomocą krótkiej wiadomości. git remote add origin [repository URL] ustawia adres URL repozytorium jako repozytorium zdalne, a git push -u origin master wypycha kod do zdalnego repozytorium (origin) w gałęzi master.

Wdróż swoją aplikację ChatGPT Clone React w Kinsta

Aby wdrożyć swoje repozytorium w Kinsta, wykonaj następujące kroki:

1. Zaloguj się lub utwórz konto Kinsta na pulpicie nawigacyjnym My Kinsta.
2. Kliknij Aplikacje na lewym pasku bocznym, a następnie kliknij Dodaj usługę .
3. Wybierz aplikację z menu rozwijanego, aby wdrożyć aplikację React na Kinsta.
4. Wybierz repozytorium, które chcesz wdrożyć, z wyświetlonego okna modalnego. Jeśli masz wiele oddziałów, możesz wybrać ten, który chcesz wdrożyć, i przypisać nazwę do aplikacji. Wybierz lokalizację centrum danych spośród 25 dostępnych, a Kinsta automatycznie wykryje polecenie startu.
5. Wreszcie, wypychanie kluczy API do publicznych hostów, takich jak GitHub, nie jest bezpieczne, ponieważ zostało dodane lokalnie jako zmienna środowiskowa. Hostując, możesz również dodać ją jako zmienną środowiskową, używając tej samej nazwy zmiennej i klucza, co jej wartość.

Rozpocznie się wdrażanie Twojej aplikacji iw ciągu kilku minut zostanie udostępnione łącze umożliwiające dostęp do wdrożonej wersji Twojej aplikacji. W tym przypadku jest to https://chatgpt-clone-g9q10.kinsta.app/ Uwaga: Możesz włączyć automatyczne wdrażanie, więc Kinsta ponownie wdroży Twoją aplikację za każdym razem, gdy zmienisz bazę kodu i przekażesz ją do GitHub.

Streszczenie

Interfejs API OpenAI może być używany do tworzenia szerokiej gamy potencjalnych aplikacji, od obsługi klienta i osobistych asystentów po tłumaczenie językowe i tworzenie treści.

W tym samouczku nauczyłeś się, jak zbudować klonowaną aplikację ChatGPT za pomocą React i OpenAI. Możesz zintegrować tę aplikację/funkcję z innymi aplikacjami, aby zapewnić użytkownikom konwersacje przypominające ludzkie.

To, co można zrobić za pomocą OpenAI API i jak ulepszyć tę klonowaną aplikację, to coś więcej. Na przykład możesz zaimplementować pamięć lokalną, aby poprzednie pytania i odpowiedzi nie znikały nawet po odświeżeniu przeglądarki.

Dzięki bezpłatnej wersji próbnej Kinsta i poziomowi hobby możesz łatwo rozpocząć bez żadnych kosztów na naszym hostingu aplikacji. Dlaczego więc nie spróbować i zobaczyć, co możesz stworzyć?

Podziel się swoim projektem i doświadczeniami w komentarzu poniżej.