Utilizați Flutter și Firebase pentru a crea o clonă Instagram receptivă. După acest tutorial, veți putea folosi Firebase în oricare dintre proiectele dvs. Veți afla despre Firestore, Firebase Auth, Firebase Storage, Responsive UI și multe altele!
💻 Cod: https://github.com/RivaanRanawat/instagram-flutter-clone
✏️ Curs dezvoltat de Rivaan Ranawat. Vezi canalul lui: https://www.youtube.com/channel/UC-1kzHtwBY8n0TY5NhYxNaw
⭐️ Conținutul cursului ⭐️
⌨️ (0:00:00) Introducere
⌨️ (0:00:19) Demo
⌨️ (0:03:25) Cerințe preliminare
⌨️ (0:04:31) Configurați și temați aplicația
⌨️ (0:09:31) Crearea unui widget cu aspect receptiv
⌨️ (0:15:47) Configurarea Firebase
⌨️ (0:33:10) Interfața de utilizare a ecranului de conectare (mobil)
⌨️ (0:55:58) Interfața de utilizare a ecranului de înregistrare (mobil)
⌨️ (1:02:41) Autentificare înregistrare Firebase
⌨️ (1:52:12) Firebase Login Auth
⌨️ (2:02:33) Stare de autorizare persistentă
⌨️ (2:19:49) Modelarea datelor utilizatorului
⌨️ (2:25:47) Gestionarea stării datelor utilizatorului
⌨️ (2:48:02) Bara de aplicații mobile de jos
⌨️ (2:57:49) Adăugați interfața de utilizare a ecranului de postare
⌨️ (3:10:08) Selectarea imaginii
⌨️ (3:21:18) Stocarea datelor postărilor în Firebase
⌨️ (3:44:16) Interfața de utilizare a postărilor de feed
⌨️ (4:10:08) Afișarea datelor de postare din Firebase
⌨️ (4:22:04) Ca și animație
⌨️ (4:36:21) Actualizarea aprecierilor
⌨️ (4:45:11) Interfața de utilizare a ecranului de comentarii
⌨️ (4:59:37) Stocarea comentariilor în Firestore
⌨️ (5:09:47) Afișarea comentariilor
⌨️ (5:25:58) Se șterge postarea
⌨️ (5:28:56) Căutarea utilizatorilor
⌨️ (5:39:45) Se afișează postări pe ecranul de căutare
⌨️ (5:46:06) Crearea interfeței de utilizare a ecranului de profil reutilizabil
⌨️ (6:05:41) Afișarea datelor de profil
⌨️ (6:27:16) Urmăriți utilizatori
⌨️ (6:35:30) Deconectare
⌨️ (6:37:27) Crearea unei interfețe de utilizare receptive
⌨️ (6:51:15) Concluzie
Resurse:
🔗 Fișier colors.dart: https://github.com/RivaanRanawat/instagram-flutter-clone/blob/master/lib/utils/colors.dart
🔗 Logo Instagram: https://github.com/RivaanRanawat/instagram-flutter-clone/blob/master/assets/ic_instagram.svg
🔗 Reguli Firestore: https://firebase.google.com/docs/firestore/security/get-started
🔗 Firebase: https://firebase.google.com
🔗 Pubspec Assist:
https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist/> 🔗 În caz de eroare la configurarea Firebase pentru iOS: https://stackoverflow.com/questions/64037496/none-of-your-spec-sources-contain-a-spec-satisfying-the-dependencies-firebase
🔗 Redenumirea pachetului Android: https://stackoverflow.com/questions/51534616/how-to-change-package-name-in-flutter
Dependente:
🔗 https://pub.dev/packages/firebase_core
🔗 https://pub.dev/packages/cloud_firestore
🔗 https://pub.dev/packages/firebase_auth
🔗 https://pub.dev/packages/firebase_storage
🔗 https://pub.dev/packages/flutter_svg
🔗 https://pub.dev/packages/intl
🔗 https://pub.dev/packages/file_picker
🔗 https://pub.dev/packages/flutter_staggered_grid_view
🔗 https://pub.dev/packages/provider
🎉 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:
- Curs de dezvoltare a aplicației Flutter – Construiește o clonă Twitter cu Appwrite și Riverpod
- Creați o clonă Instagram cu React Native, Firebase Firestore, Redux, Expo – Curs complet
- Flutter Mobile App + Node.js Back End Tutorial – Codați o clonă Amazon [Curs complet]
- Creați și implementați o clonă LeetCode cu React, Next JS, TypeScript, Tailwind CSS, Firebase
- Creați și implementați o clonă Instagram cu React și Firebase – Tutorial
- Creați o clonă Twitter cu Vue.js, Quasar Framework și Firebase pentru iOS, Android, Mac și Windows
- Laravel PHP Framework Tutorial – Curs complet pentru începători (2019)
- Tutorial Spring Boot și Angular – Construiți o clonă Reddit (proiect de codare)
- Curs React Native – Dezvoltare de aplicații Android și iOS
- Construiește o clonă LinkedIn cu React și Firebase – Tutorial