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/
Auf dieser Seite können Sie das Online-Video Ionic 6 React - Type Script Search APP utilizing API - Android and IOS Mobile Application (2022) mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer AGWS | And Go Web Solutions 07 Juli 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 127 Mal angesehen und es wurde von 1 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!