Recreating Whatsapp UI with SwiftUI [Settings Tab]

Deepak JOSHI — Tue, 29 Sep 2020 03:30:00 +0000

TL;DR: Source code is available on GitHub. https://github.com/deepak-pro/whatsappSimple-SwiftUI.

Learning a new framework is always exiting but following a proper tutorial path over a month is pretty boring and to learn something quick the best approach is to create a project. In the case of SwiftUI, I can guarantee the excitement is on another level. The simplicity of SwiftUI allows us to develop the user interface quickly without even thinking about layout and constraints.

So let’s create a project.

I want to keep this blog simple and quick just like SwiftUI, so we will not waste our time revising how to click on File > New > Project .. Blah… Blah… Blah… But wait remember to select SwiftUI as Interface.

To develop UI of the settings tab of Whatsapp. We need to learn about some Views of SwiftUI:

TabView: For creating Tab Bar
NaviationView: For creating a Navigation bar with title 1. and bar button items.
Form: To create different sections.
HStack: To group views horizontally.
VStack: To group views vertically.
Image: To display an image.
Text: To display text.
Button: To create a button.

Enough explanation, Now let’s jump right into coding.

Creating a Tab Bar

TabView is used to create a tab bar. Here we are only creating one tab.

To keep things organized, we will create a new SwiftUI View for settings. (As we are using TabView and there can be many views). Name it as SettingsView.swift. Also replace the Text(“Hello, world!”) with SettingsView().

Creating NavigationView

Now we will create NavigationView with modifiers to set navigation title and a button for QR code in navigation bar items.

Here is the preview of ContentView.swift

Creating a Form

Form in SwiftUI helps up to group views systematically. First Section to group profile picture name and about. I have imported an image named profile in Assets.xcassets.

Here is the preview.

As you may have noticed, We have used VStack to group the name and about text view vertically and profile picture view and Vstack horizontally with HStack. Similarly, we will create more sections for different settings options using HStack to group image and text.

Apple has provided us free symbols (SF symbols) so that without importing any other assets we can use them as icons in our app. These symbols have a unique name called systemName.

Here is the preview.

Similarly, we will add more sections the same as of Whatsapp app.

Here is the final Preview in Light Mode and Dark Mode

The best thing about SwiftUI is that we only need to tell what to put where and in which order on the screen. SwiftUI takes care of all the constraints and layout.

Thanks for reading.

LinkedIn
GitHub
Twitter

How I created a tool to efficiently sort a folder

Deepak JOSHI — Thu, 18 Jun 2020 04:51:17 +0000

It is a lockdown period and we all have a lot of spare time. My Downloads folder is messed up with a huge number of files of different types. Every time I decide to clean that folder I go one by one and delete unwanted files. That is not a big task when the numbers are low. But this time there are 2000 files.

So one thing was clear in my mind, We need automation.

I am a fan of shell commands and always fascinated by how big tasks can be done with a few lines. Now speaking to the point we need to create a shell script that will sort the files in the order in which it will be easy for us to keep what is important and delete what is not. I was analyzing a few files noted their types.

Files that are very important

Receipts of online transactions -> PDF
Media from the phone -> JPEG and MOV
Documents -> DOCX, DOC, PPT etc.

Files that are not important and can be downloaded later

Movies -> MKV, MP4, VOB, AVI
Torrents ->TORRENT
Songs -> MP3
Installer or executables -> DMG

Files that can be important

Txt files
Zip files

So we will now sort files with their types.
The first thing is to get all the types of files that exist in the current directory. A simple ls command in Linux can do the job. but it will list directories too.
Note: We are not sorting the directory in a recursive manner, only considering files that are present in the current directory.

Having a look at the man page of ls solves our problem. -p option can be used to put a ‘/’ after each filename if that file is a directory. Yes you heard it right “Everything in a Linux system is a file, even directories”.
Now the code is

$ ls -p

To filter only files we will pipe the output into grep with -v option to ignore the result containing “/”

$ ls -p | grep -v /

Now we have a list of all the files, from now we only need extensions. Generally, we have the file name as “name.extension”, so we will use “.” as the separator and will get the second column. So the code will be

$ ls -p | grep -v / | cut -d “.” f2

But I see a problem here,

What if there are files that contain “.”(dot) in the filename for example- “some.thing.extenion”. The above code will take “thing” as an extension. We have a solution for this. Try
understanding the below code.

$ ls -p | grep -v / | rev | cut -d “.” f1 | rev

Reversing the string and using cut with “.” as the delimiter to get the first column will give us the last column in the reversed string, again reversing will give the actual extension.

This will give us all the extension in a list (duplicates for multiple files with the same types).
We will store this in a file. To make a temporary file we can use mktemp. By the below code we will get a list of
extensions in a temp file.

$ temp = `mktemp`
$ ls -p | grep -v / |  rev | cut -d "." -f1 | rev > $temp

Sure we will remove duplicates.

$ utemp = `mktemp`
$ sort $temp | uniq > $utemp

We have $utemp file that has a list of all unique extensions.
Now only thing left is to pick a line from the $utemp file and create a directory with that name and copy all files with that extension.

while read ext;
do
   mkdir $ext
   mv *.$ext $ext/
done < $utemp

That’s it we are now done sorting. Remove the temp files now.

rm $temp
rm $utemp

So, bringing all these commands together in a file and giving permission to execute

chmod +x filter.sh

We can place this script in the Downloads directory and run it.

I have added a few echo commands to know the progress.
Taking about the results we get, After running this script I simply moved the important files in a backup drive. Quickly deleted folders of files that were not important, looked for other file types and kept what was important. These other files were small in number, so the overall process took only a few minutes.

You can see this project on GitHub here.
This is my first article, hope you like it.

Twitter - 0xjoshi

DEV Community: Deepak JOSHI