Το πλαίσιο "Zero to Shipped" για τους νέους προγραμματιστές

Παρακαλούμε χρησιμοποιήστε ένα πρόγραμμα περιήγησης ιστού σε ένα φορητό υπολογιστή / επιφάνεια εργασίας για την καλύτερη εμπειρία προβολής για αυτό το άρθρο, καθώς αυτό το άρθρο περιέχει πολλά οπτικά ευχάριστα έργα τέχνης ASCII για καλύτερη μάθηση. Παρακαλούμε χρησιμοποιήστε ένα πρόγραμμα περιήγησης ιστού σε ένα φορητό υπολογιστή / επιφάνεια εργασίας για την καλύτερη εμπειρία προβολής για αυτό το άρθρο, καθώς αυτό το άρθρο περιέχει πολλά οπτικά ευχάριστα έργα τέχνης ASCII για καλύτερη μάθηση. Εισαγωγή Η ανάπτυξη λογισμικού είναι απαραίτητη.Τα πάντα λειτουργούν με κώδικα και η κατασκευή ενός πρωτοτύπου είναι ένα απαραίτητο βήμα. Χρειάζεστε εμπειρία για να κωδικοποιήσετε καλά, και πρέπει να κωδικοποιήσετε καλά για να αποκτήσετε εμπειρία. Breaking the Catch-22 with Framework ================================================ Skill Level ^ | *Framework-Guided Path* | / | / | / Time Key: Framework shortcuts the experience-to-skill gap Διάγραμμα 1: Σπάζοντας το Catch-22 Διάγραμμα 1: Σπάζοντας το Catch-22 Ωστόσο, το παρακάτω είναι ένα πλαίσιο που θα ήθελα να παρέχω που μπορεί να σας βοηθήσει να αναπτύξετε γρήγορα. θα παραλείψω το τμήμα στρατηγικής προϊόντος και ιδέας, καθώς αυτό αξίζει το δικό του άρθρο. Πλαίσιο Χωρίς περαιτέρω διευκρίνιση, το πλαίσιο: Τι είναι στο front-end, τι είναι στο backend, ποια βάση δεδομένων, τι είδους API; Στη συνέχεια, αποφασίστε για τα εργαλεία σας. 1. Decide on the technology stack. Όταν αποφασίζετε, σκεφτείτε τα εξής: Your software should be easy to build and maintain. Select a general-purpose language that can be utilized to get the maximum features you want and support different layers of the stack. While the layers of the design are disparate, you should have a low-latency method for these components to talk with each other. a) Homogeneity & Compatibility: For example: JavaScript is the language of the frontend in frameworks like React and Angular. It can also be used on the backend with Node.js and Express. It's the basis for data formats like JSON, which in turn are used by APIs (like GraphQL) and databases (like MongoDB, which uses a JSON-like structure). By leveraging npm (which is like a JavaScript App Store), you can install thousands of libraries for your project. What you intend to develop must be Scalable. This is critically important. Choose a framework that is used by top multinational corporations (MNCs), or even better, one developed by an MNC. b) Scalability: For example: React and GraphQL were created by Facebook, and they use them internally, so you know they are scalable. On MongoDB's website, you can find that Google, among other companies, is one of its partners - so you know it's scalable. You can also look at a tool's GitHub repository and community support; the more, the better. Finally, you can also see if a major cloud provider supports your development stack, as it’s helpful when you intend to scale after the initial development/ or if you need help with quick prototyping of the software that is being developed. Measuring Community Support ======================================= [Technology/Framework] | +--------+--------+--------+ | | | | v v v v GitHub Stack npm Reddit/ Stars Overflow Downloads Discord | | | | v v v v >1K+ >1K >100+/ Active Qs week Community | | | | +--------+--------+--------+ | v [Strong Ecosystem ✓] Διάγραμμα 2: Μέτρηση της στήριξης της κοινότητας Διάγραμμα 2: Μέτρηση της στήριξης της κοινότητας Homogeneous vs Heterogeneous Stack ============================================== HOMOGENEOUS (Good): JS → JS → JS → JS ✓ Easy to maintain ✓ Low context switching ✓ Unified tooling HETEROGENEOUS (Complex): Python → Java → PHP → Ruby ✗ Multiple paradigms ✗ Different toolchains ✗ Team expertise split Διάγραμμα 3: Ομογενής vs Ετερογενής Stack Διάγραμμα 3: Ομογενής vs Ετερογενής Stack Scalability Validation Checklist ============================================ Technology Choice: [React] ☑ Used by MNCs? → Facebook, Netflix, Airbnb ✓ ☑ Large Community? → 240K+ GitHub stars ✓ ☑ AWS Support? → AWS Amplify supports React ✓ ☑ Active Development? → Regular updates ✓ Result: SCALABLE ✓✓✓ Διάγραμμα 4: Κατάλογος ελέγχου επικύρωσης κλιμάκωσης (π.χ. React, AWS) Διάγραμμα 4: Κατάλογος ελέγχου επικύρωσης κλιμάκωσης (π.χ. React, AWS) AWS Service Support ================================ Your Stack AWS Service ────────── ─────────── React/Angular → CloudFront | Amplify | S3 Hosting v Node.js/API → Lambda | Elastic Beanstalk | EC2 v MongoDB → DocumentDB | v [Fully Supported!] If AWS supports it, it's production-ready! Διάγραμμα 5: Υποστήριξη υπηρεσιών cloud (π.χ. AWS) Διάγραμμα 5: Υποστήριξη υπηρεσιών cloud (π.χ. AWS) API Architecture Choice ==================================== REST API: GET /users/1 → Full User Object GET /posts/1 → Full Post Object (Multiple Requests, Over-fetching) GraphQL: query { user(id: 1) { name posts { title } } } (Single Request, Exact Data) ┌──────────────────────┐ │ Facebook uses │ │ GraphQL internally │ │ = Proven at Scale │ └──────────────────────┘ Διάγραμμα 6: Η περίπτωση για το GraphQL Διάγραμμα 6: Η περίπτωση για το GraphQL GitHub. GitLab. Bitbucket. Ο ανοιχτός κώδικας είναι ένας πολύτιμος πόρος για τους σύγχρονους προγραμματιστές. Χρησιμοποιήστε το. Εάν έχετε σκεφτεί μια ιδέα, υπάρχει μια καλή πιθανότητα κάποιος άλλος να την έχει ήδη εφαρμόσει (δεν μπορούμε πάντα να είμαστε αυτό το πρωτότυπο, σωστά;). Κοιτάξτε τον κώδικα τους. Κατανοήστε το. Χρησιμοποιήστε το, βελτιώστε το. Δώστε πίστωση όπου πρέπει, και θα πρέπει να είστε εντάξει. Αυτό θα σας βοηθήσει να αναπτύξετε γρήγορα και να βοηθήσετε σε έργα ταχείας εκκίνησης. Μπορείτε να χρησιμοποιήσετε τον αποθηκευμένο χρόνο για να σκεφτείτε καλύτερα χαρακτηριστικά. 2. Leverage open source. Standing on Giants' Shoulders ========================================= [Your Innovation] | ╔═════╧═════╗ ║ You ║ <- Your contribution ╠═══════════╣ ║ Library A ║ <- Open source tools ╠═══════════╣ ║ Library B ║ <- Previous work ╠═══════════╣ ║ Library C ║ <- Community effort ╠═══════════╣ ║ Core Lang ║ <- Foundation ╚═══════════╝ Don't reinvent the wheel! Build on existing solutions. Διάγραμμα 7: Δημιουργία με ανοιχτό κώδικα Διάγραμμα 7: Δημιουργία με ανοιχτό κώδικα Time Investment Comparison ====================================== Build From Scratch: ├─ Research: 40 hours ├─ Architecture: 30 hours ├─ Implementation: 120 hours ├─ Testing: 40 hours ├─ Debugging: 50 hours └─ TOTAL: 280 hours (7 weeks) Using Open Source: ├─ Search: 2 hours ├─ Understand: 8 hours ├─ Integrate: 6 hours ├─ Customize: 10 hours └─ TOTAL: 26 hours (3 days) SAVINGS: 254 hours (6+ weeks!) ↓ [Use for Features] Διάγραμμα 8: Ο χρόνος που εξοικονομείται είναι ο χρόνος που κερδίζεται (π.χ. σενάριο) Διάγραμμα 8: Ο χρόνος που εξοικονομείται είναι ο χρόνος που κερδίζεται (π.χ. σενάριο) Common Open Source Licenses ======================================= MIT License ├─ ✓ Commercial use ├─ ✓ Modification ├─ ✓ Distribution └─ ✓ Private use [Most Permissive] Apache 2.0 ├─ ✓ Patent protection ├─ ✓ Commercial use └─ ! State changes GPL v3 ├─ ✓ Strong copyleft ├─ ! Must open source └─ ! Derivative works [Most Restrictive] Always check before using! Διάγραμμα 9: Κοινές άδειες ανοικτού κώδικα Διάγραμμα 9: Κοινές άδειες ανοικτού κώδικα Repository Quality Checklist ========================================= ╭───────────────────────────────────────╮ │ Evaluating: [repository-name] │ ├───────────────────────────────────────┤ │ [ ] README with clear instructions │ │ [ ] License file present │ │ [ ] Active maintenance (commits) │ │ [ ] Issues being addressed │ │ [ ] Good test coverage │ │ [ ] Documentation/Wiki │ │ [ ] Examples provided │ │ [ ] High stars-to-forks ratio │ │ [ ] Contributors > 3 │ │ [ ] Release/version tags │ ├───────────────────────────────────────┤ │ 7+ checked = Safe to use! │ ╰───────────────────────────────────────╯ Διάγραμμα 10: Κατάλογος ελέγχου ποιότητας αποθετηρίου Διάγραμμα 10: Κατάλογος ελέγχου ποιότητας αποθετηρίου Smart Development Strategy =============================================== [ Your Idea ] | v / \ [ Yes ] [ No ] | | | v | | | | [ Yes! ] | | | v | [ Use their work ] | [ + Attribution ] | | +----------+-----------+ | v [ Add YOUR unique value ] ├─ Your UI/UX ├─ Your features ├─ Your integration └─ Your innovation | v [ Ship Product Faster ] Originality ≠ Reinventing Be original where it matters! Διάγραμμα 11: Στρατηγική έξυπνης ανάπτυξης Διάγραμμα 11: Στρατηγική έξυπνης ανάπτυξης Δεν χρειάζεστε πάντα ένα Mac ή Linux για προγραμματισμό. έχετε καλές επιλογές στα Windows, επίσης. Μπορείτε να επιλέξετε έναν καλό επεξεργαστή κώδικα όπως VS Code, Sublime Text, κλπ. Παρακαλώ δημιουργήστε ένα αποθετήριο GitHub για να δημιουργήσετε αντίγραφα ασφαλείας του κώδικα σας. Μπορείτε να δημιουργήσετε ένα ιδιωτικό αποθετήριο αν δεν θέλετε κανένας άλλος να γνωρίζει τι είστε μέχρι. Χρησιμοποιήστε μια εφαρμογή συγχρονισμού όπως το GitHub Desktop ώστε να μπορείτε να εργαστείτε στην τοπική σας μηχανή και να σπρώξετε τον κώδικα στο GitHub ομαλά. 3. Choose a proper coding environment. The Complete Coding Environment ============================================ ╔════════════════════════════════════════╗ ║ YOUR DEVELOPMENT SETUP ║ ╠════════════════════════════════════════╣ ║ LAYER 1: Operating System ║ ║ ┌──────────────────────────────────┐ ║ ║ │ Windows / macOS / Linux │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 2: Code Editor ║ ║ ┌──────────────────────────────────┐ ║ ║ │ VS Code + Extensions │ ║ ║ │ • Prettier, ESLint │ ║ ║ │ • GitLens, Live Server │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 3: Version Control ║ ║ ┌──────────────────────────────────┐ ║ ║ │ Git + GitHub Desktop │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 4: Cloud Backup ║ ║ ┌──────────────────────────────────┐ ║ ║ │ GitHub Repository │ ║ ║ │ (Public or Private) │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 5: Language Runtime ║ ║ ┌──────────────────────────────────┐ ║ ║ │ Node.js, Python, etc. │ ║ ║ └──────────────────────────────────┘ ║ ╚════════════════════════════════════════╝ | | v v [Local Code] [Cloud Backup] Professional Setup Complete! Διάγραμμα 12: Παράδειγμα μιας ρύθμισης περιβάλλοντος Διάγραμμα 12: Παράδειγμα μιας ρύθμισης περιβάλλοντος Command Line vs GitHub Desktop =========================================== COMMAND LINE: GITHUB DESKTOP: ═══════════════ ═══════════════ $ git init Click "New Repo" $ git add . Check boxes $ git commit -m "msg" Type message, click "Commit" $ git remote add origin Paste URL, click "Add" $ git push origin main Click "Push" $ git pull Click "Fetch" $ git log See "History" tab Learning Curve: Learning Curve: ████████░░ 80% ██░░░░░░░░ 20% Both work! Choose comfort level. Διάγραμμα 13: CLI vs UI Διάγραμμα 13: CLI vs UI Managing Repository Privacy ======================================== [New Repository] | +------+------+ | | v v ┌────────┐ ┌────────┐ │ PUBLIC │ │PRIVATE │ └───┬────┘ └───┬────┘ | | v v Visible to: Visible to: • Everyone • You • Employers • Invited • Portfolio • Team only | | v v Can switch Can switch to Private to Public (anytime) (anytime) | | +-----+------+ | v Settings > Danger Zone | v "Change visibility" Start Private → Go Public Later (Common Strategy) Διάγραμμα 14: Διαχείριση της ιδιωτικής ζωής του αποθετηρίου Διάγραμμα 14: Διαχείριση της ιδιωτικής ζωής του αποθετηρίου Μπορείτε να το κάνετε αυτό! Ωστόσο, αν προσπαθήσετε να σκάψετε στην τεκμηρίωση μεμονωμένων εξαρτημάτων ή πλαισίων, μπορεί να περάσετε χρόνια ολοκληρώνοντας ένα σεμινάριο. Αντ 'αυτού, επιλέξτε ένα βιβλίο ή ένα βίντεο σεμινάριο που συνθέτει αυτά τα εξαρτήματα - κάτι που σας βοηθά να αναπτύξετε ένα καλό έργο που συνδυάζει όλες αυτές τις τεχνολογίες. Διατίθεται στο GitHub. Ακολουθήστε τους εμπειρογνώμονες στο X. Συμμετοχή στις κοινότητες reddit. Διαβάστε τα blogs και τα προγράμματα διδασκαλίας δείγματος. Αναζητήστε άρθρα χρησιμοποιώντας "daily.dev/hackernoon/dev.to/freecodecamp". Διαβάστε. Διαβάστε. Ανάπτυξη. Διαβάστε. Ανάπτυξη. Ανάπτυξη. Ανάπτυξη. 4. It is completely okay to "Not Know." «Εξαιρετική λίστα» The Documentation Rabbit Hole ========================================= [Want to Learn React] | v Read React Docs | +-------+-------+ | | v v Hooks Docs JSX Docs | | v v useState Docs Babel Docs | | v v useEffect Webpack | | +-------+-------+ | v [6 months later...] [Still in docs, no project!] BETTER APPROACH: [Tutorial Project] → Learn by doing! Διάγραμμα 15: Η τεκμηρίωση Rabbit Hole Διάγραμμα 15: Η τεκμηρίωση Rabbit Hole Effective Content Discovery ========================================================= [ Need to Learn XYZ ] | v +---------------------------------------------------------+ | Step 1: Run Parallel Searches | +----------------+----------------------+-----------------+ | Platform | Action | Refinement | +----------------+----------------------+-----------------+ | Google | Search keywords | "XYZ tut 2025" | | daily.dev | Browse feed/tags | Filter by tag | | Reddit | Find recent posts | Sort by "Top" | | YouTube | Find recent videos | Sort by views | +----------------+----------------------+-----------------+ | v +---------------------------------------------------------+ | Step 2: Consolidate & Vet Results | | (Compare 3-5 top links) | +---------------------------------------------------------+ | v +-----------------+---------------+ | | v v (e.g. 2024+) (Has full examples) | | +----------------+----------------+ | v [ Start Learning! ] Διάγραμμα 16: Αποτελεσματική ανακάλυψη περιεχομένου Διάγραμμα 16: Αποτελεσματική ανακάλυψη περιεχομένου Πώς μπορείτε να αναπτύξετε περισσότερα χαρακτηριστικά; Ποια χαρακτηριστικά Αναπτύσσετε τις ιδέες σας από τους ανθρώπους και λάβετε καλή ανατροφοδότηση. Κοιτάξτε το Product Hunt, a16z, AngelList κ.λπ. για να πάρετε καλές ιδέες. Ακούστε τα podcasts. Αλλά τελικά, Κωδικός με πάθος. 5. Finally, continuously think about how you can improve your project. Μπορεί Ανάπτυξη Multi-Channel Feedback Strategy =========================================== [Your Application] | Collect Feedback From: | +-------+-------+-------+-------+ | | | | | v v v v v Users Friends Reddit GitHub X/ Issues Twitter | | | | | v v v v v Real Honest Public Bug Quick world opinion discus- reports reactions usage sions | | | | | v v v v v What Improve- Feature Tech Viral works ments requests debt features | | | | | +-------+-------+-------+-------+ | v [Prioritized Roadmap] Listen > Ego Διάγραμμα 17: Πολλαπλά κανάλια στρατηγικής ανατροφοδότησης Διάγραμμα 17: Πολλαπλά κανάλια στρατηγικής ανατροφοδότησης Sources of Product Inspiration ========================================== [Your Project] | What features next? | +---------+----------+---------+ | | | | v v v v ┌─────────┐┌──────┐┌─────────┐┌────────┐ │ Product ││ a16z ││AngelList││Podcasts│ │ Hunt ││ Blog ││ ││ │ └────┬────┘└───┬──┘└────┬────┘└───┬────┘ | | | | v v v v Trending VC Startup Expert Products Insights Trends Advice | | | | v v v v User pain Market Business Best points trends models practices | | | | +----+----+----+---+----+----+ | v [Feature Ideas List] [Innovation Backlog] Διάγραμμα 18: Πηγές έμπνευσης προϊόντων Διάγραμμα 18: Πηγές έμπνευσης προϊόντων Συνοπτική Ελπίζω αυτό το άρθρο να σας βοηθήσει στο ταξίδι προγραμματισμού σας, σας ευχαριστώ που διαβάσατε το άρθρο μου. Εάν έχετε οποιεσδήποτε ερωτήσεις, παρακαλούμε μη διστάσετε να μου στείλετε μήνυμα ηλεκτρονικού ταχυδρομείου.Μπορείτε επίσης να επικοινωνήσετε μαζί μου μέσω LinkedIn.Μπορείτε επίσης να με ακολουθήσετε στο X. email email Λίνκινγκ Λίνκινγκ X X Μπορείτε να διαβάσετε το άρθρο μου στο System Design . ΕΔΩ ΕΔΩ ΕΔΩ Μπορείτε να διαβάσετε το άρθρο μου στο . DevOps ΕΔΩ Αν θέλετε να γράψω για οποιοδήποτε άλλο θέμα, παρακαλώ ενημερώστε με στα σχόλια. Σύνδεσμος με το δικό μου . Προφίλ Χάκερ Προφίλ Χάκερ