onymos-logo

An Ionic Starter Template vs the Onymos Starter App

Starting to build an app

When you sign up for an Onymos Starter (just click that big, orange “Try Onymos” button in the corner over there) you’ll receive 10 of our most popular components in the Onymos Starter app. It’s kind of like a bigger, badder (badder in a good way) Ionic starter template.

Each Onymos Feature comes fully integrated, meaning every feature works right out of the box. Need to let your users chat? From the UI/UX, to the functions, to the encryption, to the cloud storage, it’s all there. And it’s all extensible. You could nix user-to-user messaging and transform chat into a customer service portal. 

That’s just one Onymos Feature. Think of the Starter app as an “everything” template. You don’t have to write a single line of code, configure an S3 bucket, or spin up a Google Cloud Server to get fully functional chat (or social login, or deep links, or… well, you get the idea). We wanted to create a one-of-kind “starter app” that has all of the functionality you need in any kind of mobile app you could ever make, whether it’s a new social network or the next thing in fintech. The only thing we wanted a developer to have to worry about is adding the custom business logic, or secret sauce, that makes their app special. 

If you’re still not sure what I mean, let’s look at how another Feature works in the Starter app — push notifications. 

Integrating the Onymos Notification FAC

Let’s start by looking at the app.component.ts file. In Ionic Angular (and just regular old Angular), the AppComponent is what’s called a bootstrapped component, or the component that loads into the DOM when your app launches. You could think of it as a starting line. In the Starter app, we use initializeApp() to call registerAndListenToNotifications(). One of the things this function does is register your app to receive push notifications by invoking OnymosNotification.register() in onymos-services.ts.

registerAndListenToNotifications () {

		let that = this;

		OnymosNotification.receive(function (notificationData) {
			that.showNotificationPopup(notificationData);
		}); // end OnymosNotification.receive

		that.onymosServices.registerNotification('@AUTHID@',
			function registerSuccess (status) {
				console.log('app.component.ts : registerNotification status [' + status + ']');

				OnymosNotification.setApplicationIconBadgeNumber(
					-1,
					function (status) {
						console.log('setApplicationIconBadgeNumber setBadgeNumber status [' + status + ']');

					},
					function (error) {
						console.log('setApplicationIconBadgeNumber setBadgeNumber error [' + error + ']');

				}); // end OnymosNotification.setBadgeNumber
			},
			function registerFailure (error) {
				console.log('ERROR : Failed registering for Notification with error - ' + error);
		});
	}

But what triggers a push notification? If we go to chat-details.ts and look at the postMessage() function, we’ll see it invokes OnymosChat.sendMessage() and its success callback, in turn, calls the notifyUser() function in onymos-services.ts.

postMessage (sender: any, recipients: any, messageContent: string, options: any) {
			let that = this;

			OnymosChat.sendMessage(
				'@AUTHOBJECT@',
				recipients,
				messageContent,
				function sendMessageSuccess (status) {
						var payload = {
							topic : 'chat',
							routeToPage: 'chat-details',
							sender : sender,
							recipients : recipients
						};

						if (options && options.chatCustomObject.mediaTag !== '' )
						{
							if (messageContent === '') {
								messageContent = "[media]";
							}
							else {
								messageContent = messageContent + "\n[media]";
							}
						}
						that.onymosServices.notifyUser('@AUTHOBJECT@', recipients, messageContent, payload);
						that.messageContent = '';
						console.log('chat-details.ts : onymosChatSendMessage status - ' + status);
					},
				function sendMessageFailure (error) {
						console.log('chat-details.ts : onymosChatSendMessage error - ' + error);
						that.errorMessage = 'ERROR : Cannot Post message.';
				},
				options); /* end OnymosChat.sendMessage */

		} /* end postMessage */

Our notifyUser() function invokes OnymosNotification.notify(). That takes us all the way back to app.component.ts againand to the registerAndListenToNotifications() function that also contained OnymosNotification.receive()

notifyUser (sender, recipients, messageContent, payload) {
			
			if (!recipients || (recipients && recipients.length === 0)) {
				return;
			}
			for (var i = 0 ; i < recipients.length; i++ ) {
				if (recipients[i]['userPhoto']) {
					delete recipients[i]['userPhoto'];
				}
				if (recipients[i]['userThumbnail']) {
					delete recipients[i]['userThumbnail'];
				}
			}
			OnymosNotification.notify(sender, recipients, messageContent,
				function onymosNotifySuccess (status) {
					console.log('		Notification onymosNotify : Success [' + status + ']');		
				},
				function onymosNotifyFailure (error) {
					console.log('		Notification onymosNotify : Error [' + error + ']');
				},
				payload);
		} // end function notifyUser	

Finally, we use the showNotificationPopup() and handleNotificationAction() functions to route a user to the specific chat the new message originated from.

showNotificationPopup (notificationData) {

		if (typeof notificationData == 'undefined' || notificationData === null) {
			console.log('DEBUG : Invalid notificationData.');
			return;
		}

		if (typeof notificationData.additionalData == 'undefined' ||
				notificationData.additionalData === null) {
			console.log('DEBUG : Invalid additionalData.');
			return;
		}

		if (this.platform.is('android')) {
			if (typeof notificationData.additionalData.payload == 'undefined' ||
					notificationData.additionalData.payload === null) {
				console.log('DEBUG : Invalid Payload');
				return;
			}
		}
		
		if (this.platform.is('android')) {
			this.handleNotificationAction(notificationData.additionalData.payload);
		}
		else if (this.platform.is('ios')) {
			this.handleNotificationAction(notificationData.additionalData);
		}

	} // end showNotificationPopup

	handleNotificationAction (additionalData) {
		if (additionalData.routeToPage == 'undefined' || additionalData.routeToPage === null) {
			return;
		}
		console.log('app.component.ts additionalData' + JSON.stringify(additionalData));
		switch (additionalData.routeToPage.toLowerCase()) {
			case 'chat-details':
				if (additionalData.sender == 'undefined' || additionalData.sender === null) {
					return;
				}

				if (additionalData.recipients == 'undefined' || additionalData.recipients === null) {
					return;
				}

			 let navigationExtras = {
					queryParams: {
						sender: JSON.stringify(additionalData.sender),
						recipients: JSON.stringify(additionalData.recipients)
					}
				};

				this.router.navigate(['/chat-details'], navigationExtras);

				break;

			default:
				this.router.navigate(['/home']);

		} /* end switch this.routeToPage */

	} // end handleNotificationAction

How does an Ionic starter template compare?

Ionic starter templates are super handy if you want a clean, simple, and unopinionated starting point for your next project. Plus, one has tabs (I’m a sucker for those)! But when it comes to end-to-end functionality, the Onymos Starter app blows all of the Ionic starter templates out of the water (and there are 5 to choose from; tabs, sidemenu, blank, my-first-app, and conference). In fact, the Onymos Starter app is the most feature-rich “starter” template we’ve ever heard of.

And that’s kinda the whole point!

If you haven’t already, sign up for your own. If you don’t think it jumpstarts your next project faster than an Ionic starter template (or any other “starter” app), let us know what we can do to make sure it does for your next next project. We take the “for developers” thing pretty seriously. Email me at jamie.goodnight@onymos.com.

Think differently about app development

Download our free white paper today to learn how Onymos Features can maximize the value of your developer resources — and shave days or weeks off your schedule.

Get your free white paper