{
    "id": 2595,
    "date": "2021-08-20T15:33:26",
    "date_gmt": "2021-08-20T15:33:26",
    "guid": {
        "rendered": "http:\/\/100.28.163.57\/?p=2595"
    },
    "modified": "2024-04-01T09:14:50",
    "modified_gmt": "2024-04-01T09:14:50",
    "slug": "a-working-responsive-app-built-in-a-few-hours-from-a-prototype-to-mvp-release",
    "status": "publish",
    "type": "post",
    "link": "https:\/\/sprinterra.com.ua\/en\/a-working-responsive-app-built-in-a-few-hours-from-a-prototype-to-mvp-release\/",
    "title": {
        "rendered": "A Working Responsive App Built in a Few Hours from a Prototype to MVP Release"
    },
    "content": {
        "rendered": "<p>The most exciting thing about the <a href=\"http:\/\/100.28.163.57\/blog\/the-future-of-no-code-platforms-2-selection\/\">low-code platforms<\/a> is the fact that\u00a0 you can develop an application very fast and have your first release in just a few hours.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Euro 2020\/2021 Cup<\/h2>\r\n\r\n\r\n\r\n<p>If you have not heard about <a href=\"http:\/\/100.28.163.57\/team\/\">Sprinterra\u2019s team<\/a> yet, it is a good moment to mention that most of our team members are from Ukraine. We love development and love soccer, especially the fact that the Ukrainian team reached the quarter-final during the last European championship. It\u2019s a huge achievement for the Ukrainian nation and we were truly inspired to build an app reflecting team standings and results at the championship.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">The Quick Prototype Solution<\/h3>\r\n\r\n\r\n\r\n<p>We drew a picture on the board at the office to see the Euro 2020 brackets, results and to bid on the future games. But for us as for the software development team it was not a solution, but only a prototype.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/prototype.jpg\" alt=\"Prototype\" \/><\/figure>\r\n\r\n\r\n\r\n<p>A working prototype made using a board and a few color pens. The next step was implementation and sharing it with the rest of the World.\u00a0<\/p>\r\n\r\n\r\n\r\n<p>The Euro cup was running its course, so we needed rapid development and the <a href=\"https:\/\/www.outsystems.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">OutSystems platform<\/a> was the right choice to develop a modern responsive application as quickly as possible.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Our Requirements for the Solution<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>Team management.<\/li>\r\n<li>Game management.<\/li>\r\n<li>User management.<\/li>\r\n<li>Three user levels:\r\n<ul class=\"sub-lists\" style=\"list-style: lower-alpha !importante;\">\r\n<li>Administrator (able to create managers).<\/li>\r\n<li>Manager (able to manage teams, scores).<\/li>\r\n<li>Public user (able to see the results).<\/li>\r\n<\/ul>\r\n<\/li>\r\n<li>Last but not least \u2014 responsive web application for mobile, tablets, laptops and desktops.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Application Development Using OutSystems<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Prepare Data Model\/Architecture<\/h3>\r\n\r\n\r\n\r\n<p>The core of all modern applications is the data. Because the application should have been built quickly we\u2019ve added only data required for MVP: teams, matches and users. Game status was added as a static entity (enumeration if you will).<\/p>\r\n\r\n\r\n\r\n<p>There is a very powerful tool to draw Entity diagrams in OutSystems. It helps to manage data modeling in application and allows diagram sharing with the team. Diagrams are easy to read and understand, with visible relations between data entities.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-Database.png\" alt=\"Euro Database\" \/><\/figure>\r\n\r\n\r\n\r\n<p>I believe <a href=\"http:\/\/100.28.163.57\/data-management\/\">data management<\/a> is the most important part of software development. And I should\u00a0 confess, sometimes I utilize OutSystems entity diagrams for the projects which are worked on using different sets of technologies, because this tool is very well made and easy to use.\u00a0<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Develop Functions to Expose Data to Modules<\/h3>\r\n\r\n\r\n\r\n<p>\u00a0It is a good practice to separate functionality by modules and logic from the security and maintenance points of view. We do not need to expose all data functions to the modules, the requirement is to expose GET, POST and PUT functions for the data.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-ServerActions.png\" alt=\"Euro ServerActions\" \/><\/figure>\r\n\r\n\r\n\r\n<p>For this low-code application we have only three methods to share with other modules for creating or updating matches, updating games status. All GET functions are created with the aggregates in OutSystems this time. All Users functions are created using OutSystems Service Center including creating roles, users and user groups, as you can see on the screenshot below.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-Users.png\" alt=\"Euro Users\" \/><\/figure>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Create Components (Widgets) in OutSystems<\/h3>\r\n\r\n\r\n\r\n<p>When you create a User Interface it is important to decide which components must be reusable in order to save your team time and decrease cost of development, maintenance and time to market. In Euro 2020 bracket online application four reusable components were defined (see the screenshot below):<br \/>1.\u00a0\u00a0\u00a0Flag<br \/>2.\u00a0\u00a0\u00a0Team<br \/>3.\u00a0\u00a0\u00a0Match<br \/>4.\u00a0\u00a0\u00a0SprinterraMenu<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-Widgets.png\" alt=\"Euro Widgets\" \/><\/figure>\r\n\r\n\r\n\r\n<p>The match component has the information about Home and Guest teams, score, time and location of the game. The match widget is using the team widget and the team widget is using the flag widget.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-Match-widget.png\" alt=\"Euro Match widget\" \/><\/figure>\r\n\r\n\r\n\r\n<p>These are all the custom components we need to use in our application. We used standard components of OutSystems &#8211;\u00a0 Table, Form, Button and other, for the data management modules.<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Management Module<\/h3>\r\n\r\n\r\n\r\n<p>A module with the matches is available only for users with the Manager role.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Manage-Matches.png\" alt=\"Manage Matches\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Manager is able to add a new game or edit existing.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Manage-Match.png\" alt=\"Manage Match\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">MVP Solution as a Responsive Single Page Application<\/h2>\r\n\r\n\r\n\r\n<p>Within a few hours of development utilizing the OutSystems platform we\u2019ve created a fully operational and responsive web application that will work on almost any device, including desktops, laptops and tablets.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-desktop.jpg\" alt=\"Euro desktop\" \/><\/figure>\r\n\r\n\r\n\r\n<p>Mobile version with the slider of the brackets.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\" style=\"margin: 10px 0;\"><img decoding=\"async\" src=\"http:\/\/100.28.163.57\/wp-content\/uploads\/2021\/08\/Euro-mobile-all.jpg\" alt=\"Euro mobile all\" \/><\/figure>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Pros and Cons of Our Low-code Solution<\/h2>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Pros<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\" style=\"margin-bottom: 0;\">\r\n<li>Rapid development.\u00a0<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>It took us just a few hours to deliver. It might take up to a couple of days for those who are just starting using OutSystems, still a very impressive timeline.\u00a0<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\" style=\"margin-bottom: 0;\">\r\n<li>Fully responsive web application.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>The base themes in OutSystems UI are (in most cases) fully responsive and are working well on mobile, tablet, laptop and desktop screens.\u00a0<\/p>\r\n\r\n\r\n\r\n<h3 class=\"wp-block-heading\">Cons<\/h3>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\" style=\"margin-bottom: 0;\">\r\n<li>SEO for the single page applications does not work as expected.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>If you wish to share your web application on social media you should understand that it will have poor sharing information due to the Single Page Application architecture.<\/p>\r\n\r\n\r\n\r\n<p>Forge module <a href=\"https:\/\/www.outsystems.com\/forge\/component-overview\/9576\/seo-utils-on-steroids\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">SEO Utils on steroids<\/a> could be used to add meta information to your application for the browser, but not for the search engines.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\" style=\"margin-bottom: 0;\">\r\n<li>Vendor lock-in<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p>The application requires the <a href=\"https:\/\/www.outsystems.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">OutSystems<\/a> platform. There are two options to set up an application in the cloud or on-premise, but there is no way to run it without the OutSystems ecosystem.<\/p>\r\n\r\n\r\n\r\n<p>You should really consider all limitations of the OutSystems platform before developing software products that will be used for the years. Of course, the platform is flexible and you can build your own modules and use modules from other developers, but in some cases classic software development might be more cost-effective.<\/p>\r\n\r\n\r\n\r\n<h2 class=\"wp-block-heading\">Stay with Sprinterra<\/h2>\r\n\r\n\r\n\r\n<p>If you think <a href=\"https:\/\/www.outsystems.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">OutSystems<\/a> is a right choice for your organization, due to the rapid development and low cost associated with this process, and have an idea\u00a0 about creating an application using OutSystems, you can fill in a request for proposal on our website <a href=\"http:\/\/100.28.163.57\/request-a-proposal-v2\/\">RFP for Healthcare<\/a> or <a href=\"http:\/\/100.28.163.57\/request-a-proposal-v2\/\">RFP for Fintech<\/a>. Our proposals are free of charge and include not only project timeline and cost, but proposed architecture, design and other details. Please do not hesitate to contact us if you have any questions.<\/p>\r\n\r\n\r\n\r\n<p><br \/>If you want to know more about low-code platforms subscribe to our news and connect with us on social networks. If you think this article might be interesting for your followers, please feel free to share it, it will allow us to collect more feedback and improve our blog.<\/p>\r\n\r\n<p><a class=\"button\" href=\"https:\/\/forms.monday.com\/forms\/e1e8b492002d4e236723126c0fe5aa63?r=use1\" target=\"_blank\" rel=\"noopener\">Subscribe to Our News<\/a><\/p>",
        "protected": false
    },
    "excerpt": {
        "rendered": "<p>The most exciting thing about the low-code platforms is the fact that\u00a0 you can develop an application very fast and have your first release in just a few hours. Euro 2020\/2021 Cup If you have not heard about Sprinterra\u2019s team yet, it is a good moment to mention that most of our team members are [&hellip;]<\/p>",
        "protected": false
    },
    "author": 3,
    "featured_media": 2596,
    "comment_status": "open",
    "ping_status": "open",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": {
        "_acf_changed": false,
        "footnotes": ""
    },
    "categories": [
        234
    ],
    "tags": [
        145,
        153,
        136,
        125,
        83,
        84,
        77
    ],
    "class_list": [
        "post-2595",
        "post",
        "type-post",
        "status-publish",
        "format-standard",
        "has-post-thumbnail",
        "hentry",
        "category-all",
        "tag-low-code-platforms",
        "tag-mobile-applications",
        "tag-outsystems",
        "tag-software-application",
        "tag-software-development",
        "tag-software-development-company",
        "tag-sprinterra"
    ],
    "acf": [],
    "_links": {
        "self": [
            {
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/posts\/2595",
                "targetHints": {
                    "allow": [
                        "GET"
                    ]
                }
            }
        ],
        "collection": [
            {
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/posts"
            }
        ],
        "about": [
            {
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/types\/post"
            }
        ],
        "author": [
            {
                "embeddable": true,
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/users\/3"
            }
        ],
        "replies": [
            {
                "embeddable": true,
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/comments?post=2595"
            }
        ],
        "version-history": [
            {
                "count": 0,
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/posts\/2595\/revisions"
            }
        ],
        "wp:featuredmedia": [
            {
                "embeddable": true,
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/media\/2596"
            }
        ],
        "wp:attachment": [
            {
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/media?parent=2595"
            }
        ],
        "wp:term": [
            {
                "taxonomy": "category",
                "embeddable": true,
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/categories?post=2595"
            },
            {
                "taxonomy": "post_tag",
                "embeddable": true,
                "href": "https:\/\/sprinterra.com.ua\/en\/wp-json\/wp\/v2\/tags?post=2595"
            }
        ],
        "curies": [
            {
                "name": "wp",
                "href": "https:\/\/api.w.org\/{rel}",
                "templated": true
            }
        ]
    }
}