Animals App using Backendless API

In the previous articles, I have talked about APIs and firebase services. If you missed these articles, you could find them here -> Profile, and if not so, you are lucky as you have gained a tremendous amount of knowledge, so now let’s go to our first question.

What is backendless?

Backendless is a provided service as an API that helps you create all the content you need and use it in different platforms to use the generated API in iOS, Android, web development, and Apps without coding as well…

Don’t worry If you didn’t catch anything because everything will be explained in detail…

Differences among API, Firebase & Backendless

Each time you are creating your app, you will find yourself on the road with three different choices, and you need to use only one option from these three to be able to choose. First, you need to understand each of these three choices to be able to choose safely without any worries, and this is what we will learn in this part:

1- API

For any developer at the beginning of his development life, he can’t use actual APIs. The only option available is to use fake APIs that provide some small data to practice on it. On the other hand, if you are working in a company, you will have a back-end developer who works on these APIs. Still, real APIs, not the fake ones as before, are most of the time containing massive data and working on them. It would help if you had good practice using fake APIs.

2- Firebase Services

As a developer, you have another choice to help yourself by having some practice, but at this time, using firebase, not APIs, and firebase can have the same features as API but the difference that firebase have some extra features that can be used individually like: Maps, Analytics, Push notifications, etc.…


At the same time, firebase has its built-in functions that can be used, but in APIs, you can use many ways to get the data from APIs, and these ways will be all explained in another article.

3- Backendless

Backendless can be another choice of practising on your own, or you can create an app from scratch depending on it and publish it as well. Still, the most common issue between firebase & Backendless is that both need payment after finishing the free trial. Still, the problem now is why should I use one and not another one but here I’m recommending Backendless, and that is the question which will be answered now.

Why shall I use Backendless?

Backendless has the lowest budget, so you can pay a little and create your API easily, and you will have 30 days as a trial. On the other hand, Firebase doesn’t have a free trial, but it already limits. If you pass this limit, you will need to pay a lot to continue publishing the app. Backendless also has its functions for users, searching or data. You can create your API by your hands(it’s looking like a dashboard,=). “Like a table with attribute and each attribute has its value depending on the unique ID for each item.

Also, API is available, but Backendless is recommended for individual developers seeking to create their apps for their own business or for practising. For me, it’s better to use it for practice. Still, if you need to create your own business, it’s better to have a back-end developer to support you with the API because it will be an app published on the store. Hence, you need to seek the best performance and the best for you as a developer. Firebase will be used mandatory if you need to use “Push Notification” there are no other options for such a thing.

After talking a lot about each one of them, let’s go to take a tour in Backendless

First of all, you need to create your account to get the free trial for 30 days to be able to start working on your AP. First, you will register using this link.

After registering and confirming your mail, you will log in to have the below page, but note that name can’t have any spaces and it needs to be blank as we need to start it from scratch:

Then we will have the image below and we need to copy the app ID and iOS API Key because we will use them in the future:

Now you can create the first table by clicking on Data then the plus sign to add a new table:

We will write “Animal” as the table name and then click create, and after that, we will have a popup that tells us if we need to move to the scheme mode but we will click “No” to be able to do everything with our hands:

Now we can move to schema editing on our own. Click on “Schema” then “Table editor”. Finally I will click on “New” to create a new property:

We will create our columns one by one, like the image below, but we need to note something. There are some default values that we don’t need to change while working, and I have checked on “Create another” to create another attribute after that without going out and follow the steps again:

Then we will create an animal description attribute but its type is text not string because it needs to be without any length:

After that, I will create an animal country that points to the country that most animals are existing in:

Only one attribute is left which is related to animal’s images and we will create the table first to be able to use this table as an instance of the animal table and this table will include five images for each animal. That’s why I have created a table for images which includes image name and image file like the images below:

You need to notice that the type for the image file is file reference as you need to upload it from your PC or Laptop, let’s try to do it together.

I have downloaded some images and I’m gonna create a file in backendless to be able to import images from it like the image below:

Now I have a new folder called “Tiger” which will be only for the five tiger’s images, I will upload my five images now to be able to link them to the animal table and of course, I will create an instance for “Tiger” to be able to link the images to it:

The worst thing is that you can’t upload each file alone, and you need to upload each file at a time. Now I have uploaded my five images, and it’s better to name the image the same name as the instance but using a count incremented like tiger1, tiger2, etc., to be able to copy the name and paste it easily to speed up the operation. Now all I need to do is link images to the images table to add them as an instance into the main animal table. Let’s see how to accomplish this.

1- I will go to the Data tab.

2- Choose the Animal Images table.

3- Click on new and follow the images below.

4- After clicking on the cell next to tiger1 and under the image file, you will have the below screen to get the image from the Tiger folder I have created before, like the image below. You will choose the image, then click on the add-relation button to find it finally linked:

Now I need to do one extra thing in the first table which is the animal table and this thing is:

Add one image related to the table to be shown in the model, and this image I will already pick from the five uploaded images which I have uploaded before, so all I need to do is:

1- Go to the main Animal table.

2- Click on the Schema tab

3- Click on new

4- Name it an animal image

5- Don’t forget to make its type file reference

For more explanation check the images below:

Now I have the third attribute in the table. So before thinking about anything, let’s create our first instance, but before doing this, let’s put something in our minds which is how shall the model knew that these five images are related to the tiger instance, not another one, and this can be achieved by doing the below.

Do the same as I have done before while creating the single image attribute, but the difference here is that I need to make it as a relationship between two tables, and it will be one-to-many as one animal can have one or more than one image, the image below is explaining more:

Everything is done now and I will create my first animal instance. Don’t forget to upload the rest of the images for the tiger the same way as before:

I have just clicked on the cell under animalImages which was created before. I have selected the images I need to link and click on add relationship and guess what? All your images are now done and your instance is ready to link to your app

Now I will create an application in my Xcode and call it whatever I want. Let’s say “Extinct Animals”, and let’s start by creating models for each table we have, which means that I will have two models, one for the animal table and the second one is for animal images.

Animal.swift

AnimalImages.swift

In the previous two models, I have created my attributes and note that you need to rename the attributes in backendless to be the same as your model, and that’s what I have done. Now I need to play with some designs to create my design which will contain from a collectionView shows all the animals I have. Each animal will have an image and name only on this view. Once I click on each cell from these cells, I will have a view that shows a list of animal images and animal names and descriptions. Before creating this design, I will create two services, one for the animal and one for animal images, but to do this, I need to install some pods to facilitate the process. The pods are “Alamofire” & “KingFisher”.

Alamofire is a pod created to facilitate calling the APIs, which is, in this case, the backendless API. KingFisher is a pod used to facilitate downloading any image to view it in any imageView.

To install these pods, you need to go to a website called CocoaPods then you will type the name of each pod to get it. On your laptop or PC, you will open the terminal and go to the directory you have the project in like the below:

1- cd /Users/Shared/Previously\ Relocated\ Items/ExtinctAnimals

2- I will give you access to this directory.

3- Type “pod init” without the quotes.

4- Open Podfile

5- Under this # Pods for ExtinctAnimals you will write the below:
pod ‘Alamofire’, ‘~> 5.2
pod ‘Kingfisher’

6- Save and close the file

7- In the terminal again type ” pod install”. You will wait a while till downloading the pods, it depends on your connection

8- After downloading them you will close the project and open the file ExtinctAnimals.xcworkspace

Now everything is ready to create our services:

AnimalService.swift

I have created an array of dictionaries to contain the returned model from the API. Then I created a function called getAnimals()and gave it an escaping closure containing animal array and an error. I have made it an escaping closure to be able to get called in the background. Then I have used the installed pod “Alamofire” and gave it the link of the API using the App ID and iOS API key, which are included in the manage tab in backendless. I have used the response from this link to check on it if it’s a success or failure, and if it’s a success, I will fill my array with the attributes which came from the API and if failure, I will return the error.

Now I can create the design to be able to call this service. All I did was create a view controller and put a collectionView in it using the most suitable constraints, and of course, I have created a file for this controller and connected them like the image below:

And of course, this collectionView can’t work alone, and It needs some cells to be created, and that’s why I have created a custom cell for this collection view and don’t forget to a checkmark on the box which indicated to create a .xib file like the image below:

Don’t forget to give the cell an identifier and I like it to be the same as the cell name and the design for this cell will be as below:

All I need now is to connect the views to their outlets in the cell class by clicking on alt + click on the cell class and click on the view + holding the ctrl button and drag it to the class and finally, I have my cell class like below:

AnimalCell.swift

Now I need to connect the collectionView to its class, the same I have made in the cell, so I have this outlet and some variables related to the animals’ array and the collectionView insets:

AnimalsViewController.swift

Continuing in the same controller, I will call the function created in the animal service by using the below:

All I have done in this function is call it from the service class and use the array in the closure to be equal to the array created in my variables. Finally, I have reloaded the collection view on the main thread, and that’s why I have used DispatchQueue.main. Finally, I will register the collectionView cell to identify it to the used collection view, and I will call the function I have created in the viewDidLoad() function:

Now there are three things left to be able to say that this view controller is finished now. Let’s start by the first thing, which is creating the collectionView methods:

I have just returned the array count and in the second method I have gotten the text into the cell labels by passing it from the array which I got before from calling the function from the API and at the same time I need to get the image from the pod imported before which is KingFisher but it’s still something missing which is: What will happen if I clicked on one of these cells?

The answer to this question is taking us to the second thing which forced us at the moment to create a new view controller for animal details and now it will have only one attribute till working on the whole view controller:

AnimalDetailsViewController.swift

And for the design, I have created only one view controller and just connected it to its class as I have done before in the animals’ view controller, now we can navigate to this view controller, and we can use didSelectRow function in the collectionView, but first I will create the segue function like below:

In AnimalsViewController.swift

Here I’m passing the animal instance in this view controller to the details view controller and that’s why I have called the below function in the didSelectRow function:

AnimalsViewController.swift

Don’t run the app now as you will get an error because you didn’t identify the segue in the controllers’ design yet. I will show you how to do this while creating the design of the animal details view, but first, I will finish this view controller by using the flow layout functions and insets variable which have been created before:

AnimalsViewController.swift

I have used the previous code to avoid any conflict in the constraints or any errors in the views now I will go to the second view which is related to the details and after putting the suitable constraints and set the segue identifier, it will be like the below:

Now we have everything in the design but the only one thing left is the class for the images collection view cell which will only include one image view:

imageCell.swift

Now I need to create an image service to return the array of images but related to the main ID of each animal which is object ID generated automatically by backendless and I only return it:

ImageService.swift

In the previous code, I created a function to get images from the API under each animal using its ID (the same as before in the animal service). Everything is the same, but the only difference is that I’m using the animal ID and pass it as a parameter into the link to get only the array of images related to this specific ID.

Now I will do the same and I will call the array of images but first I will set the UI, Outlets, and variables:

AnimalDetailsViewController.swift

Now we have the outlets and variables, but I’ve used the function to set the UI, and the answer is simply that I need once I have entered this view to show the user the animal name and description and then download its images. Now I will call the API function to get the images:

AnimalDetailsViewController.swift

I have gotten the images array and make it equal to the current array. Of course, I will reload the images collection view to show the images once they are downloaded successfully. Now I call these functions in viewDidiLoad function as I have done before, and of course, I’m checking on animal first to know if the animal instance is passed successfully or not to avoid errors.

Now the last thing to do is to set the data to the images collection view to show the images correctly. I will return the images array then I will pass the image for each item in the image view related to this item:

AnimalDetailsViewController.swift

Now everything is fine, and you can run the app smoothly, but don’t forget to add more animals to your database and don’t forget to set the scrolling position for the collection view to be horizontal, not vertical, and now you will have the final result like this:

Is that enough? Can I do more in backendless?

Many questions came to your mind right now. Still, the surprise is that backendless is full of information and methods, and you can use many things in it like searching, registering and logging in. Even you can create apps without using any code, and you can upload them easily on the app store, but don’t forget something: you will need to pay after a free trial month.

What should I do to learn more about backendless?

You will search for API documentation for iOS like the image below:

You will have vast data to use and colossal documentation to read to be able to use each one from these titles, but as an addon, I will give you such a hint on how to retrieve the data using the page size using this link.

Instead of getting the link to the default page size, I will give the page size as a parameter to the function to use it easily in your URL. At the same time, you need to pass another parameter. The offset indicated the first index you want to start from if the offset equals 5. I have page size 12 means that I will start from the fifth item till the sixth element and note that tricky thing there is a number “Limit” that can’t be exceeded in the page size ( find out the number while working on the documentation).

The second hint is about the searching controller if you wanna search on an item in backendless, you can search using where so if you are searching for an animal called “Tiger” you can use it like this:

“https://api.backendless.com/2F816318-706D-1837-FF61-DB0794F17F00/FBCA26F6-3206-4857-975F-2C823F6D5496/data/Animal?pageSize=100&where=animalName%20LIKE%20%27%25\(searchingAttribute)%25%27”

So I’m searching in the table called Animal and I’m using the search to search about the animal name so I’m searching only in animal name column and like keyword here is using for comparing the searching attributes which is a parameter passed in the function as we did before in the animal ID to be compared with name in the animal name column and the rest will remain the same as I did before in the two previous services, there are more types for searching like you are searching for the exact same word but the one I have used in the URL before is searching for a word containing this search attribute and you can search also for something like (number where number > another number) don’t forget to include dashes and spaces and to URL encode them before inserting the link in your function like I have done in the URL before and all of these things to avoid unnecessary errors and I knew that there aren’t unnecessary errors but to avoid consuming more time.

Now everything is done and the app is ready for use, Have a nice programming day…

Thanks for reading️! Help spread the word & wait for the coming articles 📝

Do you have questions, suggestions, comments, or ideas for upcoming blog posts? Contact me on LinkedIn or write a comment! You can also follow me on GitHub & check my Stackoverflow answers and questions.

0 Shares:
You May Also Like