Ios App for Bouldering Gyms

Masaryk University Faculty of Informatics

iOS app for bouldering gyms

Bachelor’s Thesis

Tomáš Bouma

Brno, Spring 2020

Masaryk University Faculty of Informatics

iOS app for bouldering gyms

Bachelor’s Thesis

Tomáš Bouma

Brno, Spring 2020

This is where a copy of the official signed thesis assignment and a copy ofthe Statement of an Author is located in the printed version of the document.

Declaration

Hereby I declare that this paper is my original authorial work, which I have worked out on my own. All sources, references, and literature used or excerpted during elaboration of this work are properly cited and listed in complete reference to the due source.

Tomáš Bouma

Advisor: doc. Ing. RNDr. Barbora Bühnová, Ph.D. Bc. Adam Konečný

Acknowledgements

I Would like to thank both my advisors, doc. Ing. RNDr. Barbora Bühnová, Ph.D, and Bc. Adam Konečný as well as the whole Dactyl Group s.r.o. company for their invaluable help while writing the thesis and development of the application. Furthermore, I would not be able to do this without the support of my family and the climbing community.

iii Abstract

Smartphones and modern technologies became parts of ours day to day lives. Consequently, every successful business needs a modern application or web site, which will provide customers with a better experience. This thesis provides an implementation of such a solution for bouldering gyms. Using a QR-code scanner integrated into iPhones, it allows everyone to track their results easily, compare them with others, and find new climbing friends. Owners of the gyms cansee in-depth statistics as well as the problems currently occurring about their properties and have all the necessary data stored in a database. It is all accompanied by an intuitive UI, and UX arranged to satisfy even the pickiest users.

iv Keywords iOS, Swift, iPhone, QR-Code, boulder, climbingg, app, UI, UX

Contents

1 Introduction 1 1.1 Thesis goal ...... 1 1.2 Structure of the thesis ...... 1

2 Bouldering 3 2.1 Hangar Climbing playground by Adam Ondra ...... 3

3 Used software, libraries, and design patterns 5 3.1 iOS ...... 5 3.1.1 Apple ID ...... 6 3.2 Swift ...... 7 3.2.1 CocoaPods ...... 8 3.2.2 SnapKit ...... 9 3.2.3 PromiseKit ...... 10 3.2.4 R.swift ...... 11 3.3 XCode ...... 11 3.4 Firebase Realtime Database ...... 12 3.5 Model View Controller pattern ...... 13

4 Development process 15 4.1 Coming up with the idea ...... 15 4.1.1 Similar Apps ...... 15 4.2 Functional and non-functional requirements ...... 16 4.3 Prototyping ...... 17 4.4 UI and UX design ...... 19 4.5 Back-end ...... 20 4.5.1 Security rules ...... 22 4.6 Implementation ...... 25 4.6.1 Building UI ...... 26 4.6.2 Firebase integration ...... 29 4.6.3 Applying MVC pattern ...... 30 4.6.4 QR Code scanning ...... 30 4.6.5 Communication between climbers ...... 30 4.7 Transformation of the data ...... 31 4.8 Testing ...... 32 4.9 Impact of COVID-19 ...... 32

vii 5 Conclusion 35

Bibliography 37

viii List of Figures

3.1 The lifecycle of an iOS app [3] 6 3.2 The lifecycle of a view controller in an iOS enviroment [4] 7 3.3 Rating of XCode on AppStore [8] 12 3.4 Model View Controller pattern [10] 14 4.1 The rating of Vertical-Life: Outdoor and Indoor Climbing [11] 16 4.2 Difference between a wireframe login page (left) andthe final look (right) 18 4.3 Icon representing boulders throughout the application with grade and color showed 19 4.4 Icon for indicating the evocation of QR-code scanner (left) and table cell for representing boulder (right) 19 4.5 Final screen showing a menu (left) and the selected item fetching the info from the website (right) 20 4.6 Model of a SQL database used for this app 21 4.7 Screen showing current rankings of the climbers always for certain category. MVC pattern was used 25 4.8 Screen showing an overview of climbers profile 26 4.9 Screen showing settings 27 4.10 Screen showing a single boulder (left) and saving ascent of boulder after the successful climb (right) 28 4.11 Screen showing all boulders currently available for climbing with a possibility for sorting and filtering 29

List of Listings

3.1 CocoaPod example 8 3.2 SnapKit example 9 3.3 PromiseKit pseudocode example 10 3.4 PromiseKit example 10 3.5 R.swift example 11 4.1 NoSQL Database example 21 4.2 Security rules example 22

1 Introduction

In today’s society, mobile phones became inevitable for a day to day use. They are used all the time, and in developed countries, about 75% of all people own smartphones [1]. People say that they are utilized too much, but it is clear that they help to save lives in areas such as healthcare and are making our lives easier in many ways, for example, tracking progress in individual sports. Mobile phones bring new opportunities for the development of applications.

1.1 Thesis goal

The main goal of the thesis is to develop an iOS application for wide adaptation in bouldering gyms. During the development, the solution was consulted with the end-users to suit all their needs. The main functionality includes a QR Code scanner, an overview of the gym for both gym owners and climbers in the gym, provided with intuitive user interface(UI) and user experience(UX) design.

1.2 Structure of the thesis

The text is structured into Introduction, after that an explanation of bouldering, and a short presentation of the gym who will be using it, its current solution, and the main advantages of using this product. The third chapter explains all the technologies and libraries used. In the fourth chapter, the whole development process is introduced from the initial idea through communication with the client and graphic design to the implementation process. After that, the process of transforming the data from Google spreadsheet to database is explained, and the impact of world pandemic COVID-19. In the last chapter, the conclusion is included with the description of the current state of the application.

2 Bouldering

Bouldering is a type of climbing performed on small rock formations or indoor artificial walls not higher than 4-5 meters. Climbers donot need to use ropes or any other equipment besides climbing shoes and a chalk bag. If they fall, they land on a mattress. Lately, a lot of indoor bouldering walls are being built, and this sport is becoming more and more popular. The fact that contributed a lot to the bouldering’s popularity is, it will be part of the summer Olympics games for the first time. One route on a wall is called a boulder or a boulder problem. The boulder problems range from very easy to extreme, which only a few people in the world can climb. A specific grading system was developed, and although there are different types in Europe, the most widely used is called “Font grading“, where the most straightforward problem is grade 3. With increasing difficulty, the numbers increase. Starting from 5, each grade has its subgrade marked with capital letters A, B, C. An additional + sign may be added to show it is a little more complicated but not hard enough for the higher grade. The scale goes from 3, 4, 5A, 5B, 5C, 6A to 8C+, which is currently the hardest grade climbed. Routesetters build indoor boulders; each one has a specific color, type of holds, and a particular style. The styles include overhangs, slabs, or jumping from one hold to another, called dyno.

2.1 Hangar Climbing playground by Adam Ondra

Hangar Climbing playground by Adam Ondra is the biggest and most modern bouldering wall in the Czech Republic, located in Brno, which will use this application in order to improve their customer service. Every month they put up 30 new boulders and competition is held through-out, it is called a Hangar-challenge. The gym has a hard time keeping track of the results as they keep them in Google spreadsheets. Users find it confusing as well, and anyone of the users can delete all the data. Information about all the boulders is on paper, and the papers can get lost or destroyed easily. Climbers now have minimal options of keeping track of which boulders they climbed and how many attempts it took them. Also, they cannot see if

3 2. Bouldering there are new boulders or their favorite ones have been put down. All these problems will be fixed once the gym opens after the COVID-19 lockdown and starts using the application.

4 3 Used software, libraries, and design patterns

This chapter is dedicated to introducing all the technologies that have been used. Software from Apple Inc. and third-party libraries are included. It provides a brief description with simple examples.

3.1 iOS

iOS (formerly iPhone OS) is a mobile operating system created and developed exclusively by Apple Inc. for its hardware. It is the operating system that presently powers all of the company’s mobile devices, including the iPhone and iPod Touch; it also powered the iPad before the introduction of iPadOS in 2019. It is the second most popular mobile operating system globally after Android [2]. It was introduced in 2007 for iPhones and in 2010 for iPads. Because the iOS phones are more expensive than Android phones, it is more prevalent in more developed countries, mainly in the USA. Its interface is based upon direct interaction with the user using touch gestures, many of them being multi-touch. Tap, pinch, and swipe being the most widely used. A new version is released annually, the current one being iOS 13. A big emphasis is put on user experience, and iOS is known for winning awards in this field. Human Interface Guidelines is a list of rules written by Apple which developers must follow during UI/UX design. Developing software for iOS has both advantages and disadvantages. The positive things are only 6 types of screens, which makes frontend development easy, and only the 3 latest versions of iOS need to be supported because Apple significantly slows down the devices with older iOS; therefore, the users are forced to upgrade. The cons include a more significant investment at the beginning, as it canbe developed only on computers running macOS and the only IDE 1 allowing testing and running is called XCode. Each app has its life cycle and calls specific methods while changing its state that can be overridden. Therefore, developers can easily tailor

1. An integrated development environment is a software application that provides comprehensive facilities to computer programmers for software development.

5 3. Used software, libraries, and design patterns the app to suit their needs. An app has five primary states: Not running, Inactive, Active, Background, and Suspended.

Figure 3.1: The lifecycle of an iOS app [3]

The apps created for iOS are composed of so-called View Controllers, each representing one screen and containing subviews representing buttons, images, and other UI elements. As well as the app, also View Controllers have their life cycles, which are shown in figure 3.2.

3.1.1 Apple ID When using Apple devices or Apple services, Apple requires an “Ap- ple ID“ to make everything work. An Apple ID is an Apple account that’s used for everything from logging to iCloud to making purchases and getting support to track lost devices with Find My.2

2. Find My is an app and service provided by Apple Inc. that enables users to track the locations of their devices from Apple.

6 3. Used software, libraries, and design patterns

Figure 3.2: The lifecycle of a view controller in an iOS enviroment [4]

An Apple ID authenticates users identity and is required whenever users log into an Apple device to keep everything synced up [5]. It is a pleasant way to sign in into apps and works similarly to other services. One example is “Sign in with Google“. Apple developed a special button that must be used in every app providing this functionality. The biggest plus for this technology is that it allows users to securely store their data as everything is developed by Apple and not by third-party developers.

3.2 Swift

Swift is a powerful and intuitive programming language for macOS, iOS, watchOS, tvOS, and beyond. Writing Swift code is interactive and fun, the syntax is concise yet expressive, and Swift includes modern features developers love. Swift code is safe by design, currently in version 5.1 [6]. To name a few benefits, developers do not need to write semicolons, and it fixes the problem of null-pointer exception by introducing non-nullable variables. It is based on Objective-C, which was used beforehand to develop products for Apple. Meanwhile, being

7 3. Used software, libraries, and design patterns younger than its parent, it is kept open-source and provides so-called "playgrounds" where one can test parts of their code and see if it is behaving correctly. It is also great for learning purposes: it is statically typed and is relying a lot on the libraries provided by Apple. The two main ones are UIKit, including all UI elements from which the graphic interface is built and does much of the work for programmers. “Foundation“ provides all the necessary data types and algorithms so the developers can focus just on putting parts of the code together, which speeds up the process of coding greatly. There are two quite significant disadvantages to using Swift. As it is fast-evolving, the maintainers can not keep up with the documentation. The other is that not all the versions are backward compatible, so if the user decides to move to a newer version, a big chunk of codebase needs to be changed. A lot of third party libraries were used during the development process.

3.2.1 CocoaPods CocoaPods is a dependency manager used by almost every project developed for iOS and supports both Objective-C and Swift. It is operated and run from the command line and does not just copy the libraries but installs them. Therefore, programmers can easily make their changes. In the example below, we can see the simple syntax containing just a few keywords. After the addition of another library into the file, all is needed to do is type “pod install“ into the command line, and it can be used.

Listing 3.1: CocoaPod example

#platform specification platform:ios, ’9.0’

#target specification target’Hangar by Adam Ondra’ do

#we want to use dynamic frameworks use_frameworks!

8 3. Used software, libraries, and design patterns

# Pods for Hangar by Adam Ondra

pod’Firebase’ pod’SwiftLint’ pod’R.swift’ pod’SnapKit’, ’~> 5.0.0’ pod’CodableFirebase’ pod"PromiseKit", "~> 6.8" end

3.2.2 SnapKit SnapKit is a third-party DSL3 to make Auto Layout4 easy and compatible both on iOS and macOS. Being simple, expressive, and allowing easy chaining of code makes building constraints straightforward while ensuring they are easy to read and understand. Typesafe by design and provided under a flexible MIT license 5 makes it the go-to option amongst developers. Many companies favor this library over solutions provided by Apple. In listing 3.2 is a code snippet showing how easy it is to create a button with a width of 50px and a height of 50px meanwhile centering in its parent. Listing 3.2: SnapKit example

let button= UIButton()

view.addSubview(button)

button.snp.makeConstraints{ make in make.size.equalTo(50)

3. A DSL, short for Domain Specific Language, is a kind of an application programming interface(API), providing a simple syntax tailored to work with a specific domain. 4. Technology used in iOS for layout purposes. 5. The MIT License is a permissive free software license originating at the Mas- sachusetts Institute of Technology, putting only minimal restrictions on re-use, and it can be re-licensed.

9 3. Used software, libraries, and design patterns

make.center.equalToSuperview() }

3.2.3 PromiseKit Almost every app requires multithreading and working with backend services. In Apple, they focus on how developers work with the threads, and although they provide reasonable solutions, the one from PromiseKit is my favorite one. It simplifies the code from

Listing 3.3: PromiseKit pseudocode example -Y managesX. - TellY to getX. -Y notifies its delegate whenX is available. to

- WhenX is available, doY. The library is based on promises. They work just like promises in the real world. A typical design pattern is shown in listing 3.4.

Listing 3.4: PromiseKit example firstly{ fetchDataFromServer() }.then{ parseTheData() }.done{ updateUI() }.ensure{ // something that should happen whatever the outcome logOutcome() }.catch{ handle(error) }

10 3. Used software, libraries, and design patterns

3.2.4 R.swift Using resources like images or fonts makes it hard to maintain them in different places. Although for simple types like Int or Double constants are sufficient, this library comes to help with more complex types.It makes the resources fully typed, compile-time checked (meaning no incorrect strings that make runtime crashes), and autocompleted, which allows developers to use even long names easily. According to my consultant Adam Konečný it is far better than the competition, and the only disadvantage is that if new resources are added, for the library to know them, the project needs to be built first.

Listing 3.5: R.swift example // WithoutR.swift

let icon= UIImage(named:"settings-icon") let font= UIFont(name:"San Francisco", size: 42)

// UsingR.swift

let icon=R.image.settingsIcon() let font=R.font.sanFrancisco(size: 42)

3.3 XCode

XCode is an application that developers use to build apps for Apple’s various platforms such as iPhone, iPad, Macs, AppleTV, and Apple Watch, currently in version 11 [7]. It is the only IDE where programmers can write code for devices from Apple. The tools included to speed up the process for users are auto-completion tailored to Swift, simulators to test the apps without the device, debugging options, and ways to measure memory usage and speed of the app. Playgrounds for testing just single lines of code are included as well. Although some advantages of this product it is considered to be the biggest weakness of developing Apple software. It crashes often, slows down significantly once more lines of code are present. With the usage of storyboards,

11 3. Used software, libraries, and design patterns it introduces even more bugs, and they are almost impossible to use when working in a team.

Figure 3.3: Rating of XCode on AppStore [8]

3.4 Firebase Realtime Database

It is a cloud-hosted NoSQL-based database. It provides syncing across connected devices and is available when there is no network con- nectivity through a local cache. It is an event-driven database that works very differently from traditional SQL databases. There isno server-side code and database access tiers [9]. Google runs all the code. This brings many advantages but unfortunately has a couple of disadvantages. The advantages are: ∙ Completely free until a certain number of users is reached, and after that, it means the app is being used widely. Therefore, payment for the services can be afforded ∙ Providing many authentication options for developers meanwhile keeping it simple to implement. Phone, e-mail/Password, Apple ID an Facebook to name a few. ∙ Provides interactive console where data can be easily added and removed, statistics of usage seen, and clear logs if any crashes were to happen ∙ Being cross-platform, availability for Android, Unity, web services or others can be easily added. ∙ Testable without any difficulties where the tests are written in an IDE and can be run either from there or directly from the

12 3. Used software, libraries, and design patterns

Firebase control

There are two main disadvantages of using this service, and both are because all the data is stored as one large JSON file. The first one is that it does not provide any query options, and all of this needs to be done by users on their machines. This brings problems, particularly on smartphones, where it can be very demanding on battery, CPU, and RAM. The second one is the format NoSQL which makes it harder to design, some data needs to be redundant, and Firebase does not provide options to keep them aligned. Therefore the programmers have to do it themselves

3.5 Model View Controller pattern

Model–View–Controller (MVC) is a software architecture or framework that splits a software application into three design components.

∙ The model component is responsible for managing data. This may include inter- facing with any persistent data storage and using memory-based data structures to store data during execution. The model component implements logic to allow the application to create, read, update, and delete (CRUD) the application data. ∙ The view component is responsible for providing an interface for user interactions, assuming the software requires a user interface. ∙ The controller component is responsible for the domain logic, also called business logic, associated with the software. This includes having the controller communicate with the view and model components. In essence, the controller component includes code that glues these three components together [10].

The clear benefits of this are that the user interface can be separated from the data, and therefore if one of them changes, the other stays untouched. In development for iOS, the model and view components are often put together, creating so-called “View Controllers“, which represents one screen. More details about the MVC pattern can be found in figure 3.5

13 3. Used software, libraries, and design patterns

Figure 3.4: Model View Controller pattern [10]

14 4 Development process

After explaining all the used technologies in order to make this application, the process of development will be explained in detail. This chapter has several sections, each explaining a certain part of the development and all the details that have been taken into consideration during development.

4.1 Coming up with the idea

The initial idea for this application arose during thinking about what is missing on the market. It also needed to be something that I had a good understanding of. An idea arose that although bouldering is becoming more and more popular, it still did not hit the mainstream, and it is missing out a lot in new trends. The goal was to develop an app for bouldering gym, including tailored functionality for climbers and gym owners, including QR-code scanner and intuitive UI/UX design. After an examination of the market, no similar solutions were found. Then thinking even further about the gyms in Brno and none of them having decent IT infrastructure, it was evaluated as a great opportunity. Investigating the available libraries and software to develop such an application showed that it will be possible but will need to be tailored to suit the needs of both climbers and owners of the gyms. The first possible client for this app was chosen Hangar Climbing Playground by Adam Ondra. As they have the most customers in Brno are fans of new technologies and active on Facebook and Instagram. After contacting them, functional and non-functional requirements were created.

4.1.1 Similar Apps The most similar app to the one in the thesis is called “Vertical-Life: Outdoor and Indoor Climbing“. This app suffers from many aspects. At first, it tries to provide things both for indoor and outdoor climbing and does not do good enough job in either of those. According to the users comments on Google Play Store the UI is unintuitive and they are getting lost often in the app. It also provides an option for climbing

15 4. Development process training, which is another big field that would need its own app. From reading the customer reviews, they also complain that there is no option for offline usage, and the data are not available even ifthey were downloaded beforehand. Vertical Life App does not even allow to take a screenshot to save the data for offline usage. I tried touse the app for two weeks, and gained much useful info about what the application should, and should not have.

Figure 4.1: The rating of Vertical-Life: Outdoor and Indoor Climbing [11]

4.2 Functional and non-functional requirements

Functional requirements of the app:

∙ Split the app into two parts. One for climbers and the other one for owners of the gyms where admin tasks were possible. ∙ All the main touchable elements will need to be bigger in order to use it with dirty and sweaty hands. The app is used during climbing, climbers use chalk, and lactated acid is produced in their forearms resulting in shaking of arms. ∙ Provide an option to scan the boulders on the wall and transfer them to a smartphone. ∙ Include star rating for each of the boulders to know which types of boulders and routesetters the climbers like the most. ∙ In the owner’s dashboard, provide detailed statistics about all the boulders, favorite types, colors, grades, and how long climbers are trying their boulders. ∙ Incorporate a TODO list to keep track of the problems on the wall and give other employees tasks.

16 4. Development process

∙ In the climber section, climbers need to see all the boulders and go into detail of each boulder in order to keep track of a number of attempts they made and see all the info. ∙ The boulders need to be accessible both with and without scanning the QR-code. ∙ Provide a personalized experience meaning each climber must have their profile and be able to contact others. ∙ Show a table leaderboards of climbers. ∙ Provide a menu with information about the gym, contact, information, rules, prices. ∙ Have an intuitive UI.

Non-functional requirements for the app:

∙ The app must be compatible with at least iOS 10. ∙ The programming language used will be Swift. ∙ Firebase will be used as a database and for tracking and logging purposes. ∙ PromiseKit will be responsible for fetching the results from the database. ∙ UIKit, SnapKit, and R.swift are needed in order to develop the front-end.

4.3 Prototyping

After having written down the wanted functional requirements of the application, the prototyping and creating wireframes took place. It was done in software called Balsamiq Wireframes. Having experience with the process from the school subject, I knew it is just a quick sketch of the app. After taking inspiration from successful apps on the AppStore initial layout of the app was created. The UI was to consist of two tab bars. Initial one for the climbers which anyone can access. The other one for the staff where the users would be able to go only with permission. Meanwhile, some screens were straightforward to design, some others with more information, were quite challenging, and the wireframing explored the problems before it was stumbled on during coding. Also, it was discussed again

17 4. Development process with the client what precise information will be shown about specific boulders and climbers. The only significant difference between the prototype and finalUI besides colors was the log in screen, which initially was thought that only nick would be enough. After thinking it over more, a onboarding screen with log in provided through Apple ID was provided.

Figure 4.2: Difference between a wireframe login page (left) andthe final look (right)

18 4. Development process 4.4 UI and UX design

When wireframing was finished, it was time to bring the frames tolife and make as much in detail graphics as possible. It was also needed to provide intuitive UX. It was all done in graphics software called Figma. At first, small components were created from which later the UIwould be built. A great idea came from my colleague who suggested to use blobs for them to represent climbing holds. Insides these blobs, the text had to be centered. It proved rather difficult as if the text was in the center, it would be overflowing from the sides of the image. Also, it had to be taken into consideration that the length of the text would be from 1 to 3 characters.

Figure 4.3: Icon representing boulders throughout the application with grade and color showed

Figure 4.4: Icon for indicating the evocation of QR-code scanner (left) and table cell for representing boulder (right)

There were a couple of challenges that needed to be solved. The biggest one was to align the colors as the gym had its colors that needed to be used. Also, each table cell needed to be of its color, representing the boulder’s color. In the end, it was decided to work with mainly black and white colors to support all of the ones mentioned above. After considering all these facts, all the screens were designed. Another challenge not anticipated was to find all the suitable icons. Many of the icons were taken from either a well-known library called Material Design or Apple’s assets stored in an app called SF Symbols.

19 4. Development process

Figure 4.5: Final screen showing a menu (left) and the selected item fetching the info from the website (right)

4.5 Back-end

Initially, while thinking about the backend, it was thought that it would have its API implemented. After a more detailed investigation, it was decided that it may not be necessary just for this application, and some other service could be used. Many companies are using Firebase Realtime Database, and it was also the perfect option for this

20 4. Development process project. The first step was to design the database for when it willbe implemented. This was done in the Visual Paradigm.

Figure 4.6: Model of a SQL database used for this app

However, this was for a SQL database, and therefore the data needed to be transformed into NoSQL format, which is used by Fire- base. The biggest challenge was to transform the many to many re- lationships. There are several ways of how the relationship can be done. The most straight forward one is using in one object an array of embedded objects of the other object. This approach is very costly for writing to the database, which is done often. The only scalable design for unbounded many to many relationship objects is to use a connective object in between. This approach was chosen as there is a potential for big amounts of objects in the database. Listing 4.1: NoSQL Database example

21 4. Development process

"Database"{ "Boulders":{ "boulderId1":{ "grade": "7A", ... } }, "Climbers":{ "climberId1":{ "nick":"tdtom167", ... } }, "Climbs":{ "climbsId0":{ "climber":"climberId1", "boulder":"boulderId1" ... }, }, "Problems":{ "problemId":{ "climber":"climberID", ... } } }

4.5.1 Security rules

After the design was done, there was one remaining step for the database to work correctly, and that was security rules which needed to be written. These enforce that only certain users can write or read from the database. Furthermore, they validate the data if the right format is used. Below is a chunk of code used for validation of the data.

22 4. Development process

Listing 4.2: Security rules example {"rules":{ // anyone can read any data ".read": true, ".write": false

"Boulders":{ //only staff members can edit the boulders ".write":{ "root.child(’Climbers\$climber_id\ staffMember’).val() == true" } // new boulder must have given parameters and no other ".validate":"newData.hasChildren([’ dateSet’,’description’,’grade’,’ nOfPoints’,’name’,’qrcode’,’ setter’,’start’,’top’,’color’]) && newData.child(’dateSet’).isNumber() && newData.child(’description’). isString()" ... } //a boulder can have given params and no others "name":{".validate": true}, "color":{".validate": true}, ... "\$other":{".validate": false}

} ... }

23 4. Development process

It is allowed for everyone to read any data we are storing because we are not storing any sensitive data, and the passwords are stored separately. The consent for storing the data is acquired during the registration process. However, only certain users can write to the database in certain parts. For example, the boulders can only be edited by the members of the staff team and no-one else. Another advantage of the Firebase is the syntax for these rules. It looks almost like a written text and can be read easily by even people knowing almost nothing about IT.

24 4. Development process 4.6 Implementation

The implementation process of the thesis was the most significant part of the work done and took the longest time. Many challenges have occurred, meanwhile a lot of them being major ones. For architecture, Model-View-Controller(MVC) pattern was used. Having ready the database, graphics, and design pattern, there were visible specific components that had to be developed first.

Figure 4.7: Screen showing current rankings of the climbers always for certain category. MVC pattern was used

25 4. Development process

4.6.1 Building UI The first problem occurred when it had to be decided if to build theUI from code or from Storyboards provided by Apple and encouraged to use in XCode. Although these are used in beginner tutorials and can be handy in small applications for applications using more advanced components like tab bars, the UI is built from code. Therefore the library SnapKit was used. It is also more clearly visible what constraints are used and debugged more easily. Without the usage of storyboards also, the options to use Segues was no longer there. A segue is used to transfer from one screen to another or present different view meanwhile sending info. This had tobere- placed by the smart usage of delegates and initializers of the view controllers.

Figure 4.8: Screen showing an overview of climbers profile

26 4. Development process

At first, the table cells for each table were developed. Meanwhile, Apple provides a perfect solution for using tables as a whole object implementing specific cells proved to be difficult as the biggest challenge was to space them from each other and the edges of the screen. Next, a particular class was created for buttons and to represent the shape of climbing hold. The stars for showing rating of boulders are programmed with the help of CosmosView that proved very helpful with the spacing, coloring, and adding touch events. Surprisingly there could not be found any solution either from Apple or third-party developers for working with text fields even though Apple has written a lot about it in their Human Interface Guidelines. Also, it must have included the validation of the text and show im- mediately if the entered text is correct and if not show the requested pattern.

Figure 4.9: Screen showing settings

27 4. Development process

Figure 4.10: Screen showing a single boulder (left) and saving ascent of boulder after the successful climb (right)

When working with colors at first, custom code was used to implement all the necessary functionality. This included determining if the text should be black or white and converting the colors from String to be stored in the database to two special classes CGColor and UIColor, in Swift. After more and more problems were arising around the work with colors, the library Hue was used, which made it pleasurable.

28 4. Development process

Figure 4.11: Screen showing all boulders currently available for climbing with a possibility for sorting and filtering

4.6.2 Firebase integration

Having the small components ready, it was time to make models and managers to work with the database. Swift has built-in functionality to transform the data from JSON to Swift readable and another way around. With the help of library CodableFirebase, it was easy to transform the data from one model to another. The task that proved more challenging was to get the data asynchronously and query them so

29 4. Development process that users of the application do not need to wait. Many functions had to be written because sometimes, just one call to the database was needed, and other times the observer needed to be set. Even though observing data in Firebase is easy, it was hard to connect them to the certain UI elements in the code and fire the changes.

4.6.3 Applying MVC pattern

Putting the small parts together turned out as expected, while some of it was very trivial other proved difficult. Following the MVC pattern and having all components ready, creating the single view controllers did not prove to be hard. However, connecting them, making sure they communicate without bugs and send data appropriately was a big obstacle. Many delegates had to be created. Also, it was essential to organize them into navigation controllers, which are responsible for going from one view to another while not breaking the Tab Bar. After a discussion, the controllers were embedded each into their Navigation Controllers and not all of them together into a single one.

4.6.4 QR Code scanning

Implementing QR code scanning was straightforward, as there are easy to follow tutorials online on how to do it, and Apple provides an existing solution that is easy to use. Into the QR code, a string containing a specific boulder ID was encoded. Therefore, it was possible to distinguish which boulder was scanned. After successful scanning, a screen with a given boulder is shown. The code can be generated from the staff dashboard by clicking a simple button. Then it can beshared with a printer or other devices using e-mail or social media. The main difficulty in this part was to generate the code in the right size andnot too small. Many settings had to be applied to the generator.

4.6.5 Communication between climbers

At first, the communication between the climbers was to happen inside of the app. This would just be a redundant functionality. There are better ways to communicate on smartphones using other services such as

30 4. Development process

SMS1, Facebook Messenger, Instagram, and e-mails it was chosen that each of these would be included. Climbers can link their profiles with given platforms. During the sign-up process, users are required to en- ter e-mail. It was straightforward to connect the mentioned platforms with this app as the owners of these apps want others to include them. Only their guidelines on how it must be done had to be followed.

4.7 Transformation of the data

The app was ready; therefore, the data needed to be transformed from the cheatsheets in which the client had it until then to the Firebase database. As they had more than 2000 rows of data and manually re- entering each value into the database would take too much time. After researching possible options online for transforming the format of “.xls“ into “JSON“, nothing appropriate could be found. The problem was it was either not for free, or the output format could not be adjusted appropriately. Own script was written in Python. As each of the sheets had the same format, it was easy to read the data. The script did not need to be flexible as it would be used only once for this job and only by me and no-one else. Xlrd library for Python was used, which allows easy reading of rows in cheatsheets. After reading the row, it was parsed into several JSON objects, each representing a climb a given climber did. When each row was finished parsing, all the data were dumped into the file, which was then uploaded into Firebase. The script had to be fixed a few times as there were some differences between the objects parsed and the ones already inthe database. When this happened while running the application, it was unable to download them. It was challenging to find the bugs as it contained more than 2000 rows of data. Some of the data had to been set by default as the cheatsheets did not contain them, and the app needed it, including star rating of a boulder or grade evaluation of a boulder. In the end, the client agreed that only the data from last month needs to be included, and others can be discarded. Only the pieces of information about climbers needed to be kept.

1. short message service is a text messaging service component of most mobile device systems.

31 4. Development process 4.8 Testing

The app was widely tested using unit tests, UI tests, and users to gain feedback before publishing to the App Store. Unit tests were written for all backend functions working with the database and data. Many edge cases were tested, and it turned out there were a few bugs. This resulted that the users would see misleading data, and therefore the app would be useless. For UI Testing framework from XCode called “XCTest“ was used. It provides options to interact with the app just as the user would be with gestures. This makes it easy to test many different scenarios. It allows checking if elements exist if they are correctly positioned, the strings they contain, and the colors of elements. The only downfall is it does not allow usage of snapshots, but if enough tests are written, it is not needed. . At last, the app was distributed to a few selected end-users who volunteered to test it in use and were asked to present as much negative feedback as possible. After a week passed, each user was interviewed independently. Each one of the users liked the UI and sign-in process. The bugs that came up were that with too much data, the app’s initial loading was too slow. This was fixed by separating the process into more threads. Secondly, the data were not saved once the user lost the internet connection. Firebase provides caching of the data. Therefore, it was enabled by just one line of code. Other than these, the users did not complain about any other things and found the app intuitive.

4.9 Impact of COVID-19

When the idea for this thesis arose, there was not even a mention of COVID-19. The work started, and it was going flawlessly. The gym was satisfied. There were big plans for designing the UI and testing with users directly on the climbing walls, and the app was to be propagated on the gym social media. Suddenly the closure of all gyms happened, and because the client was providing their services for only one year and took loans, they had to focus on other things than the application. In addition to that, I am from the Slovak Republic, and therefore it was very problematic for me to test the app physically in use. Not having

32 4. Development process

access to more devices because of closed state borders, the app could be tested only on one type of real device. Luckily XCode provides an excellent alternative to this with simulators, and no significant problems should appear. As the restrictions are being less and less strict, it soon will hopefully be possible to test it thoroughly, and the extensive usage of the app will begin.

5 Conclusion

The purpose of this thesis was to create an iOS application for the bouldering gym Hangar Climbing playground by Adam Ondra. This task was accomplished as the app is successfully published to the AppStore, and users are starting to use it. All the necessary data has been transferred to the database, the UI is clear and intuitive according to alpha testers, and the scanning of boulders works flawlessly. The application is expected to help enjoy climbing for 100-300 users monthly. In the future, the app can be transformed easily for any other gym. Also, it is expected that an accompanying app for Android will be created. After the introduction in second chapter it was included what bouldering and the user of this app. In the next chapter were introduced all the technologies, software, and design patterns used during development. Provided with examples to make it easier for the read- ers to understand how each technology works. In the fourth chapter, the whole process of development was described. Firstly how the idea arose and similar apps, then prototyping and designing the UI and the database. Finally, it is explained how the app was coded, the challenges that came up, and the testing process.

Bibliography

1. Smartphone Ownership Is Growing Rapidly Around the World, but Not Always Equally. [online]. USA: Laura Silver, 2019–2020 [visited on 2020-05-02]. Available from: https://www.pewresearch.org/ global / 2019 / 02 / 05 / smartphone - ownership - is - growing - rapidly-around-the-world-but-not-always-equally/. 2. iOS [online]. USA: Wikipedia, 2008–2020 [visited on 2020-04-19]. Available from: https://en.wikipedia.org/wiki/IOS. 3. Lifecycle state model for an Apple iOS app 5. [online]. USA: Scott Barnett, 2015–2020 [visited on 2020-05-12]. Available from: https : / / www . researchgate . net / profile / Scott _ Barnett4 / publication / 277017883 / figure / fig2 / AS : 391827338350611 @ 1470430325669 / Lifecycle - state - model - for-an-Apple-iOS-app-5.png. 4. Understanding the iOS ViewController Life Cycle [online]. USA: Morgun Ivan, 2019–2020 [visited on 2020-05-13]. Available from: https://en.proft.me/media/ios/ios_vc_life_cycle.png. 5. Apple ID: Everything You Need to Know [online]. USA: Juli Clover, 2020 [visited on 2020-04-17]. Available from: https : / / www . macrumors.com/guide/apple-id/. 6. Swift The powerful programming language that is also easy to learn. [online]. USA: Apple Inc., 2020 [visited on 2020-04-21]. Available from: https://developer.apple.com/swift/. 7. Xcode Tutorial For Beginners [online]. USA: Chris Ching, 2019–2020 [visited on 2020-05-10]. Available from: https : //codewithchris.com/xcode-tutorial/. 8. Why is Xcode getting worse with each passing year? [online]. USA: Jay Versluis, 2018–2020 [visited on 2020-05-11]. Available from: https://i0.wp.com/pinkstone.co.uk/wp-content/uploads/ 2018/09/Screen-Shot-2018-09-06-at-19.04.29.png?w=361& ssl=1. 9. MORONEY, Laurence. The Definitive Guide to Firebase: Build An- droid Apps on Google’s Mobile Platform. Springer Science Business Media New York: Appres Media, 2018. ISBN 978-1-4842-2942-2.

37 BIBLIOGRAPHY

10. VOORHEES, David P. Guide to Efficient Software Design: An MVC Approach to Concepts, Structures, and Models. Springer Nature Switzerland AG: Appres Media, 2020. ISBN 978-3-030-28500-5. 11. Vertical-Life: Outdoor and Indoor Climbing [online]. USA: Google Commerce Ltd, 2017–2020 [visited on 2020-05-09]. Available from: https://play.google.com/store/apps/details?id= info.verticallife&hl=en.