Wist je dat je add-ons en apps kunt ontwikkelen voor Google-werkruimte?
Met een beetje codeerkennis kun je tools maken om je werk gemakkelijker te maken. In dit artikel leiden we u door het proces van het maken van een standaard add-on of app.
Laten we beginnen!
Stappen om add-ons en apps voor Google Workspace te ontwikkelen
1. Kies het juiste gereedschap voor de klus
De eerste stap is om te beslissen of je een add-on of een app wilt ontwikkelen. De beste manier om te bepalen welke het beste voor u werkt, is na te denken over wat u wilt doen, hoeveel tijd u beschikbaar heeft om het project te voltooien en hoeveel kennis u heeft met betrekking tot coderen.
Als u net begint, gebruikt u de Google Add-ons-tool. Als je al eerder met JavaScript hebt gewerkt, ga je gang en bekijk de Google Apps Script Add-on Builder.
2. Stel uw ontwikkelomgeving in
Nu je hebt besloten welke tool je wilt gebruiken, is het tijd om je ontwikkelomgeving in te richten. Dit omvat het installeren van de benodigde software en het opzetten van enkele basisconfiguratiebestanden. Het installatieproces is afhankelijk van de tool die u gebruikt.
Als je een app ontwikkelt, heb je het volgende nodig:
App-scripteditor
Als u een script ontwikkelt voor een Google Apps-add-on, gebruikt u de Google App Scripts-editor; als u met apps op G Suite werkt, gebruikt u Google Spreadsheets.
Maak een nieuw document in om toegang te krijgen tot de scripteditor van de Google-app Google Docs en open de app-scripts vanaf het tabblad Extensies. Het zal er zo uitzien:
App Script-CLI
De Chrome Developer Tools bevatten een opdrachtregelinterface (CLI) waarmee u het Google Apps-script rechtstreeks vanaf uw opdrachtregel kunt beheren.
Een Google-account
U hebt een Google-account nodig om toegang te krijgen tot Google Apps en al hun services. U gebruikt dit account wanneer u Google Chrome op uw ontwikkelmachine installeert en u aanmeldt met uw Google-account, zodat uw ontwikkelmachine wordt gekoppeld aan uw Google-account.
Hetzelfde geldt ook voor de add-ons.
3. Schrijf wat code!
Nu is het tijd om te beginnen met coderen. De details hangen af van de tool die u gebruikt, maar over het algemeen moet u wat HTML, CSS en JavaScript. U kunt lezen hoe u dat doet met elke teksteditor of IDE (geïntegreerde ontwikkelomgeving).
Nadat u uw code heeft geschreven, kunt u deze testen in de browser of op een apparaat (telefoon, tablet of computer) met de Play Store.
HTML
HyperText Markup Language (HMTL) wordt gebruikt om webpagina's te genereren. De pagina bestaat uit HTML-elementen en tags. HTML is een opmaaktaal die definieert hoe uw webpagina eruitziet en welke inhoud wordt weergegeven wanneer mensen de pagina bekijken.
U kunt als volgt een nieuw HTML-bestand in Google App Script genereren:
Om een effectieve app te maken, gebruikt u HTML om de structuur van de app te definiëren, knoppen te maken en meer gebruikersinterface elementen en geef gegevens uit uw database weer.
HTML voor uw app moet in een tag worden geschreven, die alle inhoud in uw app omringt. Als u wilt zien hoe de HTML voor een app werkt, kunt u een nieuw project maken door Bestand > Nieuw project te kiezen. Kies de optie Web App.
CSS
Cascading Style Sheets worden gebruikt om een stijl toe te passen op HTML-elementen in uw app. De beste manier om te zien hoe CSS eruitziet, is door naar de Developer Tools in Chrome of Firefox te gaan. Nadat u de ontwikkelaarstools hebt geopend, klikt u op de werkbalkknop Apparaat wisselen of typt u control + I om te schakelen tussen mobiele en desktopmodus. Selecteer vervolgens de ontwerpweergave.
Dankzij Apps Script kunnen de CSS- en JavaScript-bibliotheken worden gebruikt door andere bibliotheken te gebruiken. Hieronder ziet u een illustratie van hoe u kunt linken naar de JQuery-bibliotheek in het kopgedeelte.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<?!=content?>
...
</head>
<body>
U ziet de basis-HTML voor uw app, samen met de stylingeigenschappen die erop zijn toegepast. Wanneer de app wordt gestart, worden ook de stylingeigenschappen van kracht. Als de styling echter op het verkeerde element wordt toegepast, ziet het resultaat er misschien niet zo goed uit.
JavaScript
JavaScript is een programmeertaal die meer dynamische functies aan uw app toevoegt. Met JavaScript kunt u bijvoorbeeld interactiviteit aan een webpagina toevoegen. JavaScript is meestal opgenomen in uw projectbestanden wanneer u een nieuwe app maakt. Als u extra JavaScript aan uw app wilt toevoegen, kunt u dit doen door meer bestanden aan uw project toe te voegen.
Het is om te begrijpen hoe JavaScript werkt, omdat u hiermee geavanceerde aangepaste code kunt maken die in Google Documenten kan worden uitgevoerd.
Om een add-on te maken, moet u eerst het JavaScript ontwikkelen dat nodig is om een interactieve functie in uw app te maken. U moet ook enkele belangrijke Google API's kennen, zoals de JavaScript-bibliotheek die door Google Docs wordt gebruikt om RTF-opmaak te maken, de Document List API om lijsten met documenten op te halen, de Drive-service voor toegang tot bestanden die zijn opgeslagen op de servers van Google en de Drive-service voor het uploaden van bestanden.
U hebt toegang tot de meeste van deze API's wanneer u een add-on voor Google Documenten maakt. Het kan echter zijn dat u de JavaScript-bibliotheek van de app of andere onderdelen moet wijzigen. De JavaScript-bibliotheek stelt bijvoorbeeld de Document List API niet beschikbaar, dus u moet de logica implementeren om zelf een lijst met documenten op te vragen.
Bovendien bevat de JavaScript-bibliotheek slechts een kleine subset van functies, dus het kan zijn dat u uw eigen functies moet schrijven om rijkere interacties te creëren.
Het is belangrijk om elke code die u schrijft te testen en te debuggen om ervoor te zorgen dat deze correct wordt uitgevoerd. Omdat er een add-on in de app is ingesloten, kunt u de normale JavaScript-foutopsporingstools gebruiken die op websites te vinden zijn.
4. Test en publiceer uw add-on of app
Nadat u uw code hebt geschreven, is het tijd om deze te testen. Dit is belangrijk om ervoor te zorgen dat uw add-on of app werkt zoals bedoeld. Door uw add-on of app te testen, zorgt u ervoor dat de code solide is en dat u alle mogelijke scenario's hebt behandeld.
U wilt tenslotte niet uren bezig zijn met het ontwikkelen van iets om pas te beseffen dat er een fout in de code zit nadat uw gebruiker deze heeft ontvangen. Zodra je tevreden bent met je werk, ga je gang en publiceer je het op de Workspace Labs-site.
U kunt de gepubliceerde add-on of app rechtstreeks uploaden of een link naar een kopie op Google Drive maken.
Laat een reactie achter