{"id":4526,"date":"2020-12-28T12:23:24","date_gmt":"2020-12-28T12:23:24","guid":{"rendered":"https:\/\/codewaveinsdev.wpengine.com\/?p=4526"},"modified":"2023-08-01T16:21:08","modified_gmt":"2023-08-01T16:21:08","slug":"building-scalable-marketplace-apps-pubnub","status":"publish","type":"post","link":"https:\/\/codewave.com\/insights\/building-scalable-marketplace-apps-pubnub\/","title":{"rendered":"Building Scalable Marketplace apps using PubNub"},"content":{"rendered":"\n

How do you build a scalable multivendor marketplace app with real-time chat features, push-notifications and geo-location tracking capabilities?<\/strong><\/h2>\n\n\n\n

We built one recently using PubNub. Here\u2019s a high-level architecture of the multivendor marketplace application.<\/p>\n\n\n\n

\"multivendor<\/figure>\n\n\n\n

Codewavers like to flirt with new technologies. And why shouldn\u2019t we? It has helped us time and again in identifying and early-adopting efficient, reliable, secure, robust, cutting-edge technologies to develop innovative solutions for our clients<\/em>. The driving factor behind these experiments is our undying love for renovating and optimizing redundant out-dated technological infrastructures with the modern scalable architectures<\/em><\/strong>. Often, in the cloud. And recently, on the Edge too.<\/p>\n\n\n\n

Real-time data streaming, app development<\/h2>\n\n\n\n

But this insight is not just about Cloud computing or Edge computing but also about a real time data streaming API service<\/strong> for building web, mobile and IoT solutions. Back in the days when \u201cquarantine\u201d was not a household vocab, our developers were developing a PoC for a real-time chat application<\/strong>. After evaluating several contenders, they decided to go with PubNub<\/strong> for developing the PoC. The PoC development team was so impressed with PubNub that recently we ended up using it for a big B2B-cum-B2C marketplace development<\/strong> (a suite of web & mobile apps). Got to say, the project was very interesting and innovative but equally complex, tricky & challenging.<\/p>\n\n\n\n

What caught our eye?<\/h2>\n\n\n\n

Real-time interactions with the live streams \u2013 enabled by PubNub. Example, Hotstar live reactions on Cricket & Football matches. Aha! every six from Rohit and goal from Mbappe!! There is a THOR in all of us.<\/strong> We\u2019ve witnessed people hammering those emoticons like crazy. Mass hysteria!<\/p>\n\n\n\n

We got curious \u2013 started experimenting with PubNub for various business use-cases.<\/p>\n\n\n\n

\n

This insight wouldn\u2019t be possible without our ninja developers<\/p>\n\u2013 Sajith Sajeev & Babin Kochana<\/cite><\/blockquote>\n\n\n\n

Scalable Marketplace App Development<\/h2>\n\n\n\n
\"realtime<\/figure>\n\n\n\n

This marketplace<\/strong> enables consumers to explore luxury kitchen interior designs and place orders online<\/strong>. The platform abodes freelancers including professional kitchen designers, on-field labors and other stakeholders as well. Client\u2019s requirement stated \u201can embedded holistic lead management platform<\/strong><\/em>\u201d that enables entire workflow management<\/strong> from within the app. Basically that means, customers as well as kitchen interior designers and service providers can track the project status in real-time<\/strong>. From ordering to assignment and kitchen design consultation<\/strong> to delivery and fitting different parts, almost all aspects of the project required location tracking<\/strong> and real-time collaboration. Not to mention, we had to push notifications about project status to respective stakeholders throughout the order lifecycle.<\/p>\n\n\n\n

PubNub for chat, location, notification<\/h2>\n\n\n\n

Cutting the long story short, from our PoC experience, we knew PubNub<\/strong> is well-suited to build solutions for all three requirements, i.e., realtime location-tracking, realtime chat features and push notifications<\/strong><\/em> as well. So, we went for it.<\/p>\n\n\n\n

If you don\u2019t know anything about PubNub<\/strong>, it is a pub\/sub modelled data streaming IaaS platform enabling realtime communication<\/strong><\/em>. Makes use of all data streaming protocols. PubNub provides well-documented SDKs for all major languages and frameworks including Javascript & Python<\/strong>. Our requirement was for Javascript based SDKs as we used MERN stack<\/a> to build this highly complex scalable marketplace.<\/p>\n\n\n\n

\"multivendor<\/figure>\n\n\n\n

Building real-time chat enabled web & mobile apps using PubNub APIs<\/h2>\n\n\n\n

This was a cakewalk as our developers were acquainted with the process and the chat APIs<\/strong> from their PoC experience. We just had to integrate the concepts and garnish the PoC with aesthetically addictive user-centric UI\/UX<\/strong> to suit the project at-hand. Afterall, design thinking matters<\/strong><\/em>. Anyways, this project itself was all about kitchen interior design. So, unlike several others, to our new partners, we didn\u2019t have to emphasize the importance of smooth, frictionless UI\/UX.<\/p>\n\n\n\n

Faster, robust chat features development using PubNub<\/h3>\n\n\n\n

To build a modern in-app chat application for a marketplace with all the rich-features is a daunting and time taking task. Because as simple as it may seem but it\u2019s an app in itself. Another reason behind choosing PubNub SDKs for adding chat features in our marketplace app was the fact that it enables you to quickly build and deploy features. In a record time, we integrated all the modern rich-features like file sharing, user status (online, typing, away), message status (delivered, seen, unread counts), message filtering, group chats and one to one chats to our application.<\/p>\n\n\n\n

To demonstrate how simple it is with PubNub, here is a code snippet from one of our PubNub PoC \u2013<\/p>\n\n\n\n

exports.publishSystemMessage = async (user_id, order_id, message_text) => {\n     pubnub = new PubNub({\n          publishKey: publishKey,\n          subscribeKey: subscribeKey,\n          secretKey: secretKey,\n          uuid: uuid\n     })\n     let messagePayload = {\n          message_type: \"system_message\",\n          message_text: message_text\n     };\n     function publishSystemMessage() {\n          var publishConfig = {\n               channel: `chat_${order_id}`,\n               message: messagePayload\n          }\n          pubnub.publish(publishConfig, function (status, response) {\n               console.log(status, response);\n               if (status.statusCode == 200) {\n                    \/\/any other function after success\n               }\n          })\n     }\n}<\/code><\/pre>\n\n\n\n
sample-pubnub-code.js<\/td><\/tr><\/tbody><\/table>
Code to publish messages with PubNub<\/figcaption><\/figure>\n\n\n\n
This was to set-up & authenticate, publish message to our chat app with PubNub. Simple, is it not?<\/p>\n\n\n\n
Again this was just a PoC, so the code looks casual. PubNub as a platform is damn robust, scalable, reliable and secure but bugs on the development side could be disastrous. So, in real-life application\u2019s, code is a bit sophisticated to ensure high reliability and security of the chat application.<\/p>\n\n\n\n
Publishing messages to a channel<\/h3>\n\n\n\n
Publishing messages to a channel (say, a group message) can be achieved using PubNub\u2019s publish() API, as demonstrated here,<\/p>\n\n\n\n
\"realtime<\/figure>\n\n\n\n
Similarly, it was comparatively very easy to use PubNub\u2019s chat SDK APIs for building the chat application into the marketplace app compared to writing all the chat-logic code in-house. When we could add highly customizable chat features into our app using PubNub, we didn\u2019t see a point in re-inventing the wheel.<\/p>\n\n\n\n
Imparting push notification features into our marketplace app using Pubnub SDKs<\/h2>\n\n\n\n
Next, as per our partner\u2019s requirements, we wanted to push notifications to end-users. Basically, notifying them about project updates.<\/p>\n\n\n\n
Push-notifications is an attempt to enhance user-experience. In-app chat is very efficient and useful but often users don\u2019t need to reply and just need to see the project update. In such scenarios, it doesn\u2019t make sense to fire up the app and click on a particular chat thread when just dragging the notification bar can address the intent. Alternatively, push-notifications can be the engagement wizard for your marketing strategies and team. Reports<\/a> claim above 4% click-through rate for push notifications on android devices.<\/p>\n\n\n\n
\"push<\/figure>\n\n\n\n
Low latency, high reliability<\/h3>\n\n\n\n
Adding push notification features is not as complicated as building chat features or geo-location tracking into an app and can be built in a short time using respective platform-native libraries but we still chose PubNub given its low latency and high reliability for delivering message payloads to edge devices. Besides, again it saves some development time and enables us to ship features and apps faster.<\/p>\n\n\n\n
Embedding Push Notification In Your App<\/h3>\n\n\n\n
To add push notification features in our app, we need to register with push providers, usually FCM for Android and APN for iOS apps. For Android, we get the FCM API key when we register for cloud messaging through the firebase console. Similarly for APNs (pushKit, VoIP), we can obtain push token key, auth key from Apple\u2019s dev centre<\/a>. Next, we configure this in PubNub\u2019s admin portal to enable PubNub for efficiently and securely relaying push notifications to the edge devices everytime we trigger a message with \u201cpush\u201d payload.<\/p>\n\n\n\n
Under the hood, PubNub only triggers the push notification payload to the push providers. The actual notification is delivered to the end-users by the push providers itself. PubNub just acts as a bridge between our push messages and push providers. Again, got to say, this bridge made it possible for us to cross-the-river ridiculously fast<\/strong>.<\/strong><\/p>\n\n\n\n
Embedding real-time geo-location tracking features into our marketplace app<\/h2>\n\n\n\n
Building terrific mobile apps & web solutions is all about solving customer problems in style, augmenting their experience. In our interior design marketplace app, the client wanted to add location tracking features<\/strong>. This was to enable the stakeholders of any order placed on the marketplace app to not just communicate with each other via messages but also share\/track each other\u2019s location in the real-time, esp of the goods (kitchen interiors-equipment delivery tracking). Another use-case was to push kitchen interior designing orders to designers within a region (say, 2 miles radius). Tricky, right?<\/p>\n\n\n\n
Time-stamp Snapshots<\/h3>\n\n\n\n
Well, this was again a cakewalk, thanks to PubNub. Their robust SDKs allow us to reflect a designer\u2019s location in the realtime on the client\u2019s end and vice-versa. This again is like publishing messages to a channel. But here, generally we periodically publish a signal to a geolocation channel. This signal contains lat\/lng and timestamp snapshots from the IoT devices. In the front-end, we used map tickers to reflect the live location of subscribers based on the signal data.<\/p>\n\n\n\n
Proximity search features into your marketplace app<\/strong><\/h3>\n\n\n\n
To build proximity search features into the app, we used PubNub\u2019s custom functions \u2013 which is like microservices. In these functions, we wrote the logic for accessing our database (MongoDB) and fetching the GPS location of users to calculate distance from destination (say, clients or an offline kitchen-interiors equipment warehouse. We leverage these functions to allow users perform distance\/region based proximity search within the app.<\/p>\n\n\n\n
Conclusion \u2013 Building Marketplace Apps<\/h2>\n\n\n\n
To conclude, our developers had a good time developing this marketplace app and we couldn\u2019t possibly imagine developing, testing and deploying apps and features at such speed without using open-source, cutting-edge cross-platform app development technologies like react-native, redux, mongoDB, NodeJs etc. Also, we are grateful to the PubNub team for building such robust SDKs, live support for addressing tickets in real-time. All these together enable us to deliver apps within record time-to-market. Subscribe to Codewave Insights to stay abreast of our affairs with new-technologies.<\/p>\n\n\n\n
Frequently Asked Questions(FAQs)<\/h2>\n\n\n\n
How do I use PubNub on Android?<\/strong><\/summary>
\n
You can use PubNub’s Android SDK 6.0 to integrate PubNub’s capabilities into your app. The common use cases are geo-location, chat and push notification based features.<\/p>\n<\/div><\/details><\/div>\n\n\n\n
How much does PubNub cost?<\/strong><\/summary>
\n
PubNub pricing has three tiers: free, starter, and pro. You can find more details on https:\/\/www.pubnub.com\/pricing\/<\/a><\/p>\n<\/div><\/details><\/div>\n\n\n\n
What is PubNub used for?<\/strong><\/summary>
\n
PubNub’s primary offering is around publish\/subscribe messaging API. You can use it for any IoT, mobile, or web application where you need realtime communication or data relay.<\/p>\n<\/div><\/details><\/div>\n\n\n\n