Alam mo ba na maaari kang bumuo ng mga add-on at app para sa Google workspace?
Sa kaunting kaalaman sa coding, maaari kang lumikha ng mga tool upang makatulong na gawing mas madali ang iyong buhay sa trabaho. Sa artikulong ito, gagabayan ka namin sa proseso ng paggawa ng pangunahing add-on o app.
Magsimula na tayo!
Mga Hakbang sa Pagbuo ng Mga Add-on at App ng Google Workspace
1. Piliin ang Tamang Tool para sa Trabaho
Ang unang hakbang ay ang magpasya kung gusto mong bumuo ng isang add-on o isang app. Ang pinakamahusay na paraan upang matukoy kung alin ang pinakamahusay na gagana para sa iyo ay pag-isipan kung ano ang gusto mong gawin, kung gaano karaming oras ang mayroon ka upang makumpleto ang proyekto at ang antas ng kaalaman na mayroon ka tungkol sa coding.
Kung nagsisimula ka pa lang, gamitin ang Google Add-ons tool. Kung nagtrabaho ka na sa JavaScript dati, magpatuloy at tingnan ang Google Apps Script Add-on Builder.
2. I-set up ang Iyong Development Environment
Ngayong napagpasyahan mo na kung aling tool ang gusto mong gamitin, oras na para i-set up ang iyong development environment. Kabilang dito ang pag-install ng kinakailangang software at pag-set up ng ilang pangunahing configuration file. Mag-iiba-iba ang proseso ng pag-setup depende sa kung aling tool ang iyong ginagamit.
Kung gumagawa ka ng app, kakailanganin mo ang sumusunod:
App Script Editor
Kung gumagawa ka ng script para sa isang Google Apps Add-on, gamitin ang editor ng Google App Scripts; kung nagtatrabaho ka sa mga app sa G Suite, gamitin ang Google Sheets.
Upang ma-access ang editor ng script ng Google app, gumawa ng bagong dokumento sa Google Docs at buksan ang mga script ng app mula sa tab na mga extension. Magiging ganito ang hitsura:
CLI ng App Script
Ang Chrome Developer Tools ay may kasamang command line interface (CLI) na nagbibigay-daan sa iyong kontrolin ang script ng Google Apps nang direkta mula sa iyong command line.
Isang Google Account
Kakailanganin mo ng isang Google account upang ma-access ang Google Apps at lahat ng kanilang mga serbisyo. Gagamitin mo ang account na ito kapag na-install mo ang Google Chrome sa iyong development machine at nag-sign in gamit ang iyong Google Account upang maiugnay ang iyong development machine sa iyong Google account.
Ang parehong napupunta para sa mga add-on din.
3. Sumulat ng Ilang Code!
Ngayon ay oras na upang simulan ang coding. Ang mga detalye ay depende sa kung aling tool ang iyong ginagamit, ngunit sa pangkalahatan, kakailanganin mong magsulat ng ilang HTML, CSS, at JavaScript. Maaari mong basahin ang tungkol sa kung paano gawin iyon sa anumang text editor o IDE (integrated development environment).
Pagkatapos mong isulat ang iyong code, maaari mo itong subukan sa browser o sa isang device (telepono, tablet, o computer) na tumatakbo sa Play Store.
HTML
Ang HyperText Markup Language (HMTL) ay ginagamit upang bumuo ng mga web page. Ang pahina ay binubuo ng mga elemento at tag ng HTML. Ang HTML ay isang markup language na tumutukoy sa hitsura ng iyong web page at kung anong content ang ipapakita kapag tiningnan ng mga tao ang page.
Maaari kang bumuo ng bagong HTML file sa Google App Script tulad nito:
Upang makagawa ng isang epektibong app, gagamit ka ng HTML upang tukuyin ang istraktura ng app, gumawa ng mga button at iba pa user interface elemento, at magpakita ng data mula sa iyong database.
Ang HTML para sa iyong app ay dapat na nakasulat sa loob ng isang tag, na pumapalibot sa lahat ng nilalaman sa iyong app. Upang makita kung paano gumagana ang HTML para sa isang app, maaari kang gumawa ng bagong proyekto sa pamamagitan ng pagpili sa File > New Project. Piliin ang opsyon sa Web App.
CSS
Ginagamit ang Cascading Style Sheet para maglapat ng istilo sa mga elemento ng HTML sa iyong app. Ang pinakamahusay na paraan upang makita kung ano ang hitsura ng CSS ay bisitahin ang Mga Tool ng Developer sa Chrome o Firefox. Sa sandaling buksan mo ang Mga Tool ng Developer, i-click ang pindutan ng Toggle toolbar ng device o i-type ang control + I upang magpalipat-lipat sa pagitan ng mobile at desktop mode. Pagkatapos ay piliin ang Design view.
Maaaring gamitin ang CSS at JavaScript library sa pamamagitan ng paggamit ng iba pang library, salamat sa Apps Script. Ang isang paglalarawan kung paano mag-link sa JQuery library sa seksyon ng header ay ipinapakita sa ibaba.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?!=content?>
...
</head>
<body>
Makikita mo ang pangunahing HTML para sa iyong app, kasama ang mga katangian ng pag-istilo na inilapat dito. Kapag inilunsad ang app, magkakabisa rin ang mga katangian ng pag-istilo. Gayunpaman, kung ang estilo ay inilapat sa maling elemento, ang resulta ay maaaring hindi maganda ang hitsura.
JavaScript
Ang JavaScript ay isang programming language na nagdaragdag ng higit pang mga dynamic na feature sa iyong app. Halimbawa, hinahayaan ka ng JavaScript na magdagdag ng interaktibidad sa isang web page. Karaniwang kasama ang JavaScript sa iyong mga file ng proyekto kapag gumawa ka ng bagong app. Kung gusto mong magdagdag ng karagdagang JavaScript sa iyong app, magagawa mo ito sa pamamagitan ng pagdaragdag ng higit pang mga file sa iyong proyekto.
Ito ay upang maunawaan kung paano gumagana ang JavaScript dahil pinapayagan ka nitong lumikha ng sopistikadong custom na code na maaaring tumakbo sa loob ng Google Docs.
Para gumawa ng add-on, kailangan mo munang buuin ang JavaScript na kailangan para gumawa ng interactive na feature sa iyong app. Kailangan mo ring malaman ang tungkol sa ilang mahahalagang Google API, tulad ng JavaScript library na ginagamit ng Google Docs upang lumikha ng rich text formatting, ang Document List API upang kunin ang mga listahan ng mga dokumento, ang serbisyo ng Drive para sa pag-access ng mga file na nakaimbak sa mga server ng Google, at ang Drive serbisyo para sa pag-upload ng mga file.
Maa-access mo ang karamihan sa mga API na ito kapag gumawa ka ng add-on para sa Google Docs. Gayunpaman, maaaring kailanganin mong baguhin ang JavaScript library ng app o iba pang bahagi. Halimbawa, hindi inilalantad ng JavaScript library ang Document List API, kaya dapat mong ipatupad ang logic para mag-query ng listahan ng mga dokumento nang mag-isa.
Bilang karagdagan, ang JavaScript library ay naglalaman lamang ng isang maliit na subset ng mga function, kaya maaaring kailanganin mong isulat ang iyong sariling mga function upang lumikha ng mas mahusay na mga pakikipag-ugnayan.
Mahalagang subukan at i-debug ang anumang code na iyong isusulat upang matiyak na ito ay tatakbo nang tama. Dahil ang isang add-on ay naka-embed sa loob ng app, maaari mong gamitin ang normal na mga tool sa pag-debug ng JavaScript na makikita sa mga website.
4. Subukan at I-publish ang Iyong Add-on o App
Kapag naisulat mo na ang iyong code, oras na para subukan ito. Mahalaga ito upang matiyak na gumagana ang iyong add-on o app ayon sa nilalayon. Tinitiyak ng pagsubok sa iyong add-on o app na solid ang code at nasaklaw mo na ang bawat posibleng senaryo.
Pagkatapos ng lahat, hindi mo nais na gumugol ng maraming oras sa pagbuo ng isang bagay upang mapagtantong may bug sa code pagkatapos na makuha ito ng iyong user. Kapag nasiyahan ka na sa iyong trabaho, magpatuloy at i-publish ito sa site ng Workspace Labs.
Maaari mong direktang i-upload ang naka-publish na add-on o app, o mag-link sa isang kopya sa Google Drive.
Mag-iwan ng Sagot