Send google calendar invites with ionic2 (a hybrid mobile app framework) which is maried to angular2 (the nest gen web framwework) in 5 steps.
It has neven been this easier, follow along with me for the rest of the post.
Prerequites for ionic2 apps
- Android sdk version 23 or above(or else your ionic v2 app wont build).
- Latest android build and platform tools.
- Latest ionic version(ionic2 beta25 or above), ionic cli.
- Latest cordova, cordova cli.
Step 1 - Setting up google console project
- Create a simple google console project and enable calendar api in it.
- Take a note of the project's api key and google project number, Click here to start set up
- Download a sample ionic2 side menu project and start doing the following modifications.
we can use following cdn.
- This library exposes a global object "gapi", we would be decalring this in our .ts and using the methods of this global object later.
declare var gapi: any;
Step 3 - Create a simple form which captures the Google calendar invitation details.
This simple ionic form captures the user inputs for creating and sending a basic google calendar invitation.
Step 4 - Integrating to the google apis
The following code behinds binds the user inputs and also wires everything up for sending the invite to the intented users.
Step 5 - Sending the invite
- Note : We would not be able to test the app on a desktop browser since we are using the InAppBrowser which isn't' available in the context and accessing it throws errors.
- Deploy this ionic2 app to any device, say android.
$ ionic platform add android
$ ionic build android
$ ionic run android
- Fill appropriate details of the calendar invitation which includes Event name, location and other details.
- Click on the Send Google Calendar Invite button.
- Boom! You have created a google calendar invitation and sent it to the added attendees.
- Check your invitaion in the google calendar mobile app or google calendar web app.
- The jsonR object in the callback contains valuable information about the invite, one can analyze and use that information to enhance the functionality further.
Git repo for complete code and other references
Consider seeing the following from the git repo for your own set up in newer versions(RCs) of ionic2.
- app.ts of the app
- calendar invitation form, googleCalendar.html
- code behind the form, googleCalendar.ts
- Node modules can be older so please ignore and get latest of those that comes out of the box with ionic2 projects
- My git repo
This is a very basic set up of sending calendar invites and a lot of things can be improved on top of this.
- Frequency of the event, reminders can be taken from some settings.
- Programatically calculating TimeZone which is mandatorily required for sending the google calendar invite.
- A proper fall back mechanism if sending the invitation fails and other cosmetics