Η ανατομία ενός ταμπλό Bootstrap που κερδίζει 1.000 $ κάθε μήνα

Εμείς στο Creative Tim θέλαμε πάντα να παρέχουμε εξαιρετικά εργαλεία σε όλους τους προγραμματιστές ιστού που χρησιμοποιούν τα προϊόντα μας. Αν θέλετε να διαβάσετε περισσότερα σχετικά με το πώς έχουμε δημιουργήσει την επιχείρησή μας και ποια είναι η κίνησή μας, μπορείτε να δείτε αυτό το άρθρο: Ανάπτυξη ενός δευτερεύοντος έργου σε μια επιχείρηση αξίας 17.000 $.

Θέλουμε να δούμε καλύτερους ιστότοπους και εφαρμογές ιστού στο Διαδίκτυο. Αποφασίσαμε λοιπόν να μοιραστούμε μερικά από τα "μυστικά συστατικά" που αποτελούν τη βάση ενός από τους πιο δημοφιλείς πίνακες ελέγχου μας: Light Bootstrap Dashboard. Φυσικά, δεν θα είναι πια μυστικό, γιατί θα τα μοιραστούμε μαζί σας. ;

Σε αυτήν τη μελέτη περίπτωσης, θα μοιραστώ πώς πήραμε την ιδέα να δημιουργήσουμε ένα ταμπλό, όπου εμπνεύσαμε, πώς εφαρμόσαμε τα πάντα, πώς χρησιμοποιήθηκε μέσα στα εσωτερικά εργαλεία του Στάνφορντ και πώς χρηματοδοτήσαμε την ανάπτυξη και την υποστήριξή του. Ακολουθεί μια επισκόπηση του άρθρου:

  1. Η βασική δομή και η βασική λειτουργικότητα
  2. Πώς δημιουργήθηκε το σχέδιο
  3. Χτισμένο πάνω από ανοιχτό κώδικα και γιατί πρέπει να στέκεστε στους ώμους των γιγάντων
  4. Εκκίνηση, Rise και Shine
  5. Πώς χρηματοδοτούμε την υποστήριξη και επιλύουμε τα αιτήματα των προγραμματιστών
  6. Μελλοντικά αναπτυξιακά σχέδια

Θα προσπαθήσω να δώσω όσο το δυνατόν περισσότερες πληροφορίες, με την ελπίδα ότι αυτό το σεμινάριο δεν θα είναι έτσι:

1. Η βασική δομή και η βασική λειτουργικότητα

Θα πρέπει να σκεφτείτε τη διαδικασία πίσω από τη δημιουργία του πίνακα ελέγχου ως δοκιμή που πρέπει να κάνετε αφού μάθετε πολλά. Φυσικά θα μάθετε πολλά κατά την ανάπτυξη του προϊόντος. Αλλά πρώτα, πρέπει να έχετε ισχυρή γνώση του τι είναι "αυτό" και πώς "χρησιμοποιείται". Πριν γράψετε την πρώτη γραμμή κώδικα, πρέπει να κάνετε κάποια έρευνα, να σχεδιάσετε, να δημιουργήσετε λίστες και σκίτσα που πρέπει να κάνετε και να προσπαθήσετε να απεικονίσετε αυτό που θα θέλατε να έχετε στο τέλος.

Δεδομένου ότι δεν ανακαλύπτετε ξανά το τιμόνι, πρέπει να κοιτάξετε γύρω από εταιρείες που δημιουργούν εξαιρετικά προϊόντα για να εμπνευστείτε (όπως Heroku, Slack, Mailchimp, Stripe). Κοιτάξτε επίσης τον ανταγωνισμό σας. Θα λάβετε πολλές πληροφορίες. Και όταν ξεκινάτε, θα είναι ευκολότερο να αναπτύξετε το προϊόν επειδή κάνατε την εργασία σας. Πρέπει να ακονίσετε το τσεκούρι σας, πριν αρχίσετε να κόβετε:

"Αν είχα οκτώ ώρες για να κόψω ένα δέντρο, θα περνούσα έξι ώρες ακονίζοντας το τσεκούρι μου." - Αβραάμ Λίνκολν

Κάναμε την εργασία μας και έχουμε μια τεράστια λίστα με περισσότερους από 100 δωρεάν πίνακες εργαλείων ως παραδείγματα από τα οποία μπορούμε να εμπνεύσουμε. Εδώ είναι μερικά από αυτά:

Έχετε μια τεράστια λίστα ταμπλό, με πολλά χρώματα, κινούμενα σχέδια, όμορφα εικονίδια, μικρά γραφήματα, μεγάλα γραφήματα, στατική ή σταθερή πλευρική γραμμή και εκατοντάδες διαφορετικά χαρακτηριστικά. Πώς ξέρετε ποια είναι η καλύτερη επιλογή για το κοινό σας;

Επειδή δεν γνωρίζαμε τι θέλουν οι άνθρωποι μέσα σε έναν πίνακα ελέγχου, αποφασίσαμε να γράψουμε όλες τις δυνατότητες που περιέχουν αυτοί οι πίνακες ελέγχου και να χρησιμοποιούν μόνο τις πιο κοινές. Συνειδητοποιήσαμε ότι τα βασικά χαρακτηριστικά επιλύουν περίπου το 95% των περιπτώσεων όπου χρειάζεστε ένα ταμπλό. Το υπόλοιπο 5% επιλύει πολύ συγκεκριμένα προβλήματα.

Τα βασικά στοιχεία είναι κουμπιά, εικονίδια, τυπογραφία, πλευρική γραμμή, κεντρικός πίνακας, navbars και αναπτυσσόμενα μενού. Τα βασικά χαρακτηριστικά των περισσότερων ταμπλό είναι:

  1. Πίνακες
  2. Ειδοποιήσεις
  3. Λίστες εργασιών
  4. Κάρτες (για διαφορετικό τύπο μορφών και ευκολότερη οπτικοποίηση των πληροφοριών)
  5. Διαγράμματα (γράφημα ντόνατ, γράφημα γραμμών, γράφημα ράβδων)
  6. Χάρτες Google

Με μικρές οπτικές ρυθμίσεις, μπορείτε να αναπαραγάγετε το 95% οποιουδήποτε πίνακα οργάνων από οποιαδήποτε εταιρεία στον κόσμο, χρησιμοποιώντας τα βασικά στοιχεία. Τότε έχετε το υπόλοιπο 5%, το οποίο είναι πάντα διαφορετικό ανάλογα με την εταιρεία και τα προβλήματα που επιλύει. Εδώ μπορούμε να βρούμε:

  1. Κάρτες συστήματος Kanban
  2. Λειτουργία μεταφοράς και απόθεσης
  3. Στοιχεία χρονοδιαγράμματος
  4. Πρόγραμμα επεξεργασίας WYSIWYG
  5. Μενού πλευρικής γραμμής πλοήγησης 8 επιπέδων
  6. Μεταφόρτωση πολλαπλών αρχείων + Μεταφορά και απόθεση αποστολέα αρχείων
  7. Έντυπο X-Editable
  8. Διάγραμμα Morris, Διάγραμμα Google, Διάγραμμα Flot, amChart, Διάγραμμα ροών και πολλοί άλλοι τύποι γραφημάτων
  9. Και η λίστα μπορεί να συνεχιστεί σε περισσότερες από 200 δυνατότητες

Το πρόβλημα είναι ότι κάθε μία από αυτές τις νέες προσθήκες προσθέτει επιπλέον βιβλιοθήκες CSS, JavaScript ή jQuery και HTML. Έχουμε δημιουργήσει το προϊόν σε απλό HTML, χωρίς πλαίσια ή αρθρωτά κόλπα, επομένως όλο το CSS / JavaScript θα είναι σε ένα μόνο αρχείο.

Μην με παρεξηγείτε, δεν λέω ότι τα χαρακτηριστικά δεν ήταν καλά. Αυτά είναι υπέροχα πρόσθετα που αναπτύχθηκαν από φοβερούς ανθρώπους. Αλλά δεν ήταν κάτι που θέλαμε να έχουμε στον απλό ταμπλό μας.

Αποφασίσαμε λοιπόν να διατηρήσουμε το προϊόν όσο το δυνατόν πιο ελαφρύ (θυμηθείτε το όνομα;). Ταμπλό Light Bootstrap . Και αποφασίσαμε να εφαρμόσουμε μόνο τα χαρακτηριστικά που έκαναν επίλυση του πυρήνα 95%.

2. Πώς δημιουργήθηκε το σχέδιο

Αφού κάναμε το σχέδιό μας για τα στοιχεία που θα είχε το προϊόν, έπρεπε να σκεφτούμε ένα σχέδιο που θα ήταν εξαιρετικό. Ένα φιλικό προς το χρήστη σχέδιο που θα έκανε τους ανθρώπους να θέλουν να έχουν αυτόν τον πίνακα ελέγχου στο σύστημα διαχείρισης περιεχομένου τους. Είχαμε ήδη το διάσημο κιτ Bootstrap Get Shit Done. Οι προγραμματιστές διαδικτύου το άρεσαν και το έχει κατεβάσει περισσότερες από 30.000 φορές. Αποφασίσαμε λοιπόν να το χρησιμοποιήσουμε ως βασικό σχέδιο για βασικά στοιχεία όπως κουμπιά, Navbars, Inputs κ.λπ.

Συνειδητοποιήσαμε ότι χρειαζόμαστε κάτι παραπάνω από αυτό, για να έχουμε αντίκτυπο και να κάνουμε τους ανθρώπους να θέλουν άσχημα το προϊόν μας. Δεν θέλαμε να είμαστε "ένας άλλος πίνακας ελέγχου που βασίζεται στο Bootstrap". Πού πηγαίνετε όταν θέλετε εξαιρετική σχεδίαση πόρων;

Αν κάνετε αναζήτηση στο "dashboard" στο Dribbble, θα βρείτε πολλά απίστευτα όμορφα ταμπλό και πίνακες διαχείρισης. Στην πραγματικότητα, για όσους δεν το γνωρίζουν, το Dribbble είναι σαν την οπτική κοκαΐνη. Δείτε μερικά από αυτά τα παραδείγματα των Cosmin Capitanu και Mike από το CreativeMints:

Βλέποντας όλα αυτά τα όμορφα παραδείγματα μας έκανε να συνειδητοποιήσουμε ότι αν χτίσουμε κάτι τέτοιο σίγουρα θα ξεχωρίσουμε από το πλήθος. Επίσης, ακόμη και αν οι πίνακες ελέγχου ή τα γραφήματα φαίνονται πολύ καλά, θα είναι πολύ δύσκολο ή αδύνατο για εμάς να κωδικοποιήσουμε πραγματικά σε HTML, CSS και JavaScript. Ή επιλύουν ένα πολύ συγκεκριμένο πρόβλημα, όπως το πιο πρόσφατο ταμπλό με μετρήσεις σώματος.

Ήταν αδύνατο πριν από 2 χρόνια, επειδή το επίπεδο γνώσεων και εμπειρίας μας με HTML / CSS δεν ήταν τόσο υψηλό. Είμαι βέβαιος ότι αν θέλουμε να τα εφαρμόσουμε σήμερα, θα έχουμε μια καλή πιθανότητα να δημιουργήσουμε κάτι παρόμοιο. Επίσης, η τεχνολογία και οι δυνατότητες του προγράμματος περιήγησης θα μας βοηθήσουν περισσότερο.

Θέλαμε να δημιουργήσουμε κάτι που μπορεί να χρησιμοποιηθεί από πολλούς ανθρώπους από διαφορετικούς επιχειρηματικούς τομείς. Υπήρχαν και μερικά απλά και όμορφα ταμπλό, αλλά δεν θέλαμε να τα χρησιμοποιήσουμε ως έμπνευση γιατί θέλαμε κάτι διαφορετικό.

Δεν μπορώ να εξηγήσω ακριβώς τι θέλαμε, αλλά δεν αισθανθήκαμε άνετα με κανένα από τα παραδείγματα. Συνεχίσαμε λοιπόν να κάνουμε την έρευνά μας μέχρι να βρούμε κάτι που πραγματικά μας άρεσε:

Δεν ήταν τέλειο ούτε τόσο εξαιρετικό όσο θέλαμε να είναι. Θεωρήσαμε όμως ότι είναι η σωστή επιλογή και είναι ένα πολύ καλό παράδειγμα από το οποίο μπορούμε να δημιουργήσουμε το ταμπλό μας. Ακόμα και ο Πάμπλο Πικάσο είπε ότι οι σπουδαίοι σχεδιαστές κλέβουν και η Apple σεβάστηκε τον λόγο του:

Δεν μπορούσαμε να το κάνουμε αυτό. Το ταμπλό από το Heroku ήταν αρκετά καλό που μας έδωσε αυτή τη σπίθα. Αποφασίσαμε λοιπόν να το χρησιμοποιήσουμε μόνο για έμπνευση και όχι για το τελικό αποτέλεσμα. Εδώ είναι η πρώτη επανάληψη:

Είναι μια πολύ καλή αρχή. Για να έχουμε καλύτερη εικόνα για το πώς θα φαίνεται, απλώς πρέπει να συμπληρώσουμε τη σωστή περιοχή με μερικές κάρτες με γραφήματα:

Τα χρώματα των καρτών δεν φαινόταν τόσο καλά. Ήταν πολύ φωτεινά για το πώς φαινόταν η αριστερή πλευρική γραμμή. Έτσι ξεκινήσαμε να δοκιμάζουμε διαφορετικούς συνδυασμούς χρωμάτων για τα γραφήματα και την πλευρική γραμμή.

Σε αυτό το σημείο συνειδητοποιήσαμε ότι δεν χρειάζεται να διατηρούμε μόνο 1 χρώμα για το φόντο της πλευρικής γραμμής. Και πρέπει να αφήσουμε τους χρήστες μας να επιλέξουν ποιο χρώμα θέλουν. Γνωρίζαμε ότι η Apple είχε μερικές όμορφες ντεγκραντέ για την εφαρμογή Fitness, γι 'αυτό αποφασίσαμε να χρησιμοποιήσουμε αυτές τις ντεγκραντέ ως βάση για τις μελλοντικές μας ντεγκραντέ.

Πάντα πιστεύαμε ότι αν παρακολουθούμε τι κάνουν οι καλύτερες εταιρείες στον κόσμο όσον αφορά το Design και το UX, θα θέσουμε πολύ υψηλά πρότυπα για τις διεπαφές μας. Με αυτόν τον τρόπο, όλο και περισσότεροι προγραμματιστές ιστού θα έχουν δωρεάν πρόσβαση σε προϊόντα υψηλής ποιότητας.

Ενώ κάναμε όλους αυτούς τους διαφορετικούς συνδυασμούς χρωμάτων, ντεγκραντέ, κάρτες και γραφήματα, είδαμε ότι τα παιδιά από το Metalab, που δημιούργησαν τη διεπαφή για το Slack, έγραψαν ένα άρθρο: Slack's 2,8 Billion Dollar Secret Sauce Αυτό κατέληξε να είναι μια έμπνευση για τα επόμενα βήματα. Η γενική ιδέα του άρθρου ήταν ότι η μυστική σάλτσα του Slack δημιουργείται από το συνδυασμό μιας εξαιρετικής και παιχνιδιάρικης διεπαφής με μικρές αλληλεπιδράσεις, γεγονός που καθιστά το προϊόν πιο φιλικό προς τον χρήστη.

"Φαίνεται διαφορετικό, αισθάνεται διαφορετικό και ακούγεται διαφορετικό."

Θέλαμε να προσθέσουμε κάτι που κανένα από τα άλλα ταμπλόείχε. Πάντα μου άρεσε το πώς μια κλίση με κάποια διαφάνεια μπορεί να κοιτάζει πάνω από μια εικόνα. Και άρχισα να παίζω με διαφορετικές εικόνες και αδιαφάνεια. Παρεμπιπτόντως, η εικόνα ντεγκραντέ Duotone που χρησιμοποιήσαμε το 2015 (δεν γνωρίζαμε καν ότι έχει όνομα) φαίνεται να είναι μία από τις τάσεις στον σχεδιασμό ιστοσελίδων για το 2017. Αυτό είναι πολύ ωραίο, έτσι δεν είναι; ;

Δεν είμαι πλήρως ικανοποιημένος…

Αυτή ήταν η θέα που μας έκανε να νιώθουμε χαρούμενοι, ήταν τέλεια για εμάς; Προσθέσαμε επίσης μικρές αλληλεπιδράσεις, όπως το αρχικό αναπτυσσόμενο animation ή το εφέ εμφάνισης της ειδοποίησης:

Η προσθήκη της εικόνας με τις κλίσεις και τα μικρά κινούμενα σχέδια μας έκαναν να νιώσουμε σαν αυτόν τον τύπο:

3. Χτισμένο πάνω από ανοιχτό κώδικα και γιατί πρέπει να σταθείτε στους ώμους των γιγάντων

Όπως είπαμε στην αρχή, δεν θέλαμε να ανακαλύψουμε ξανά τον τροχό. Ούτε είχαμε τα χρήματα για τη σύναψη εμπειρογνωμόνων ικανών να οικοδομήσουμε τα στοιχεία που απαιτούνται για το ταμπλό. Αποφασίσαμε ότι η καλύτερη επιλογή για εμάς είναι να χρησιμοποιήσουμε αυτό που δημιούργησαν και μοιράστηκαν άλλοι άνθρωποι δωρεάν ή ανοιχτού κώδικα .

Ανακαλύψαμε πρόσφατα ότι αυτό που πραγματικά κάναμε ήταν να σταθεί στους ώμους των γιγάντων. Αυτό σημαίνει ότι χρησιμοποιήσαμε όσο μπορούσαμε από εργαλεία που είναι ήδη ισχυρά και συντηρούνται από μεγάλες κοινότητες. Για περισσότερα σχετικά με αυτό και γιατί πρέπει να χρησιμοποιήσετε αυτήν την τεχνική όταν θέλετε να δημιουργήσετε κάτι από το μηδέν, διαβάστε αυτό το φοβερό άρθρο, που γράφτηκε από τον Quincy Larson: Πώς να σταθείτε στους ώμους των γιγάντων.

Ας ρίξουμε μια ματιά στο τι είναι πραγματικά κάτω από την κουκούλα.

  • Framework: Bootstrap - Το Bootstrap είναι το πιο δημοφιλές πλαίσιο HTML, CSS και JavaScript για την ανάπτυξη αποκριτικών, πρώτων έργων για κινητά στον Ιστό.
  • Design Layer: Λήψη κιτ Shit Done - Δωρεάν κιτ διεπαφής χρήστη Bootstrap 3. Αυτό είναι το καλύτερο σημείο εκκίνησης για κάθε διαδικτυακό έργο που δημιουργείτε. Έχει γίνει σήμα κατατεθέν για την διαδικτυακή κοινότητα μιας καθαρής και όμορφης διεπαφής.
  • Γραμματοσειρά: Roboto - μια γραμματοσειρά Google που έχει διπλή φύση. Έχει μηχανικό σκελετό και οι μορφές είναι σε μεγάλο βαθμό γεωμετρικές.
  • Μικρά εικονίδια: Font Awesome - Το Font Awesome σας δίνει εικονικά διανυσματικά εικονίδια που μπορούν να προσαρμοστούν χρησιμοποιώντας CSS.
  • Μεγάλα εικονίδια: Stroke 7 Icons - Αυτό είναι ένα πλήρες σύνολο 202 εικονιδίων λεπτής διαδρομής εμπνευσμένα από το iOS 7.
  • Διαγράμματα: Chartist.js - Το Chartist.js είναι το προϊόν μιας κοινότητας που απογοητεύτηκε από τις ικανότητες που παρέχονται από άλλες βιβλιοθήκες χαρτών.
  • Ειδοποιήσεις: Ειδοποίηση Bootstrap - Αυτή η προσθήκη σάς βοηθά να μετατρέψετε τις τυπικές ειδοποιήσεις bootstrap σε "growl" όπως ειδοποιήσεις.
  • Χάρτες: Χάρτες Google - Προσθήκη για χάρτες.
  • Φωτογραφίες: Unsplash - Δωρεάν (κάντε ό, τι θέλετε) φωτογραφίες υψηλής ανάλυσης.
«Δεν υπάρχει κάτι σαν κάτι για το τίποτα. Όλα, συμπεριλαμβανομένης της προσωπικής σας επιτυχίας, έχουν μια τιμή που πρέπει να πληρωθεί »- Napoleon Hill

Εφόσον χρησιμοποιήσαμε πολλά από την κοινότητα, θα ήταν δίκαιο να δώσουμε πίσω στην κοινότητα. Έτσι, αποφασίσαμε πριν από μερικές εβδομάδες να το κυκλοφορήσουμε με άδεια MIT. Με αυτόν τον τρόπο, περισσότεροι προγραμματιστές μπορούν να συνεισφέρουν και να το χρησιμοποιούν χωρίς νομικούς περιορισμούς, για προσωπικά και εμπορικά έργα.

4. Εκκίνηση, Άνοδος και Λάμψη

Κάνοντας την έρευνα για περίπου 50-60 ημέρες (ακονίζοντας το τσεκούρι) μας έδωσε τη δυνατότητα να αναπτύξουμε το ταμπλό σε μόλις 15 ημέρες (τεμαχίζοντας το δέντρο). ;

Τι κάνετε μετά την έναρξη ενός έργου; Πρέπει να δείτε ποια είναι τα σχόλια για αυτό, εάν οι άνθρωποι θα ήθελαν να τα χρησιμοποιήσουν και εάν ο απλός πίνακας ελέγχου που δημιουργήσατε λύνει ένα πρόβλημα για αυτούς. Εάν δεν θέλουν να το χρησιμοποιήσουν, τότε, δεν έχετε επιχείρηση. Το υποβάλαμε σε διαφορετικές κοινότητες και τα πήγαινε πολύ καλά. Για παράδειγμα, πήρε:

  • 170 θετικές ψήφοι στο Hacker News, κορυφαίος στη θέση 9 και πάνω από 88.000 προβολές για αυτήν την εβδομάδα
  • 247 θετικές ψήφοι στο / r / webdev subreddit
  • 80 θετικές ψήφοι στο / r / web_design subreddit (αποκλείστηκαν στα 80 επειδή πήρε την ετικέτα "spam", είχαμε κάποια συνδρομητικά αναδυόμενα παράθυρα ... τα οποία καταργήσαμε αργότερα;)

Η κοινότητα επικύρωσε την ιδέα. Έχουμε επίσης πολλά σχόλια, για να προσθέσουμε τα αρχεία SASS για ευκολότερη προσαρμογή ή να τα δημοσιεύσουμε στο GitHub.

Στη συνέχεια, έχουμε δει ότι υπήρχαν πολλοί αρχάριοι που ήθελαν απλώς να μάθουν πώς να χρησιμοποιούν αυτό το ταμπλό. Ήταν τόσο όμορφο που οι άνθρωποι που δεν αλληλεπιδρούν με κάτι τέτοιο ήθελαν να μάθουν πώς να συνεργάζονται με αυτό.

Περάσαμε περίπου 3 εβδομάδες αναπτύσσοντας μια σειρά εκπαιδευτικών βίντεο σχετικά με τον τρόπο αναπαραγωγής του πίνακα ελέγχου του WordPress χρησιμοποιώντας το προϊόν μας. Επιλέξαμε να χρησιμοποιήσουμε τον πίνακα ελέγχου του WordPress επειδή είναι ένας πολύ δημοφιλής πίνακας ελέγχου. Και θέλαμε να αφήσουμε τους ανθρώπους να καταλάβουν ότι μπορούν να δημιουργήσουν οτιδήποτε χρησιμοποιώντας το προϊόν μας.

Τα μαθήματα έλαβαν πολύ καλά και έχουν περισσότερες από 78.000 προβολές από σήμερα. Εδώ είναι το πρώτο βίντεο σχετικά με τον τρόπο δημιουργίας αποκριτικού προτύπου διαχειριστή χρησιμοποιώντας το Light Bootstrap Dashboard 1/3.

5. Πώς χρηματοδοτούμε την υποστήριξη και τα αιτήματα από τους προγραμματιστές ιστού

Η κατασκευή ενός προϊόντος είναι εύκολη, η διατήρησή του είναι δύσκολη.

Υπάρχουν πολλά υπέροχα πρόσθετα / πρότυπο εκεί έξω που πεθαίνουν επειδή οι δημιουργοί τους δεν έχουν αρκετά χρήματα ή δεν βγάζουν αρκετά έσοδα για να συνεχίσουν την ανάπτυξη ή να διορθώσουν τα προβλήματα.

Δεν θέλαμε την ίδια περίπτωση για το προϊόν μας. Η καλύτερη επιλογή για να διατηρήσετε το προϊόν ζωντανό ήταν να δημιουργήσετε μια έκδοση PRO που μπορεί να δημιουργήσει αρκετά έσοδα για να υποστηρίξει τη συνεχή ανάπτυξη.

Χρησιμοποιήσαμε τα σχόλια από προγραμματιστές ιστού και αποφασίσαμε να δημιουργήσουμε μια έκδοση Premium με περισσότερα στοιχεία και προσθήκες. Θέλαμε να βοηθήσουμε επίσης μερικά από τα παιδιά που ήθελαν συγκεκριμένα χαρακτηριστικά και ήταν στην κατηγορία 5%. Η επιλογή των σωστών προσθηκών που μπορούν να βοηθήσουν όσο μπορούμε από την κατηγορία 5% ήταν πολύ δύσκολη για εμάς.

Ξεκινήσαμε ξανά να κάνουμε έρευνα στον πίνακα ελέγχου premium. Και προσθέσαμε πρόσθετα όπως το Πλήρες Ημερολόγιο, το DataTables.net, το Sweet Alert, το Bootstrap Wizard και μερικές επιπλέον σελίδες όπως η σελίδα σύνδεσης, η σελίδα εγγραφής, η σελίδα κλειδώματος

Εδώ είναι η ζωντανή προεπισκόπηση της έκδοσης PRO. Θα δείτε ότι διατηρήσαμε την ίδια δομή και θέλαμε να το κάνουμε ελαφρύ, χωρίς πάρα πολλές επιλογές και χαρακτηριστικά.

Έχοντας τα έσοδα από την έκδοση PRO, μας έκανε όχι μόνο να υποστηρίξουμε το προϊόν αλλά και να δημιουργήσουμε νέους τύπους αρχείων όπως η έκδοση PSD / Sketch ή Angular 2. Και τα δύο μοιράζονται δωρεάν.

6. Μελλοντικά αναπτυξιακά σχέδια

Ακολουθούν ορισμένα στατιστικά στοιχεία σχετικά με τον πίνακα ελέγχου:

Είναι πολύ εύκολο να το προσαρμόσετε ώστε να ταιριάζει με την επωνυμία σας. Χρησιμοποιήθηκε σε εσωτερικά εργαλεία όπως ο Κατάλογος Ιατρικής Έκτακτης Ανάγκης του Στάνφορντ:

Έχουμε πολλά αιτήματα από προγραμματιστές ιστού που θέλουν να είναι ενσωματωμένος ο Πίνακας ελέγχου σε διαφορετικά πλαίσια, όπως Angular 2, Angular CLI, React, Meteor, VueJS ή ως Rails Gem. Η δημιουργία όλων αυτών των εκδόσεων και η υποστήριξή τους δωρεάν με άδεια MIT θα λειτουργήσει μόνο εάν έχουμε εκδόσεις PRO για κάθε μία. Ξεκινήσαμε με το Angular 2 και έχουμε δει πολλούς ανθρώπους που το χρησιμοποιούν και έχουμε πολλά σχόλια για το πώς να το βελτιώσουμε. Έτσι, εάν θέλετε να συμμετάσχετε στα άλλα πλαίσια ή εάν έχετε οποιεσδήποτε ιδέες για το πώς να κάνετε αυτά τα προϊόντα καλύτερα, θα χαρούμε να μιλήσουμε περισσότερο.

Χρειάστηκε πολύ θάρρος για να δείξουμε τις πηγές μας και τη διαδικασία που είχαμε πίσω από την κατασκευή του Light Bootstrap Dashboard. Ελπίζω να μάθετε κάτι από αυτό και αν έχετε σχόλια ή προτάσεις, θα χαρώ να σας μιλήσω στα σχόλια.

Χρήσιμοι σύνδεσμοι:

  • Κατεβάστε την έκδοση HTML από το www.creative-tim.com
  • Κατεβάστε την γωνιακή έκδοση από το www.creative-tim.com
  • Κατεβάστε την έκδοση PSD / Sketch από το www.pixelsvibe.com
  • Παίξτε μαζί του στη ζωντανή προεπισκόπηση
  • Συνεισφέρετε και αναφέρετε ζητήματα στο αποθετήριο GitHub
  • Ελέγξτε το ιστολόγιό μας: //blog.creative-tim.com/

Βρείτε με στο:

  • Διεύθυνση ηλεκτρονικού ταχυδρομείου: [email protected]
  • Facebook: //www.facebook.com/axelut
  • Twitter: //twitter.com/axelut