Εισαγωγή
Κατά τη γνώμη μου το πρώτο άρθρο Raspberry Pi, έδωσα μια γρήγορη ματιά στο διοικητικό συμβούλιο, και έδειξε πόσο εύκολο ήταν να φορτώσει ένα λειτουργικό σύστημα και να κλωτσήσει την πλακέτα στη ζωή, να συνδεθείτε στο Internet και να περιηγηθείτε στο The CodeProject.
Σε αυτό το άρθρο, θα ρίξουμε μια ματιά στο νέο περιβάλλον Google Coder, για να δείτε ποιο είναι το εργοστάσιο σοκολάτας έχουν μέχρι.
Google περιγράφεται ως «ένας απλός τρόπος για να κάνει το web πράγματα στο Raspberry Pi.», Το ερώτημα θα πρέπει να είναι, πόσο απλό;
Ξεκινώντας
Τα πρώτα πράγματα πρώτα, θα πρέπει να πάρουν στα χέρια τους την απαραίτητη λήψη για να εκτελέσετε μια εγκατάσταση του περιβάλλοντος πάνω στην κάρτα SD για την εκκίνηση του RasPi. Επισκεφθείτε http://googlecreativelab.github.io/coder/ να αρπάξει την τελευταία έκδοση. Η έκδοση κατά το χρόνο σύνταξης της παρούσας ήταν Έκδοση 0.4
Οι οδηγίες στην ιστοσελίδα ήταν ένα κομμάτι λείπει. Κατέληξα εξαγωγή το αρχείο που κατεβάσατε και χρησιμοποιώντας την ίδια προσέγγιση, όπως έκανα κατά τη γνώμη μου το πρώτο άρθρο RasPi δηλαδή Win32DiskImager. Απλά το σημείο με το αρχείο εικόνας από τον εξαγόμενο αρχείο zip και να ρυθμίσετε την κάρτα SD ως στόχο και αφήστε το να κάνει το πράγμα του.
Μόλις Win32DiskImager είχε κάνει το πράγμα του, pop την κάρτα SD πίσω στο RasPi, συνδέω την οθόνη και το πληκτρολόγιο etc / ποντίκι και να εκκινήσετε το.
Η επιτυχία, μετά την ανατάραξη πολύ οθόνη, ήμουν τελικά παρουσιάζονται με μια γραμμή σύνδεσης. Τώρα, και πάλι οι πληροφορίες στην ιστοσελίδα Coder είναι ένα κομμάτι λείπει, στο τέλος πήρα μια μαχαιριά στο προεπιλεγμένο κωδικό πρόσβασης που χρησιμοποιείται για τη διανομή συριγμό (που αυτό φαίνεται να βασίζεται σε) δηλαδή username: pi και password: raspberry
Τώρα έχω συνδεθεί, θα ανάψουν μια συνεδρία επιφάνειας εργασίας χρησιμοποιώντας την εντολή startx
Ήμουν χρησιμοποιώντας ένα ασύρματο προσαρμογέα και υπάρχει ένα απλό εργαλείο GUI στην επιφάνεια εργασίας για τη διαμόρφωση ενός προσαρμογέα ασύρματου δικτύου, όταν αυτό έγινε είχα τώρα το RasPi στο δίκτυο.
Μπορεί επίσης να θέλετε να συσταθεί Remote Desktop, αν έχετε ανάγκη. Και πάλι, το έκανα αυτό στο πρώτο άρθρο, αλλά για να σας σώσει ψάχνετε, μπορείτε να ανάψουν ένα τερματικό και να χρησιμοποιήσετε την εντολή sudo apt-get install xrdp
Τέλος, πίσω στο κανονικό υπολογιστή μου, μπορώ να εγκαταστήσω το Bonjour Print Services σύμφωνα με τις οδηγίες του Coder Ιστοσελίδα.
Σημείωση: Μια εναλλακτική λύση σε αυτό είναι ακριβώς να ψάξουν για την διεύθυνση IP που χρησιμοποιείται από το RasPi. Στο screenshot παραπάνω, μπορείτε να δείτε με ασύρματο προσαρμογέα έχει ανατεθεί σε 192.168.0.28 , ώστε να μπορώ απλά να περιηγηθείτε στο http://192.168.0.28/ .
Σε αυτό το σημείο τα πάντα θα πρέπει να είναι καλό να πάει και να χτυπήσει το περιβάλλον Coder μέσω του προγράμματος περιήγησης.
Coder στο πρόγραμμα περιήγησης
Επιστροφή στην κανονική μου PC, ανοίγοντας ένα παράθυρο του προγράμματος περιήγησης και την πλοήγηση σε http://coder.local/ σας παρουσιάζονται με μια προειδοποίηση ασφαλείας (στο Chrome τουλάχιστον) λόγω πιστοποιητικό SSL χώρο, αλλά επειδή αυτή είναι η δική σας RasPi το θα πρέπει να είναι ασφαλές να «προχωρήσει ούτως ή άλλως», ώστε να είναι ό, τι έκανα.
Σε αυτό το στάδιο μπορείτε τώρα να πάρετε την έναρξη του περιβάλλοντος Coder. Θα σας ζητηθεί να ορίσετε έναν κωδικό πρόσβασης για την προστασία Coder σας.
Ναι, υπάρχουν κανόνες κωδικού, όπως έμαθα!
ΣΗΜΕΙΩΣΗ: Όταν ρυθμίζετε τον κωδικό πρόσβασης εδώ, αλλάζει επίσης το προεπιλεγμένο κωδικό σύνδεσης για username: pi
Αφού ορίσετε τον κωδικό πρόσβασης, μπορείτε τώρα να συνδεθείτε με το περιβάλλον σας Coder για την έναρξη της κωδικοποίησης.
Εδώ έχουμε το Coder «Ξεκινώντας» σελίδα έχει.
Ρυθμίσεις
Κάνοντας κλικ στο «Gear» στην πάνω δεξιά γωνία του περιβάλλοντος Coder σας επιτρέπει να ορίσετε το όνομα για Coder σας, προσθέστε το όνομά σας να ορίσετε το χρώμα, αλλά και πρόσβαση στις ρυθμίσεις Wi-Fi και να αλλάξετε τον κωδικό πρόσβασης.
Αυτό λέει στην ιστοσελίδα Coder ότι αν ξεχάσετε τον κωδικό σας, μπορείτε να βάλετε την κάρτα SD σε έναν άλλο υπολογιστή και να δημιουργήσετε ένα αρχείο κειμένου το όνομα «reset.txt» στον κατάλογο coder_settings και αυτό θα σας επιτρέψει στη συνέχεια να ενεργοποιήσετε την επαναφορά του κωδικού πρόσβασης την επόμενη φορά που κάνετε επανεκκίνηση και να συνδεθείτε στο Coder Console στο πρόγραμμα περιήγησης.
Το Demo Apps
Όπως μπορείτε να δείτε από τα παραπάνω screenshot, υπάρχουν 3 εφαρμογές demo είναι ήδη διαθέσιμα για να περιηγηθείτε την πηγή.
Το Hello World είναι ένα πολύ απλό «Hello World» σελίδα. Ο βολβός του ματιού app είναι ένα απλό κινούμενο βολβό του ματιού που ακολουθεί το ποντίκι γύρω από την οθόνη και αναβοσβήνει κάθε τόσο συχνά. Τώρα, η Space Rocks app, αν τρέχει, τα γραφικά δεν εμφανίζονται σωστά για μένα, οπότε πραγματικά δεν ξέρω τι συμβαίνει, το μόνο που μπορούσα να δω ήταν ένας μετρητής ζωή, και όταν πάτησα το πλήκτρο βέλους, κάτι πρέπει να μεταφερθεί γιατί πέθανε.
Σκέφτηκα ότι αυτό ήταν ένα αγοράκι περίεργο, έτσι από περιέργεια, άνοιξα μια συνεδρία IE10 και επισήμανε στον κωδικοποιητή. Αυτή τη φορά θα μπορούσα ευχαρίστως να δείτε και να παίξει την διαστημικών βράχων app. Φαίνεται να είναι ένας κλώνος αστεροειδείς.
Εξαιρετικά απογοητευτικό το γεγονός ότι το Google Chrome (29.0.1547.66) δεν μπορεί να παίξει το παιχνίδι και IE10 καταφέρνει. Αυτό θα είναι το Chrome 0-1 τον Internet Explorer. Νόμιζα ότι δεν υπάρχει κανένας τρόπος ότι η ομάδα Google θα επέτρεπε αυτό να συμβαίνει, έτσι υπάρχουν υποψίες ότι κάτι συμβαίνει με το μηχάνημά μου. Είτε ήταν μέχρι το μηχάνημα να είναι κατ ‘έξω αναδίπλωση σχετικά με την CPU και GPU ή απλά να έχουν μια κακή μέρα. Έχοντας επανεκκίνηση το μηχάνημα και προσπαθεί πάλι, όλα ήταν πίσω στη σειρά και τα διαστημικών βράχων τώρα εργάστηκε στο Chrome και την ειρήνη στο σύμπαν αποκαταστάθηκε.
Αν στην πάνω δεξιά γωνία της παραπάνω screenshot, θα παρατηρήσετε ότι υπάρχει ένα «CODER», «</>» και «HACK», αυτές επιτρέπουν την άμεση πρόσβαση πίσω στην κύρια Coder αρχική σελίδα, ο κώδικας πίσω για την επεξεργασία της αίτησης και μια γρήγορη σελίδα hack,
Ο Επεξεργαστής Σελίδα
- A – Επιστρέφει πίσω στην αρχική σελίδα Coder περιβάλλον
- B – Πατήστε τον τίτλο του app για να επιστρέψετε στην εφαρμογή που εκτελείται
- C – Εναλλαγή μεταξύ των διαφόρων απόψεων των κωδικών στοιχείων
- D – Media manager, το χρησιμοποιήσουν για να ανεβάσουν τα έργα, ήχου κλπ.
- E – Προεπισκόπηση, σβήστε τον επεξεργαστή σε ένα πλευρό προεπισκόπηση του κώδικα και στην εφαρμογή
- F – ρυθμίσεις εφαρμογής, ορίστε τον τίτλο εφαρμογή, το χρώμα, συγγραφέας.
Η Coder Apps Περιβάλλον
Είναι πάρα πολύ ένα σύγχρονο περιβάλλον εφαρμογών web με τη χρήση τυποποιημένων HTML, CSS και Javascript. Για την πλευρά του διακομιστή είναι επίσης Node.js .
Δεδομένου ότι αυτό είναι βασικά μια περικόψει κουτί linux, τολμώ να πω ότι θα μπορούσε, αν ήθελε να θέσει ό, τι θέλετε σε αυτό. Ίσως θα βάλουμε στη δοκιμή αντοχής σε μεταγενέστερη ημερομηνία, να επικεντρωθεί στα βασικά πρώτα.
Το πρόγραμμα επεξεργασίας κώδικα που χρησιμοποιείται από το περιβάλλον Coder είναι χτισμένο σε Ace.js .
Node.js Ενότητες
Οι ενότητες του κόμβου που βρίσκεται στο /home/coder/coder-dist/coder-base/node_modules και έπρεπε να χρησιμοποιήσετε τη Διαχείριση αρχείων για να σακί γύρω για να δει τι συμπεριλαμβάνεται.
Οι βιβλιοθήκες Node.js που παρέχονται είναι?
- αναδιανέμονται – Στη μνήμη, επίμονη αποθήκευση δεδομένων κλειδιού-τιμής
- μουστάκι – Logic-λιγότερο σύστημα templating
- εκφράζουν – πλαισίου ανάπτυξης Ιστού
- socket.io – Realtime web υποδοχές
- εδραιώσει – βιβλιοθήκη ενοποίηση του κινητήρα Πρότυπο
- bcrypt – χρησιμότητα κατακερματισμού κωδικού πρόσβασης
Υπάρχει επίσης ένα διαχειριστή πακέτων κόμβος, NPM που μπορεί να χρησιμοποιηθεί για να επεκτείνει τη λειτουργικότητα του κόμβου. Αυτό γίνεται από τη γραμμή εντολών, αλλά δεν είναι πεδίο για αυτό το άρθρο και μπορείτε να κάνετε ένα κομμάτι της Googling, αν πραγματικά θέλετε να μάθετε περισσότερα.
Να φτιάξουμε ένα App;
Φυσικά θα είμαστε, γι ‘αυτό είμαστε εδώ μετά από όλα! Τι θα λέγατε για κάτι απλό για να αρχίσει με. Τι θα λέγατε για μια απλή αίτηση Todo List.
Ο κώδικας που χρησιμοποιείται στα διάφορα τμήματα μπορεί να βρεθεί στην ακόλουθη download και μπορείτε να αντιγράψετε και να επικολλήσετε αυτό το περιεχόμενο του κάθε αρχείου στην αντίστοιχη καρτέλα στο editor Coder?
Το πρώτο πράγμα που πρέπει να κάνουμε είναι να δημιουργήσετε την εφαρμογή. Από την αρχική σελίδα του περιβάλλοντος Coder, κάντε κλικ στο πράσινο πλακάκι με το σύμβολο συν. Στη συνέχεια, ρυθμίστε το χρώμα και τον τίτλο για την εφαρμογή και στη συνέχεια κάντε κλικ στο κουμπί «Δημιουργία». Σε αυτό το παράδειγμα είμαι δημιουργώντας «Daves Todo».
Λοιπόν, τι θα το App πρέπει να είναι σε θέση να κάνει. Νομίζω ότι μπορείτε να μαντέψετε, αλλά να συνοψίσει τη λειτουργικότητα?
- Εμφανίζει μια λίστα των στοιχείων.
- Προσθήκη στοιχείων στη λίστα.
- Διαγράψτε στοιχεία από τη λίστα.
- Διαγραφή όλων των στοιχείων από τη λίστα σε μια ενιαία δράση.
Εδώ είναι αυτό που θα καταλήξετε με:
Στην κορυφή υπάρχουν μερικά κουμπιά σε προσφυγές ενώπιον του, ο κατάλογος των ειδών todo ολοκληρωθεί με ένα σύνδεσμο για να αφαιρέσετε ένα μόνο στοιχείο και η φόρμα εισαγωγής δεδομένων (η οποία στην πραγματικότητα δείχνει / κρύβει και δεν είναι πάντα ορατή). Αρκετά μια απλή αρχή, αλλά ο καθένας έχει να ξεκινήσει από κάπου!
Στο κάτω μέρος του screenshot μπορείτε να δείτε το περιβάλλον για την ανάπτυξη του Chrome, αυτό είναι ένας μούστος όταν προσπαθούν να διορθώσετε ό, τι συμβαίνει και τι να περάσει γύρω από και προς το RasPi και κόμβου.
HTML Markup
Ο κώδικας που ακολουθεί αναδεικνύει ό, τι υπάρχει στην καρτέλα HTML του εκδότη. Ο κώδικας στο στοιχείο HEAD είναι το γενικό πρότυπο που δημιουργήθηκε από Coder. Έχω προσθέσει μόνο το κύριο σώμα?
Collapse | Copy Code <! DOCTYPE html>
<Html>
<Κεφάλι>
<Τίτλος> Coder </ title>
<Meta charset = "utf-8">
<-! Πρότυπο Coder Περιλαμβάνει ->
<Script>
var όνομα_εφαρμογής = "{{}} όνομα_εφαρμογής"? / / όνομα της εφαρμογής (id) της εφαρμογής αυτής
var appurl = "{{& app_url}}"?
var staticurl = "{{& static_url}}"? / / βάσης διαδρομή προς στατικά αρχεία / static / apps / yourapp σας
</ Script>
<Link href = "/ static / apps / coderlib / css / index.css" media = "οθόνη" rel = Τύπος "στυλ" = "text / css" />
<Script src = "/ static / common / js / jquery.min.js"> </ script>
<Script src = "/ static / common / ace-min / ace.js" type = "text / javascript" charset = "utf-8"> </ script>
<Script src = "/ static / apps / coderlib / js / index.js"> </ script>
<Script>
. Coder addBasicNav ()?
</ Script>
<-! End Coder Περιλαμβάνει ->
<-! Αυτού του app περιλαμβάνει ->
<Link href = "{{& static_url}} / css / index.css" media = "οθόνη" rel = Τύπος "στυλ" = "text / css" />
<Script src = "{{& static_url}} / js / index.js"> </ script>
<-! End apps περιλαμβάνει ->
</ Head>
<Σώμα τάξη = "">
<Div class = "pagecontent">
<H1> Hi Ντέιβ, εδώ τα πράγματα σας todo! </ H1>
<Div id = "ανανεώσετε" class = "κουμπί"> Ανανέωση </ div> <div id = "AddItem" τάξη "κουμπί" => Προσθήκη στοιχείου </ div> <id "κουμπί" div = "ΔΙΑΓΡΑΦΗ" class => Διαγραφή όλων </ div>
<Div id = "todoListContainer">
<Div id = "refreshTitle"> <i> Φόρτωση στοιχείων ... </ i> </ div>
<Πίνακα id = class "ITEMLIST" = "CSSTableGenerator">
<Tr> <ου> Περιγραφή </ th> <ου> Προτεραιότητα </ th> </ tr>
</ Table>
<Div id = "noItems"> Δεν έχετε αντικείμενα todo! </ Div>
</ Div>
<Div id = "todoForm">
<Μορφή id = "entryForm">
<Πεδίων>
<Id = θρύλος "formTitle"> Προσθέστε ένα νέο στοιχείο </ p>
<Input type = "hidden" name = "στοιχείο" value = "" />
<Table>
<Tr> <ου> Περιγραφή είδους </ th> <ου> Προτεραιότητα </ th> </ tr>
<Tr> <td> <input type = "text" id = "περιγραφή" name = "περιγραφή" κράτησης θέσης = "Προσθέστε ένα νέο στοιχείο εδώ!" /> </ Td>
<Td> <input type = "αριθμός" id = "προτεραιότητα" name = "προτεραιότητα" min = "1" max = "5" value = "1" /> </ td>
</ Tr>
<Tr> <td> <input type = "υποβάλει" id = "υποβάλει" title = "Προσθήκη στοιχείου" class = "κουμπί" /> </ td>
<Td> <input type = "κουμπί" id = "ακύρωση" title = "Άκυρο" value = "Άκυρο" class = "κουμπί" /> </ td>
</ Tr>
</ Table>
</ Πεδίων>
</ Form>
</ Div>
</ Div>
</ Body>
</ Html>
Η CSS
Χρησιμοποιώντας μια ποικιλία από web-based γεννήτριες (δείτε την ενότητα αναφορές CSS στο τέλος) μπορώ να προσθέσω τον κώδικα CSS της σήμανσης για το styling. Το μόνο πρωτότυπο CSS ήταν η .pagecontent μπλοκ.
Collapse | Copy Code . Pagecontent {
padding: 24px?
}
Κουμπί. {
-Moz-box-shadow: Κύριο θέμα 0px 0px 0px 1px # ffffff?
-Webkit-box-shadow: Κύριο θέμα 0px 0px 0px 1px # ffffff?
box-shadow: Κύριο θέμα 0px 0px 0px 1px # ffffff?
υπόβαθρο:-webkit-κλίση (γραμμική, αριστερά επάνω, κάτω αριστερά, το χρώμα-stop (0.05, # ededed), χρώμα-stop (1, # dfdfdf))?
υπόβαθρο:-moz-γραμμική διαβάθμιση (κέντρο κορυφή, # ededed 5%, # dfdfdf 100%)?
Φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ededed », endColorstr =' # dfdfdf»)?
χρώμα φόντου: # ededed?
-Webkit-σύνορα-top-αριστερά-ακτίνα: 6px?
-Moz-σύνορα-ακτίνα-topleft: 6px?
σύνορα-top-αριστερά-ακτίνα: 6px?
-Webkit-σύνορα-top-δεξιά-ακτίνας: 6px?
-Moz-σύνορα-ακτίνα-topright: 6px?
σύνορα-top-δεξιά-ακτίνας: 6px?
-Webkit-σύνορα-κάτω-δεξιά-ακτίνας: 6px?
-Moz-σύνορα-ακτίνα-bottomright: 6px?
σύνορα-κάτω-δεξιά-ακτίνας: 6px?
-Webkit-σύνορα-κάτω-αριστερά-ακτίνα: 6px?
-Moz-σύνορα-ακτίνα-bottomleft: 6px?
σύνορα-κάτω-αριστερά-ακτίνα: 6px?
text-indent: 0?
σύνορα: 1px solid # dcdcdc?
απεικόνιση: inline-block?
color: # 777777?
font-family: arial?
font-size: 15px?
font-weight: bold?
font-style: normal?
ύψος: 50px?
line-height: 50px?
Πλάτος: 100px?
text-decoration: none?
text-align: center?
text-shadow: 1px 1px 0px # ffffff?
}
. Κουμπί: hover {
υπόβαθρο:-webkit-κλίση (γραμμική, αριστερά επάνω, κάτω αριστερά, το χρώμα-stop (0.05, # dfdfdf), χρώμα-stop (1, # ededed))?
υπόβαθρο:-moz-γραμμική διαβάθμιση (κέντρο κορυφή, # dfdfdf 5%, # ededed 100%)?
Φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# dfdfdf », endColorstr =' # ededed»)?
χρώμα φόντου: # dfdfdf?
.} Πλήκτρο: ενεργή {
θέση: σχετική?
top: 1px?
}
επιγραφή
{
Πλάτος: 4em?
float: αριστερά?
text-align: right?
margin-δεξιά: 0.5em?
display: block
}
. Υποβάλουν εισόδου
{
margin-αριστερά: 4.5em?
}
εισαγωγή
{
color: # 781351?
υπόβαθρο: # fee3ad?
σύνορα: 1px solid # 781351
}
. Υποβάλουν εισόδου
{
color: # 000?
υπόβαθρο: # ffa20f?
σύνορα: 2px εξαρχής # d7b9c9
}
πεδίων
{
σύνορα: 1px solid # 781351?
Πλάτος: 20em
}
θρύλος
{
color: # fff?
υπόβαθρο: # ffa20c?
σύνορα: 1px solid # 781351?
padding: 6px 2px
}
. CSSTableGenerator {
margin: 0px? padding: 0px?
width: 100%?
box-shadow: 10px 10px 5px # 888888?
σύνορα: 1px solid # 000000?
-Moz-σύνορα-ακτίνα-bottomleft: 0px?
-Webkit-σύνορα-κάτω-αριστερά-ακτίνα: 0px?
σύνορα-κάτω-αριστερά-ακτίνα: 0px?
-Moz-σύνορα-ακτίνα-bottomright: 0px?
-Webkit-σύνορα-κάτω-δεξιά-ακτίνας: 0px?
σύνορα-κάτω-δεξιά-ακτίνας: 0px?
-Moz-σύνορα-ακτίνα-topright: 0px?
-Webkit-σύνορα-top-δεξιά-ακτίνας: 0px?
σύνορα-top-δεξιά-ακτίνας: 0px?
-Moz-σύνορα-ακτίνα-topleft: 0px?
-Webkit-σύνορα-top-αριστερά-ακτίνα: 0px?
σύνορα-top-αριστερά-ακτίνα: 0px?
}. Πίνακα CSSTableGenerator {
width: 100%?
ύψος: 100%?
margin: 0px? padding: 0px?
.} CSSTableGenerator tr: το τελευταίο παιδί td: το τελευταίο παιδί {
-Moz-σύνορα-ακτίνα-bottomright: 0px?
-Webkit-σύνορα-κάτω-δεξιά-ακτίνας: 0px?
σύνορα-κάτω-δεξιά-ακτίνας: 0px?
}
. CSSTableGenerator πίνακα tr: το πρώτο παιδί td: το πρώτο παιδί {
-Moz-σύνορα-ακτίνα-topleft: 0px?
-Webkit-σύνορα-top-αριστερά-ακτίνα: 0px?
σύνορα-top-αριστερά-ακτίνα: 0px?
}
. CSSTableGenerator πίνακα tr: το πρώτο παιδί td: το τελευταίο παιδί {
-Moz-σύνορα-ακτίνα-topright: 0px?
-Webkit-σύνορα-top-δεξιά-ακτίνας: 0px?
σύνορα-top-δεξιά-ακτίνας: 0px?
} CSSTableGenerator tr:. Τελευταίο παιδί td: το πρώτο παιδί {
-Moz-σύνορα-ακτίνα-bottomleft: 0px?
-Webkit-σύνορα-κάτω-αριστερά-ακτίνα: 0px?
σύνορα-κάτω-αριστερά-ακτίνα: 0px?
.} CSSTableGenerator tr: hover {td
}
. CSSTableGenerator tr: nth-child (μονοί αριθμοί) {background-color: # e5e5e5?}
. CSSTableGenerator tr: nth-child (ακόμη) {background-color: # ffffff?} {CSSTableGenerator td.
κάθετη-align: μέση?
σύνορα: 1px solid # 000000?
σύνορα πλάτος: 0px 1px 1px 0px?
text-align: αριστερά?
padding: 7PX?
font-size: 10px?
font-family: Arial?
font-weight: normal?
color: # 000000?
.} CSSTableGenerator tr: το τελευταίο παιδί td {
σύνορα πλάτος: 0px 1px 0px 0px?
.} CSSTableGenerator tr td: το τελευταίο παιδί {
σύνορα πλάτος: 0px 0px 0px 1px?
.} CSSTableGenerator tr: το τελευταίο παιδί td: το τελευταίο παιδί {
σύνορα πλάτος: 0px 0px 0px 0px?
}
. CSSTableGenerator tr: το πρώτο παιδί td {
υπόβαθρο:-o-γραμμική-κλίση (κάτω, # cccccc 5%, # b2b2b2 100%)? φόντο:-webkit-κλίση (γραμμική, πάνω αριστερά, κάτω αριστερά, το χρώμα-stop (0.05, # cccccc), χρώμα-stop (1, # b2b2b2))?
υπόβαθρο:-moz-γραμμική διαβάθμιση (κέντρο κορυφή, # cccccc 5%, # b2b2b2 100%)?
Φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# cccccc", endColorstr = "# b2b2b2")? φόντο:-o-γραμμική διαβάθμιση (κορυφή, # cccccc, b2b2b2)?
χρώμα φόντου: # cccccc?
border: 0px solid # 000000?
text-align: center?
σύνορα πλάτος: 0px 0px 1px 1px?
font-size: 14px?
font-family: Arial?
font-weight: bold?
color: # 000000?
}
. CSSTableGenerator tr: το πρώτο παιδί: hover {td
υπόβαθρο:-o-γραμμική-κλίση (κάτω, # cccccc 5%, # b2b2b2 100%)? φόντο:-webkit-κλίση (γραμμική, πάνω αριστερά, κάτω αριστερά, το χρώμα-stop (0.05, # cccccc), χρώμα-stop (1, # b2b2b2))?
υπόβαθρο:-moz-γραμμική διαβάθμιση (κέντρο κορυφή, # cccccc 5%, # b2b2b2 100%)?
Φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# cccccc", endColorstr = "# b2b2b2")? φόντο:-o-γραμμική διαβάθμιση (κορυφή, # cccccc, b2b2b2)?
χρώμα φόντου: # cccccc?
}
. CSSTableGenerator tr: το πρώτο παιδί td: το πρώτο παιδί {
σύνορα πλάτος: 0px 0px 0px 1px?
}
. CSSTableGenerator tr: το πρώτο παιδί td: το τελευταίο παιδί {
σύνορα πλάτος: 0px 0px 1px 1px?
}
Το JavaScript
Αυτό είναι όλα τα νέα για το έργο. Αυτό δεν είναι ένα μάθημα στο JS, γι ‘αυτό δεν το σχέδιο σχετικά λεπτομερώς τις ιδιαιτερότητες, αλλά το γενικό πλαίσιο έχει ως εξής?
Collapse | Copy Code στοιχεία var = []?
σημείο λειτουργίας (περιγραφή, προτεραιότητα) {
. αυτό Description = περιγραφή?
. αυτό Προτεραιότητα = προτεραιότητα?
}
Η items συστοιχία διαθέτει ένα τοπικό αντίγραφο των στοιχείων που επιστρέφονται από το διακομιστή. Έχουν αναλυθεί έξω από JSON από την οι loadItems μέθοδο. Το item λειτουργία είναι μια γενική Εκκρεμότητες αντικείμενο στοιχείο που χρησιμοποιούμε για να δημιουργήσουμε νέα στοιχεία για την ώθηση επί της items πίνακα.
Collapse | Copy Code $ (Document). Έτοιμο (λειτουργία () {
/ / Απενεργοποίηση jQuery ajax caching!
$. AjaxSetup ({
cache: false
})?
. $ ('# TodoForm ») απόκρυψη ()?
/ / Επισυνάπτονται οι δράσεις
$ ("# Ανανέωσης"). Click (function () {
console.log ("Ανανέωση κλικ.")?
loadItems ()?
})?
$ ("# AddItem»). Click (function () {
console.log ("Προσθήκη στοιχείου κλικ.")?
. $ ('# FormTitle ») κείμενο (" Add Item Todo ")?
. $ ('# TodoForm ») show ()?
})?
$ ("# ΔΙΑΓΡΑΦΗ»). Click (function () {
console.log ("Delete All κλικ.")?
ΔΙΑΓΡΑΦΗ ()?
. $ ('# TodoForm ») απόκρυψη ()?
})?
$ ("# EntryForm»). Υποβάλλει (λειτουργία (γεγονός) {
console.log (". κατατεθεί το Έντυπο")?
event.preventDefault ()?
$. Ajax ({
Τύπος: "POST",
url: "/ app / daves_todo / AddItem",
δεδομένα:. $ ("# entryForm") serialize (),
τύπο δεδομένων: "string",
επιτυχίας: λειτουργία () {
loadItems ()?
}
})?
. $ ('# TodoForm ») απόκρυψη ()?
/ / Ας περιμένουμε με λίγο να επιτραπεί η raspi να καλύψουν τη διαφορά, είναι λίγο αργά!
/ / Τότε θα φορτώσει τα στοιχεία.
setTimeout (function () {loadItems ()}, 500)?
})?
$ ("# Ακύρωση»). Click (function () {
. $ ('# TodoForm ») απόκρυψη ()?
})?
/ / Τοποθετήστε τα στοιχεία, μετά από αναμονή για 500ms
setTimeout (function () {loadItems ()}, 500)?
})?
Όταν το έγγραφο έχει τοποθετηθεί, jQuery δεσμεύει μέχρι τα γεγονότα των σχετικών αντικειμένων, καθώς και αναθέτει ορισμένες από τις λειτουργίες που οι εκδηλώσεις θα εκτελέσει. Raspberry Pi είναι λίγο αργή, γι ‘αυτό θα χρησιμοποιήσει μια αναιδή τη λειτουργία χρονικού ορίου για την καθυστέρηση Todo φόρτωση στοιχείων μετά την εκτέλεση μιας δράσης. Ναι, υπάρχουν καλύτεροι τρόποι για να γίνει αυτό, αλλά αυτό είναι μόνο ένα από αυτά τα «αμυχές» που χρησιμοποιείται για την επίδειξη.
Έπειτα επάνω, ο κώδικας που χρησιμοποιείται για τη φόρτωση των στοιχείων από το διακομιστή. Υπάρχει ένα jQuery πάρει JSON κλήση η οποία στη συνέχεια αναλύει τα στοιχεία και τα σκάει στην τοπική παράταξη. Από εδώ έχουμε επαναλάβει τον πίνακα και να οικοδομήσουμε τον πίνακα για να εμφανίσετε τα στοιχεία και επίσης να ρυθμίσετε το link για να διαγράψετε τα μεμονωμένα στοιχεία.
Collapse | Copy Code loadItems λειτουργία () {
/ / Ανάκτηση μια λίστα των στοιχείων από το διακομιστή
στοιχεία = []?
. $ ("# NoItems») απόκρυψη ()?
. $ ("# RefreshTitle") show ()?
/ / Clear τα περιεχόμενα του πίνακα
. $ ("# ITEMLIST") html ("")?
console.log («Αρχίστε ajax κλήσεις στο διακομιστή.")?
$. GetJSON ("/ app / daves_todo / getItems", η λειτουργία (data) {
$. Το καθένα (τα δεδομένα, η λειτουργία (πλήκτρο, val) {
var newItem = νέο στοιχείο (val.Description, val.Priority)?
items.push (newItem)?
})?
εάν (items.length === 0)
{
. $ ("# NoItems") show ()?
}
αλλιώς
{
/ / Προσθέστε τη γραμμή κεφαλίδας του πίνακα
. $ ("# ITEMLIST") προσάρτησης ("tr <th> Περιγραφή </ th> <th> προτεραιότητας </ th> <th> Δράσεις </ th>")?
για (δείκτης var = 0? index <items.length? δείκτης + +)
{
var newRow = "tr <td>" + στοιχεία [index]. Περιγραφή + "</ td> <td>" + στοιχεία [index]. Προτεραιότητα + "</ td> <td> <a href = / app ? / daves_todo / DeleteItem id = "+ index.toString () +"> Κατάργηση </ a> </ td> </ tr> "?
$ ("# ITEMLIST") προσάρτησης (newRow).?
}
}
})
. Αποτυγχάνουν (loadFail)
. Πάντα (console.log ("Ολοκληρώθηκε η μέθοδος φορτίο ajax"))?
. $ ("# RefreshTitle») απόκρυψη ()?
}
loadFail λειτουργία () {
console.log ("Σφάλμα κατά τη φόρτωση αντικειμένων από το διακομιστή.")?
alert ("Σφάλμα κατά τη φόρτωση αντικειμένων από το διακομιστή.")?
}
Τέλος, υπάρχει η deleteAll μέθοδος, αυτό στέλνει ένα jQuery POST για να κάνει τη διαγραφή αίτηση, πριν από τη χρήση μια άλλη μικρή καθυστέρηση πριν από την επαναφόρτωση το τραπέζι.
Collapse | Copy Code ΔΙΑΓΡΑΦΗ λειτουργία () {
console.log ("Έναρξη ajax διαγραφή όλων των κλήσεων στο διακομιστή.")?
$. Ajax ({
Τύπος: "POST",
async: ψευδείς,
url: "/ app / daves_todo / ΔΙΑΓΡΑΦΗ",
επιτυχίας: λειτουργία () {
/ / Ναι, άλλη καθυστέρηση να επιτρέψει raspi να παίξει catch up.
setTimeout (function () {loadItems ()}, 500)?
}
})?
}
Η Node.js Backend JavaScript
Collapse | Copy Code exports.settings = {}?
/ / Αυτά είναι ενημερώνονται δυναμικά από το χρόνο εκτέλεσης
/ / Settings.appname - η ταυτότητα app (φάκελο) όπου είναι εγκατεστημένη η εφαρμογή σας
/ / Settings.viewpath - πρόθεμα όπου προβολή html αρχεία σας βρίσκονται
/ / Settings.staticurl - διαδρομή βάσης url σε στατικά στοιχεία ενεργητικού / static / apps / appname
/ / Settings.appurl - βάσης url διαδρομή προς αυτό το app / app / appname
/ / Settings.device_name - όνομα που δίνεται σε αυτόν τον κωδικοποιητή από το χρήστη, Ιβ "Coder Μπίλι".
/ / Settings.coder_owner - το όνομα του χρήστη, Ιβ. "Suzie Q."
/ / Settings.coder_color - χρώμα css εξάγωνο δοθεί σε αυτό το κωδικοποιητή.
Η ενότητα Ρυθμίσεις ήταν ήδη στη θέση του και δεν υπήρξαν αλλαγές για αυτό το demo.
Οι δύο επόμενες ενότητες ορίζουν τα «GET» και «POST» χειριστές διαδρομή.
Collapse | Copy Code exports.get_routes = [
{Διαδρομή: '/', χειριστής: «index_handler '},
{Διαδρομή: '/ getItems », χειριστής:« getItems'},
{Διαδρομή: '/ DeleteItem », χειριστής:« DeleteItem'},
]?
exports.post_routes = [
{Διαδρομή: '/ ΔΙΑΓΡΑΦΗ », χειριστής:« deleteAllItems'},
{Διαδρομή: '/ AddItem », χειριστής:« AddItem'},
]?
Η επόμενη μέθοδος είναι ο χειριστής προεπιλεγμένη σελίδα ευρετηρίου. Δεν έχω κάνει αλλαγές σε αυτό και όπως μπορείτε να δείτε καθιστά το αρχείο προεπιλεγμένο πρότυπο δείκτη.
Collapse | Copy Code exports.index_handler = λειτουργία (req, res) {
tmplvars var = {}?
tmplvars [«static_url '] = exports.settings.staticurl?
tmplvars [«όνομα_εφαρμογής '] = exports.settings.appname?
tmplvars [«app_url '] = exports.settings.appurl?
tmplvars [«device_name '] = exports.settings.device_name?
res.render (exports.settings.viewpath + '/ index », tmplvars)?
}?
exports.on_destroy = λειτουργία () {
}?
Η on_destroy λειτουργία είναι μια άλλη μέθοδος που προ-ορίζεται, αυτό χρησιμοποιείται για να κάνει οποιαδήποτε καθαρίσει κ.λπ., εάν απαιτείται.
Ο ακόλουθος κώδικας χρησιμοποιείται για να δημιουργήσει το κατάστημα στοιχείο. Είναι μια σε συστοιχία μνήμης. Είναι προ-συμπληρωθεί με ένα νέο στοιχείο todo όταν η εφαρμογή εκτελείται για πρώτη φορά. Παρόμοια με την πλευρά του πελάτη JavaScript, υπάρχει μια λειτουργία που χρησιμοποιείται για τη δημιουργία των νέων αντικειμένων Todo για ώθηση επί της συστοιχίας.
Collapse | Copy Code στοιχεία var = []?
var newItem = νέο στοιχείο («Η πρώτη σου πράγμα που πρέπει να κάνουμε είναι να προσπαθήσουμε αυτό!", 1)?
items.push (newItem)?
σημείο λειτουργίας (περιγραφή, προτεραιότητα) {
. αυτό Description = περιγραφή?
. αυτό Προτεραιότητα = προτεραιότητα?
}
Η getItems μέθοδος καλείται από τον πελάτη και απλώς δημιουργεί ένα string JSON του πίνακα αντικειμένων. Η addItem αναλύει τα δεδομένα φόρμας από τη θέση του, δημιουργεί το νέο στοιχείο και το ωθεί επί της σειράς. Η deleteItem ξεχωρίζει το δείκτη του στοιχείου προς διαγραφή από τη συμβολοσειρά ερωτήματος (θυμηθείτε είμαστε χρησιμοποιώντας ένα ευρετήριο σε κάθε πλευρά, έτσι ώστε να πρέπει πάντα να ευθυγραμμιστούν, τότε αναμονών τον πίνακα για να διαγράψετε το στοιχείο. Τέλος, οι deleteAllItems κάνει ό, τι λέει η κασσίτερο και απλώς δημιουργεί ένα νέο κενό πίνακα για να αντικαταστήσει όλα τα υπάρχοντα στοιχεία.
Collapse | Copy Code exports.getItems = λειτουργία (req, res) {
res.writeHead (200, {"Content-Type": "application / json"})?
res.write (
JSON.stringify (στοιχεία)
)?
res.end ()?
}?
exports.addItem = λειτουργία (req, res) {
var newItem = νέο στοιχείο (req.param («περιγραφή»), req.param («προτεραιότητας»))?
items.push (newItem)?
res.writeHead (200, {"Content-Type": "application / κείμενο"})?
res.write ("Στοιχείο πρόσθεσε.")?
res.end ()?
}?
exports.deleteItem = λειτουργία (req, res) {
/ / Διαγραφή ένα μόνο στοιχείο που αναφέρεται από το κλειδί ευρετήριο πίνακα
id = var req.param ('id')?
items.splice (id, 1)?
res.redirect ("/ app / daves_todo /")?
res.end ()?
}?
exports.deleteAllItems = λειτουργία (req, res) {
/ / Κατάργηση όλων των στοιχείων
στοιχεία = []?
res.writeHead (200, {"Content-Type": "application / κείμενο"})?
res.write ("διαγράφονται αντικείμενα.")?
res.end ()?
}?
Be-επίγνωση – Πολλά των απαιτούμενων βελτιώσεων!
Υπάρχει μια ολόκληρη σειρά από κακές πρακτικές σε αυτό το demo. Υπάρχουν πράγματα όπως πλαστογραφία, η αναπαραγωγή, έγχυση, κλπ. όλους τους παρόντες που δεν θα θέλουν να έχουν στον κώδικα παραγωγής.
Άλλα πράγματα που προφανώς θα πρέπει να εξεταστούν είναι τα πράγματα όπως επίμονη αποθήκευση σε μια βάση δεδομένων. Αυτόματοι μηχανισμοί για την ενημέρωση του UI στις αλλαγές της αποθήκευσης δεδομένων, αφαίρεση της συστοιχίας πλευρά του πελάτη κλπ.
Συμπεράσματα
Υπάρχουν ένα σωρό έγγραφα που λείπουν. Προσπαθώντας να καταλάβω τι πραγματικά είναι παρούσα, τι βιβλιοθήκες έχουν ήδη φορτωθεί από προεπιλογή, πώς το όλο περιβάλλον πολλαπλών app μέσα Coder είχε κάνει το πράγμα του κλπ.
Προσπαθώντας να πάρει το κεφάλι μου γύρω από Node.js για πρώτη φορά, δεν ήταν εύκολο. Λοιπόν, δεν είναι σε αυτό το περιορισμένο περιβάλλον ούτως ή άλλως. Είχα αρχίσει να δούμε ίσως ωθεί τα μηνύματα της κονσόλας server κλπ. πίσω στον πελάτη, τότε τα πράγματα θα μπορούσαν να έχουν γίνει πιο εύκολο, αλλά αυτό ήταν ένα είδος νίκησε το «έξω από το κουτί» εμπειρία που παρουσιάζονται.
Ως βασικό να πας με την HTML και την πλευρά του πελάτη πράγματα ναι, θα μπορούσε να είναι επαρκής. Ωστόσο, θα ήθελα να πω ότι βρήκα το Raspberry Pi έτειναν να πεθαίνουν σε ορισμένες περιπτώσεις, χρειάζεται μια επανεκκίνηση για να ανακάμψει. Το παράθυρο τερματικού κ.λπ. θα παραμείνει ευέλικτη, αλλά και το περιβάλλον Coder μέσω του browser ήταν απλά μια μη-go. Το παλιό «σώσει πολλές φορές« μάντρα δεν ισχύει εδώ.
Δεν υπάρχει καμία αμφιβολία ότι αυτή έχει τη δυνατότητα, ελπίζω η ομάδα ανάπτυξης μαρσάρω το περιβάλλον θα γίνει πιο στρογγυλεμένη εμπειρία.
Me την άλλη πλευρά, νομίζω ότι είμαι σπάσει προς το παρόν, πέρασα ημέρες προσπαθώντας να αναλύσει μια θέση jQuery JSON να κόμβου, αλλά στο τέλος έδωσε και επανήλθε στις παραδοσιακές θέσεις συμβολοσειράς ερωτήματος.
Το μέλλον;
Ίσως θα πάρει γύρω από την εξέταση στην ενσωμάτωση MongoDB με αυτό, ίσως θα εξετάσει κόμβου με περισσότερες λεπτομέρειες, ίσως το μόνο που χρειάζεται έναν ύπνο …
Ας ελπίσουμε ότι περισσότερα άρθρα θα αρχίσουν να εμφανίζονται ως οι πιο ικανοί χρήστες RasPi και εμπειρογνώμονες κόμβου ρίξει μέσα στο μίγμα εμπειρίας τους. Έτσι, εάν έχετε ένα RasPi πάει και να κατεβάσετε Coder, το πάρετε για ένα γύρισμα και να δούμε τι θα κάνει από αυτό!
Πάνω από όλα όμως, να διασκεδάσουν και απλά συνεχίστε!
Αναφορές
CSS Αναφορές
Για να πάρει την παρενόχληση από χειροτεχνίας μερικά από τα CSS για τη σελίδα, έκανα χρήση παραδειγμάτων και γεννήτριες είναι ήδη διαθέσιμα στο διαδίκτυο. Λαμβάνει μέρος του πόνου από τη λήψη demo!
- http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml – Φόρμα διατάξεις
- http://www.cssbuttongenerator.com/ – γεννήτρια Button
- http://www.csstablegenerator.com/ – γεννήτρια Πίνακας
Ιστορία
- 6 Δεκεμβρίου 2013 – Αφαιρέθηκε άκυρο αναφορές από το μπλοκ κώδικα ότι αυτή η ιστοσελίδα είχε προσθέσει
- 26, Σεπ, 2013 – Προστέθηκε κατεβάσετε το demo τμήμα app με το σχετικό κωδικό.
- 26, Σεπ, 2013 – Προστέθηκε η τροπολογία σχετικά με τη σύνδεση μέσω Διεύθυνση IP αντί coder.local.
- 25 του Σεπτεμβρίου 2013 – Ενημέρωση με αφήγηση αναθεωρήσεις, inline κώδικα σήμανσης.
- 24 Σεπτεμβρίου του 2013 – First Release
Άδεια
Το άρθρο αυτό, μαζί με κάθε σχετικό πηγαίο κώδικα και τα αρχεία, έχει αδειοδοτηθεί από την Άδεια Κωδικός Έργου Open (cpol)