Ionic 6 React - Type Script Search APP utilizing API - Android and IOS Mobile Application (2022)

Published: 07 July 2022
on channel: AGWS | And Go Web Solutions

127

00:00 | 05:37 DEMO
05:37 | 11:09 Project Requirements
11:09 | 15:02 Setup And Mockup BrainStorming
15:02 | 18:09 Changing Homescreen to searchscreen
18:09 | 24:59 Adding Simple UI
28:33 | 34:12 Getting user input with useState and Displaying with UseEffect
36:15 | 45:33 Async await function with fetch url request
45:33 | 49:05 Stringify data as JSON and display it
49:05 | 54:47 Finishing up and testing different api

Today i am going to show to you guys how to start developing in ionic 6, react with building a simple search page that shows the results from the api , when the user adds a value to the input . Whats cool about this project you can compile it as an android application or ios , its not covered in this video, however you have the option to do so.
#Demo
https://quran-ionic6-react-typescript...

#Requirements
1. Node JS
2. Ionic Client
npm install -g @ionic/cli

#Start Project by
ionic start searchApp --type react

#API USED
https://alquran.cloud/

#Steps in the project
1. async arrow function do a with await to do a fetch request , with the method get .
2 .Pass the object from api as Stringfied JSON to show the results
3 .Add function to on click in button
4. Stringify the data searched and display it in the ionic application
5. Display the text {[ ]} as an array

#GitHubProject

Link: https://github.com/andgo-edu/quran-se...
#References

1. Installing Ionic - https://ionicframework.com/docs/intro...
2. API Al Quran Cloud https://alquran.cloud/

On this page of the site you can watch the video online Ionic 6 React - Type Script Search APP utilizing API - Android and IOS Mobile Application (2022) with a duration of hours minute second in good quality, which was uploaded by the user AGWS | And Go Web Solutions 07 July 2022, share the link with friends and acquaintances, this video has already been watched 127 times on youtube and it was liked by 1 viewers. Enjoy your viewing!

19,948

158