Skip to content

Flutter Mobile App + Node.js Back End Tutorial – Codați o clonă Amazon [Curs complet]

Flutter Mobile App + Node.js Back End Tutorial – Codați o clonă Amazon [Curs complet]

Creați o aplicație completă de comerț electronic cu Flutter, Javascript, Node.js, Express, MongoDB și Mongoose.

În acest tutorial, veți învăța să construiți interfața de utilizare Amazon de la zero, să creați API-uri REST, să stocați date în MongoDB folosind Mongoose, să utilizați API-urile REST cu Flutter & Dart folosind modele, să utilizați instrumentul Flutter State Management ca furnizor și să creați o aplicație multiplatformă care funcționează pe Android și iOS.

💻 Cod sursă: https://github.com/RivaanRanawat/flutter-amazon-clone-tutorial
💻 Culori și imagini: https://github.com/RivaanRanawat/flutter-amazon-clone-tutorial/blob/master/lib/constants/global_variables.dart

✏️ Rivaan Ranawat a creat acest curs. Vezi canalul lui: https://www.youtube.com/c/RivaanRanawat
📌 Serverul Discord al lui Rivaan: https://discord.gg/Q8Rx8YWFVF

⭐️ Conținutul cursului ⭐️
(0:00:03) Introducere și demonstrație
(0:01:04) Configurarea proiectului Flutter
(0:05:30) Configurarea temelor
(0:09:05) Structura folderului
(0:10:31) Configurarea rutelor
(0:16:58) Interfața de utilizare a ecranului de autentificare
(0:38:57) Ce este Node.js
(0:39:53) Instalare Node.js
(0:41:51) Nod de inițializare
(0:45:06) Primul script Node.js
(0:46:47) NPM și dependențe
(0:52:25) Crearea serverului
(0:58:39) Nodemon
(1:02:37) Creați primul dvs. API
(1:08:49) Exercițiul 1: Creați GET API
(1:09:19) Soluția 1
(1:20:12) Routere
(1:17:45) Middleware
(1:21:33) Înscrieți-vă pe traseu
(1:26:31) Conectarea la MongoDB
(1:33:17) Crearea modelului utilizatorului
(1:42:34) Înscrieți-vă Route cntd
(2:09:19) Conectarea rutei de înregistrare cu partea clientului
(2:31:04) Adăugarea textField & Form Validator
(2:34:45) Conectare Traseu / Exercițiul 2
(2:37:12) Crearea rutei de conectare (Soluția 2)
(2:47:57) Conectarea rutei de conectare cu partea client
(3:04:01) Stat persistent
(3:25:11) Se creează BottomNavBar
(3:36:33) Interfața de utilizare a ecranului contului
(4:04:39) Interfața de utilizare a ecranului de pornire
(4:41:35) Ecran de administrare BottomNavBar
(4:49:38) Adăugați interfața de utilizare pentru ecranul produsului
(5:08:21) Alegerea imaginilor
(5:17:16) Administrator – Vânzarea produsului
(5:28:43) Creați Admin Middleware / Exercițiu
(5:29:24) Soluție
(5:31:39) Vânzare produs Cont.
(5:48:36) Administrator – Preluare și afișare a tuturor produselor
(6:08:39) Administrator – Ștergerea produsului
(6:17:09) Exercițiu personal (Adăugați produs în timp real)
(6:17:43) Obținerea și afișarea produselor în funcție de categorie
(6:41:19) Căutarea și afișarea produselor
(6:47:59) Exercițiu opțional (Crearea API-ului pentru produse de căutare)
(7:06:14) Interfața de utilizare a ecranului cu detalii despre produs
(7:25:58) Evaluarea produselor
(7:31:09) Evaluare produs API / Exercițiu
(7:31:43) Soluție
(7:41:00) Evaluări afișate
(7:50:34) Preluați oferta zilei (exercițiu opțional)
(8:05:05) Adăugarea în coș
(8:31:46) Afișarea produselor din coș
(8:52:08) Cantitatea în scădere în coș
(9:00:33) Ecran de adresă
(9:10:53) Adăugarea GPay/ Apple Pay
(9:32:56) Stocarea adresei utilizatorului și comandă
(9:55:55) Vizualizarea comenzilor mele
(10:06:07) Vizualizarea detaliilor comenzii
(10:28:37) Administrator – Vizualizarea tuturor comenzilor
(10:37:42) Administrator – Modificați starea comenzii
(10:45:53) Câștiguri totale și în funcție de categorii
(11:04:34) Afișează graficul de vânzări
(11:09:44) Deconectați-vă
(11:14:29) Desfășurare la Heroku
(11:19:55) Testare pe dispozitiv Android
(11:21:46) (Bonus) Flutter 3 (Totul funcționează!)
(11:24:35) Materialul 3

🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org

Citiți sute de articole despre programare: https://freecodecamp.org/news

Cursuri interesante:

Leave a Reply

Your email address will not be published. Required fields are marked *