Wie findet ihr dieses Tutorial, um Webdevelopment zu lernen?

(27) Build & Launch an Enterprise-Level Food Ordering Platform: React Node.js MongoDB Auth Stripe & More! - YouTube

Erreicht man danach Industrielevel?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

21.07.2024, 21:58

Also das Ding ist halt, dass „Industrielevel“ total schwammig ist.

Wenn du das selbst kannst, was da gezeigt wird, weil du ein solches Verständnis für Code hast, dann findest du sicher einen Job. Damit kannst du Software bauen.

Aber das wirklich schwierige an Softwareentwicklung fand ich noch nie das Coden im Endeffekt.

Woher ich das weiß:Berufserfahrung – Softwareentwicklerin

Kristall08

21.07.2024, 22:04

Er will damit ein Studium/ eine Ausbildung ersetzen.

Lamanini

21.07.2024, 22:05

@Kristall08

Wenn er das kann, dann macht eine Ausbildung oder ein Studium vielleicht auch für ihn keinen Sinn. Klar, die Scheine zu haben ist gut, aber als Quereinsteiger kann man mit diesem Wissen mitarbeiten.

Alexandraseha22

Beitragsersteller

21.07.2024, 22:07

@Lamanini

Kluge Dame!

Kristall08

21.07.2024, 22:20

@Lamanini

Wenn er das kann,

Kann er ja eben nicht.

Sonst müsste er ja nicht solche Tutorials schauen und fragen, ob das reicht.

Alexandraseha22

Beitragsersteller

21.07.2024, 22:15

Tutorial ist 17 Stunden. Denkst du man kann das innerhalb einer Woche lernen? diese 17 stunden nachmachen.

Lamanini

21.07.2024, 22:19

@Alexandraseha22

Nein. Niemals. Du musst wissen warum er was macht, und wie du es abwandelst, nicht nur das da auswendig lernen. Das wird schon Zeit dauern. Aber damit kannst du lernen.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Technik, JavaScript, Programmiersprache

22.07.2024, 04:56

Dieses Tutorial zeigt dir anhand eines Fallbeispiels, wie man eine Webanwendung mit React und Stripe bauen kann.

Es vermittelt dir aber nur Informationen zu einzelnen, spezifischen Werkzeugen, die für die dort angepeilten Funktionalitäten gerade benötigt werden. Ein solides Grundlagenwissen zu JavaScript/Node.js/React/Stripe/o.ä. baust du dir in diesem Verlauf wohl nicht auf. Eine tatsächliche Projektplanung sehe ich ebenso nicht.

Du müsstest dir im Anschluss zu diesem Tutorial die ehrliche Frage stellen, ob du mit diesem Wissen nun auch eigenständig größere Erweiterungen/Verbesserungen vornehmen sowie völlig andere Projekte auf mindestens demselben Komplexitätsniveau umsetzen könntest. Diese Art an Flexibilität würde ich für einen Industrielevel erwarten.

Dieses Tutorial sehe ich dahingehend nur als ein Puzzleteil von vielen.

Alexandraseha22

Beitragsersteller

22.07.2024, 07:04

Vielen Dank fuer diese gute Info!

Ähnliche Beiträge

Wie in der Software Entwicklung als (noch) Quereinsteiger anfangen?

Ich möchte gerne meine Karriere in Richtung Software-/Webentwicklung lenken und suche euren Rat.

Zu meiner Person:

31 Jahre alt, 6 Jahre Erfahrung im Customer Success Management.
Selbststudium von Frontend (HTML, CSS/SASS, JavaScript/React) und Backend (Node.js, Express/Mongoose, MongoDB) seit 2 Jahren neben meinem Vollzeit Job.
Im Bachelor Software Engineering seit September 2023 (nebenberuflich) eingeschrieben.

Mein Problem aktuell ist, dass ich schwer meine Fähigkeiten einschätzen kann (ob die für eine Junior Stelle reichen?). Auch, dadurch, dass ich alleine an Projekten arbeite, fehlen mir etwas die Struktur und die praktischen "Tipps" von erfahreneren Entwickler.

Was ich schon kann: eine einfache Fullstack MERN App mir CRUD Funktionalität zu entwickeln (hosten / version control mit git usw. kann ich auch).

Trotzdem, bekommen ich auf Bewerbungen für für Junior-Positionen in Deutschland trotz vorhandener Portfolio-Webseite keine Antworten.

Könnt Ihr mir Tipps geben bzw. was mache ich falsch?

Danke für eure Hilfe!

...zum Beitrag

300 Stunden lernen Chat App bauen?

Hey, ich habe angefangen, Webentwicklung zu lernen und habe am Anfang HTML, CSS gelernt, dann JS / React / und ein bisschen Node.js MongoDB.

Ich habe auch schon kleine Apps programmiert, wie einen Taschenrechner/ To-Do-App und eine kleine Wetter-App gebaut.

Ich habe ungefähr 300 Stunden gebraucht. Jetzt will ich mich an ein großes Projekt trauen, wie eine Chat-App.

Klar wird es nicht so umfangreich da ich alleine bin und noch viel lernen muss, aber denkt ihr: Kann man nach 300 Stunden Programmiererfahrung es anfangen zu programmieren? Und wie viele Wochen könnte es dauern, wenn ich jeden Tag ca. 6-8 Stunden programmieren und lernen würde?

...zum Beitrag

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zum Beitrag

Website mit Node.js (Socket.IO)?

Hallo,

ich kenne mich leider nicht sehr gut mit Webseiten und so aus und mache erst seit ungefähr zwei bis drei Jahren eine Webseite für mich privat.

Ich wollte jetzt Node.js-Sachen versuchen und wollte mit Socket.IO einen sehr einfachen Chat erstellen. Meine Webseite an sich habe ich auf einem Webspace von IONOS. Damit ich Node.js nutzen kann, habe ich einen VPS, den ich mit Subdomain ansprechen kann.

Ein Test dazu hat auch prima funktioniert, aber Socket.IO funktioniert nicht egal, was ich versuche. Es kommt immer 404 auf der Webseite und 400 auf dem VPS. Hätte jemand eventuell eine Lösung?

PS.: Wenn genauere Daten gebraucht werden, werde ich diese schnellstmöglich nachreichen.

...zum Beitrag

Hetzner NodeJS / Laravel + Inertia Hosting?

Hallo hallo,

ich hätte da eine Frage bezüglich des Anbieters Hetzner, uns zwar, ob deren Webhosting Pakete geeignet sind, um eine Laravel App mit Inertia (also node-js) zu hosten, oder, ob dafür nur deren vServer funktionieren.

Fallen euch andere Provider ein, die günstig für Einsteiger sind?

Danke für eure Antworten

...zum Beitrag

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zum Beitrag

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zum Beitrag

Daten senden mit fetch?

Hallo,

ich will mit der Fetch API Daten senden und abrufen. Aber wen ich dies tue, kommt ein Fehler:

POST http://127.0.0.1:5500/api net::ERR_ABORTED 405 (Method Not Allowed)

Ich weiß gar nicht, wie ich diesen Fehler beheben soll. Ich habe dazu auch nichts hilfreiches bis jetzt gefunden.

Mein Ziel ist es, Daten mit Javascript an einen Server (für den Anfang an localhost) zu senden und diese dann von einem weiteren localhost-Server abrufen.

Das ist meine Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="control-center">
        <button id="get-btn">Get Data</button>
        <button id="post-btn" onclick="test()">Post Data</button>
        <script>
            function test(){
                const data = {"name": "somename"}
                const options = {
                    method: "POST",
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data)
                }
                fetch('/api', options)
            }
        </script>
    </section>
</body>
</html>

Und das ist meine app.js:

const express = require('express')
const app = express()
app.listen(3000, () => console.log('3000'))
app.use(express.static('public'))

app.post('/api', (req, res) => {
    console.log(req)
})

Wenn jemand eine bessere Methode hat, Daten an einen Server zu senden, dann würde ich diese auch mal gerne probieren.

...zum Beitrag

Zweite Sprache mit Js?

Hallo, ich will meine Website zweisprachig machen und die Texte mit Js ändern angepasst an den Nutzer. Meine Frage wäre ob ich dasselbe auch für den Titel, die Description und den href lang tag machen kann, sodass es auch beim suchen übersetzt angezeigt wird, oder muss der JacaScript-Code zuerst geladen werden?

...zum Beitrag

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>

...zum Beitrag

Arduino Daten an HTML-Seite?

Ich habe gerade ein Projekt, indem ich versuche Daten vom Arduino auf eine HTML-Seite zu übertragen. Dabei benutze ich node.js.

Jedoch bin ich noch relativ neu in dem Thema und kenne mich nicht so gut mit Servern und node aus.

Im Moment erhalte ich ständig die Fehlermeldung: Server is not a consructor (const io = new Server('COM3'))

Quelltext aus app.js:

var http = require("http");
var fs = require("fs");
var index = fs.readFileSync("index.html");


var SerialPort = require("serialport");
const parsers = SerialPort.parsers;


const parser = new parsers.Readline({
  delimiter: "\r\n",
});


var port = new SerialPort("COM3", {
  baudRate: 9600,
  dataBits: 8,
  parity: "none",
  stopBits: 1,
  flowControl: false,
});


port.pipe(parser);


var app = http.createServer(function (req, res) {
  res.writeHead(200, {"Content-Type": "text/html"});
  res.end(index);
});


const Server = require('socket.io');
const io = new Server('COM3');


io.on("connection", function (socket) {
  console.log("Node is listening to port");
});


parser.on("data", function (data) {
  console.log("Received data from port: " + data);
  io.emit("data", data);
});

app.listen(3000);

Quelltext aus index.html:

<!doctype html>
<html>
    <head>
        <title>Test</title>


        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>


    </head>
    <body>


        <h1> Communicating between an arduino and a html website</h1>


        <div id='sample'></div>


        <script>
            
            var socket = io();
            socket.on('data',function(data){
                console.log(data);
                document.getElementById('sample').innerHTML = data;
            });
            
        </script>
        
    </body>
</html>

...zum Beitrag

Was soll ich machen mit node.js und Package.json?

Ist directadmin

...zum Beitrag

Ist es möglich in php eine JavaScript Funktion auszulösen?

Ich muss eine JavaScript Funktion auslösen um auf Seite „2“ zu kommen die aber durch ein neu Ladens von php nach einen button clicks geschlossen wurde aber ich bekomme das irgendwie nicht hin obwohl ich allen regeln die ich im Internet lese befolge, weiß jemand was ich falsch mache?

...zum Beitrag

Paypal SDK von USD auf EUR umstellen funktioniert nicht?

Ich habe beide Stellen im Code geändert:

script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=EUR`;

und

currency_code: 'EUR',

Bekomme jedoch den folgenden Fehler https://pastebin.com/6eNUSdX9

Wichtigster Ausschnitt:

Error: Unexpected currency: EUR passed to order.create. Please ensure you are passing /sdk/js?currency=EUR in the paypal script tag.

Der Fehler tritt auf, wenn ich USD auf EUR ändere. Hier ist meine

/app/paypal/page.tsx

https://pastebin.com/9GM500eR die ganze datei

Wichtigster Ausschnitt: der mit USD funktioniert:

<PayPalScriptProvider options={{ clientId }}>
            <div className="flex justify-center">
              <PayPalButtons
                style={{
                  layout: 'vertical',
                  color: 'blue',
                  shape: 'rect',
                  label: 'paypal',
                }}
                createOrder={(data, actions) => {
                  if (!actions || !actions.order) {
                    console.error('Fehler: actions.order ist nicht definiert');
                    return Promise.reject('Fehler bei der Erstellung der Bestellung');
                  }
 
                  return actions.order.create({
                    purchase_units: [
                      {
                        amount: {
                          currency_code: 'USD',
                          value: '100.00',
                        },
                      },
                    ],
                    intent: 'CAPTURE'
                  });
                }}
                onApprove={(data, actions) => {
                  if (!actions || !actions.order) {
                    console.error('Fehler: actions.order ist nicht definiert');
                    return Promise.reject('Fehler bei der Genehmigung der Bestellung');
                  }
 
                  return actions.order.capture().then((details) => {
                    console.log('Zahlung erfolgreich abgeschlossen:', details);
                    setPaymentSuccess(true);  // Zeigt die Erfolgsmeldung an
                    setErrorMessage('');  // Setzt die Fehlermeldung zurück
                    return Promise.resolve();
                  });
                }}
                onError={(err) => {
                  console.error('Fehler bei der PayPal-Zahlung:', err);
                  setErrorMessage('Es gab ein Problem bei Ihrer Zahlung. Bitte versuchen Sie es erneut.'); // Zeigt die Fehlermeldung an
                  setPaymentSuccess(false); // Setzt den Zahlungserfolgsstatus zurück
                }}
              />
            </div>
          </PayPalScriptProvider>

Meine

env Datei ist folgendermaßen konfiguriert:
makefile
Code kopieren
NEXT_PUBLIC_PAYPAL_CLIENT_ID = "12345"
PAYPAL_CLIENT_ID = "12345"
PAYPAL_CLIENT_SECRET = "ABCDEF"
PAYPAL_WEBHOOK_SECRET="XYZ123"

Ich habe den currency_code von 'USD' auf 'EUR' geändert und auch die URL des PayPal-Skripts angepasst:

script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}&currency=EUR`;

Trotzdem bekomme ich den Fehler, dass EUR nicht als Währung erkannt wird.

Ich habe die Dokumentation auf PayPal Developer überprüft, und laut dieser ist

EUR

der richtige Währungscode.

Ich benutze Next.js 15 und habe auf React 18 downgraden müssen, da React 19 nicht mit

@paypal/react-paypal-js

kompatibel ist aber spielt eigentlich keiner olle und sowohl im sandbox oder live modus dasselbe das man nach dem klick auf dem button mit EUR einen fehler bekommt.

Kann mir jemand helfen, was hier das Problem ist?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen