Create your first API using 'Deno' and fetch all the data from API in the Flutter app using 'http' package !!!
Hii Developers...
In this article, I will explain to you about How to your first API using deno and fetch all the data from API in Flutter app using "http" package.
What is Deno?
Deno is a simple, easy, latest, and secure TypeScript runtime built on V8 (written in C++, an open-source project developed by Google).Deno is built with :- 1) Rust , 2) Tokio ,3) TypeScript ,4) V8
Security is the most important feature of Deno.
Deno comes with a huge number of third-party modules. In this tutorial we will use "denotrain" module (Deno's Third-party module).
How to install Deno on windows:-
On windows we need to use either "Chocolatey" or "Scoop" to install deno.here are the commands:-
1) choco install deno
2)scoop install deno
What is Denotrain?
Denotrain is a web library which is the same as to express js ( express js is use in MERN/MEAN stack Development ). Denotrain supports query parameters, routers, and URL parameters.In this tutorial we are going to use denotrain (router, Application) to create API.
How to create an API using Denotrian?
Step by Step:-1) First create one file and name it as "index.ts".
2) Goto the denotrain documentation (https://deno.land/x/denotrain) and copy the import statement, because it is very difficult to remember.
 |
| import statement |
3) Paste it in your file and initialize the Application (app) and Router.
 |
| denotrain |
4) Create an interface for your API which contains fields name and their respective data type.
 |
| Interface in Deno |
5) Create an array of data for our API.
6) Specify the router for API and return the list of data (course_list).
 |
| Router in Deno |
7) To run the app use run() method.
8) The output of API.
 |
| Output of API |
How to fetch data from API in flutter app using "http" package:-
Step By Step:-1) First add "http" package to the pubspec.yml file under the section of dependencies.
 |
| Dependencies |
2) Import all the required packages.
 |
| Import statements |
3) Create initState method to call the getdata() method, initState is the default method which is called when the app loads.
 |
| initState method |
4) http has a "get" method that fetches all data from URL, copy the API link and paste it in get() method.
5) By using the jsonDecode() method convert the response data into normal data.
6) use the setState method to store data in the form of a List.
7) Use ListView.builder to show all the fetched data in the form of a list.
8) To access the "Course_name" use ( data[index]["Course_name"] ).
Deno API Whole Code:-
import { Application, Router } from "https://deno.land/x/denotrain@v0.5.0/mod.ts";
const app=new Application({ hostname:"192.168.1.206"});
const router=new Router();
app.use("/api",router);
interface Courses{
Course_name:String,
Course_difficulty:String,
}
const course_list : Array<Courses>=[
{
"Course_name":"Flutter",
"Course_difficulty":"Easy",
},
{
"Course_name":"Java",
"Course_difficulty":"Medium",
},
{
"Course_name":"Python",
"Course_difficulty":"Easy",
},
{
"Course_name":"Ruby",
"Course_difficulty":"Medium",
},
{
"Course_name":"Machine Learning",
"Course_difficulty":"Hard",
},
];
router.get("/courses",()=>{
return ({"Courses":course_list});
});
app.get("/",()=>{
return "Hii This is Deno !!";
});
app.run();
Flutter App Whole Code:-
import 'dart:convert';import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List data;
@override
void initState() {
// TODO: implement initState
super.initState();
getdata();
}
Future<String> getdata() async {
var response = await http.get("http://192.168.1.206:3000/api/courses");
var jsondata = jsonDecode(response.body);
setState(() {
data = jsondata["Courses"];
});
return "success";
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Deno App",
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text("Deno App"),
),
body: ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (context, index) {
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Text(
data[index]["Course_name"],
style: TextStyle(
fontSize: 30.0,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(10.0, 5.0, 0.0, 5.0),
child: Text(
data[index]["Course_difficulty"],
style: TextStyle(
fontSize: 15.0,
),
),
),
],
),
elevation: 10.0,
);
}),
),
);
}
}
Output:-
Thank you Developers for investing your valuable time in reading this whole article, if you have any doubts please ask me those doubts in the comment section below.
0 Comments