Google Apps Script przykłady

Sklep internetowy w GAS 🤔

A gdyby tak sklep internetowy napisać w Google Apps Script?

Jakiś czas temu, w ramach samokształcenia i szlifowania swoich umiejętności zastanawiałem się jaką aplikację internetową by tutaj napisać w środowisku, w którym pracuję na codzień. Długo o tym myślałem, aż w końcu padło na prosty sklep internetowy, który finalnie nazwałem PA Shop. Projekt napisany jest przy pomocy Google Apps Script, JS, HTML oraz CSS. Nie wykorzystuje tutaj żadnych dodatkowych frameworków czy bibliotek. Kiedy już skończyłem sam się zdziwiłem możliwościami tej platformy... Oczywiście ma ona swoje ograniczenia (o czym pisałem tutaj), ale mimo wszystko uważam to środowisko za coś potężnego. Jeśli chcesz się dowiedzieć więcej, zachęcam do dalszego czytania 🙃

Wszystko zaczęło się od tego miejsca, Google Apps Script IDE. Może on wyglądać tak jak na zdjęciu, ale nie musi. Ja na przykład korzystam z dodatku do Google Chrome 👉 Black Apps Script, który zamienia standardowy edytor w potężne narzędzie z ciemnym tłem - polecam 😎

Jak to wygląda od środka?

Projekt składa się łącznie z 8 plików:

index.html - strona główna sklepu
cart.html - koszyk
checkout.html - kasa
mainJS.html
cartJS.html
dataJS.html
CSS.html
GAS.gs

Otwierając link do aplikacji webowej, odpalana jest funkcja doGet(), znajdująca się w pliku GAS.gs, która renderuje stronę główną sklepu i pozwala na jej wyświetlenie. Wygląda tak:

function doGet(e) {

let page = e.parameter.mode || "index";

let html = HtmlService.createTemplateFromFile(page).evaluate();

let htmlOutput = HtmlService.createHtmlOutput(html);

htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');

htmlOutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

//Replace {{NAVBAR}} with the Navbar content

htmlOutput.setContent(htmlOutput.getContent().replace("{{NAVBAR}}",getNavbar()));

return htmlOutput;

}

W pliku index.html, widać wykorzystanie funkcji include(),

function include(filename) {

return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

która pozwala na zamieszczenie kodu z innego pliku w trakcie jego renderowania. Dzięki tej funkcjonalności łatwiej jest utrzymać porządek i zarządzać projektem wraz z jego rozwojem. W pliku dataJS.html przechowywana jest tablica obiektów produktów wyświetlanych na głównej stronie sklepu, natomiast plik mainJS.html zawiera funkcje JavaScript, które wykonywane są po stronie klienta. W trakcie renderowania pliku index.html wszystkie 3 pliki są łączone i w rezultacie powstaje jeden spójny plik, na którego podstawie wyświetlany jest widok w aplikacji webowej.

<!DOCTYPE html>

<head>

<?!= include('CSS'); ?>

<title>Store</title>

</head>

<body>

<?!= include('DataJS'); ?>

<?!= include('MainJS'); ?>

</body>

</html>

Pozostałe pliki będące kodem źródłowym innych widoków aplikacji, wyglądają bardzo podobnie. Różnią się pewnymi funkcjonalnościami oraz strukturą natomiast zasada ich działania jest taka sama. Największym wyzwaniem, w tym projekcie była nawigacja pomiędzy widokami. W GAS nie jes to takie proste. Jest to możliwe jedynie poprzez parametry query adresu url. Otwierając link do aplikacji webowej, funkcja doGet(), definiuje jaka strona ma zostać otwarta. Jeśli nie zostanie jej przekazany parametr mode, na ekranie pojawi się strona główna (index.html), w innym wypadku aplikacja wyświetli widok na podstawie parametru mode.

https://script.google.com/macros/s/AKfycbzrj0KPiw3dzswJ7jehs9j2PlUBp0BVGBLyND1U0xzXKNrKZ36e1yFzecdm2poiS2xQ/exec --> strona główna

https://script.google.com/macros/s/AKfycbzrj0KPiw3dzswJ7jehs9j2PlUBp0BVGBLyND1U0xzXKNrKZ36e1yFzecdm2poiS2xQ/exec?mode=cart --> koszyk

https://script.google.com/macros/s/AKfycbwXgJ1imYBmFuonzcVMYUc6G4x_2oKRuOVV0qABnqE/exec?mode=checkout --> kasa

To chyba byłoby na tyle. Mam nadzieję, że zainteresował Cię ten artykuł. Jeśli chcesz zobaczyć demo sklepu, kliknij na ikonę poniżej. Polecam sprobować swoich sił i napisać własne rozwiązanie webowe - to czysta przyjemność.

Do usłyszenia kolejnym razem, cześć! 👋🏼

🤔 Potrzebujesz pomocy z Google Apps Script?

NAPISZ DO NAS

Google Sites

Report abuse