Introduction
I am Marton Zeisler, and I participated in the Google Summer of Code program in the summer of 2019 and I worked with the Amahi team to take their iOS application to the next level.
Amahi is a seed-stage startup developing next generation NAS/Router software. Amahi has the largest collection of media, backup and productivity apps and is suitable for home and small-businesses. Thousands of people in over 40 countries rely on Amahi on a daily basis.
If you have any questions about my Amahi iOS project or my involvement in the Google Summer of Code program, please don't hesitate to contact me at: marton.zeisler@gmail.com
Aim
The main aim of my project was to add new powerful features to the Amahi's iOS app and provide a significantly better user experience. When I joined Amahi in May 2019, only the basic features were implemented and the user interface was very limited. I proposed to completely redesign the app, add a lot of new advanced features and bring more functionality to the app.
My Work
There are many new updates and improvements I introduced to the app over the summer and I am going to talk about the main big features in detail and include a link to a list of smaller improvements and fixes at the end of this section.
Onboarding Screens
The iOS app was lacking onboarding screens that can give a quick insight into the app for new users opening the app for the first time. These screens explain the main features of the app and help new users understand the potentials of the application.
The walkthrough screens only appear when a user launches the app for the first time. The user can swipe left and right to jump between the tutorial pages. Once the user completes the onboarding, the app will remember to not show it for future app launches using the UserDefaults framework.
Reference: https://github.com/amahi/ios/pull/176
Tab Bar
The previous app generation did not have any navigational system, everything was kind of placed in one screen and the user could navigate between the different screens through tapping different buttons. I believe this was a rather bad user experience and I wanted to separate things a little bit and make each screen a little bit more simple. My solution was to create a tab bar based navigation system and separate the app into 3 new sections:
Servers Screen
The first screen of the tab bar contains the user's available servers and the user can tap on any of them to load the shares of the server and after selecting the appropriate share, the app displays all the files and folders from that share. These are the online files and folders that the app receives from the server.
Downloads Screen
The second tab displays all the offline files that the user downloaded previously. These files are saved on the user's device locally and can be accessed without internet connection.
Settings Screen
The last tab of the tab bar gives the user options to configure the app, such as selecting the connection mode or clearing the temporary downloads folder. The user can also sign out using this screens.
Reference: https://github.com/amahi/ios/pull/178
New Servers and Shares Screen
I introduced a new and redesigned servers screen. The new screen displays the the user's servers in a collection view with big icons. The new screen also features small improvements such as information about the number of active servers. The collection view works great in landscape mode too.
The new shares screen is very similar to the servers screen, it also works in a collection view and displays icons with their name under. This was a big improvement to the old version of this screen, which only displayed the name of the shares in a simple table view.
References:
- https://github.com/amahi/ios/pull/179
- https://github.com/amahi/ios/pull/182
New Files/Folders Screen
I completely redesigned the new files/folders screen and added powerful features that completely changed the user experience of this screen.
The new design uses a collection view that displays the files and folders and it uses section headers to organise the cells into sections based on the selected sorting preference. The user can also customise the layout of the screen by selecting a grid or a list view layout.
I added new controls for selecting the sorting preference. Users can tap on the currently selected sorting selection and the app brings up a view with all the available sorting options. I used UIView animation to make the appearance and disappearance of this view smooth.
I also introduced two new sorting options: size and type. If a users selects the sort by type option, the app separates the folders and files by placing them into two different sections. If sort by name is selected, the collection view creates sections for each letter of the alphabet that appear in the files and folders and organises them into the sections they belong. Sort by size and date work similarly. The sections are created based on the available data and the selected sorting preference.
The selected sorting preference is saved on the user's device, so if the user closes the app and goes back to the files screen, the last selected sorting selection will be applied. The same philosophy is applied to the grid/list view layout selection.
I have also worked on the search bar and made improvements to it. Previously the entire search bar was always visible on the screen, and I think it took up a lot of unnecessary space so I moved it to the navigation bar and now only the icon is visible. When the user taps on the search icon, the search bar appears in the navigation bar and the keyboard is shown as well. The user can dismiss the search bar by tapping on the cancel button next to the search bar and then everything goes back to the original layout.
Users can swipe from right to left to download files for offline usage, or swipe to cancel an ongoing download. During the download a process, a loading indicator is displayed on the right side of the cells, which eventually turns into a tick icon after the download has completed, indicating that the file has been downloaded. A badge also appears on the downloads tab, which indicates the number of files that are currently downloading.
The collection view also contains a small footer view at the end, which describes the total number of files/folders in the collection view.
Reference: https://github.com/amahi/ios/pull/187
New Downloads Screen
The files on the downloads screen are saved locally on the user's device using the Core Data framework. When the user selects a file to download from the online files screen, the file is immediately added to this screen and a download progress bar is displayed in the file's cell. Once the file has downloaded, the progress bar is removed and file is ready for offline usage.
The downloads screen is very similar to the files/folders screen, it features the same new sorting, layout selector and search features. Users can also swipe to delete files or cancel download if appropriate.
Reference: https://github.com/amahi/ios/pull/189
Redesigned Music Player
I completely redesigned the user interface of the music player. The new player features an improved layout, bigger thumbnail image and a blurred background behind it. Buttons and player controls have been repositioned for a simpler and easier user experience.
I also added a couple of smaller improvements to the player such as a reliable lock screen media player, smoother playback slider and the ability to interactively dismiss the music player by pulling the screen down.
I also worked on the efficiency of the player when playing songs from a remote server. Previously, the player had to download the metadata such as artist name, song title, duration every time the user went back to the same song. Sometimes, these metadata downloads were quite slow and made the user experience of the player rather slow. I fixed the problem by keeping track of the metadata for each played song temporarily using a dictionary, this significantly made the player feel faster.
References:
- https://github.com/amahi/ios/pull/203
- https://github.com/amahi/ios/pull/229
Server Authorisation with PIN Feature
Some of Amahi's servers require a pin access code in order to browse its content and I created a screen which enables the user to login to the HDA server using a pin code. The app submits the user's code to the server and if it's authorised, the server responds with a valid access token. The authorisation token is then stored and the user can access that particular server without having to enter the pin code again even after closing the app. I also added an option to sign out of the HDA server and in which case, the token is deleted and the user would need to sign in again with a valid pin code. The sign out option is visible on the shares screen in the navigation bar.
I also modified our networking codebase in order to support GET and POST request to servers which require an authorisation token. I also paid attention to the fact that the token might expire at some point. In that case, an app presents a warning message and signs out the user from that particular server.
Reference: https://github.com/amahi/ios/pull/223
Recent Files Screen
I was responsible for creating the frontend of the new recent files screen. It's a brand new screen in the app and it displays the user's recently accessed files in a collection view. The screen features the same global layout switcher feature from the files screen. Users can also perform searches using the search bar. The recent files are stored locally on the user's device using the Core Data framework.
Reference: https://github.com/amahi/ios/pull/245
Redesigned and Improved Settings Screen
I completely redesigned the user interface of the settings screen and added numerous improvements. I organised the settings into sections in a collection view. I added an extra information under the clear temporary downloads section which shows the total available space on the user's device.
In addition, I also create a reusable status view that can be used to display any kind of update that the user needs to be aware of such as when the temporary downloads folder has been cleared.
Reference: https://github.com/amahi/ios/pull/208
Further Contributions
There is many smaller and less significant changes and improvements that I added to the Amahi iOS app, these updates made the app smoother and more reliable.
I am also planning to continue contributing to Amahi in the future, so all my past and future pull requests will be accessible through this link below.
https://github.com/amahi/ios/pulls?utf8=✓&q=author%3AMarton-Zeisler
Conclusion
I really enjoyed working on this exciting project and contributing to an open source organisation. This was my first time working with an open source software and I am very glad I got the opportunity to do so because I gained a tremendous amount of skills and it helped me to become a better developer. I always enjoy trying out new things and this experience was so valuable to me, I will never forget it.
I would like to thank my mentor - Carlos Puchol(@cpg) for helping me and giving me a lot of useful advice throughout the whole program. I would also like to thank and congratulate everyone else at Amahi, I believe we did a lot of amazing work this summer and I can't wait to see all of our users getting theirs hands on all the new features we introduced this summer.
Last but not least, I would like to say thank you to Google for creating this fantastic Google Summer of Code program. The program allows so many students to take their skills to the next level and helps open source organisations to find a lot of new talented and passionate young developers.
Marton Zeisler