Środowisko web developera na Maku

Marek Wojtaszek

10

Dodane: 14 lat temu

Artykuł pochodzi z MJ 3/2010

W numerze dotyczącym tworzenia stron internetowych nie mogło zabraknąć artykułu, który krok po kroku wyjaśni, jak od podstaw stworzyć środowisko produkcyjne dla web developera na Maku. Ktoś mógłby krzyknąć “Hola hola, przecież Mac OS X trafia w nasze ręce z wbudowanym serwerem webowym, a kod można pisać w TextEdit. Po co więc dodatkowo kombinować z jakimś środowiskiem?”. Owszem, można wykorzystać oprogramowanie dostarczone z systemem, co nie znaczy, że jest to najwygodniejsze i efektywne rozwiązanie. W tym artykule postaram się zatem przedstawić, jak skompletować wszystkie elementy, które złożą się na nasz poligon doświadczalny podczas twórczych batalii z kodem.

Na wstępie chciałbym zaznaczyć, że podany przeze mnie zestaw oprogramowania jest jedynie propozycją, która uważam powinna się dobrze sprawdzić u większości użytkowników rozpoczynających przygodę z tworzeniem własnych stron internetowych. Zawsze, gdy dochodzi do wyboru konkretnego rozwiązania software’owego pojawią się zwolennicy różnych opcji twierdzący, że tylko i wyłącznie wybór “tego jedynego” programu pozwala na profesjonalne tworzenie cyfrowych treści. Dyskusja o “tym jedynym” właściwym programie przypomina rozważania na temat wyższości Świąt Wielkanocnych, nad Świętami Bożego narodzenia. Aby zadowolić “obie strony barykady” na końcu artykułu powiem kilka słów na temat alternatywnych programów służących do tworzenia stron wwww.

Aby móc zająć się tworzeniem stron internetowych wykraczających poza poziom licealnych strony opartych o tabelki i pisanych w najprostszym HTML’u niezbędny będzie serwer z obsługą php/sql. Serwerem, który ja polecam zarówno dla początkujących jak i średnio zaawansowanych jest MAMP (akronim od słów Mac Apache MySQL PHP) do ściągnięcia w wersji darmowej pod adresem: http://www.mamp.info/. Po ściągnięciu paczki z plikami instalacyjnymi należy w standardowy sposób zainstalować MAMP’a na swoim komputerze (podając hasło administratora w razie potrzeby). Wszystko, co będzie nam niezbędne do uruchomienia własnej strony internetowej znajduje się w tej paczce. Obok serwera www Apache z obsługą PHP mamy tam również gotową do użycia bazę danych MySQL wraz z zainstalowanym skryptem phpmyadmin udostępniającym webowy interfejs do zarządzania zawartością bazy. Po instalacji paczki zalecam jej konfigurację. Na szczęście dla początkujących nie musimy bawić się w edytowanie konfiguracyjnych plików tekstowych – wszystko można zrobić za pomocą graficznego interfejsu programu. Interfejs ten wprawdzie nie udostępnia wielu opcji, ale też nic ponad to, co jest dostępne nie będzie nam potrzebne. Jedyną zmianę, jaką polecam wprowadzić to ustawienie własnego folderu, gdzie trzymamy kod stron internetowych (domyślne ustawienia systemu /Użytkownicy/Nazwa_Użytkownika/Strony/). Dzięki temu wyciągniemy domyślną lokację stron www poza folder “Aplikacje”. Jest to szczególnie ważne, jeżeli nie pracujemy na koncie z prawami administratora, ponieważ nie mamy wtedy prawa zapisu do tego folderu i jakiekolwiek zmiany jego zawartości każdorazowo muszą być potwierdzane wpisaniem hasła administratora. Brak uprawnień do zapisu wewnątrz folderu Aplikacje dodatkowo może powodować jeszcze jeden problem – MAMP może nie zapisywać wprowadzonych zmian w konfiguracji. Należy wtedy zmienić uprawnienia dla folderu i przyznać sobie prawo do zapisu dla całego folderu MAMP znajdującego się w systemowym folderze Aplikacje. Po uruchomieniu aplikacji włączane zostają serwery PHP oraz MySQL, a w domyślnej przeglądarce uruchamiana jest strona startowa, co oznacza, że wszystko działa prawidłowo.

Mając gotowy serwer pod nową stronę www konieczne jest wybranie edytora, w którym ta strona powstanie. Ponieważ artykuł skierowany jest do osób zaczynających przygodę ze stronami internetowymi jako edytor wybrałem aplikację Coda firmy Panic (http://panic.com/coda/). Jest to rozbudowana aplikacja wspomagająca pracę oraz późniejszy rozwój strony internetowej dzięki wielu przyjaznym użytkownikowi funkcjonalnościom. Do ich szczegółowego opisania niezbędny byłby osobny artykuł. Aby uzasadnić swój wybór powiem o kilku funkcjach, które z pewnością będą wielokrotnie wykorzystywane. Po pierwsze Coda dysponuje kolorowaniem składni dla wszystkich typów plików, z którymi zetkniemy się podczas pracy ze stronami webowymi – począwszy od html’a, css, przez JavaScript, php, aż do skryptów sql’a. Osobom, które kiedykolwiek pisały własny kod (czy to stron www, czy programów), nie muszę chyba tłumaczyć jak wygodna jest to funkcja. Poza kilkoma domyślnymi schematami kolorystycznymi możemy definiować własne kolory, którymi zostaną wyróżnione zdefiniowane przez nas fragmenty kodu. Oprócz kolorowania składni Coda oferuje również system podpowiedzi, który zwłaszcza na początku może przydać się przy odkrywaniu kolejnych tagów html’a czy dyrektyw css’a. Dodatkowo, jeżeli zapomnimy jak używa się danego tagu, czy dyrektywy, możemy sięgnąć do książek udostępnionych bezpośrednio w programie. Książki podzielone są tematycznie i udostępniają podstawową wiedzę na temat zastosowania oraz wariantów poszczególnych elementów składowych języków html, css, JavaScript, czy php. Niestety do przeglądania książek niezbędne jest połączenie z internetem każdorazowo, gdy będziemy chcieli włączyć ich zawartość. W trakcie pisania strony www możemy podglądnąć, jak będzie ona wyglądać w przeglądarce nie opuszczając programu – Coda ma wbudowany podgląd stron działający na silniku WebKit. Dzięki opcji podzielenia okna na sekcje możemy w jednej sekcji mieć otwarty kod html’a, a w drugiej sekcji podgląd strony – jest to bardzo wygodne szczególnie w trakcie tworzenia arkuszy stylów CSS. Jeżeli ktoś nie czuje się na tyle pewnie, aby pisać style CSS ręcznie może skorzystać z graficznego kreatora za pomocą którego wygenerujemy wszystkie niezbędne dyrektywy opisujące wygląd poszczególnych sekcji naszej strony. Bardziej zaawansowani użytkownicy docenią również wbudowany terminal pozwalający połączyć się zdalnie z serwerem poprzez protokół SSH. Oczywiście opisane powyżej funkcje to tylko wierzchołek góry lodowej spośród wszystkich drobnych i większych usprawnień, na jakie możemy liczyć pracując w programie Coda. Aby zasygnalizować, co jeszcze pozostało do odkrycia jednym tchem wymienię funkcje, które są nie mniej przydatne od tych, które opisałem: nawigator kodu, snippety, walidacja kodu w programie, praca grupowa przez Bonjour, pluginy i wiele innych.

Na tym etapie mamy już gotowy serwer, wybraliśmy program, w którym powstanie nasza strona www, więc jedyne co pozostało to skonfigurować odpowiednio nasze aplikacje tak, aby praca nad stronami www była jak najwygodniejsza. Załóżmy więc, że rozpoczynamy nowy projekt o nazwie kodowej “Test” – mamy do stworzenia stronę internetową, którą będziemy w późniejszym czasie rozwijać. Ponieważ nie możemy sobie pozwolić, aby na serwerze wylądowała strona z błędami niezbędne będzie środowisko testowe, które uruchomimy na lokalnym komputerze, oraz jakiś sposób na kontrolę wersji plików pomiędzy naszym komputerem, a serwerem. Zaczniemy od lokalnego środowiska testowego (w którym na początku zbudujemy naszą stronę). Włączamy MAMP’a oraz tworzymy nowy folder o nazwie “Test” w /Użytkownicy/Nazwa_Użytkownika/Strony/. Tam będą trzymane wszystkie pliki naszej strony internetowej, nad którymi będziemy pracować oraz które w późniejszym etapie będziemy synchronizować z serwerem (mowa tutaj o serwerze, na którym strona będzie udostępniona w internecie). Kolejnym etapem jest konfiguracja nowego projektu w programie Coda. Po włączeniu aplikacji przechodzimy w razie konieczności do widoku “Stron” (za pomocą skrótu klawiaturowego ⌘1). W lewym dolnym rogu klikamy na guzik “Add Site”, a następnie w nowo otwarty oknie wpisujemy kolejno poniższe parametry.

Zakładka Site:

– Nickname – nazwę projektu,

– Root URL – adres www pod którym strona będzie dostępna w internecie

– Local URL – adres www pod którym strona będzie dostępna lokalnie, za pomocą MAMP (w standardowych ustawieniach będzie to: http://localhost:8888/Test/)

– Remote Root – ścieżka do folderu, gdzie trzymane są pliki na serwerze zdalnym

– Local Root – ścieżka do folderu, gdzie trzymane są pliki lokalnie (/Użytkownicy/Nazwa_Użytkownika/Strony/Test/)

Zakładka Connecting:

– Server – nazwa serwera, na którym udostępnimy stronę w internecie

– User Name – nazwa naszego użytkownika do zalogowania się na serwerze

– Password – hasło

– Port – pole to uzupełniamy tylko wtedy, gdy łączymy się z serwerem na niestandardowym porcie (w większości przypadków można pozostawić to pole do automatycznego uzupełnienia przez program)

– Protocol – wybieramy za pomocą jakiego protokołu aplikacja ma się łączyć z serwerem (informacja ta powinna być dostarczona razem z nazwą użytkownika oraz hasłem dostępowym do serwera)

– List Encoding – pozostawiamy domyślną wartość

Dodatkowo możemy jeszcze skonfigurować połączenie SSH z serwerem oraz kontrolę wersji.

Po utworzeniu nowego projektu można przejść do pracy nad kodem strony – w tym celu należy kliknąć dwukrotnie na ikonę projektu, a aplikacja przełączy się w tryb edytora tekstowego. Po lewej stronie wyświetlane jest drzewo folderów/plików zarówno przetrzymywanych lokalnie jak i na serwerze. Po prawej znajduje się edytor, w którym napiszemy naszą stronę internetową. Po wpisaniu przykładowej zawartości (niech to będzie tylko nagłówek z napisem “Test”) zapisujemy plik pod nazwą index.html – powinien on się pojawić wśród plików lokalnych. Ponieważ program jest w stanie stwierdzić, że plik lokalny oraz plik na serwerze o tej samej nazwie różnią się zawartością, index.html zostanie oznaczony za pomocą strzałki, a u dołu panelu z plikami pojawią się dwie nowe opcje – Clear oraz Publish All. Pierwsza służy do odznaczenia wszystkich plików, w których wystąpiły zmiany, natomiast druga pozwala wysłać na serwer wszystkie oznaczone pliki zastępując stare wersje nowymi. Z tej funkcjonalności będziemy często korzystać podczas rozwoju naszej strony internetowej. Mając działającą wersję na serwerze on-line możemy lokalnie wprowadzać nowe zmiany, przetestować ich działanie bezpośrednio w aplikacji Coda, a następnie jednym kliknięciem wysłać zmienione pliki na serwer.

Po zastosowaniu się do wskazówek w powyższym artykule powinniśmy dysponować gotowym podstawowym środowiskiem testowo-rozwojowym dla stron www. Zainstalowaliśmy oraz skonfigurowaliśmy serwer z obsługą php/sql, skonfigurowaliśmy aplikację do tworzenia oraz testowania stron za pomocą lokalnego serwera, wiemy, jak utworzyć nowy projekt pozwalający na efektywną organizację pracy z plikami lokalnymi oraz trzymanymi na serwerze, wiemy również jak bezpiecznie wprowadzać zmiany na stronie po ich uprzednim przetestowaniu lokalnie.

Marek Wojtaszek