{"id":1389,"date":"2023-04-22T22:29:23","date_gmt":"2023-04-22T20:29:23","guid":{"rendered":"https:\/\/codeyard.tech\/?p=1389"},"modified":"2023-06-13T15:17:45","modified_gmt":"2023-06-13T13:17:45","slug":"the-vr-app-esettanulmany","status":"publish","type":"post","link":"https:\/\/codeyard.tech\/en\/blog\/the-vr-app-case-study\/","title":{"rendered":"The VR APP Casestudy"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"1389\" class=\"elementor elementor-1389\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6490b87 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6490b87\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-222361e\" data-id=\"222361e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f32d06d elementor-widget elementor-widget-text-editor\" data-id=\"f32d06d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.22.0 - 26-06-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><strong>The idea of the project<\/strong><\/p>\n<p>Jani and Pisti and  we met at startup events in Debrecen almost 10 years ago. They were showing off VR headsets at a meetup in Debrecen before anyone else had one and we were doing what we do best: developing apps and presenting on the challenges of development, but watching them work. During a live broadcast, Jani raised the topic with us that they were thinking of creating their own mobile app and we indicated that we'd be happy to help.<\/p>\n<p>We met, they told us what they really needed and why they needed it. It was very important for the project to understand their motivation, to understand what the purpose of the project was.<br>A rendszer c\u00e9lja, hogy a csapatr\u00f3l \u00f6sszeszedjen minden olyan inform\u00e1ci\u00f3t amire a k\u00f6z\u00f6ss\u00e9gnek sz\u00fcks\u00e9ge van nap mint nap. Nem \u00faj n\u00e9z\u0151ket szerettek volna, vagy b\u00e1rmilyen m\u00f3don monetiz\u00e1lni az alkalmaz\u00e1sokat, a megl\u00e9v\u0151 k\u00f6vet\u0151knek szerettek volna egy megb\u00edzhat\u00f3, egyszer\u0171en haszn\u00e1lhat\u00f3 eszk\u00f6zt adni a mindennapokra amellyel k\u00f6vethet\u0151bb\u00e9 v\u00e1lnak az \u00e1ltaluk k\u00fcl\u00f6nb\u00f6z\u0151 platformokon megosztott tartalmak<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-239db4c9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"239db4c9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-27d694b7\" data-id=\"27d694b7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5b75da2 elementor-widget elementor-widget-bdt-accordion\" data-id=\"5b75da2\" data-element_type=\"widget\" data-widget_type=\"bdt-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t        <div class=\"bdt-ep-accordion-container\">\n            <div id=\"bdt-ep-accordion-5b75da2\" class=\"bdt-ep-accordion bdt-accordion\" data-bdt-accordion=\"{&quot;collapsible&quot;:true,&quot;multiple&quot;:false,&quot;transition&quot;:&quot;ease-in-out&quot;}\" data-settings=\"{&quot;id&quot;:&quot;bdt-ep-accordion-5b75da2&quot;,&quot;activeHash&quot;:&quot;no&quot;,&quot;activeScrollspy&quot;:null,&quot;hashTopOffset&quot;:false,&quot;hashScrollspyTime&quot;:false}\">\n                                    <div class=\"bdt-ep-accordion-item\">\n                        <div class=\"bdt-ep-accordion-title bdt-accordion-title bdt-flex bdt-flex-middle bdt-flex-between\" id=\"bdt-ep-accordion-tervezs\" data-accordion-index=\"0\" data-title=\"tervez-s\" role=\"heading\">\n\n                                                            <span class=\"bdt-ep-accordion-icon bdt-flex-align-right\" aria-hidden=\"true\">\n\n                                                                            <span class=\"bdt-ep-accordion-icon-closed\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-plus\"><\/i>                                        <\/span>\n                                    \n                                                                            <span class=\"bdt-ep-accordion-icon-opened\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-minus\"><\/i>                                        <\/span>\n                                    \n                                <\/span>\n                            \n                            <span class=\"bdt-ep-title-text bdt-flex bdt-flex-middle\">\n\n                                                                Planning                            <\/span>\n\n                        <\/div>\n                        <div class=\"bdt-ep-accordion-content bdt-accordion-content\">\n                            <p>After the first meeting, we put our heads together, started planning, started defining scopes. For a team with such an extensive follower base, a lot of features can be useful, but we understood that they needed a simple, likeable system that would automate most things so they didn't have to manage yet another interface on the content producer side.<br \/>We prepared a requirements specification plan, invented new features, discarded previous ideas. We also created a prototype for the specification, which helps them communicate, so they can imagine what they're going to get from us.<\/p><p>Since we knew that the guys were constantly on the go and had never been involved in a similar development before, we tried to get them as hands-on as possible. We came with options to prepare decisions, not just questions to increase uncertainty. In a process like this, a proactive approach makes a big difference, and we try to bring this to the forefront in every project, it's what our clients like most about us.<br \/><br \/>This is how the final functionality was developed:<\/p><ul><li>H\u00edrek: ahol a csapat k\u00fcl\u00f6nb\u00f6z\u0151 social network bejegyz\u00e9sei egyben tal\u00e1lhat\u00f3ak<\/li><li>Menetrend: a k\u00f6zelg\u0151 k\u00f6zvet\u00edt\u00e9seket lehet napt\u00e1r form\u00e1j\u00e1ban k\u00f6vetni<\/li><li>Shop: az el\u00e9rhet\u0151 webshop term\u00e9kek list\u00e1ja, kollekci\u00f3kba szedve<\/li><li>Inventory: egy\u00fcttm\u0171k\u00f6d\u00e9sen alapul\u00f3 kupon k\u00f3dok valamint itt kapott helyet a Nyerem\u00e9nyj\u00e1t\u00e9k sorsol\u00e1s is<\/li><li>\u00c9rtes\u00edt\u00e9sek: itt nem csak az \u00faj tartalmakr\u00f3l sz\u00f3l\u00f3 \u00e9rtes\u00edt\u00e9sek ker\u00fclnek, hanem a csapat k\u00f6zvetlen\u00fcl tud kommunik\u00e1lni a k\u00f6vet\u0151 b\u00e1zissal. Ezt m\u00e1s platform nem biztos\u00edtja sz\u00e1mukra.<\/li><\/ul><p>We gave the prototype to Soma Szoboszlai, who turned it into a UI\/UX that was easy for our developers to work with and 100% in line with the TheVR brand.<\/p>                        <\/div>\n                    <\/div>\n                                    <div class=\"bdt-ep-accordion-item\">\n                        <div class=\"bdt-ep-accordion-title bdt-accordion-title bdt-flex bdt-flex-middle bdt-flex-between\" id=\"bdt-ep-accordion-folyamat\" data-accordion-index=\"1\" data-title=\"folyamat\" role=\"heading\">\n\n                                                            <span class=\"bdt-ep-accordion-icon bdt-flex-align-right\" aria-hidden=\"true\">\n\n                                                                            <span class=\"bdt-ep-accordion-icon-closed\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-plus\"><\/i>                                        <\/span>\n                                    \n                                                                            <span class=\"bdt-ep-accordion-icon-opened\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-minus\"><\/i>                                        <\/span>\n                                    \n                                <\/span>\n                            \n                            <span class=\"bdt-ep-title-text bdt-flex bdt-flex-middle\">\n\n                                                                Process                            <\/span>\n\n                        <\/div>\n                        <div class=\"bdt-ep-accordion-content bdt-accordion-content\">\n                            <p>Beleszerett\u00fcnk a projektbe, impon\u00e1lt nek\u00fcnk az eg\u00e9sz m\u00f6g\u00f6tti szellemis\u00e9g \u00edgy felaj\u00e1nlottuk, hogy k\u00f6z\u00f6ss\u00e9gi alapon, a TheVR n\u00e9z\u0151it is bevonva val\u00f3s\u00edtjuk meg, \u00e9l\u0151ben a Twitch-en. Ez egy nagyon j\u00f3 kih\u00edv\u00e1s volt sz\u00e1munkra, a n\u00e9z\u0151k nagyon akt\u00edvak voltak, sok \u00f6tletet, visszajelz\u00e9st kaptunk m\u00e1r a fejleszt\u00e9s sor\u00e1n is.<br \/>Like all projects, this one was developed during development because, as they say, you get your appetite while you eat.<\/p><p>Tudtuk, hogy a rendszer hatalmas terhel\u00e9st fog kapni a megjelen\u00e9s ut\u00e1n k\u00f6zvetlen\u00fcl. A HappyHour alatt megeml\u00edtett weboldalak rendre le\u00e1lltak az egyidej\u0171, t\u00f6bb ezer l\u00e1togat\u00f3t\u00f3l. Nem szerett\u00fck volna, hogy ez vel\u00fcnk is megt\u00f6rt\u00e9njen, \u00fagyhogy arra m\u00e9retezt\u00fck a projektet, hogy ha az \u00f6sszes TheVR k\u00f6vet\u0151 k\u00f6zel egyszerre \u00e9rtes\u00fcl az app el\u00e9rhet\u0151s\u00e9g\u00e9r\u0151l, akkor se okozzon sz\u00e1munkra kellemetlen perceket. Aki ismeri a TheVR k\u00f6z\u00f6ss\u00e9get tudhatja, hogy ez t\u00f6bb sz\u00e1zezer k\u00f6zel egyidej\u0171 felhaszn\u00e1l\u00f3t is jelenthet. Ahhoz, hogy egy ilyen nagy teherb\u00edr\u00e1s\u00fa rendszert \u00e9p\u00edts\u00fcnk, sz\u00fcks\u00e9g van olyan \u00e1tfog\u00f3 szak\u00e9rtelemre, amelyet m\u00e9ly technikai tud\u00e1s \u00e9s a modern technol\u00f3gi\u00e1k \u00f6tv\u00f6z\u00e9s\u00e9nek seg\u00edts\u00e9g\u00e9vel lehet csak megugrani.<\/p><p>Tervez\u00e9s alatt m\u00e1r k\u00e9sz\u00fclt\u00fcnk a magas terhel\u00e9sre, a dinamikusan v\u00e1ltoz\u00f3 forgalomra, sk\u00e1l\u00e1zhat\u00f3s\u00e1gra. Szerencs\u00e9re ebben seg\u00edts\u00e9get kaptunk a SysCops csapat\u00e1t\u00f3l, akikkel m\u00e1r t\u00f6bb sikeres k\u00f6z\u00f6s projekt\u00fcnk is volt a k\u00f6zelm\u00faltban.<\/p>                        <\/div>\n                    <\/div>\n                                    <div class=\"bdt-ep-accordion-item\">\n                        <div class=\"bdt-ep-accordion-title bdt-accordion-title bdt-flex bdt-flex-middle bdt-flex-between\" id=\"bdt-ep-accordion-kihvsok\" data-accordion-index=\"2\" data-title=\"kih-v-sok\" role=\"heading\">\n\n                                                            <span class=\"bdt-ep-accordion-icon bdt-flex-align-right\" aria-hidden=\"true\">\n\n                                                                            <span class=\"bdt-ep-accordion-icon-closed\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-plus\"><\/i>                                        <\/span>\n                                    \n                                                                            <span class=\"bdt-ep-accordion-icon-opened\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-minus\"><\/i>                                        <\/span>\n                                    \n                                <\/span>\n                            \n                            <span class=\"bdt-ep-title-text bdt-flex bdt-flex-middle\">\n\n                                                                Challenges                            <\/span>\n\n                        <\/div>\n                        <div class=\"bdt-ep-accordion-content bdt-accordion-content\">\n                            <p>The biggest challenge was the uneven, uneven use. The system is a new communication channel through which the team can communicate with their followers. We assessed how many competing users we should expect and how many resources would be needed to serve them smoothly. In total, the team has more than 3M followers so the workload would not have been<br \/>\u00e9rdemes f\u00e9lv\u00e1llr\u00f3l venni.<\/p><p>When a new Twitter post is created or a new video is uploaded, the system immediately notifies users, most of whom (thousands of concurrent visitors) open the app. Most of the time, however, there is minimal usage (a few hundred concurrent visitors) which uses a fraction of the system.<br \/>Just sending notifications in real time is not entirely trivial with this number of users. It's not our first project where we have to implement this, so we've already had the experience to do it.<\/p><p>Sz\u00e1munkra fontos az, hogy az \u00fcgyfelek hat\u00e9konyan k\u00f6lts\u00e9k el az IT projektre sz\u00e1nt keretet, \u00edgy egy olyan sk\u00e1l\u00e1zhat\u00f3 \u00e9s hat\u00e9kony infrastrukt\u00far\u00e1t raktunk \u00f6ssze ami k\u00e9pes dinamikusan, a terhel\u00e9s f\u00fcggv\u00e9ny\u00e9ben sk\u00e1l\u00e1z\u00f3dni.\u00a0 A technol\u00f3gi\u00e1kat megv\u00e1laszt\u00e1s\u00e1n\u00e1l ez is szempont volt. A szervereket az Amazon felh\u0151 szolg\u00e1ltat\u00e1saiban futtatjuk, microservice architekt\u00far\u00e1n. Ehhez Kubernetes orchestration rendszert \u00e9s Docker kont\u00e9neriz\u00e1ci\u00f3t haszn\u00e1lunk, ezek jelenleg a legelterjedtebb megold\u00e1sok a piacon.<\/p><p>We designed the system knowing in advance what data we were going to cache, and we tried to take advantage of the cache, which was helped by a Redis server.<br \/>The data is stored in MongoDB, which is also a robust, highly scalableThe data is stored in MongoDB, which is also a robust, highly scalable<br \/>database management system, the choice was clear.<br \/>We have 10 years of experience in native mobile app development, we have been through the<br \/>the development of Android and iOS operating systems. Over the years, we have constantly followed new technological trends and platform changes. We wanted the app to reflect this professionalism, so we took great care in its development.<\/p>                        <\/div>\n                    <\/div>\n                                    <div class=\"bdt-ep-accordion-item\">\n                        <div class=\"bdt-ep-accordion-title bdt-accordion-title bdt-flex bdt-flex-middle bdt-flex-between\" id=\"bdt-ep-accordion-lests\" data-accordion-index=\"3\" data-title=\"les-t-s\" role=\"heading\">\n\n                                                            <span class=\"bdt-ep-accordion-icon bdt-flex-align-right\" aria-hidden=\"true\">\n\n                                                                            <span class=\"bdt-ep-accordion-icon-closed\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-plus\"><\/i>                                        <\/span>\n                                    \n                                                                            <span class=\"bdt-ep-accordion-icon-opened\">\n                                            <i aria-hidden=\"true\" class=\"fa-fw fas fa-minus\"><\/i>                                        <\/span>\n                                    \n                                <\/span>\n                            \n                            <span class=\"bdt-ep-title-text bdt-flex bdt-flex-middle\">\n\n                                                                Launch                            <\/span>\n\n                        <\/div>\n                        <div class=\"bdt-ep-accordion-content bdt-accordion-content\">\n                            <p>The launch was scheduled for one of the morning Happy Hours, with a live stream of the Android and iOS app. Thanks to conscious planning and experience, the system was able to handle the load and the ~10.000 concurrent users did not cause any problems.<br \/>We received a lot of feedback, thanks and congratulations, the community was very grateful for the work we put in.<br \/>Arra viszont nem gondoltunk, hogy az indul\u00e1s napj\u00e1n az Apple AppStore-ban \u00e9s a Google Play mobil \u00e1ruh\u00e1zakban els\u0151 helyre ker\u00fcl\u00fcnk az Ingyenes kateg\u00f3ri\u00e1ban Magyarorsz\u00e1gon.<\/p><p>Olyan n\u00e9pszer\u0171 alkalmaz\u00e1sokat k\u00f6r\u00f6zt\u00fcnk le mint a BudapestGO, MySpar, Vinted vagy az aznap indul\u00f3 SkyShowtime aki el\u00e9g er\u0151s kamp\u00e1nnyal l\u00e9pett a magyar piacra.<br \/>This is of course a credit to the community, but it was a pleasure to be part of it and to serve this very large interest.<br \/>On the Play and App Store, users rated the apps 5\u2605 out of thousands of reviews.<\/p>                        <\/div>\n                    <\/div>\n                            <\/div>\n        <\/div>\n    \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>The idea for the project came to Jani and Pisti when we met at startup events in Debrecen 10 years ago. They already had VR [...]<\/p>","protected":false},"author":4,"featured_media":1479,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"_links":{"self":[{"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/posts\/1389"}],"collection":[{"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/comments?post=1389"}],"version-history":[{"count":85,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/posts\/1389\/revisions"}],"predecessor-version":[{"id":4105,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/posts\/1389\/revisions\/4105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/media\/1479"}],"wp:attachment":[{"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/categories?post=1389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeyard.tech\/en\/wp-json\/wp\/v2\/tags?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}