Advanced Programming Stories

Windows task controll with php

admin — Fri, 16 Nov 2012 07:53:56 +0000

Πέρσι τέτοια εποχή, ένα φίλος που έχει γυμναστήριο μου ζήτησε να του κάνω ένα πρόγραμμα για την διαχείριση των συνδρομών του, και να το συνδέσω με smart card για να ενημερώνονται αυτόματα οι επισκέψεις των μελών του.

Εγώ “κολλημένος” με php, δεν πέρασε καν από το μυαλό μου να γίνει κάτι σε desktop, άλλα σε web που θα έπαιζε τοπικά σε browser. Έπρεπε όμως να βρω ένα τρόπο για να συνδέσω το smart card με την εφαρμογή. Η εύκολη λύση αφού θα έπαιζε σε windows ήταν να χρησιμοποιήσω shell exec και να τρέχω το exe αρχείο που είχε ο driver για να διαβάζει την κάρτα.

Έκανα λοιπόν ένα php αρχείο πού έτρεχε με while(true) και sleep 3 δευτερόλεπτα και έλεγχε συνέχεια το smart card reader αν μπήκε ή βγήκε η κάρτα. Το αποτελέσμα το έγραφε σε ένα αρχείο, όπου η web εφαρμογή με ajax έβλεπε αυτό το αρχείο και ανάλογα έδειχνε ότι η κάρτα είναι κενή ή άνοιγε απ’ ευθείας την καρτέλα του μέλους και περνούσε αυτόματα την επίσκεψη.

Μέχρι εδώ όλα καλά, πως όμως θα ξεκινούσε αυτό το script; Θα το έβαζα στο άνοιγμα του υπολογιστή; Δεν μου άρεσε καθόλου αυτή η ιδέα. Θα προτιμούσα να ξεκινάει μόλις ο χρήστης κάνει login στην εφαρμογή και να σταματάει όταν κάνει logout. Αγούγετε καλύτερά…

Για να το πετύχω αυτό χρησιμοποίησα την com php class με WScript.Shell και Run. Για να ελέγχω όμως αν παίζει ήδη το script και να το σταματάω χρησιμοποίησα πάλι την shell_exec σε συνδυασμό με την tasklist και taskkill. Παρακάτω μπορείτε να δείτε τον κώδικα αναλυτικά:

define ('IS_WIN',(PHP_OS=='WINNT' || PHP_OS=='WIN32' || PHP_OS=='Windows') ? true : false);

function smartcard_running() {
    if (IS_WIN) {
        $ar=explode("\n",shell_exec('tasklist /FI "imagename eq php.exe"'));
        foreach($ar as $v) {
            while (strstr($v,"  ")) $v=str_replace("  "," ",$v);
            $v=explode(" ",$v);
            if ($v[0]=='php.exe') {
                return true;
            }
        }
    }
    return false;
}

function smartcard_start() {
    if (IS_WIN) {
        $WshShell = new COM('WScript.Shell');
        $cmd="C:\\wamp\\bin\\php\\php5.3.5\\php.exe ".dirname(__FILE__)."\\smartcard_server.php";
        $WshShell->Run($cmd, 1, false);
    }
}

function smartcard_stop() {
    if (IS_WIN) {
        $ar=explode("\n",shell_exec('tasklist /FI "imagename eq php.exe"'));
        foreach($ar as $v) {
            while (strstr($v,"  ")) $v=str_replace("  "," ",$v);
            $v=explode(" ",$v);
            if ($v[0]=='php.exe') {
                shell_exec('taskkill /pid '.$v[1].' /F');
            }
        }
    }
}

Firefox work offline vs wireless usb

admin — Sun, 29 Apr 2012 21:40:24 +0000

Πριν λίγες μέρες κάποιος πάνω σε μια κουβέντα που είχαμε μου είπε το εξής:

“Έχω βάλει στο κατάστημα μου ένα pc με windows (εδώ χαλάστηκα λίγο άλλα δεν γ…..) που συνδέεται στο Internet με wireless usb, ξεκινάει με ένα Firefox σε fullscreen mode και δείχνει κάποιες πληροφορίες από μια σελίδα. Ένα πρόβλημα που έχω είναι ότι όταν ξεκινάει ο υπολογιστής μέχρι να συνδεθεί το usb έχει μια καθυστέρηση, και ο Firefox δεν βλέπει την σελίδα βγάζει error page, και μπαίνει σε κατάσταση work offline. Όταν τελικά πραγματοποιηθεί η σύνδεση, πρέπει να πατήσω refresh και στην συνεχεία να απενεργοποιήσω το work online, χακεράς έγινα για να τα βρω αυτά, για να εμφανιστεί η σελίδα. Υπάρχει ένα ακόμα πρόβλημα ότι ο χρήστης μπορεί να πάρει έλεγχο, απενεργοποιώντας το fullscreen πολύ εύκολα, και να μπει σε άλλη σελίδα. Έτσι χάνετε η υπηρεσία που προσφέρω, εκτός και αν ελέγχω όλη την ώρα τι γίνεται στον υπολογιστή.”

Σε κάτι τέτοια προβλήματα, μου αρέσει να βρίσκω λύσεις…

Ξεκινώντας από ένα search στο google, βρήκα το r-kiosk ένα plugin που βάζει τον Firefox μόνιμα σε fullscreen και δεν επιτρέπει τον χρήστη να βγει, πάρα μόνο να κλείσει τον browser. Ένας νέος user στον υπολογιστή με ελάχιστα δικαιώματα και shell το Firefox, είναι ότι πρέπει για να γίνει το pc interactive kiosk.

Τι γίνεται όμως με το πρόβλημα του wireless usb σε σχέση με το work offline και την πρόσβαση σε άλλες σελίδες; Εκεί λύση δεν βρέθηκε, και έτσι αποφάσισα να γράψω ένα Firefox extension που θα κάνει τα παραπάνω.

Για τον έλεγχο αν υπάρχει σύνδεση στο Internet χρησιμοποίησα ένα request προς την σελίδα, ανά δευτερόλεπτο μέχρι να είναι επιτυχής το request.

CheckConnection : function () {
    var d=new Date();
    var req = new XMLHttpRequest();
    req.mozBackgroundRequest = true;
    req.open("GET",lockurlApp.Url,false);
    try {
        req.send(null);
        if (req.status == 200) {
            openUILinkIn( lockurlApp.Url, 'current' );
            return;
        }
    }
    catch(err) {}
    setTimeout('lockurlApp.CheckConnection()',1000);
},

Όταν όμως γίνει request και δεν υπάρχει σύνδεση Internet, ο Firefox μπαίνει σε work offline με αποτέλεσμα να μην καταλαβαίνει πότε έχει έρθει η σύνδεση. Έψαξα λοιπόν για το πως θα απενεργοποιήσω το work offline, άλλα όποια λύση και να βρήκα, δεν έπαιζε. Το μόνο που βρήκα ήταν ένα plugin που έβγαζε ένα button για να αλλάζεις την κατάσταση του work offline. Με λίγο reverse στο plugin, και η λύση, ήταν μπροστά μου.

var ioService = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService2);
if (ioService.offline) BrowserOffline.toggleOfflineStatus();

Τώρα έπρεπε να επιτρέψω την πρόσβαση μόνο στην συγκεκριμένη σελίδα. Βρήκα από το manual του mozilla developer network το event όταν αλλάζει το location στο address bar, πολύ απλό τελικά, ένας έλεγχος στο uri και είμαστε έτοιμοι.

onLocationChange: function(aProgress, aRequest, aURI) {

    if ( /www\.allow1\.com\/*/.test(aURI.spec) ) {
        return;
    }
    if ( /www\.allow2\.com\/*/.test(aURI.spec) ) {
        return;
    }
    //redirect if not allowed
    openUILinkIn( 'www.allow1.com', 'current' );
}

Οποίος θέλει να χρησιμοποιήσει το plugin ή μέρος του κώδικα, μπορεί να τον κατεβάσει από εδώ. (Μια αναφορά βέβαια δεν θα με χάλαγε καθόλου)

Asynchronous multiple file upload με το swfupload

admin — Mon, 31 Oct 2011 10:24:06 +0000

Μέχρι σήμερα έχω δοκιμάσει πολλούς τρόπους για ajax file upload και με κανένα δεν ήμουν ποτέ ευχαριστημένος. Ένας από αυτούς τους τρόπους που δοκίμασα, χρειάστηκε ακόμα και η εγκατάσταση του php extension uploadprogress. Σε συνδιασμό με css replace στο input file controll είχα ένα ικανοποιητικό αποτέλεσμα για asynchronous file upload. Τελικά κατέληξα να δουλεύω με το uplodify ένα jquery plugin χωρίς να μου αρέσει πολύ.

Τον τελευταίο καιρό ασχολήθηκα ξανά με το θέμα και βρήκα ένα πολύ ενδιαφέρων project το swfupload, το οποίο το μόνο του μειονέκτημα είναι ότι δεν είναι jquery plugin. Δεν πειράζει όμως γιατί βρήκα plugin σε jquery που το κάνει port. To swfupload είναι πολύ κάλο γιατί έχει υποστήριξη για multiple files, filter για τύπο αρχείων (πχ *.pdf), button image replace (hover,disable,…), και πολύ καλή διαχείριση των events. Η υλοποίηση του είναι σε flash, έτσι υπάρχει πληροφορία κατά το upload ποσά bytes έχουν ανεβεί. Το σημαντικότερο που με ενθουσίασε είναι ότι μπορείς να ελέγξεις πότε θα ξεκινήσει το upload, δηλαδή διαχωρίζει το select file, από το upload file event.

Όλα τα υπόλοιπα που έχω δοκιμάσει, μόλις επιλέξεις ένα αρχείο, ανεβαίνει κατευθείαν στον server, με αποτέλεσμα να πρέπει να αποθήκευσεις το αρχείο κάπου temporarily ώστε μετά την ολοκλήρωση της φόρμας να μπορείς να το χρησιμοποιήσεις. Αυτό χρειάζεται μέθοδο για file garbage collection σε περίπτωση που δεν ολοκληρωθεί η αποστολή της φόρμας για να σβήνει τα άχρηστα αρχεία.

Σε συνδυασμό με το jQuery progress bar το swfupload γίνεται το απόλυτο tool για upload files. Ας το δούμε λίγο στην πράξη. Θα φτιάξουμε μια φόρμα, με ένα πεδίο, και με επιλογή για 4 text αρχεία (.txt).






Upload files













EMAIL


Files (max 4):

Στο παραπάνω παράδειγμα χρειάζεται στο php.ini η μεταβλητή session.auto_start off γιατί στην συνέχεια θα χρειαστούμε να περάσουμε στο upload script το session_id, ώστε να έχουμε μια σύνδεση του αποθηκευμένου αρχείου με το submit form script. Η σελίδα μας φορτώνει όλα τα απαραίτητα javascript libs καθώς και το main.js, όπου εκεί βρίσκετε ο κύριος κώδικας. Η φόρμα μας έχει το “custom-queue” div, οπού εκεί θα υποδεχθεί τα επιλεγμένα αρχεία, το “btn_file” button όπου εκεί θα φορτωθεί ο κώδικας του swfupload, και 2 hidden div όπου το 1ο έχει το progress bar για το upload των αρχείων και το 2o έχει ένα ajax loader image το οποίο θα εμφανιστεί κατά την αποστολή της φόρμας.

Αυτό είναι ένα απλό upload script που η μόνη του ιδιαιτερότητα είναι ότι χρησιμοποιεί την μεταβλητή $_GET[‘SID’] για να ξεκινήσει το ίδιο session και για να αποθυκεύσει το αρχείο σε folder ώστε στην συνέχεια να είναι προσπελάσιμο από το submit form script. Στο παράδειγμά μας κάνει create ένα folder με όνομα το $_GET[‘SID’], και εκεί μέσα βάζει τα αρχεία από το upload. Όσα αρχεία επιλέγουμε τότε φορές θα εκτελεστεί το upload script. Στο τέλος τυπώνουμε το filezize, ώστε αν κάτι έχει γίνει λάθος το filesize θα είναι 0 και το swfupload θα προκαλέσει error event. Περισσότερα σχετικά με το error handling μπορείτε να δείτε στο manual του swfupload.

true);

// TODO:

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
echo json_encode($ret);
?>

Το submit post form είναι ένα απλό ajax script όπου μπορεί να γυρίσει μεταβλητές σε json, όπως success κτλ. Εδώ χρειάζεται κάποιος επιπλέον κώδικας για να σβήνει τα αρχεία αν δεν ολοκληρωθεί η διαδικασία (είχα αναφέρει παραπάνω για file garbage collection), εδώ όμως όπως βλέπετε είναι ποιο απλή η διαδικασία. Τα αρχεία τώρα μπορούμε να τα βρούμε πολύ εύκολα γιατί όπως είπαμε και παραπάνω τα έχουμε αποθυκεύσει με βάση το session_id.

$(document).ready(function(){

$("#upload_form").swfupload({

upload_url : "upload?SID="+SID,
flash_url : "swfupload.swf",

file_size_limit : "10 MB",
file_upload_limit : "0",
file_queue_limit: "4",
file_types: "*.txt",
file_types_description: "Text files",

button_image_url : "img/upload.png",
button_width : 88,
button_height : 22,
button_placeholder : $("#btn_file")[0],
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT

})
.bind("fileQueued", function(event, file){
$("#custom-queue").append(''+file.name+' (x)');
})
.bind('uploadComplete', function(event, file){
// upload has completed, lets try the next one in the queue
$("#file_"+file.id).removeClass('file-progress').addClass('file-done');
if ($('.file-queue').length==$('.file-done').length) {
$("#bar_file").hide();
$("#ajax_loader").show();

$.ajax({
type: "POST",
url: "submit.php",
data: $("#form").serialize(),
dataType: "json",
success: function(data) {
$("#ajax_loader").fadeOut();
$("#bar_file").html('Submit completed').fadeIn();
}
});
}
else {
$(this).swfupload('startUpload');
}
})
.bind("uploadStart", function(event, file){
$("#file_"+file.id).addClass('file-progress');
$("#bar_file").progressBar(0);
})
.bind("uploadProgress", function(event, file, bytesLoaded, bytesTotal){
var percentage = Math.floor(100 * parseInt(bytesLoaded) / parseInt(bytesTotal));
$("#bar_file").progressBar(percentage);
})
.bind("uploadError", function(event, file, errorCode, message){
if (errorCode === SWFUpload.UPLOAD_ERROR.FILE_CANCELLED) {
$("#file_"+file.id).fadeOut('normal',function() { $("#file_"+file.id).remove(); });
}
});

$("#bar_file").progressBar({
boxImage : 'img/progressbar.gif',
barImage : 'img/progressbg_orange.gif'
});

$("#form").submit(function() {
if ($('.file-queue').length==0) {
alert('You must select a file!');
}
else {
$("#bar_file").show();
$("#submit_btn").hide();
$("#SWFUpload_0").width(0);
$("#upload_form").swfupload('startUpload');
}
return false;
});
});

function removeFile(id) {
$("#upload_form").swfupload('cancelUpload',id,true);
return false;
}

Και πάμε στο σημαντικότερο μέρος του project που είναι javascript. Εδώ έχουμε όλα τα bind events για το swfupload, από το load, το select files μέχρι και το submit της φόρμας. Ας τα πάρουμε από την αρχή για να τα δούμε αναλυτικά.

$("#upload_form").swfupload({

upload_url : "upload?SID="+SID,
flash_url : "swfupload.swf",

file_size_limit : "10 MB",
file_upload_limit : "0",
file_queue_limit: "4",
file_types: "*.txt",
file_types_description: "Text files",

button_image_url : "img/upload.png",
button_width : 88,
button_height : 22,
button_placeholder : $("#btn_file")[0],
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT

})

Εδώ φορτώνουμε το swfupload βάζοντας το url από το upload.php (περνάμε και το SID που το έχουμε βάλει σε μια javascript μεταβλητή και περιέχει το session_id, το url που βρίσκεται το swfupload.swf, το μέχρι πόσα αρχεία θέλουμε, τι μέγεθος να έχει το καθένα, και τι τύπο (πχ μπορούμε να βάλουμε “*.pdf,*.odt”). Τέλος το image αρχείο, με το μέγεθος του και σε ποιο element να γίνει bind.

.bind("fileQueued", function(event, file){
$("#custom-queue").append(''+file.name+' (x)');
})

Και κάπου εδώ αρχίζουν τα events, 1ο event το “fileQueued”, το οποίο εκτελείτε κατά την επιλογή αρχείων. Όσα αρχεία επιλεγούν τόσες φορές θα εκτελεστεί. Εδώ το μόνο που θέλουμε να κάνουμε είναι να εμφανίσουμε τα επιλεγμένα αρχεία, στο div “custom-queue”. Τέλος βάζουμε και ένα (x) για αφαίρεσή αρχείου από την λίστα. Για την αφαίρεσή χρειαζόμαστε το file.id. Στο file.name έχουμε το όνομα του αρχείου.

.bind("uploadStart", function(event, file){
$("#file_"+file.id).addClass('file-progress');
$("#bar_file").progressBar(0);
})
.bind("uploadProgress", function(event, file, bytesLoaded, bytesTotal){
var percentage = Math.floor(100 * parseInt(bytesLoaded) / parseInt(bytesTotal));
$("#bar_file").progressBar(percentage);
})
.bind("uploadError", function(event, file, errorCode, message){
if (errorCode === SWFUpload.UPLOAD_ERROR.FILE_CANCELLED) {
$("#file_"+file.id).fadeOut('normal',function() { $("#file_"+file.id).remove(); });
}
});

Τα επόμενα 3 event έχουν να κάνουν με το upload. Στο “uploadStart” αλάζουμε το class στο αρχείο που είναι να ανέβει ώστε να φαίνεται ποιο είναι, και μηδενίζουμε το progress bar. Και αυτό το event εκτελείτε τόσες φορές όσα τα αρχεία που έχουμε επιλέξει. To “uploadProgress” μας δείχνει το progress του upload. Τέλος το “uploadError” εκτελείτε σε περίπτωση σφάλματος. Εδώ το χρησιμοποιούμε και για την αφαίρεση ενός αρχείου από την λίστα.

.bind('uploadComplete', function(event, file){
// upload has completed, lets try the next one in the queue
$("#file_"+file.id).removeClass('file-progress').addClass('file-done');
if ($('.file-queue').length==$('.file-done').length) {
$("#bar_file").hide();
$("#ajax_loader").show();

$.ajax({
type: "POST",
url: "submit.php",
data: $("#form").serialize(),
dataType: "json",
success: function(data) {
$("#ajax_loader").fadeOut();
$("#bar_file").html('Submit completed').fadeIn();
}
});
}
else {
$(this).swfupload('startUpload');
}
})

Το “uploadComplete” είναι το event που εκτελείτε μετά την ολοκλήρωση του upload κάθε αρχείου. Εδώ ελέγχουμε και αν έχει άλλο δίνουμε εντολή για το επόμενο, κ.ο.κ. Αν δεν έχει άλλο κάνουμε submit την φόρμα μας. Για τον έλεγχο αν υπάρχει άλλο αρχείο στην λίστα, χρησιμοποιούμε την class “file-done” την οποία την προσθέτουμε στο div “file-queue” μετά το τέλος του upload. Οπότε με ένα απλό έλεγχο στο length του “file-queue” και του “file-done”, αν είναι ίσα δηλαδή, δεν έχουμε άλλα αρχεία.

$("#form").submit(function() {
if ($('.file-queue').length==0) {
alert('You must select a file!');
}
else {
$("#bar_file").show();
$("#submit_btn").hide();
$("#SWFUpload_0").width(0);
$("#upload_form").swfupload('startUpload');
}
return false;
});

Τέλος αλλάζουμε το submit event της φόρμας ώστε να γίνεται πρώτα το upload. Δίνουμε στο swfupload object width 0, για να εξαφανιστεί το κουμπί upload, κάνουμε hide το submit button, εμφανίζουμε το progress bar και ξεκινάμε το 1o upload, δίνοντάς εντολή στο flash.

Αυτό ήταν ένα απλό παράδειγμα σε σχέση με τις δυνατότητες που παρέχει το swfupload, το οποίο σε συνδυασμό και με άλλα jquery plugins, το αποτέλεσμα μπορεί να είναι καλύτερο.

Όλος ο παραπάνω κώδικας βρίσκεται εδώ και μπορείτε να το κατεβάσατε ελεύθερα.

Reverse WordPress admin module

admin — Mon, 14 Feb 2011 00:59:51 +0000

Αυτό που με εξιτάρει περισσότερο στο τομέα του development είναι όταν έχω ένα πρόβλημα και η λύση είναι στο reverse

Ας υποθέσουμε ότι χρειαζόμαστε να συνδέσουμε μια υπάρχουσα εφαρμογή με το wordpress χωρίς όμως να ξαναφτιάξουμε την εφαρμογή χρησιμοποιώντας τις βιβλιοθήκες του. Χρειαζόμαστε ένα plugin που να εμφανίζει ένα iframe με την εφαρμογή μας. Πολύ εύκολο για κάποιον που έχει ασχοληθεί με plugins στο wordpress. Το δύσκολο είναι πως θα καταλάβει η εφαρμογή, ότι ο χρήστης είναι συνδεμένος, ώστε να μην μπορεί κάποιος να την χρησιμοποιήσει χωρίς login.

Και κάπου εδώ ξεκινάει το reverse. Στα php application (open source), σε αντίθεση με τα executable application το reverse είναι πολύ απλή υπόθεση, γιατί το μόνο που χρειάζεται είναι υπομονή και πολλά echo ή file_put_contents.

Ξεκινώντας από την index.php στο wp-admin έχουμε ένα include στην admin.php όπου στην συνέχεια έχει μια κλήση στην function auth_redirect που βρίσκεται στην wp-includes/ pluggable.php. Στην function auth_redirect έχει μια κλήση στην wp_validate_auth_cookie όπου εκεί βρίσκεται ο έλεγχος για την εγκυρότητα του logged in. Ο έλεγχος βασίζεται σε ένα cookie όπου περιέχει 3 στοιχεία, το username το expires, και τέλος ένα hash value. Με κάποιο αλγόριθμο χρησιμοποιώντας το username κάποια salt και keys, και το encrypted password που έχει o user αποθηκευμένο στην db (mysql), παράγεται ένα hash value το οποίο στην συνέχεια συγκρίνεται με το hast value από το cookie.

Άρα χρειαζόμαστε 2 τιμές για να μπορέσουμε να κάνουμε την σύγκριση και στον δικό μας κώδικα. Η μία είναι το cookie και η δεύτερη η πρόσβαση στην db για να διαβάσουμε το encrypted password. Το cookie μπορούμε να το περάσουμε σαν argument στο iframe και το password μπορούμε να το διαβάσουμε αν γνωρίζουμε τα login/pass της mysql (connection string) και το username του χρήστη.

Φτιάχνουμε λοιπόν ένα plugin που το μόνο που έχει, είναι την εμφάνιση του iframe στην επιλογή ενός item menu.

Αν δούμε καλύτερα στο src του iframe περνάμε 2 μεταβλητές και όχι μόνο το cookie άλλα το AUTH_KEY και το AUTH_SALT όπου τα χρησιμοποιεί ο αλγόριθμος για την παραγωγή του hash value. Αυτά βρίσκονται στο wp-config.php. Για μεγαλύτερη ασφάλεια μπορούμε να τα κάνουμε copy/paste στον δικό μας αλγόριθμο χωρίς να τα περνάμε στο url.

Τώρα δεν μένει παρά να αντιγράψουμε τον κώδικα που παράγει το hast value, και στην συνεχεία να κάνουμε την σύγκριση.
Ο αλγόριθμος είναι βασισμένος σε 2 συνεχόμενα md5 hash values.

query('SELECT `user_pass` FROM `wp_users` WHERE `user_login`="'.addslashes($username).'" LIMIT 1');
if ($db->next()) {
	$pass_frag = substr($db->Record['user_pass'], 8, 4);
	$key = hash_hmac('md5', $username . $pass_frag . '|' . $expiration, base64_decode($_GET['auth_key']));
	$hash = hash_hmac('md5', $username . '|' . $expiration, $key);

	//$hash==$hmac
}
?>

Συνδέοντας το git με τον apache σε ubuntu server

admin — Tue, 11 May 2010 10:43:20 +0000

Καθώς μεγαλώνει η ομάδα του social whale, και ταυτόχρονα οι απαιτήσεις (βλ. διαγωνισμός vodafone), αρχίζει η ανάγκη για version control system. Έτσι αποφασίσαμε να πειραματιστούμε με το git σε έναν Ubuntu server.

Έτσι, ξεκινώντας από το 0 και με σύμμαχο το google, αρχίσαμε τα tests. Όποιο tutorial και να βρίσκαμε δεν είχε ακριβώς αυτό που θέλαμε να πετύχουμε. Πιο συγκεκριμένα θέλαμε, όταν κάνει μια αλλαγή κάποιος developer/designer και την ανεβάζει στο repository, αυτόματα να μπορεί να βλέπει την αλλαγή σε ένα dev url. Η λύση που σκεφτήκαμε ήταν να φτιάξουμε ένα client που έκανε αυτόματα sync από το repository και ταυτόχρονα να είναι το virtual host που βλέπει ο apache. Αυτό το πετύχαμε με ένα hook στο repository, ώστε σε κάθε update που δέχεται να κάνει sync τον client του apache. Ας το δούμε στην πράξη:

1. Εγκατάσταση του git στον server (ip: 192.168.0.2)
user@ubuntu_server: sudo apt-get install git-core

2. Δημιουργία ενός git share repository στον server
user@ubuntu_server: sudo mkdir /myapp.git user@ubuntu_server: sudo chown user:group /myapp.git user@ubuntu_server: cd /myapp.git user@ubuntu_server: git --bare init

3. Δημιουργία ενός κλώνου του repository για την σύνδεση με τον apache
user@ubuntu_server: cd /var/www user@ubuntu_server: git clone /myapp.git

Σε μερικές εκδόσεις του git (πχ. 1.4, 1.5) δεν επιτρέπει το clone σε empty repository οπότε πρέπει να δημιουργήσουμε ένα empty και απλά να το συνδέσουμε με το master repository.
user@ubuntu_server: cd /var/www user@ubuntu_server: mkdir myapp user@ubuntu_server: cd myapp user@ubuntu_server: git init user@ubuntu_server: git remote add origin /myapp.git user@ubuntu_server: git config branch.master.remote origin user@ubuntu_server: git config branch.master.merge refs/heads/master

4. Σύνδεση του VirtualHost με το clone folder στο DocumentRoot
user@ubuntu_server: sudo vi /etc/apache2/site-enabled/myapp ServerName myapp.com DocumentRoot /var/www/myapp

user@ubuntu_server: cd /var/www/myapp user@ubuntu_server: echo 'MyApp (ver 1.00)' > index.html user@ubuntu_server: git add index.html user@ubuntu_server: git commit -a -m 'Add index.html' user@ubuntu_server: git push origin master

Με την git clone φτιάξαμε ένα κλώνο από το myapp git repository, με την git add προσθέσαμε ένα αρχείο, με την git commit στείλαμε την αλλαγή στο τοπικό μας repository (κάθε clone έχει και δικό του repository), και τέλος με την git push στείλαμε την αλλαγή και στο κεντρικό μας repository. Τώρα αν ανοίξουμε ένα browser και δώσουμε το url του VirtualHost θα πρέπει να εμφανιστεί το “MyApp (ver 1.00)”.

5. Στείνουμε σε ένα ubuntu desktop client το git και κατεβάζουμε (clone) το repository από τον server (desktop ip:192.168.0.3)
user@ubuntu_desktop: sudo apt-get install git-core user@ubuntu_desktop: git clone ssh://user@192.168.0.2/myapp.git

Ετσι δημιουργήθηκε ένα folder myapp που μέσα έχει την index.html

6. Αλλάζουμε την index.html και την ανεβάζουμε στο repository στο server
user@ubuntu_desktop: echo 'MyApp (ver 2.00)' > index.html user@ubuntu_desktop: git commit -a -m 'Modify index.html' user@ubuntu_desktop: git push

Τώρα αν κάνουμε refresh τον browser, θα διαπιστώσουμε ότι δεν άλλαξε τίποτα. Καλά δεν θα ήταν να μας έδειχνε αυτόματα την διορθωμένη index.html; Για να γίνει αυτό θα πρέπει να πάμε πάλι πίσω στον server και συγκεκριμένα στο clone repository που βλέπει ο apache και να δώσουμε:
user@ubuntu_server: git pull

Τώρα στο refresh θα δούμε το αλλαγμένο ver την σελίδα μας.

7. Δημιουργία script για αυτόματο sync του apache από το κεντρικό repository
To git έχει hook scripts που εκτελούνται μετά η πριν από συγκεκριμένες διαδικασίες. Αυτό που θέλουμε εδώ είναι κάνουμε hook το after post.

user@ubuntu_server: cd /myapp.git/hooks user@ubuntu_server: vi post-update #!/bin/sh cd /var/www/myapp env -i git pull

user@ubuntu_server: chmod +x post-update

Τώρα πάμε πίσω στον client να το δοκιμάσουμε, επαναλαμβάνουμε το βήμα 6 απλά αντί για ver 2.0 βάζουμε 3.0. Στο refresh, η σελίδα μας έχει αλλάξει, χωρίς να δώσουμε git pull στον server, αυτό γίνεται αυτόματα με το hook.

8. Δημιουργία script για αυτόματο push με από κάθε commit
Δεν μας έφτασε αυτό, θέλαμε να αποφύγουμε και το git push στους clients γιατί επειδή είναι με ssh και μας ζητάει password συνέχεια, και όταν υπάρχουν συνεχόμενες αλλαγές (πχ σε ένα css element) είναι πολύ χρονοβόρα διαδικασία. Σκεφτήκαμε ότι θα μπορούσαμε να βάλουμε ένα hook όπου μετά από ένα commit να γίνεται αυτόματα το push. Όλα ωραία στην θεωρία άλλα όταν πας στην πράξη αρχίζουν τα προβλήματα. Το πρόβλημα είναι κάπως πρέπει να δωσεις το password. Η λύση εδώ είναι το expect command line script.

user@ubuntu_desktop: sudo apt-get install expect user@ubuntu_desktop: cd .git/hooks user@ubuntu_desktop: vi post-commit #!/usr/bin/expect spawn git push expect "password:" send "mypass\r" interact

Δεν πρέπει να ξεχνάμε ότι πριν από ένα commit, push θα πρέπει να έχει προηγηθεί ένα pull.

9. Τελευταίo test
user@ubuntu_desktop: cd ../.. user@ubuntu_desktop: echo 'MyApp (ver 4.00)' > index.html user@ubuntu_desktop: git commit -a -m 'Modify index.html'

Τώρα αν κάνουμε refresh τον browser, βλέπουμε το ver 4.00, και το έχουμε πετύχει με μόνο μια εντολή την commit.

Νομίζω ότι ένα τέτοιο σενάριο είναι πολύ καλό για δημιουργία projects με πολλούς developers/designers και μάλιστα χωρίς να είναι στον ίδιο χώρο αν ανοίξουμε το http και το ssh στον server.

Google Maps: Markers σε ομάδες με τον MarkerClusterer

admin — Mon, 08 Mar 2010 10:48:53 +0000

Το παρών άρθρο είναι ένα guest post απο τον Αλέξη Μπρέσσα. Στο άρθρο προϋποθέτουμε ότι ο αναγνώστης γνωρίζει javascript, και θα βοηθούσε να έχει ασχοληθεί με το Google Maps API στο παρελθόν.

Το Google Maps API έδωσε τη δυνατότητα στους web developers να προσθέτουν χάρτες σε ιστοσελίδες, και να “σημαδεύουν” σημεία με markers.
Έτσι, έχει γίνει standard για πολλές κατηγορίες ιστοσελίδων, όπως μεσητικά, κατάλογοι επιχειρήσεων κ.α. ή για τη σελίδα επικοινωνίας εταιρειών.
Εάν όμως οι καταχωρήσεις μιας ιστοσελίδας αυξηθούν αρκετά, τότε τα πολλά markers μειώνουν τη χρηστικότητα ενός χάρτη, ενώ μπορεί κανείς να φτάσει και σε τραγική
κατάληξη όπως αυτή:

Προς μεγάλη ευκολία όποιου αντιμετωπίσει αυτό το πρόβλημα, έχει αναπτυχθεί ένα εργαλείο το οποίο φαίνεται να μην είναι ευρέως γνωστό: το MarkerClusterer.
To MarkerClusterer λύνει το πρόβλημα με το να φτιάχνει ομάδες από markers, όταν αυτά είναι το ένα πολύ κοντά στο άλλο. Το παραπάνω τραγικό παράδειγμα,
τώρα γίνεται πιο συμμαζεμένο, όμορφο, μέχρι και εντυπωσιακό:

Για να δούμε πώς μπορεί κανείς να χρησιμοποιήσει το MarkerClusterer:

function map_init( mapElement ) {
var greece = new GLatLng( 39.1130, 24.0313 );
var thessaloniki = new GLatLng( 40.5408, 23.0480 );

var gmap = new GMap2( mapElement );
gmap.setUIToDefault();
gmap.setCenter( greece, 7 );

// σε αυτό τον πίνακα θα προσθέσεις τα markers που θέλεις
var markers = [];

// εδώ προσθέτουμε markers σε 20 τυχαία σημεία κοντά στη Θεσσαλονίκη
for ( var i = 0; i < 20; ++i ) {
var latoffset = Math.random() - 0.5;
var lngoffset = Math.random() - 0.5;
var latlng = new GLatLng( thessaloniki.lat() + latoffset, thessaloniki.lng() + lngoffset );
var marker = new GMarker( latlng );

// προσθήκη του marker στον πίνακα
markers.push( marker );
}

// δημιουργία του clusterer και προσθήκη των markers στο χάρτη
var clusterer = new MarkerClusterer( gmap, markers );
}

Αρκεί λοιπόν τώρα κανείς να καλέσει τη συνάρτηση map_init με παράμετρο ένα

που θα χρησιμοποιηθεί
για το χάρτη. Συνήθως θα καλείται όταν φορτώσει η ιστοσελίδα. Με jquery, αν το div έχει id=”map_canvas”:

$( document ).ready( function() {
map_init( $( 'map_canvas' )[ 0 ] );
} );

Θα πρέπει επίσης να προσθέσετε το javascript αρχείο του Google Maps (με το απαραίτητο key) και του MarkerClusterer
(και βέβαια το jquery αν χρησιμοποιηθεί αυτό) στον HTML κώδικά σας: