Scribd
Upload
4 views

week11

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

week11

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

Mobile Application

Development
BY
Aatiqa Bint e Ghazali
FALL 2024
Backend Fundamentals
What is a backend?
• the part of a computer system or application that is not directly
accessed by the user
• typically responsible for storing and manipulating data.
• "the back end has three parts to it: server, application, and database“
• Server: The machine (physical or virtual) that handles requests from
the frontend and coordinates between the application and database.
• Application: The business logic or codebase that processes incoming
requests, applies logic, and interacts with the database.
• Database: Where the application stores and retrieves data.
Why we need backends
• The backend communicates with the frontend, sending and receiving
information to be displayed as a screen in your application
Understanding APIs
• the "communication bridge" between frontend and backend.
• can be thought of as a contract of service between two applications.
• This contract defines how the two communicate with each other
using requests and responses.
• Their API documentation contains information on how developers are
to structure those requests and responses.
• API architecture is usually explained in terms of client and server.
• The application sending the request is called the client, and the
application sending the response is called the server
Kinds of APIs architectures
• There are four different ways that APIs can work depending on when
and why they were created.
• 1. SOAP APIs
• 2. RPC APIs
• 3. Websocket APIs
• 4. REST APIs
What are REST APIs?

• REST stands for Representational State Transfer.


• REST defines a set of functions like GET, PUT, DELETE, etc. that clients
can use to access server data.
• Clients and servers exchange data using HTTP.
Kinds of rest apis
• Public apis
• Private apis
APIs Integrations
• API integrations are software components that automatically update
data between clients and servers.
• Some examples of API integrations are when automatic data sync to
the cloud from your phone image gallery,
• or the time and date automatically sync on your laptop when you
travel to another time zone.
• Enterprises can also use them to efficiently automate many system
functions.
How to create an API?
• 1. Plan the API
• 2 . Build the API
• 3. Test the API
• 4. Document the API
• We will not creating full backend and APIs fro scratch in this course.
You will learn these in ACP’s course
• To learn how to work with backend in react native we will be using
Firebase
Working with APIs
• As we will not be building APIs from scratch we will use ready made
public apis
• A sample JSON data is provided on this link
https://reactnative.dev/movies.json .
• Fetch the data using the api and show the movies titles and their
release year.
API HTTP methods
• CREATE….. POST method(Used to create new resources or entries in
the database).
• READ …….. GET method(Used to retrieve or read data from the server
without altering).
• UPDATE…..PUT or PATCH method(Used to modify existing data on the
server).
• DELETE…… DELETE method (Used to remove data from the server
based on the specified resource).
Working with activity
• Fetch the data using the API and show the movie titles and their
release year.
• To fetch the data we will be integrating a GET API
• Now for API integration every gramwork and lanuge has its own ways
• In JavaScript we have a built-in method fetch
• In react and react-native other than fetch method we can also
integrate api’s using axios library .
• It’s a third party library we need to install it before using
Fetch vs axios

• A significant difference between axios and fetch is in


handling JSON data.
• axios automatically transforms the response to JSON
format under the hood, allowing you to use the
response data directly.
• fetch , as a lower-level approach, requires explicit
conversion of responses to JSON, unlike axios 's
automatic handling.
What is JSON
• JSON (JavaScript Object Notation) is a lightweight data-interchange
format that's easy for humans to read and write and easy for
machines to parse and generate.
• It’s commonly used to transfer data between a server and a web or
mobile application.
• JSON represents data as key-value pairs, similar to dictionaries in
Python or objects in JavaScript.
JSON formate
Integrate the movie API: steps
• A link to API -------- (https://reactnative.dev/movies.json )
• A method to integrate the API( axios)
• Knowing the method of API we will be calling (GET)
• Handling the API response
• Show something on screen
Task
• On-screen show an activity loader if data is still loading
• Hide the loader and show the data when data is fully loaded
Breaking problem down
• First add the loader
• Write the logic to show loader only when data is pending
• Use states
• useEffect hook
• Call the api using fetch method or axios
Showing Activity Indicator
Showing Indicator based on some
state is true
Fetching data from api
• Pick another state which is empty by-defult
• const [data, setData] = useState([]);
• When the data is fetched from api fill in the data in this state
Set the data in state
• After debugging fetched data set the data in state
• Call the data fetch method in useEffect so that data is fetched once
the component is rendered in screen for first time only
Render the fetched data using
flatlist
Complete code
Using axios
• You can do the same using Axios
• npm install axios
• Import axios from axios library
• Use it like axios.get(‘url).then(grab data and do something)
• No explicit data conversion
Introduction to Firebase as a
Backend
• Firebase provides ready-made backend services
• Firebase is a Backend-as-a-Service (BaaS) app development
platform that provides hosted backend services such as a realtime
database, cloud storage, authentication, crash reporting, machine
learning, remote configuration, and hosting for your static files
firebase
• To be continued in next class….

You might also like