We recently attended the JSNation conference, where the dominant theme was AI. During the event, I discovered simple, yet effective, AI applications in web development that further inspired me in their use. 
In the initial section, I will describe some of my examples using tools like ChatGPT or GitHub Copilot. In the second part, I will showcase the capability of AI to automatically summarize audio-visual content.


## Simple Examples
Let’s see some straightforward, yet highly useful, instances of how to leverage AI in the everyday life of a web developer.
 
RRR

### Designing an API Using Swagger Documentation

An example can be when I need to design an API (such as REST). From verbal instructions, I know what attributes will need to be accepted. Then, all that’s left to do is let AI generate the documentation, including examples.
>  Prompt:
Make swagger documentation for write REST API based on these attributes, unify naming conventions (e.g. camelCase). Dimension attributes are optional, rest attributes are required. Choose appropriate data types. The swagger should contain examples:
```js
Id;Result from Sorter;All scanned barcodes;Height;Length;Width;Parcelbarcode;Routebarcode;Time sorted;Time scanned
```

medium_qeetup.jpg

small_qeetup.jpg

thumbnail_qeetup.jpg

### Generating Validation Schema

Following API design, it’s possible to extend by automatically generating a validation schema, for instance, using a popular library like zod.

Analogously, one could have database repositories generated in a chosen library, for example.
> Prompt:
Give me the validation schema written in zod for this API.


medium_0_uacxXD2L4r0iCpMy.png

small_0_uacxXD2L4r0iCpMy.png

thumbnail_0_uacxXD2L4r0iCpMy.png

### Generating Mock Data

A classic use case that is suitable for generating test data or even generating mock data for APIs.

Static data can be generated, or you can instruct functions to create dynamic content instead of data objects, using tools like the faker library, for example.
>  Prompt:
Generate test data with TypeScrip types.


medium_0_uaNXIb8aUZrysXRF.png

small_0_uaNXIb8aUZrysXRF.png

thumbnail_0_uaNXIb8aUZrysXRF.png

### Generating Tests

For the same example, we can easily generate tests as well. I can create tests either at the end of the implementation or utilize the Test Driven Development approach.
>  Prompt:
Generate integration tests for this write API. Write tests with jest and supertest. Check if data are stored correctly with TypeOrm. Import mocked data.


medium_0_lHeI86IWBUt8HFZ5.png

small_0_lHeI86IWBUt8HFZ5.png

thumbnail_0_lHeI86IWBUt8HFZ5.png

### Generating Regex

What if a specification for more robust validation comes up, requiring the use of regular expressions? No problem. AI can handle it effortlessly.
>  Prompt:
I need to make a regex for the parcelBarcode attribute, the requirements are that it should be 16 characters long, it should start with a percent symbol and then a zero. Use regex in zod validation schema.


medium_0_UVQ56zfufc6JRwmm.png

small_0_UVQ56zfufc6JRwmm.png

thumbnail_0_UVQ56zfufc6JRwmm.png

### Generating SQL

I often need to obtain some analytical data. For example, finding out the maximum number of records my service stored in the database in a day and on which date it occurred.
>  Prompt:
Write me an SQL query in MSSQL, where you can find the 10 dates that had the most scanned parcels. The output will be the date and number of the parcels.


medium_0_ICpFa2V-c7slDIYF.png

small_0_ICpFa2V-c7slDIYF.png

thumbnail_0_ICpFa2V-c7slDIYF.png


## Generating Content Summary Using AI

One of the speakers, Wes Bos, demonstrated a complex and practical example of how AI can generate a podcast summary from a lengthy transcript. He explained that their podcast *Syntax* has over 600 hours of content, making it challenging for listeners to find specific topics quickly. To address this issue, they utilized an AI tool like ChatGPT to create concise summaries of each podcast episode.

The process involved converting each utterance in the transcript. Next, they formulated a custom prompt for the AI model, providing context about the podcast episode and specifying the desired summary format. The AI model then generated a comprehensive summary based on the given context. The result was a detailed summary of each podcast episode, complete with timestamps for each topic discussed.

By employing AI for this task, they were able to efficiently create informative summaries that allowed listeners to find relevant content easily. The AI-generated summaries also served as valuable material for tweetable content and search-engine optimization.

### How have I utilized this idea in my life?

The idea of automatically transcribing audio recordings into text, creating summaries, and a timeline intrigued me. I pondered how to utilize it in my life. While I don’t produce my own podcast, I do have numerous work meetings. To ensure an efficient meeting and transparent actionable steps, taking notes is beneficial.

What if there was a way to automatically record a meeting, transcribe it into text, and create a summary? Instead of building my own tooling for solving this problem, similar to Wes Bos, I found an existing solution — [https://tldv.io.](https://tldv.io.)

Tl;dv is compatible with Google Meet and Zoom. It can record the entire meeting, provide a textual transcript, and a summary with a timeline. The result is sent via email to meeting participants. On the timeline, you can click and directly switch to the video section where a specific topic is discussed.


Tl;dv produces good results, surprisingly not only in English but also in Czech. However, the best quality results can be achieved when all participants are online. If there are multiple people in one meeting room and they are situated at varying distances from the microphone, the results are compromised even with a high-quality microphone.


medium_0_RDlItnIkhhcVHQkc.png

small_0_RDlItnIkhhcVHQkc.png

thumbnail_0_RDlItnIkhhcVHQkc.png

## Will AI robots take our jobs?

Will AI robots take our jobs? I don’t believe so. Instead, AI will boost our productivity, allowing us to simplify and automate repetitive tasks, and freeing up time to focus on developing business logic.

Nevertheless, I believe it is essential to stay informed and adaptable as technology continues to advance.

```js
var name = text
```

large_https://cdn-images-1.medium.com/max/4392/1*C1MPPWHzoPbA73Hdm4YDXQ.png

medium_https://cdn-images-1.medium.com/max/4392/1*C1MPPWHzoPbA73Hdm4YDXQ.png

small_https://cdn-images-1.medium.com/max/4392/1*C1MPPWHzoPbA73Hdm4YDXQ.png

thumbnail_https://cdn-images-1.medium.com/max/4392/1*C1MPPWHzoPbA73Hdm4YDXQ.png

AI and Web Development: Hype or Reality?

V tomto článku si ukážeme, jakým způsobem můžete vytvořit Federation gateway za pomocí monorepa v NX. Zaměříme se na jednotlivé kroky, možnosti řešení i nejčastější chyby, které vás při tvorbě mohou potkat.

## Co je monorepo a Apollo Federation Gateway?

Monorepo je speciální případ repozitáře, při kterém se vyvíjí více nezávislých projektů a jejich kód se uchovává v rámci jednoho repozitáře.

Apollo Federation Gateway je architektura, která kombinuje několik rozhraní GraphQL API. S federací můžeme zodpovědně sdílet vlastnictví supergrafů napříč libovolným libovolným počtem týmů.

### Jak to celé funguje?

Ve federované architektuře se jednotlivá rozhraní GraphQL API nazývají subgrafy. Z nichž se vytváří tzv. supergrafy, které používá právě gateway. Pomocí dotazů na vytvořený supergraf se mohou klienti ptát na všechny subgrafy najednou. Brána tedy slouží jako přístupový bod pro náš supergraf. Klient se může dotazovat na jakýkoliv GraphQL server, aniž by musel něco konfigurovat.

**Příklad z praxe**

Nyní si ukážeme příklad, jak to celé v reálu může vypadat. Představme si, že máme dvě GraphQL aplikace, které nám běží na různých portech. První bude spravovat uživatele, pojmenujeme si jí userapp, a druhá články, tu si pojmenujeme articleapp. Tyto aplikace spolu mohou navzájem komunikovat. Dále bychom měli FE aplikaci (na obrázku client), která nám představuje knihovnu. Knihovna si spravuje uživatele a články. Musí být tedy napojena na naše dvě GraphQL aplikace. To nám zajistí právě federation gateway.




small_1_xi1jpj3oP2q7_n6-P11TVg.png

thumbnail_1_xi1jpj3oP2q7_n6-P11TVg.png

**Tvorba gateway**

Vytvoření gateway se dá řešit dvěma způsoby. Prvním způsobem je vytvořit gateway, která má v sobě vložený objekt s položkou serviseList. Uvnitř se jen nadefinuje název aplikace a url, nad kterou aplikace poslouchá.

small_1_vF3gtul5P_ZO5w9dpuDpgw.webp

thumbnail_1_vF3gtul5P_ZO5w9dpuDpgw.webp

Toto řešení má však jednu velkou nevýhodu. Pokud nám gateway poběží a nějaká z aplikací spadne, přestane fungovat jen postižená část aplikace. Když se aplikaci podaří opravit, okamžitě po nasazení nám začne v bráně fungovat. Problém ale nastává tehdy, pokud by došlo k výpadku samotné gateway. Gateway se začne restartovat a pokusí se z aplikací stáhnout schémata (ukázka v kódu).

Problém také nastane, když nějaká z aplikací neběží. Může se stát, že se některou aplikaci nepodaří nastartovat, a je třeba ji ručně nahodit. Federation gateway se pokusí stáhnout schémata, to se jí nepodaří, protože všechny aplikace neběží, a aplikace spadne. V tu chvíli nám federation gateway vůbec neběží, a to je velký problém. My však potřebujeme, aby aplikace běžela i bez toho, aniž by byly všechny aplikace v běhu. Z tohoto důvodu je dobré použít pro implementaci druhý zmiňovaný způsob.

**Použití supergrafu**
Druhým způsobem je použití supergrafu, který obsahuje veškerá schémata aplikací, nad kterými brána běží a na jaké url poslouchají. Apollo Federation Gateway předá objekt, který obsahuje položku supergraphSdl, a ta pak přidá obsah supergrafu ve stringové podobě.




Aplikace si při spuštění stáhne ze souboru obsah supergrafu, čímž gateway získá veškerá schémata aplikací a url adresy, které ke spuštění potřebuje, a už se dále nestará, zda aplikace skutečně běží či ne.

### Postup při tvorbě Apollo Federation gateway
Nejprve jsem si vytvořil za pomocí NX workspace pro monorepo, následně jsem vytvořil dvě GraphQL aplikace a nad nimi Federation gateway, která je schopna načítat supergraph a následně si kontrolovat, zda je aktuální. Pokud zjistí, že je obsah rozdílný, než je obsah nasazeného supergrafu, server se zastaví, gateway si načte aktuální obsah a server se restartuje. K přenasazování supergrafu bylo třeba vytvořit i nějaký mechanismus, který by vytvářel nové supergrafy. K tomu jsem vytvořil separátní aplikaci, která nám supergrafy vytváří a kontroluje, zda není dostupný nový oproti aktuálnímu ve zvoleném úložišti.

Co se úložišť týče, existuje mnoho možností, kam supergrafy ukládat. Já si pro ukládání zvolil dvě místa. Jedním je lokální místo na disku a druhým je databáze. Více si k tomu však řekneme níže, kde si celý proces popíšeme.

Odkaz na celý workspace je možné stáhnout zde: [https://github.com/qest-cz/gql-federtion-sample](https://github.com/qest-cz/gql-federation-sample)


small_1_XL2ztJEIuRMClxX5wph_FA.webp

thumbnail_1_XL2ztJEIuRMClxX5wph_FA.webp

Jak vytvořit GraphQL federaci v NX? Přehledný návod, jak na to

## Můj nadpis
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor sit amet purus malesuada congue. Praesent vitae arcu tempor neque lacinia pretium. Etiam posuere lacus quis dolor. Fusce suscipit libero eget elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam at arcu a est sollicitudin euismod. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nam sed tellus id magna elementum tincidunt. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Aenean placerat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed ac dolor sit amet purus malesuada congue.

Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Nulla quis diam. Aenean fermentum risus id tortor. Etiam bibendum elit eget erat. Aenean id metus id velit ullamcorper pulvinar. Proin in tellus sit amet nibh dignissim sagittis. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Morbi scelerisque luctus velit. Phasellus rhoncus. Mauris tincidunt sem sed arcu. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui.

Phasellus et lorem id felis nonummy placerat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent in mauris eu tortor porttitor accumsan. Nullam rhoncus aliquam metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc auctor. Integer tempor. Quisque tincidunt scelerisque libero. Fusce consectetuer risus a nunc. In rutrum. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Mauris dictum facilisis augue. Nunc dapibus tortor vel mi dapibus sollicitudin. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Donec quis nibh at felis congue commodo.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam dictum tincidunt diam. Praesent id justo in neque elementum ultrices. Sed ac dolor sit amet purus malesuada congue. Etiam quis quam. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Ut tempus purus at lorem. Praesent in mauris eu tortor porttitor accumsan. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Mauris elementum mauris vitae tortor. Integer in sapien. Morbi scelerisque luctus velit. Suspendisse sagittis ultrices augue. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nunc tincidunt ante vitae massa.

Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nam sed tellus id magna elementum tincidunt. Nullam faucibus mi quis velit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris elementum mauris vitae tortor. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat. Proin mattis lacinia justo. Vivamus porttitor turpis ac leo. Cras elementum. Praesent id justo in neque elementum ultrices.

thumbnail_Datový zdroj 11@0.75x.png

testovaci-clanek

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor sit amet purus malesuada congue. Praesent vitae arcu tempor neque lacinia pretium. Etiam posuere lacus quis dolor. Fusce suscipit libero eget elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam at arcu a est sollicitudin euismod. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nam sed tellus id magna elementum tincidunt. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Aenean placerat. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Sed ac dolor sit amet purus malesuada congue.

Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Nulla quis diam. Aenean fermentum risus id tortor. Etiam bibendum elit eget erat. Aenean id metus id velit ullamcorper pulvinar. Proin in tellus sit amet nibh dignissim sagittis. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Morbi scelerisque luctus velit. Phasellus rhoncus. Mauris tincidunt sem sed arcu. Maecenas ipsum velit, consectetuer eu lobortis ut, dictum at dui.

Phasellus et lorem id felis nonummy placerat. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Praesent in mauris eu tortor porttitor accumsan. Nullam rhoncus aliquam metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc auctor. Integer tempor. Quisque tincidunt scelerisque libero. Fusce consectetuer risus a nunc. In rutrum. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Mauris dictum facilisis augue. Nunc dapibus tortor vel mi dapibus sollicitudin. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Donec quis nibh at felis congue commodo.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Etiam dictum tincidunt diam. Praesent id justo in neque elementum ultrices. Sed ac dolor sit amet purus malesuada congue. Etiam quis quam. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Ut tempus purus at lorem. Praesent in mauris eu tortor porttitor accumsan. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Mauris elementum mauris vitae tortor. Integer in sapien. Morbi scelerisque luctus velit. Suspendisse sagittis ultrices augue. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Nunc tincidunt ante vitae massa.

Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Nam sed tellus id magna elementum tincidunt. Nullam faucibus mi quis velit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris elementum mauris vitae tortor. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent in mauris eu tortor porttitor accumsan. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat. Proin mattis lacinia justo. Vivamus porttitor turpis ac leo. Cras elementum. Praesent id justo in neque elementum ultrices.

blogs:hero.headline