This project is created as an interview task assigned from Skratch.
The task is to create an app that will fetch a list of users from Random User. You have to select the number of users to be fetched on your app. Then, those users will be presented on TableView
and Map
.
For using map, it's required to use third-party map Mapbox
As Design reference, there is a design provided by Skratch designed on Figma.
Here’s what we would like to see:
• Fetched users should be displayed in a scrolling list and on a map (as per the design reference).
• Tapping on a user in the list, or annotation in the map view, should display the user details in a panel.
• Tapping on a number view (bottom right corner) should bring the text field up to where you can enter a random number which will then be used for fetching users from the API.
• The task is to be completed using Swift, UIKit, and MapBox, you have all of the freedom to use (or not to) any 3rd party libraries.
Most importantly, surprise us! We’d love to see how you bring a simple feature like this to life with interactions.
Random User API it's a free, open-source API for generating random user data. Like Lorem Ipsum, but for people. It generates many different properties and values for a user.
Below is a sample of the data that you can get from the API (For more please check website documentation).
{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "brad",
"last": "gibson"
},
"location": {
"street": "9278 new road",
"city": "kilcoole",
"state": "waterford",
"postcode": "93027",
"coordinates": {
"latitude": "20.9267",
"longitude": "-7.9310"
},
"timezone": {
"offset": "-3:30",
"description": "Newfoundland"
}
},
"email": "[email protected]",
"login": {
"uuid": "155e77ee-ba6d-486f-95ce-0e0c0fb4b919",
"username": "silverswan131",
"password": "firewall",
"salt": "TQA1Gz7x",
"md5": "dc523cb313b63dfe5be2140b0c05b3bc",
"sha1": "7a4aa07d1bedcc6bcf4b7f8856643492c191540d",
"sha256": "74364e96174afa7d17ee52dd2c9c7a4651fe1254f471a78bda0190135dcd3480"
},
"dob": {
"date": "1993-07-20T09:44:18.674Z",
"age": 26
},
"registered": {
"date": "2002-05-21T10:59:49.966Z",
"age": 17
},
"phone": "011-962-7516",
"cell": "081-454-0666",
"id": {
"name": "PPS",
"value": "0390511T"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/75.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/75.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/75.jpg"
},
"nat": "IE"
}
],
"info": {
"seed": "fea8be3e64777240",
"results": 1,
"page": 1,
"version": "1.3"
}
}
How I started working?
Firstly, I analized the API. What kind of data it offers? How it works? and more.
Then, based on the UI design, I analized what kind of data I need for the user. After realizing which data are needed and which ones are not, I realizied which model I have to create and then I visualized them using UML Diagrams
.
Thanks to the structure of the JSON API, I could easily achieve High Cohesion on my project. Which is really important for reducing module complexity and software maintainance.
Moreover, because Apple have "limited" UI preferences, I had to use thir-party library for customizing Segmented Control
. For this task, I used Better Segmented Control developed by Gmarm.
The architecture of the software is really important. Once you define requirements of the project, it's best to define architecture too. It allows you to manage and understand what it would take to make a particular change, and how the software will comunicate with the user and server or API provider.
Most common architectures for iOS are MVC
and MVVM
.
Firstly, I developed it on MVC then I moved it on MVVM. For this simple task, MVC is enough, but I migrated with a purpose to present my skills.
Why it's important to know how to migrate from one architecture to another?
Softwares from time to time advances and can't rely anymore on a specific architecture for many reasons, so it's really important to have a skills for migrating a software, rather than creating it from scratch.
Why MVVM
over MVC
and MVP
?
MVP
and MVVM
are derived by MVC
. With these two, the modules are less coupled with each other compare to MVC
. And lastly, MVVM
have Higher Cohesion than MVP
and MVC
, which helps to manage and organize code well.
In adition, testing wasn't required in this task, but I added it willingly. I create a couple of test cases to test MVVM
and API Controller
At the end, I would like to present it visually how user will comunicate with the app and other services. To mention, I presented it on a Deployment Diagram
.