#htmlpage

[nascenture]

Top 10 Angular Features You Must Know

To build web applications with Angular, you need to use the Angular framework for JavaScript. Because it is one of the frameworks that most people use, many big companies rely on it. Angular is a good framework because it has so many features that help when building websites. But every programmer should know about a few angular functions that aren't as well-known. Using this list of angular capabilities will help you write code that is easier to change and test.

In addition to this, it assists developers in better improving the functionality of the software. The reason for this is its trustworthiness in the development of online apps that run in browsers. In addition to this, it is the most effective medium for developing Single Page Applications, also known as SPAs. Because it has so many different capabilities, this free and open-source framework is an excellent choice for creating dynamic websites. As a result, in this post, we will investigate the core of Angular's popularity: its best features.

What is Angular?

Angular is a Google-supported open-source framework and platform for developing TypeScript-based Single Page Apps. Originally, Angular was meant to be the successor to the widely used AngularJS framework. Despite this, design decisions led Google to offer it as a standalone product; this includes the absence of backward compatibility and the straightforward upgrade route from AngularJS to Angular 2.

The MIT license lets anyone use the Angular framework, which is open-source software. It's easy to see why Angular is so popular among developers; the framework offers a consistent foundation with several obvious benefits. Users can build scalable, robust apps with its help.

Essential Features of Angular

1. Maximum Speed and Efficiency

By translating templates directly into code, Angular revolutionizes the contemporary JavaScript virtual machine. So, the hand-written code you created can take advantage of a useful framework. The best feature of Angular is that it allows you to render the code into HTML and CSS, giving you the ability to view the application for the first time on any other platform, like Node.js,.Net, PHP, and so on. The amount of time it takes for apps built using Angular to load is noticeably less than that of any other front-end framework currently available. 

2. Data Binding

By using a technique called "data binding," visitors to a website are able to control certain aspects of the page directly within their browser. Developers don't need any complex scripting or coding for Angular; just easily modifiable HTMLPages with interactive elements like calculators, tutorials, forums, and games that employ data binding. When a website has a lot of data, this also allows for a better incremental display. Angular makes use of two-way binding. Developers can do easy modifications to the associated UI elements reflected in the model state.  With this capability, the framework can link the DOM to the model data via the controller.

3. Declarative UI

A declarative user interface is one of AngularJS's main characteristics. When working with Angular, you can forego utilizing JavaScript to define the user interface of your web app and instead rely on HTML, which is simpler. When used with Angular, HTML's ability to import the declarative and intuitive characteristics of UI components proves to be a boon. Having these characteristics eliminates the need to manually start up program flows. You can instead only explain the flow of information and how the pages are laid out. The components are also managed according to the layout of Angular's declarative UI. This helps save a lot of time and energy in front-end development.

4. Standalone Component

This is one of the many cutting-edge capabilities that are currently provided by Angular in its current iteration. With the assistance of the standalone component, you can build a module that can be reused and then inserted into any Angular app. It is one of the most recent angular additions to the collection. This is an excellent new feature in Angular that was added for building modular apps. A standalone component does not need to have a module added to it to function, but the module is still accessible for use if it is desired. This is the most important advantage that comes with using a standalone module.

5. Universal Access to Angular Apps

In addition to allowing the development of mind-blowing applications, Angular's magical front-end platform also allows the creation of high-end animations to improve the user experience. The application programming interface (API) for Angular is so easy to use that you can easily create a complex animation and choreography with very little code. Furthermore, using modern unit testing frameworks, you can fix your faulty code whenever you choose.

More than eleven unit testing modules are already included in Angular, guaranteeing bug-free programming. One of Angular's groundbreaking characteristics is the ability to create accessible applications. The accessible applications are used by all users, including those with disabilities.

6. MVC Architecture

Model-View-Controller is the abbreviation for the architectural pattern. The Model controls the application's data, whereas the View is responsible for displaying that data. At the same time, the controller's role is to bridge the gap between the view and model levels. The MVC architecture allows you to divide your program into its constituent parts and then connect them with code. On the other hand, Angular only requires developers to divide the program into MVC, and the framework takes care of the rest. And it reduces the amount of time spent programming by a great deal.

7. CDK and Angular Material

With each new release, Angular, a leading front-end language, enhances its Component Development Kit (CDK). The most recent version of the Angular CDK has support for virtual scrolling and automatic refreshes. It's useful for both dynamically loading and unloading the DOM, allowing you to quickly compile a huge amount of high-performing data in a single location. You can add both the Drag-and-Drop Model and the Scrolling Model to the program. This DragDropModule's spotlight features include list-level sorting, free dragging, previews, and placeholders. It also facilitates moving objects between lists and rearranging their order within a list.

8. Angular CLI

With the Command Line Interface (CLI) feature of Angular and Angular.js, developers can send the user's instructions as text. Angular CLI will also automate some tasks by following the instructions given to it by the developers. Angular developers can use these basic commands to add or remove parts of a webpage. Installing dependencies and putting together many features will take less time for Angular developers if they choose to do so.

9. The Abilities of Ivy Renderer

With the help of a renderer, it is easier to convert code written in TypeScript and HTML to the more common syntax of JavaScript. This helps the browser understand it better. If you want to ensure that everything is displaying properly in the browser, you need to convert the component definitions and template files you employ into a language the browser can read. Ivy Renderer can reduce the size of a web application and make it load faster by getting rid of unused code.  At the end of the day, this function makes both the Angular framework and the bundle smaller.

10. Plenty of Resources and Instructions

One of the primary reasons that Google recommends using the Angular framework is because of its high level of dependability. The documentation and tools that Google has supplied have been of enormous assistance to the Angular community, which has reaped many benefits as a result. The Angular community makes all of these tools available to its developers, ensuring that they are never truly alone in their work. The discussion forums and the files both provide all of the information that you require. 

Wrapping Up

You are familiar with the components that make up Angular. You have to be aware of the steep learning curve associated with Angular if you want to be an entrepreneur. Front-end Developers are expected to have a solid grasp on many aspects, including libraries, templates, directives, and modules. For this reason, you should look for an Angular.js development company that has a lot of work experience in addition to plenty of hands-on knowledge.

[kawaii-lau]

Rulers of Flowers ✽

✽ Unresponsive Fantasy Profile Text ( Minimalist) ✽ 6+ sections with overflow ✽ 840px width x 500px height ✽ Up to 9 relations ✽ Endless gallery (250px width x 400px height) ✽ Easy changeable appearance (CSS)

✽ Pastebin: Link

Do not steal / Do not redistribute / Like & Reblog if you’re using  ♡ (Unintentionally inspired by Sarah J Maas’s ACOTAR; no, it’s not Feylin).

[mycoderesist]

What is BERS BERS offers interactive components such as mobile apps, microsites, onepagers, digital brochures, and more that make creating digital content without coding a breeze. BERS enables users to maximize the value of their effort. BERS offers a growing number of ready-to-use widgets. There's something for everyone, from parallax to blend effects and animations to media players, graphs, tables, galleries, overlays, and interactive maps. If requested, the staff will gladly create extremely tough encounters to meet particular needs. They are quick, trustworthy, and precise when it comes to customer service and attention to detail. Users may design and deploy corporate-branded native iOS and Android applications, as well as desktop HTML, using BERS®. The material is available to individual users and user groups. The system is scalable, with designers using a powerful CDN to deliver material globally. Users may also connect the corporate solution with their current IT infrastructure by linking the user management via SAML. BUILD CONTENT: BERS provides a powerful WYSIWYG web editor that allows users to produce attractive and interactive content quickly and easily, with no need for scripting. Distribute Content: BERS provides a powerful WYSIWYG web editor that allows users to produce attractive and interactive content quickly and easily, with no need for scripting. HTML Onepager: The quickest approach to acquire results is to utilize the "export to HTML function," which allows users to rapidly export the interactive material as a standalone onepager. It's as easy as clicking a button and zipping a file. All materials, including films, photos, styles, and scripts, are automatically archived. Web Brochure: The "public package" integrates many pages and makes them instantly available online, no additional hosting is required. Users The most prevalent BERS industries include Mobile Learning, Marketing Communications, Manuals, Reports, etc. Vision BERS provides a wealth of ready-to-use interactive features that make it simple to generate digital content without coding: Mobile Apps, Microsites, Onepagers, Digital Brochures, and much more. BERS® assists users in releasing the full potential of the work. What BERS can Offer BERS is a powerful WYSIWYG web editor that allows users to produce attractive and interactive content quickly and easily, with no need for scripting. Easily select from a variety of design and interactive components, then customize and set colors, fonts, locations, and sizes as needed. Generate as an HTML onepager, combine different pages to make a web brochure, integrate it in the current website, or make use of BERSfull's capability and distribute it to any device or platform through the portal. With its built-in business capability, users may manage a completely digital bookshop for the company, brands, or services. Why BERS The corporate solution may be simply integrated with the existing IT system, and user management can be connected via SAML. BERS enables seamless cross-device publishing, whether on a mobile or desktop device, with a touch or a mouse. The platform connects all of the pieces, allowing users to create and distribute highly engaging learning content while also connecting with Moodle Learning Management System and Centrify to provide a smooth onboarding experience and comprehensive user management. For both internal and external audiences, from interactive readers, business reports, and handbooks to strong self-learning tools

[webtechexperts]

What is a Website URL? A #Website #URL stands for #UniformResourceLocator. In that case, a #WebsiteURL is nothing more than the #address of a given unique resource on the #Web. And in theory, each #validURL points to a unique #resource. Such #resources can be an #HTMLpage, a #CSSdocument, an #image, etc. Learn more here: https://josephmuciraexclusives.com/website-url/ https://www.instagram.com/p/B9FDLgIF0Sz/?igshid=18ki58ftk14b6

[99landingpages]

Promote your business with trending landing pages. We have landing page templates for all types of businesses and services. Customize them, integrate them, enjoy quality leads.

[stefanxhunga]

How to create my AMP HTML page?

How to create my AMP HTML page?

How to create my AMP HTML page? The following markup is a decent starting point or boilerplate. Copy this and save it to a file with a .html extension. The content in the body, so far, is pretty straightforward. But there’s a lot of additional code in the head of the page that might not be immediately obvious. Let’s deconstruct the required mark-up. Use HTTPS: When creating AMP pages and…

[tiesandtea]

Sixty Seconds with Mat Osman, Metro News, 4 August 2021. (x)

The Suede bassist, 53, talks book festivals, his brother’s love of mainstream TV and his debut novel The Ruins

By Gabriel Tate.

Full interview under the cut.

You’re discussing how to write a first novel at the Essex Book Festival. Any tips for Metro readers?

You have to recognise stories — what interests you and makes you think ‘what if?’ Then it’s like exercise — you have to do it every day. Write 500 words a day and you’ve got a first-draft novel in about seven months.

Do book festivals and music festivals have anything in common?

Book festivals serve full meals, not cheese sandwiches in graffitied dressing rooms! And they tend to be in cities, whereas music festivals tend to mean you’re stuck in some grim industrial estate on the outskirts of Dortmund for a couple of days.

Why did you decide to write The Ruins?

Being the bass player in Suede gives you a lot of free time. Lots of it was written in hotels, dressing rooms, planes or buses… I’d been writing short stories for a long time and one of them just stuck, so I expanded it to the point where it was 30,000 words and a novel stopped looking so terrifying. I love the band and I’m proud of the records but I wanted to do something that stood or fell on me alone.

What’s it about?

Two very different twin brothers. Brandon is a failed musician, Adam is a geeky, shut-in model maker. One of them dies and the other has to find out what happened, and is faced with the option of taking over his brother’s life.

If I was being lazy, I might think you were Brandon and your brother Richard was Adam…

No, they’re both me. Brandon is the self-centred pretentious d***head I would have become if I was a lead singer. Adam is the side of me who wrote the book.

Richard’s whodunnit, The Thursday Murder Club, topped the bestseller charts. Did you compare notes while writing?

We did. There’s a lot of self-doubt in being a first-time writer, so having someone to commiserate with was great. I’d often get a text saying he’d wasted a day down some rabbit hole and I thought, thank God it’s not just me!

Your novels are very different. Do they reflect your different personalities?

I think so. I’m glad they are because it would have been tricky had we been competing for the same audience. Richard has a love of mainstream entertainment, Saturday night telly, pop music, detective novels. None of it is put on, he was that way as a kid. He had a column in a golf magazine when he was 15! I knew he’d write something that would connect with people and he’s a fantastic writer as well. You know you’re in safe hands from page one.

You and Brett Anderson are the only founder members still in Suede. How have you stuck it out?

We like the same things. We started the band because we both like theatrical, emotional, violent music and that hasn’t changed. We bicker and disagree but we want to be in the same kind of band and that’s bigger than anything else.

Did you think that was it when the band split up in 2003?

Absolutely. I didn’t want any part of the music business any more. I was convinced it was a money-grubbing, venal, backstabbing industry and it was only when I got real jobs that I realised that’s just work! Then, about halfway through our one-off gig for the Teenage Cancer Trust in 2010, we looked at each other and knew we had to do it again. I’d forgotten what it was like having 5,000 people singing your songs back to you.

Did your new workmates ask about Suede?

It was strange. When I was in an office people felt sorry for me, so no one talked about it, but it was good to do — part of the book is about changing your life entirely at 45.

Have you enjoyed success more second time around?

I treasure it more. First time around, you’re so young that you think it’ll last forever but now I’m aware these things are fragile and it could end tomorrow. It’s an amazing thing to do with your life.

How much of a relief will it be to tour again?

In November we’re doing the 25th anniversary shows for Coming Up and I cannot wait. It’s such a celebratory record. I don’t mind playing the old stuff at all, as long as that’s not all I’m doing. I won’t ever get tired of the feeling Trash or Beautiful Ones bring to people — that shared history is lovely. We also spent lockdown writing a new album, a gnarly, punky, fast record made to be played in sweaty little clubs. The writer in me has loved having all this time but the musician in me is champing at the bit.

■ Mat Osman is appearing at the Essex Book Festival on August 22. essexbookfestival.org.uk

[morereigntoo]

Rose Williams The Sanditon actress, 27, on her horror film with a deeper meaning and how Jane Austen changed her life by RACHEL COROCAN Friday, April 23, 2021

The Power, Sanditon, Reign…

Do you get star-struck?

It’s exciting to meet and work with people you admire. I always learn from people on jobs and learnt the most from Canadian actress Megan Follows in Reign, my first big job, when I played her daughter. She and Craig Parker took me under their wing and I’ll always thank them for that. I hadn’t been to drama school but had done little pieces like an episode of Casualty and adverts and music videos. Then I got that audition and it completely changed my life….

Read more in the METRO app. https://edition.metro.news/content/20210423.am/htmlpages/2410283.html

#RoseWilliams #ThePowerMovie2021 #ThePowerFilm2021 #MrsHarrisGoestoParis #MrsHarrisGoestoParisRemake #Sanditon #JaneAusten #Reign #MeganFollows #CraigParker #MetroUK #SixtySeconds #RachelCorcoran

[techtoreview]

[draegerit]

ChatGPT & ESP32

In diesem Beitrag zeige ich dir, wie du auf deinem ESP32 eine Schnittstelle zur künstlichen Intelligenz ChatGPT herstellst und mit dieser kommunizierst.

Für diesen Beitrag verwende ich den ESP32-C3 von der Firma Seeed Studio, dieser kleine Mikrocontroller verfügt über eine WiFi-Schnittstelle und ein paar GPIO Pins (welche aber für diesen Beitrag nicht benötigt werden).

ESP32-C3 von Seeed Studio

ESP32-C3 von Seeed Studio (Rückseite) Den ESP32-C3 habe ich dir bereits im Beitrag Mikrocontroller ESP32C3 von Seeed Studio vorgestellt und gezeigt, wie dieser in der Arduino IDE 2.0 programmiert wird. An diesen Beitrag möchte ich nun anknüpfen. Ich gehe daher davon aus, dass der Mikrocontroller bereits auf deinem Computer eingerichtet und in der Arduino IDE 2.0 lauffähig ist. Im letzten Beitrag Absenden eines Requests an ChatGPT per Postman hatte ich dir bereits erläutert, wie du mithilfe von der kostenfreien Anwendung Postman eine Anfrage absendest. Dort wird die Anfrage per JSON-Request gesendet und dieses möchte ich hier ebenso nutzen um die Anfrage vom ESP32 an ChatGPT zu senden.

Aufbau einer WiFi Verbindung zum lokalen Netzwerk

Damit wir mit ChatGPT kommunizieren können, benötigen wir zunächst eine WiFi Verbindung zum lokalen Netzwerk oder zu einem Hotspot. //Einbinden der Bibliotheken //für die WiFi Verbindung des ESP32 #include #include //SSID & Passwort für das lokale WiFi #define WIFI_SSID "" #define WIFI_PASSWORD "" //Initialisieren eines Webservers mit dem Port 80 (default http) WebServer server(80); void setup() { //begin der seriellen Kommunikation mit 115200 baud Serial.begin(115200); //Aufbau einer WiFi Verbindung mit den Daten WiFi.begin(WIFI_SSID, WIFI_PASSWORD); //maximal 10 Versuche zum aufbau der WiFi Verbindung int maxConnectionAttempts = 10; int counter = 0; //sollange die Verbindung nicht aufgebaut ist UND //der Zähler der Verbindungsversuche kleiner als den Wert der Variable //maxConnectionAttempts ist, dann... while (WiFi.status() != WL_CONNECTED && counter < maxConnectionAttempts) { //schreiben eines Punktes auf der seriellen Schnittstelle Serial.print("."); //den Zähler um eins erhöhen counter++; //eine kleine Pause von 250 Millisekunden delay(250); } //Wenn die Verbindungsversuche "verbraucht" sind oder eine //Verbindung zum WiFi Netzwerk aufgebaut wurde, dann soll //dieses ausgegeben werden. Serial.println(""); Serial.print("Zum WiFi Netzwerk "); Serial.print(WIFI_SSID); Serial.println(WiFi.isConnected() ? " verbunden" : " nicht verbunden"); //Wenn die Verbindung erfolgreich aufgebaut wurde, //dann soll die IP-Adresse auf der seriellen Schnittstelle //ausgegeben werden. if (WiFi.isConnected()) { Serial.print("IP-Adresse: "); Serial.println(WiFi.localIP()); Serial.println(); server.begin(); server.on("/", callWebsite); } else { //Wenn die Verbindung nicht aufgebaut wurde, dann soll //eine entsprechende Meldung ausgegeben werden. Serial.print("Fehler beim Aufbau der Verbindung zu "); Serial.println(WIFI_SSID); Serial.println(); } } //Callback Funktion welche aufgerufen wird wenn der Benutzer //im Browser die IP-Adresse eingibt. void callWebsite() { //eine kleine einfache Webseite mit dem Text "Hallo Welt!" String htmlpage = "

Hallo Welt!

"; //Absenden der Seite //mit HTTP-Code 200 "OK", //als MimeType "text/html" server.send(200, "text/html", htmlpage); } /** * Funktion wird fortlaufen ausgeführt. **/ void loop() { server.handleClient(); } Wenn der Code erfolgreich hochgeladen wurde, muss die Taste Reboot "R" auf dem Mikrocontroller betätigt werden. Es sollte dann die nachfolgende Ausgabe im seriellen Monitor erscheinen und wir können nun bei erfolgreicher Verbindung die IP-Adresse ablesen. ESP-ROM:esp32c3-api1-20210207 Build:Feb 7 2021 rst:0x15 (USB_UART_CHIP_RESET),boot:0x8 (SPI_FAST_FLASH_BOOT) Saved PC:0x4203675c SPIWP:0xee mode:DIO, clock div:1 load:0x3fcd5810,len:0x438 load:0x403cc710,len:0x91c load:0x403ce710,len:0x25b0 entry 0x403cc710 . Zum WiFi Netzwerk FRITZBox7590GI24 verbunden IP-Adresse: 192.168.178.131 Wenn man nun die IP-Adresse 192.168.178.131 im Browser eingibt, erhält man den Text "Hallo Welt!".

Nachfolgend das kleine Programm als ZIP-Datei zum download.

Erstellen einer HTML-Seite mit Eingabe-/Ausgabefeld

Für das Absenden der Anfrage an ChatGPT benötigen wir ein Eingabefeld auf der Webseite und für die Antwort ein Ausgabefeld (in diesem Fall ein einfacher DIV-Container).

Die CSS & JavaScriptdateien für diese Seite lagere ich auf die Adresse http://progs.ressourcen-draeger-it.de/chatgptesp32 aus. ChatGPT & ESP32

ChatGPT & ESP32

%resultTxt% %errorMsg% Diese Seite wollen wir in einen String im Code speichern, daher muss diese noch komprimiert werden. Zum Komprimieren von HTML Seiten kann man zum Beispiel das Onlinetool https://www.textfixer.de/html/html-komprimieren.php nutzen. Dieses Tool entfernt unnötige Zeilenumbrüche und andere Formatierungen. String page = " ChatGPT & ESP32

ChatGPT & ESP32

%resultTxt%%errorMsg% "; Platzhalter für Anfrage, Antwort und ggf. Fehlermeldungen In den HTML-Code betten wir noch 3 Platzhalter für die Kommunikation mit ChatGPT und den später gezeigten JSON-Parser ein. Des Weiteren noch einen Platzhalter zum Steuern, ob die Fehlermeldung angezeigt werden soll oder nicht. - %inputFieldValue% - %resultTxt%, - %errorMsgStyle%, - %errorMsg% Diese Platzhalter werden später mit einer Funktion durch den Text ersetzt (String.replace)

Aufbau eines JSON-Request an ChatGPT

Nachdem wir nun eine Verbindung zu einem lokalen WiFi Netzwerk erfolgreich aufgebaut und eine kleine Webseite erstellt haben, können wir einen Request / eine Anfrage an ChatGPT stellen. Dazu benötigen wir einen API Key welchen man unter https://platform.openai.com/account/api-keys anlegen können. Für die JSON Verarbeitung nutze ich die Bibliothek ArduinoJson.h welche über den internen Bibliotheksverwalter installiert werden kann. Dazu öffnen wir den Bibliotheksverwalter (1) und suchen nach ArduinoJson (2) danach klicken wir auf die Schaltfläche INSTALL (3). Es werden dann die Dateien geladen und installiert, wenn dieser Vorgang abgeschlossen ist, wird dieses mit dem Label INSTALLED (4) angezeigt.

installieren der Bibliothek ArduinoJson über den Bibliotheksverwalter Zunächst müssen wir unseren Request an die KI aufbauen. Wie erwähnt, senden wir ein JSON an das System ab. //definieren das wir Daten vom Typ "application/json" senden https.addHeader("Content-Type", "application/json"); //den API Key mit String token_key = "Bearer " + chatgptApiKey; https.addHeader("Authorization", token_key); StaticJsonDocument data; //das verwendete Model data = "text-davinci-003"; //die Anfrage an das System data = chatgptQuestion; //die Komplexität data = 0; //die gewünschte länge der Antwort von ChatGPT //Dieser Wert darf nicht zu groß gewählt werden, //der ESP32 hat nur begrenzten Speicherplatz. data = 300; String requestBody; //serialisieren des JSON in einen String serializeJson(data, requestBody); //absenden des Requests https.POST(requestBody);

Auswerten des HTTP Codes

Die Methode "POST" liefert als Rückgabewert einen ganzzahligen Integerwert als HTTP-Code. Wenn es funktioniert hat, d.h. der Service hat die Anfrage angenommen und verarbeitet, dann erhalten wir ein HTTP-200 Code. Nachfolgend habe ich einen kleinen Auszug von den möglichen HTTP-Codes entnommen. //absenden des Requests int httpCode = https.POST(requestBody); if (httpCode != 200) { errorMsg = "HTTP-Code: " + String(httpCode); switch (httpCode) { case 401: errorMsg += " Unauthorized"; break; case 403: errorMsg += " Forbidden"; break; case 404: errorMsg += " Not Found"; break; case 405: errorMsg += " Method Not Allowed"; break; case 408: errorMsg += " Timeout Error"; break; case 500: errorMsg += " Internal Server Error"; break; case 501: errorMsg += " Not Implemented"; break; case 502: errorMsg += " Bad Gateway"; break; case 504: errorMsg += " Gateway Timeout"; break; default: errorMsg += ""; } } Eine Fehlermeldung vom System wird auf der Seite in einem kleinen, roten Fenster angezeigt. In diesem Fall habe ich den API Key falsch eingegeben.

Auswerten der Antwort von ChatGPT

In jedem Fall (Fehler oder Erfolg) erhalten wir eine Antwort im JSON Format vom System. Diese Antwort engl. Response müssen wir nun deserialisieren und in einen String ablegen. Wenn der empfange, JSON-String zu groß für die Verarbeitung auf dem Mikrocontroller ist, erhalten wir eine Fehlermeldung. String response = https.getString(); if (response.length() > 0) { StaticJsonDocument doc; DeserializationError error = deserializeJson(doc, response); if (error) { errorMsg = error.f_str(); Serial.print("error: "); Serial.println(errorMsg); return; } ... } Wenn die Deserializierung erfolgreich war, dann prüfen wir, ob wir einen HTTP-Code größer als 200 erhalten haben (also einen Fehler). Dann lesen wir die Fehlermeldung aus dem JSON, andernfalls lesen wir die Antwort und schreiben diese in den jeweiligen Platzhalter auf die Webseite. if (httpCode > 200) { errorMsg += " "; String errorMessage = doc; errorMsg += errorMessage; htmlpage.replace("%resultTxt%", ""); } else { String chatGPTAnswer = doc; Serial.print("answer: "); Serial.println(chatGPTAnswer); htmlpage.replace("%resultTxt%", chatGPTAnswer); } Zum Schluss befüllen wir noch das Feld mit der eventuellen Fehlermeldung und senden die modifizierte Webseite ab. htmlpage.replace("%errorMsg%", errorMsg); String errorMsgStyle = " style='display:none;' "; if (errorMsg.length() > 0) { errorMsgStyle = " style='display:block;' "; } htmlpage.replace("%errorMsgStyle%", errorMsgStyle); server.send(200, "text/html", htmlpage);

Kompletter Code zum Download als ZIP-Datei

Den kompletten Code als ZIP-Datei biete ich dir hier als Download an. Externe Ressourcen für die Webseite Stylesheets, & JavaScript. https://wiki.seeedstudio.com/xiaoesp32c3-chatgpt Read the full article