SwiftUI-NodeJS-API-Connection
We are here to share about SwiftUI and NodeJS API Connection.
SwiftUI = Front End
NodeJS = Back End
Why do we need to learn about this ?
In SwiftUI we can store data internally, using Core Data / User Defaults. However this ability has a weakness. We cannot communicate with other devices in iOS ecosystem and of course to the other platforms. In reality, there are some data that we cannot produce and depend on other platform. In this case, we will get data distance and price from ride-hailing platform.
That’s why in this scenario, we want to demonstrate how to :
- Send data from SwiftUI (Front End) to NodeJS (Back End)
- Then we can get real time information from NodeJS (Back End), and display it in SwiftUI (Front End).
For the main reference of this article, we learn from Mr. Muhammad Azam from this link : https://www.youtube.com/watch?v=iXG3tVTZt6o
— — — — —
What we need to prepare :
SwiftUI (Front End)
- SwiftUI file with Core Data to save value internally (refer to : https://www.youtube.com/watch?v=x8h6hTqo2So)
- Internet Connection to communicate with NodeJS (Back End)
NodeJS (Back End)
- NodeJS file is located in Amazon Web Service and has SSL certificate (it is a must). Please refer to : https://www.youtube.com/watch?v=rtshCulV2hk
- NodeJS file with connection to ride-hailing platform to get real time information to be transfered to SwiftUI (Front End)
- No need for database to store in the back end for this simple connection
- POSTMAN. To test the NodeJS (Back End) before we implement in SwiftUI (Front End).
— — — — —
What we need to do :
- Make the architecture.
- Create NodeJS (Back End) code.
- Test NodeJS with POSTMAN.
- Create SwiftUI (Front End) code.
— — — — —
EXPLANATION :
- MAKE THE ARCHITECTURE
This is the connection diagram :
In this connection, there are 2 kinds of API Connection which is used by SwiftUI (Front End) :
- POST
- GET
— —
POST
POST is used to validate / make sure only authorized user which be able to use the second command (GET). POST is only act as barrier / validator. In this action, we will get TOKEN from NodeJS (Back End), to be used in the GET METHOD.
Limitation : POST is also used to save data in User Defaults internally. Response that we get from POST, we will get some data that will be save in User Defaults.
Ideal condition :
- 1 endpoint → 1 User Defaults to save token
- POST BODY = username and password
- RESPONSE = token
Non Ideal condition (in this scenario) :
- 3 endpoints → 3 User Defaults to save token, Coordinate 1, and Coordinate 2
- POST BODY = username, password, coordinate 1, and coordinate 2
- RESPONSE = token (generate from Back End and to be distributed to Front End), coordinate 1, and coordinate 2 [using 3 endpoint]
— —
GET
GET is used to get information from NodeJS (Back End). There are 3 kinds of data we send in this GET METHOD : Token that we get from POST METHOD, Coordinate 1, and Coordinate 2. In this case, we attach information in the header of authorization.
— — — — —
POST METHOD
2. CREATE NODEJS (BACK END) CODE
For the first step, we will make 3 endpoints to send username, password, coordinate 1, and coordinate 2. Also to receive back token, coordinate 1, and coordinate 2.
— — — — —
3. TEST NODEJS WITH POSTMAN
For the second step. To make sure the NodeJS is 100% working properly. We have to test it with Postman.
Limitation of using user defaults :
post 2 → token 1 → user defaults jsonwebtoken 1
post 3 → token 2 → user defaults jsonwebtoken 2
post 4 → token 3 → user defaults jsonwebtoken 3
— — — — —
4. CREATE SWIFTUI (FRONT END) CODE
For the last step in POST METHOD, there are some code that need to be written, such as :
After we setup the code above, we will call the code with this code below :
After running this code, we will get token, coordinate 1, and coordinate 2 will be saved in user defaults.
Then, let’s move to the main course. The Get Method.
— — — — —
GET METHOD
5. CREATE NODEJS (BACK END) CODE
For the first step, we will make a function for authorization, to make sure not everyone can access this endpoint.
Then we use that authorization barrier in the GET METHOD to get value of :
- distance
- price
— — — — —
6. TEST NODEJS WITH POSTMAN
For the second step. To make sure the NodeJS is 100% working properly. We have to test it with Postman.
Based on coordinate 1 and coordinate 2, we can get value of “9000” and “2.5”. “9000” is the price to be paid and “2.5” is the distance in kilometer(s) unit value.
— — — — —
7. CREATE SWIFTUI (FRONT END) CODE
For the last step in GET METHOD, there are some code that need to be written, such as :
After that, we call the Get Connection with :
After that, we will get the response like in the Postman, and use it in Content View below :
— — — — —
8. SWIFTUI EMULATOR FOR USER
The last, the user will be able to see the value from response json above and display it in swiftui view
— — — — —
That’s all the explanation for SwiftUI and NodeJS API Connection. We hope this article could help you understand more how to make a communication between SwiftUI and NodeJS. Thank you and see you next time.
