sobota, 18 marca 2017

Mój konkursowy projekt. :)

Najwyższa pora na drugi blogowy wpis, który według regulaminu konkursu ma dotyczyć mojego projektu, jak mniemam bardziej od technicznej jego strony. ;)

Muszę szczerze przyznać, że nie taki miałem zamiar kiedy myślałem o blogu, ponieważ internet przepełniony jest różnorakimi poradnikami, artykułami dotyczącymi konkretnych technologii czy rozwiązań problemów, a ja nie uważam siebie za szczególnie uzdolnionego programistę - nie na tyle aby próbować kogoś uczyć przy szerszej publiczności. Z tego powodu mierzyłem raczej w posty dotyczące moich odczuć i perypetii na tej programistycznej drodze życia. Szczególnie biorąc pod uwagę, że dopiero na nią wstępuję i sporo przede mną rzeczy, o których aktualnie nie mam pojęcia, więc wiążą się z tym pewne emocje - strach, ciekawość, radość - wszystko pomieszane. :D

Ale do sedna, bo widzę, że budzi się we mnie jakiś poeta.. :)

Projekt jaki zgłosiłem do konkursu #DSP2017 zacząłem realizować w grudniu, kiedy to w moim technikum na lekcjach zawodowych dotyczących podstaw programowania dosłownie się nudziłem. Nie dlatego, że jestem taki super, po prostu kilka miesięcy wcześniej mocno pracowałem we własnym zakresie aby móc wstąpić w ten programistyczny świat. No więc podstawy już znałem. ;)
Trafiłem dość dobrze, bo na nauczyciela, który mimo, że zawsze zapracowany to znajduje czasem dla mnie chwile aby pogadać o sprawach związanych z kodzeniem. Pewnego dnia przyszedł na lekcję i z uśmiechem oznajmił, że "ma to!". To znaczy, wymyślił razem z innym nauczycielem projekt jakiego mógłbym się podjąć. Oczywiście ucieszyłem się, tym bardziej, że realizując go mogę komuś pomóc.

W mojej szkole jest całkiem sporo wszelakiego rodzaju sprzętów typu PeCety, laptopy, terminale, routery itd itd, a problem z nimi jest taki, że są "nieokiełznane". Czasem coś się zepsuje, czasem z niewyjaśnionych przyczyn sprzęty zmieniają swoje położenie, sale, podopiecznych. No i za Chiny potem nie wiadomo co jest co, gdzie było, a tym bardziej jaka jest historia danego sprzętu - szczególnie jest to uciążliwe, kiedy trzeba go zdiagnozować i naprawić. Moim więc zadaniem było stworzyć jakiś system, który by to wszystko ogarnął.

Początkowo system miał opierać się o kody kreskowe (bo tak pasowałoby szkole, chyba mają od tego jakiś sprzęt). Stwierdziłem jednak, że łatwiej będzie to ogarnąć wykorzystując do tego kody QR z zapisanymi linkami, dzięki którym, po zeskanowaniu od razu będzie można przenieść się do informacji o danym przedmiocie, korzystając na przykład ze smartphone'a. Wielu szczegółów nie dostałem, ale był zamysł, który bardzo mi się spodobał i ochoczo podjąłem się próbie jego realizacji.

Bardzo szybko naszła mnie jednak trochę ambitniejsza myśl... Skoro w mojej szkole jest taka potrzeba, to kto wie czy czasem komuś innemu nie przydałoby się coś podobnego w szkole, pracy czy nawet domu. Po co się ograniczać i robić coś "na sztywno"? ;)

Mam nadzieję, że tym przydługim wstępem wyjaśniłem skąd wziął się pomysł. ;)
A teraz konkretniej - Oversee Systems (nie jestem dobry w wymyślanie nazw, tektsów i ogólnie contentu..) jest z zamysłu darmowym systemem (teoretycznie Open Source, jednak nie wiem czy warto zaglądać w kod :P), dzięki któremu możemy katalogować dowolne przedmioty i przechowywać informację o nich. Przypisywać lokację, informację o uszkodzeniach czy generalnie dodawać dowolne komentarze na ich temat. Całość działa sprawnie jeśli wykorzystamy wspomniane kody QR, na przykład w formie naklejek, wtedy każda naklejka posiada własny numer ID, który po naklejeniu może być przypisany do danego przedmiotu.

Co zrobiłem, aby był on "dostępny dla każdego"? 

Oversee stworzyłem jako pustą templatkę i dodałem coś na wzór instalatora, dzięki któremu dość mocno ułatwiony jest proces implementowania systemu na własnym serwerze. Wystarczy pobrać pliki z niezależnej strony domowej (KLIK) i przerzucić je na swój serwer. Po wejściu na swoją domenę wita nas wspomniany instalator, gdzie podajemy wszelkie potrzebne dane (np dane do łączenia się z bazą MySQL, utworzenie konta administratora, nadanie nazwy i loga stronie), które normalnie musielibyśmy samemu wklepywać wewnątrz kodu. W instalatorze dodanych jest wiele wyjaśnień czym są potrzebne dane i gdzie je znaleźć, dzięki czemu serwis może być postawiony nawet przez mniej doświadczone osoby.

Na stronie głównej wita nas wyszukiwarka przedmiotów dodanych już do bazy danych. Poza tym do dyspozycji jest panel użytkownika i administratora, historia komentarzy każdego przedmiotu, dodawanie i usuwanie użytkowników (3 rodzaje uprawnień), dodawanie, usuwanie i edytowanie przedmiotów.

Jeśli ktoś jest zainteresowany oczywiście sam może zobaczyć co strona ma do zaoferowania. :)

Sam system jest teoretycznie skończony i już opublikowany, jednak trochę się śpieszyłem aby wydać pierwszą "używalną" wersję, dlatego nazwałbym to raczej opublikowaną Betą. ;) Mój pośpiech wynikał z tego iż zbliżają się matury, chciałem trochę odpocząć przed nimi, zobaczyć czy system będzie w ogóle przydatny, zamiast bez końca dodawać kolejne "ficzery".

Z pomocą przyszło jednak "Daj Się Poznać", dzięki któremu postaram się znaleźć motywację do dalszego rozwoju projektu. :)

Taaaaaak więc dochodzimy w końcu do stricte technicznej części tego wpisu! :D
Jeśli chodzi o rozwój Oversee to mam oczywiście w głowie trochę pomysłów na rzeczy jakie przydało by się dodać do systemu, na przykład filtrowanie wyszukiwań w kategoriach, dodać możliwość zmiany tła strony, czy generalnie poprawić design, którego teraz praktycznie nie ma. Poza tym jest sporo backendowych rzeczy, które przydało by się dodać lub usprawnić, jednak na samym początku zajmę się poprawieniem samego kodu, który teraz dla wielu jest pewnie typowym "Spaghetti", wynikającym z pośpiechu. :P

Moim celem na najbliższe dni będzie poprawienie czytelności, wywalając wiele rzeczy do oddzielnych plików (głównie z PHP'a), a szczególnie skupię się na JavaScripcie, który postaram się ułożyć w moduły, tym samym poćwiczyć trochę OOP i tworzenie prostych API. Jeśli będzie potrzeba, może uda mi się zrobienie jakiegoś PubSub'a. ;)

Podam przykład jak będzie to wyglądać. Zamieniam taki kod:

var menu_toggled = false;

$('#toggle_menu_btn').on('click', function(){

    if(menu_toggled == false)
    {
        menu_toggled = true;

        $('#bs-example-navbar-collapse-1').css('text-align', 'center');
        $('#nav_sign_in_btn').removeClass('pull-right').addClass('center-block');
        $('#log_out_btn').removeClass('pull-right').addClass('center-block');
        $('#lang_btns').removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
    }
    else
    {
        menu_toggled = false;

        setTimeout(function(){

            $('#bs-example-navbar-collapse-1').css('text-align', 'left');
            $('#nav_sign_in_btn').removeClass('center-block').addClass('pull-right');
            $('#log_out_btn').removeClass('center-block').addClass('pull-right');
            $('#lang_btns').removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');

        }, 250);
    }

});

//ustawienia wyświetlania elementów podczas zmiany rozmiarów okna
$(window).resize(function(){

    if($('#toggle_menu_btn').css('display') == 'none')
    {
        $('#bs-example-navbar-collapse-1').css('text-align', 'left');
        $('#nav_sign_in_btn').removeClass('center-block').addClass('pull-right');
        $('#log_out_btn').removeClass('center-block').addClass('pull-right');
        $('#lang_btns').removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');
        $('#footer_content1, #footer_content2').css('float', 'left');
        $('#change_password_inputs, #error_alert, #login_input_group, #admin_panel_content, .add_new_user_inputs').css('width', '75%');
        $('#search_input_group, #search_input_group2').css('width', '65%');
        $('#table_wrapper').css('width', '90%');
        $('h3').css('font-size', '22px');
        $('h2').css('font-size', '25px');
    }
    else
    {
        $('#bs-example-navbar-collapse-1').css('text-align', 'center');
        $('#nav_sign_in_btn').removeClass('pull-right').addClass('center-block');
        $('#log_out_btn').removeClass('pull-right').addClass('center-block');
        $('#lang_btns').removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
        $('#footer_content1, #footer_content2').css('float', 'none');
        $('#change_password_inputs, #error_alert, #login_input_group, #admin_panel_content, .add_new_user_inputs').css('width', '95%');
        $('#search_input_group, #search_input_group2').css('width', '90%');
        $('#table_wrapper').css('width', '100%');
        $('h3').css('font-size', '15px');
        $('h2').css('font-size', '20px');
    }

});

    //ustawienia wyświetlania elementów na urządzeniach mobilnych
if($('#toggle_menu_btn').css('display') == 'block')
{
    $('#footer_content1, #footer_content2').css('float', 'none');

    $('#change_password_inputs, #error_alert, #login_input_group, #admin_panel_content, .add_new_user_inputs').css('width', '95%');
    $('#search_input_group, #search_input_group2').css('width', '90%');
    $('#table_wrapper').css('width', '100%');
    $('h3').css('font-size', '15px');
    $('h2').css('font-size', '20px');
}

Na taki:

//ustawienie elementów strony w wersji mobilnej
var mobile_elements_position = (function(){

    //Flag
    var menu_toggled = false;
    
    //#### Cache DOM
    var $toggle_menu = $('#toggle_menu_btn'),
        $navbar = $('#bs-example-navbar-collapse-1'),
        $sign_in = $('#nav_sign_in_btn'),
        $logout = $('#log_out_btn'),
        $lang = $('#lang_btns'),
        $footer1 = $('#footer_content1'),
        $footer2 = $('#footer_content2'),
        $change_password = $('#change_password_inputs'),
        $error_alert = $('#error_alert'),
        $login_input = $('#login_input_group'),
        $admin_panel = $('#admin_panel_content'),
        $add_new_users = $('.add_new_user_inputs'),
        $search1 = $('#search_input_group'),
        $search2 = $('#search_input_group2'),
        $table_warpper = $('#table_wrapper'),
        $h2 = $('h2'),
        $h3 = $('h3');

    //#### Bind events and init
    _positionElements();
    $toggle_menu.on('click', _positionButtons);
    $(window).resize(_positionElements);
    
    //#### Functions
    
    //ustawienie przycisków w navbar menu
    function _positionButtons(){
        
        if(menu_toggled == false)
        {
            menu_toggled = true;

            $navbar.css('text-align', 'center');
            $sign_in.add($logout).removeClass('pull-right').addClass('center-block');
            $lang.removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
        }
        else
        {
            menu_toggled = false;

            setTimeout(function(){

                $navbar.css('text-align', 'left');
                $sign_in.add($logout).removeClass('center-block').addClass('pull-right');
                $lang.removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');

            }, 250);
        }

    }
    
    //ustawienie elementów dla strony mobilnej
    function _positionElements(){
        
        if($toggle_menu.css('display') == 'none')
        {
            $navbar.css('text-align', 'left');
            $sign_in.add($logout).removeClass('center-block').addClass('pull-right');
            $lang.removeClass('lang_btns_mobile').addClass('pull-right').addClass('btn-group-xs').addClass('lang_btns');
            $footer1.add($footer2).css('float', 'left');
            $change_password.add($error_alert).add($login_input).add($admin_panel).add($add_new_users).css('width', '75%');
            $search1.add($search2).css('width', '65%');
            $table_warpper.css('width', '90%');
            $h3.css('font-size', '19px');
            $h2.css('font-size', '24px');
        }
        else
        {
            $navbar.css('text-align', 'center');
            $sign_in.add($logout).removeClass('pull-right').addClass('center-block');
            $lang.removeClass('pull-right').removeClass('btn-group-xs').removeClass('lang_btns').addClass('lang_btns_mobile');
            $footer1.add($footer2).css('float', 'none');
            $change_password.add($error_alert).add($login_input).add($admin_panel).add($add_new_users).css('width', '95%');
            $search1.add($search2).css('width', '90%');
            $table_warpper.css('width', '100%');
            $h3.css('font-size', '15px');
            $h2.css('font-size', '20px');
        }
        
    }

})();

Teoretycznie niewiele się zmieniło, nawet jest trochę dłuższy ale jednak jakoś tak ładniej i porządniej. :) Oczywiście nie uważam, że jest to rozwiązanie szczególnie dobre, ja wciąż się uczę, ale chociażby "keszowanie" slektorów powinno trochę usprawnić działanie strony a sam kod wydaje się być troszkę czytelniejszy. ;)

No więc to by było na tyle jeśli chodzi o mój aktualny rozwój projektu, chcę doprowadzić go do ładniejszego stanu, porozdzielać wiele rzeczy na mniejsze "moduły", poprawić trochę semantykę (np wywalić CSS z HTMLa), być może użyję gdzieś szablonów z Mustache.js. Dopiero gdy stwierdzę, że kod wygląda i być może działa lepiej, wezmę się za bardziej widoczny rozwój w postaci dodawania nowych elementów do systemu. :)

Tymczasem, zachęcam do sprawdzenia mojego projektu "na własnej skórze", komentowania i dzielenia się opiniami.

Pozdrawiam! :)

Brak komentarzy:

Prześlij komentarz