Тёмный

How to Build Your First Ionic 6 App with API Calls 

Simon Grimm
Подписаться 97 тыс.
Просмотров 88 тыс.
50% 1

Наука

Опубликовано:

 

19 авг 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 152   
@galaxies_dev
@galaxies_dev 2 года назад
Want more? Check out some real Ionic clones here: ru-vid.com/group/PLNFwX8PVq5q5K_ztYB5umsEu9p6SOQQSb Make sure to subscribe for more! ru-vid.com_?sub_confirmation=1
@indrajitruidas12
@indrajitruidas12 10 месяцев назад
Hi Simon , I was doing internship in a product based MNC. And I got tasks related to PWA , Push Notifications, Hybrid App Development etc . One senior suggested that with Ionic Angular these all things I could do . But I never worked with Ionic . Your Ionic videos helped me at each step , whenever I got stuck , you helped me at the very point . AND FINALLY I'VE GOT FULL TIME JOB IN THAT MNC . Can't thank you enough Simon ! Truely grateful to you ❤️. You helped me getting a good career opportunity.
@galaxies_dev
@galaxies_dev 10 месяцев назад
Wow that is so amazing to hear - congratulations on your job mate!!
@emreaka3965
@emreaka3965 2 года назад
I am gonna build a mobile app for my web project by following your video. Let's get started :D
@galaxies_dev
@galaxies_dev 2 года назад
All the best for the project Emre!
@bilalakkari7181
@bilalakkari7181 Год назад
Did u finish the app?
@karangupta7289
@karangupta7289 Год назад
This is one of the best videos I have ever found on Angular and Ionic learning for a beginner in this field! It's best to learn by building apps rather than by trying to only read documentation and not applying it anywhere. Thankyou! Will checkout all your videos!
@galaxies_dev
@galaxies_dev Год назад
Thank you Karan! I think the same, seeing something practical in action and following along is a great way to get a feeling for how things work with Ionic - let me know when you encounter problems :)
@CITYBOY5950
@CITYBOY5950 2 года назад
This video was great. Straight to the point with a real-example. That makes it really easy to understand without the extra fluff that steers us away from the basics
@galaxies_dev
@galaxies_dev 2 года назад
Happy to hear - give it a share if you enjoyed it ✌️
@braveitor
@braveitor 2 года назад
Fantastic video. Sometimes is good to get back to basics so we may fill any knowledge gap, as we sometimes do things without having very clear what we're doing. Nice one, Simon!
@galaxies_dev
@galaxies_dev 2 года назад
Very true, and glad you enjoyed it David!
@asifequebal3021
@asifequebal3021 Год назад
honestly the best soft tutorial ive ever seen. short and straight to the point ! i love it
@galaxies_dev
@galaxies_dev Год назад
Thank you Asif 🙌
@Dayogg
@Dayogg 6 месяцев назад
Thank you for such a detailed and well made tutorial. It was a great starting point.
@galaxies_dev
@galaxies_dev 6 месяцев назад
Glad you enjoyed it!
@TheSharkbeast
@TheSharkbeast Год назад
i cant explain how helpful your videos are !! please make more videos on react & ionic
@galaxies_dev
@galaxies_dev Год назад
Thank you! Will do!
@CJvanNiekerk
@CJvanNiekerk 2 года назад
Thanks, really appreciate the time and effort you put into these videos ! They work and make the topic really simple to understand and follow - 100 thumbs up !
@galaxies_dev
@galaxies_dev 2 года назад
Thanks a lot CJ - would help me a lot if you could share the tutorial on your preferred SM platform 🙌
@CJvanNiekerk
@CJvanNiekerk 2 года назад
@@galaxies_dev will do - I have made a simple application to test the implementation using a custom jwt provider through Laravel 9 (php framework and very popular) and the ionic app - this is the base I will use for all my applications going forward - not sure if you would like me to share this with you at some point - good alternative to use if you don't want to make use of cloud providers like firebase ?
@dohoangnam9x
@dohoangnam9x 2 года назад
A note at 40:42 If you use .push(...spread-array) like the video, you might need to have to manually trigger detectChanges for the component to reload the UI if you are using OnPush strategy (since the .push does not change the instance of the array, which makes Angular consider it as it was not changed).
@galaxies_dev
@galaxies_dev 2 года назад
Thanks for pointing it out!
@AntonGorbachevDev
@AntonGorbachevDev 2 года назад
Or we can do this.movies = [...this.movies, ...spread-array] this trigger detectChanges automatically
@sachinvarghese2223
@sachinvarghese2223 Год назад
@@AntonGorbachevDev thanks for this
@anggifergianp6566
@anggifergianp6566 Год назад
do you mean changeDetection: ChangeDetectionStrategy.OnPush ?
@dohoangnam9x
@dohoangnam9x Год назад
​@@anggifergianp6566 Yes, if the array you are mutating using .push() method (which keeps the array reference after mutating) is inside a component using ChangeDetectionStrategy.OnPush, Angular might not be able to detect it. The way @lastbreath2437 suggested is the correct way in that case. (Or you can manually trigger change detection using ChangeDetectionRef If I remember correctly).
@misteryegor
@misteryegor Год назад
Mate, this video is awesome! Thanks a lot for that!
@galaxies_dev
@galaxies_dev Год назад
Thank you!
@suleman9674
@suleman9674 2 года назад
great work... this was a great tutorial for me as a beginner
@immanuel417
@immanuel417 Год назад
Why Api Not Working if my project CRUD compile to android studio ?
@taraselegesiere5216
@taraselegesiere5216 2 года назад
Awesome video Simon, I have learnt a lot. Well done.
@galaxies_dev
@galaxies_dev 2 года назад
Glad it was helpful!
@jyotichetry08
@jyotichetry08 2 года назад
very nicely explained with neat and clean code ! Keep Teaching 👍
@galaxies_dev
@galaxies_dev 2 года назад
Thanks, I will 💪🏻
@TamFbs
@TamFbs Год назад
Very good tutorial
@galaxies_dev
@galaxies_dev Год назад
Thank you!
@rehamabmatrix2638
@rehamabmatrix2638 Год назад
thank you , done successfully ^^ , good job man !
@galaxies_dev
@galaxies_dev Год назад
Glad I could help!
@lucasneiva6679
@lucasneiva6679 2 года назад
Congrats, Simon. Where is the source code? Please share the git repo with us
@antoniocorreiadev
@antoniocorreiadev Год назад
Great video, thanks!
@galaxies_dev
@galaxies_dev Год назад
You're welcome!
@chizuru1999
@chizuru1999 2 года назад
Super good tutorial 👍🏻👍🏻. Idk angular just feels good even at work or for personal projects. Been hopping a lot on react / react-native / native / flutter / etc etc but ionic seems good along with ofc angular.
@galaxies_dev
@galaxies_dev 2 года назад
Yeah feeling the same - it has a learning curve but projects tend to have a decent structure and you easily get into other peoples code as well with Angular!
@danielmartinez-rr4rn
@danielmartinez-rr4rn Год назад
Great video man!
@galaxies_dev
@galaxies_dev Год назад
Glad you liked it!
@user-pi3to9iv2y
@user-pi3to9iv2y 8 месяцев назад
Great Tutorial. Please how to make my ionic apk built with appflow and capacitor able to connect to my deployed api URL ? I'm getting an 0 unknow error issue
@caiosales176
@caiosales176 2 года назад
Man, fantastic video, thank you so much! XD
@galaxies_dev
@galaxies_dev Год назад
Glad you enjoyed it Caio!
@JOD8576
@JOD8576 Год назад
Really amazing. Thanks
@moleexr639
@moleexr639 2 года назад
thank u for shareing Ionic video
@galaxies_dev
@galaxies_dev 2 года назад
My pleasure!
@phunguyen6319
@phunguyen6319 2 года назад
I built this project and build it on android studio but when I turn on my app on my phone it lost images do you know how to fix it ?
@ousmanediouf9190
@ousmanediouf9190 Год назад
I have the same problem
@vedantparchulkar708
@vedantparchulkar708 2 года назад
Thank you for this video. This is helpful. :)
@galaxies_dev
@galaxies_dev 2 года назад
Glad it was helpful!
@fathanianas7298
@fathanianas7298 Год назад
I have an issue with my code concerning the event when trying to implement infinite scrolling, it says that the event is of type event and isn't assignable to parameter of type InfiniteScrollCustomEvent
@kumaravelanbu1017
@kumaravelanbu1017 2 года назад
Do a video tutorial on background geolocation that get gps data for a x amount of time in ionic
@ConnorsYTVideos
@ConnorsYTVideos 2 года назад
getting error 404 page not found when searching for the popular movies, any others know how to fix this issue? My code is identical to Simon's!
@gmartins-dev
@gmartins-dev Год назад
the same problme here... any solution? @galaxies_dev
@jesuseduardolealperez
@jesuseduardolealperez Год назад
thank you bro thank you
@galaxies_dev
@galaxies_dev Год назад
You're welcome!
@facuchaer1
@facuchaer1 2 года назад
Thanks for your time and effort. Just strated a proyect its been 5 years since My last one and your series comes really handy. I have a question maybe anyone can help figure out. I need to stream a live vídeo within My app. Tried using stream media wo success, is it worling on iónic 6 capacitor?
@werewolf4032
@werewolf4032 Год назад
Thank you So much. Sir can u make a search bar too, I need that to learn this ionic 6
@galaxies_dev
@galaxies_dev Год назад
Sure I'll add this to my list!
@cyberlord6406
@cyberlord6406 Год назад
Please simon im having an error and I don't know how to solve it... Cannot find module 'is-docker'...
@deepakjoshi4466
@deepakjoshi4466 Год назад
Unable to see service page in my project do i need to add it manually or bya some command pls help
@MarcosVinicius-gj6qg
@MarcosVinicius-gj6qg Год назад
Simon, could you do a tutorial with resolutions of build issues and conflicts that ionic 6 is currently having with angular. It's been a headache. Thanks!
@galaxies_dev
@galaxies_dev Год назад
What kind of build issues? I haven't experienced any problems with latest Ionic versions!
@ankitakachalia2610
@ankitakachalia2610 Год назад
Hello simon i want to integrate venmo payment in ionic then how to do it please provide some suggestion
@subithacharlet6769
@subithacharlet6769 2 года назад
Hi sir, Am using rest api in my capacitor app , that's call fine and getting success response from brower , but in device that returns errorcode 0
@josequintin2467
@josequintin2467 2 года назад
Muito bom Sir Simon!
@rodrigoquiros2706
@rodrigoquiros2706 Год назад
Hi Sim, when i run * ionic cordova build ios * the terminal returns: Error unknow argument: platform
@galaxies_dev
@galaxies_dev Год назад
Maybe because you are using Capacitor in your app?
@AGUNGKAYA
@AGUNGKAYA 2 года назад
Sir you forgot to tell us why the opened android studio got error when syncing
@ravijatav1938
@ravijatav1938 Год назад
Hi Simon I am trying to integrate paid api for voice and video calling in ionic Cordova app but unable to implement it. So will you please guide me for that how can I implement this. Please provide me a solution for that as soon as possible.
@paulhetherington3854
@paulhetherington3854 Год назад
Ionic - Aye! I'm on, this landmas - Natives.
@vishnuvardhan.412
@vishnuvardhan.412 Год назад
Hi Simon...it's very helped to me. But I want to integrate .aar file which is generated using ionic/cordova and integrate with another third-party app. I have tried but getting issues with cordova plugins saying, class not found exception. Would you please suggest the approach ?
@paulh6933
@paulh6933 2 года назад
how about using a shortcut instead of ur if. i use e for event and i tested it with 3 pages max. not as read-able, as an if, but react devs do this e && (e.target.disabled = data.page === 3);
@coderprakash
@coderprakash 5 месяцев назад
Did ionic have same job opportunities compared to native iOS, Android and cross platform flutter, Reactnative which is having more opportunities?
@galaxies_dev
@galaxies_dev 5 месяцев назад
React Native has the most, followed by Flutter. The Ionic market is a lot smaller currently.
@lynxnunkima3872
@lynxnunkima3872 2 года назад
Hello @Simon_Grimm, can you please make a video how to connect with thermal printers, (receipt printer) from ionic app, any printers really, using bluetooth or wifi
@galaxies_dev
@galaxies_dev 2 года назад
Yeah good idea, just need such a device first :D
@envygamer
@envygamer 2 года назад
Could you please upload a Tutorial on configuring Android Studio and how the debugging works, I have been facing so many challenges when I try to load my web app as an app.
@galaxies_dev
@galaxies_dev 2 года назад
I've got a guide on debugging here as well: ionicframework.com/blog/debugging-tips-for-your-ionic-app/
@SalehWolf
@SalehWolf 2 года назад
Hello Thanks For Your Videos😍 Do you have any Video For PWA In Ionic? In IIS?
@galaxies_dev
@galaxies_dev 2 года назад
Hey yeah you could check this: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HQxRGI42VDE.html
@souzaelvis3102
@souzaelvis3102 Год назад
got some problems with infinite scroll, `Type 'Event' is missing the following properties from type 'InfiniteScrollCustomEvent'` How i can solve this?
@saskiafalken6350
@saskiafalken6350 Год назад
I had the same error and don't know why Simon Grimm didn't encounter the same error. Easy workaround: Declares the $event to be of type $any.
@mdaslamknl
@mdaslamknl 2 года назад
Why don't you upload code what created in this video It will be more helpful Thanks
@galaxies_dev
@galaxies_dev 2 года назад
The tutorial is linked below the video :)
@mdaslamknl
@mdaslamknl 2 года назад
@@galaxies_dev Thank you for reply
@prabhatkumar803
@prabhatkumar803 2 года назад
I am not finding my self working with ionic capacitor I tried alot when I try to run the applciation in android simulation I am getting network_refused error while calling the api , While my api is working fine ... It is hard to configuration
@prabhatkumar803
@prabhatkumar803 2 года назад
Ionic: Ionic CLI : 6.19.0 Utility: cordova-res : 0.15.4 native-run : not installed globally System: NodeJS : v14.16.0 npm : 6.14.11 OS : Windows 10
@davidgeen6077
@davidgeen6077 2 года назад
Thank you! Nice video👍 Please could you upload for us the source file to download?
@galaxies_dev
@galaxies_dev 2 года назад
Link is in the description to the written version!
@uncleike5230
@uncleike5230 Год назад
I am following the tutorial now and i do not have the app.module.ts file, should I create it ??
@gbarbier69
@gbarbier69 Год назад
same issue, ionic 7 does not include the app.module.ts file i've been trying to find out where to declare the HttpClientModule without creating the app.module file but no luck
@galaxies_dev
@galaxies_dev Год назад
They updated to Angular standalone components, check out my video about it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Y0vH5Cm3HAk.html
@TUR595
@TUR595 Год назад
Hey Simon! Nice tutorial. I know its quite old for you now and hopefully you can answer. I have a problem with the movie types. If I define response as any in service file and movies as an array in page file. I am not able to do the spread operation onto movies because typescript complains "Type 'any[]' is not assignable to type 'never[]'". What could be the problem here?
@galaxies_dev
@galaxies_dev Год назад
You can simply initialise the array as an empty array, that should fix the never warning!
@hernandohernandez4097
@hernandohernandez4097 2 года назад
Hello, greetings from Colombia. I have a request, is it possible to make a foreground service ionic class
@TheSaceone
@TheSaceone 2 года назад
The foreground service is a native feature of Android. In order to have that feature in your ionic application, you need to use a capacitor plugin or a cordova plugin. Thouse plugins expose to your application the native functionalities of the device like camera, file system, sensors, or, in your case, foreground services. Refer to the explanation of Simon in 55:02 The official documentation suggests this plugin: ionicframework.com/docs/native/foreground-service This is a cordova plugin, but worry not! If your ionic application uses capacitor, well, capacitor is capable of using cordova plugins too! (most of them). If this plugin doesn't fit your requirements, you can always build your custom plugin for capacitor. Simon has also a video about that topic: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Nf-mOfmD7X4.html
@thecasualgamer90
@thecasualgamer90 2 года назад
Can we get a live project with Ionic + React?
@galaxies_dev
@galaxies_dev 2 года назад
Sure, working on some React material already!
@thecasualgamer90
@thecasualgamer90 2 года назад
@@galaxies_dev Thank you so much Simon!!
@akaz261
@akaz261 Год назад
i have a problem in the interface of the movieApp. There is nothing in the index page(movie)
@akaz261
@akaz261 Год назад
anyone can help me ? {{ item.title }} not recognize {{item.title}}
@galaxies_dev
@galaxies_dev Год назад
Did you take a look at the structure of each item? Maybe there is no title or something wrong with your array!
@gmartins-dev
@gmartins-dev Год назад
@@galaxies_dev getting error 404 page not found when searching for the popular movies, any others know how to fix this issue? My code is identical to Simon's!
@gmartins-dev
@gmartins-dev Год назад
@@akaz261 same problem here,
@gmartins-dev
@gmartins-dev Год назад
@@galaxies_dev i have the same problem, my code is like the tutorial, I made ctrl c + v to test, and doesn't works =(
@dearvivekkumar
@dearvivekkumar 2 года назад
When running on android the images are not loading, after debugging it was happening because of CORS error. Any guilde how to deal with CORS in case of android.
@galaxies_dev
@galaxies_dev 2 года назад
You can only fix CORS inside the API or use a proxy, but usually this API has CORS implemented! Maybe you used a wrong URL without SSL and got redirected or something like that?
Год назад
I got the same issue. The problem is that API for images is called with http instead of https in the tutorial (images property in the environment.ts file)
@muhammadzulharith3447
@muhammadzulharith3447 2 года назад
thanks i have done ur tutorial but after deploy on android why no image ya
@galaxies_dev
@galaxies_dev 2 года назад
That's hard to say, but you can use remote debugging to check the logs: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-akh6V6Yw1lw.html
@muhammadzulharith3447
@muhammadzulharith3447 2 года назад
@@galaxies_dev alright2 ill check it out thanks @Simon Grimm
@rizwanramzan5478
@rizwanramzan5478 2 года назад
sir ma ya wala kam cap pr kr rha ho lakin nhi ho rha agr koi cap wali app pr koi video ha to send in link for same kam
@user-gl8ig2pw2v
@user-gl8ig2pw2v 2 года назад
bhai wo english hy agr kuch bolna hy to english mein bol
@tedkhieu8995
@tedkhieu8995 Год назад
I bought your ebook but I have problems running pizzaShop app on my laptop. I need to update npm. I deleted npm but having problems reinstalling it. Can you guide me how to completely uninstall node and npm so then I can install nodeJs fresh. I really enjoy going through the ebook. Thanks for putting out there.
@galaxies_dev
@galaxies_dev Год назад
Please send me an email with the exact issues so I can take a look Ted!
@tedkhieu8995
@tedkhieu8995 Год назад
@@galaxies_dev Will do thanks!
@SuperiorTag
@SuperiorTag 10 месяцев назад
Is Ionic free to build apps with and launch?
@galaxies_dev
@galaxies_dev 10 месяцев назад
Yes, 100% open source.
@arlo252
@arlo252 Год назад
Will this work in Ionic 7? Cause I came across an issue => ( ERROR Error: Uncaught (in promise): NullInjectorError: )
@galaxies_dev
@galaxies_dev Год назад
Ionic 7 uses Angular Standalone modules, so you need to import the according packages directly in your component!
@piqueprototype1845
@piqueprototype1845 Год назад
Thank you for not leaving out the capacitor haha
@galaxies_dev
@galaxies_dev Год назад
No worries!
@aogunnaike
@aogunnaike 2 года назад
Awesome 😎 can I upgrade from ionic 5?
@galaxies_dev
@galaxies_dev 2 года назад
Yes you can
@aogunnaike
@aogunnaike 2 года назад
@@galaxies_dev ok thanks
@AZZAKIART
@AZZAKIART Год назад
in minutes 29:28 i'am troble. Why ?
@anarthriagalumphed
@anarthriagalumphed Год назад
same, did you fix that??
@lucasneiva6679
@lucasneiva6679 2 года назад
Did you versionate the code? Can we access that?
@galaxies_dev
@galaxies_dev 2 года назад
Link to the tutorial is below the video in the description!
@ash-faque
@ash-faque Год назад
Spitting hard words 🗿
@igorr4682
@igorr4682 Год назад
What is the idea here ?? cover as much topics within least possible time or teach people something solid ? (dislike !)
@galaxies_dev
@galaxies_dev Год назад
It's an introduction to many of the Ionic components and concepts to build an app - but feel free to use any other introductory video from other creators if this was too fast for you!
@kucanw1090
@kucanw1090 Год назад
I got an error with InfiniteScrollCustomEvent ("Argument of type 'Event' is not assignable to parameter of type 'InfiniteScrollCustomEvent'."), so I just changed in the movies.page.html "(ionInfinite)="loadMore($event)" to "(ionInfinite)="loadMore($any($event))" and it worked, saw the answer on stackoverflow...
@MiguelSeabraMelo
@MiguelSeabraMelo 10 месяцев назад
Thanks, I was getting that too with Ionic 7!
@HugoMVD
@HugoMVD 2 года назад
My app works perfectly on the browser but when I generate the app-debug.apk and install on my android device the request just don't works and not returns the data. Whats is the possible problem?
@galaxies_dev
@galaxies_dev 2 года назад
Are you using HTTPS? Because Android needs specific settings if you want to make insecure http calls (http)!
@HugoMVD
@HugoMVD 2 года назад
@@galaxies_dev I just add a "s" and worked! lol Thank uuuuuu 😘😍🤩
@AllenIve3
@AllenIve3 2 года назад
Very good tutorial
@galaxies_dev
@galaxies_dev 2 года назад
Glad you liked it!
Далее
What is IONIC? 🤔
14:28
Просмотров 24 тыс.
Собираю Фигурку Из Лего! 🧩
0:52
Top 7 Ways to 10x Your API Performance
6:05
Просмотров 324 тыс.
10 Must-Have React Native Components 😎
10:12
Просмотров 50 тыс.
React Native vs Flutter - Which should you use?
22:31
Ionic 4 & Angular Tutorial For Beginners - Crash Course
3:54:14
Ionic Responsive Design and Navigation for All Screens
36:28
Шушаник прилетела из Еревана
0:48
ТЕЛЕФОН МЕНЯЕТ ЦВЕТ😅 #upx
0:34
Просмотров 639 тыс.
В поезде и не такое бывает…
1:00
Fastening Tips
0:13
Просмотров 20 млн