Тёмный

How to Build a Native App from Angular Projects with Capacitor 

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

If you want to build a native mobile app from your Angular project, I'll show you how to install and add Capacitor to your project so you can build an iOS or Android app based on your web app in no time!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: devdactic.com/native-app-angu...
😱 NEW: Capacitor Crash Course!
ionicacademy.com/capacitor-cr...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷‍♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
#############################
00:00 Intro
01:49 Adding Capacitor to Angular
07:46 Deploy your iOS & Android app
11:59 Using the Capacitor camera plugin
18:41 Live reload on a device
21:46 Adding Ionic UI components
27:53 Outro
#angular #capacitor

Наука

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

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 86   
@galaxies_dev
@galaxies_dev Год назад
Want to learn more about building native apps with web technology? That's awesome! Check out my new platform galaxies.dev/ for practical courses & more tutorials 🚀
@Guminator05
@Guminator05 2 года назад
I'm working on a similar case where I need a website and an ios / android application at the same time. I've been working with Ionic for a long time, but I would never believe how easy it can be with a capacitor as opposed to a cordova. Thank you for all your tutorials and videos. They are really helpful.
@galaxies_dev
@galaxies_dev 2 года назад
Thanks Daniel and I completely agree!
@passivedividendsoptions
@passivedividendsoptions 6 месяцев назад
About to give this a try, thanks for the video!!
@aabuabara
@aabuabara 2 года назад
Hello, many thanks for the vídeo. I have a question: by default, when I run npx cap open ios, the app language is in English (Xcode configuration). How can I remove the english language and select only Spanish language? In Xcode is unable to remove English language.
@joypernites6339
@joypernites6339 2 года назад
Hello! May I know if using real time object detection is possible using capacitor?
@prasadnarayana7257
@prasadnarayana7257 2 года назад
Love your content like anything 😍
@zahidshaikh3122
@zahidshaikh3122 Год назад
This is Mind Blowing!
@chandrasekharasharmat3032
@chandrasekharasharmat3032 2 года назад
Awesome, as usual! Thanks Simon.
@galaxies_dev
@galaxies_dev 2 года назад
My pleasure!
@TheSaceone
@TheSaceone 2 года назад
I hope this will bring more and more developers to Ionic and to the Simonics community!!
@galaxies_dev
@galaxies_dev 2 года назад
Yeah Angular + Capacitor might indeed have a broader audience!
@JeremyAlpha
@JeremyAlpha 2 года назад
This is exactly what I need thank you very much.
@galaxies_dev
@galaxies_dev 2 года назад
Glad I could help!
@iang9675
@iang9675 2 года назад
Wow this comes in clutch. I was just looking to learn this exact thing! (Angular + Capacitor) Where should I go to find a tutorial on using the the Capacitor File System for iOS and Android? I’m looking to save JSON data from an API to the native local storage.
@galaxies_dev
@galaxies_dev 2 года назад
Maybe check out this one: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WNte407ArQ0.html&ab_channel=SimonGrimm
@RadomirMazonPl
@RadomirMazonPl Год назад
That is exactly what I needed :) Thx.
@galaxies_dev
@galaxies_dev Год назад
Glad it helped!
@sarathkumar-ud4go
@sarathkumar-ud4go 2 года назад
hi, Im working on ios/android app using ionic 5 angular. is there any info how to use card io plugin (scan credit card option). can you post a video on that? thanks
@christopher5731
@christopher5731 8 месяцев назад
very informative thank you for posting this
@galaxies_dev
@galaxies_dev 8 месяцев назад
Glad it was helpful!
@lucascorrea9695
@lucascorrea9695 7 месяцев назад
Great video, really helpful, thanks :)
@galaxies_dev
@galaxies_dev 7 месяцев назад
Glad you enjoyed it!
@mukul13197
@mukul13197 Месяц назад
My frontend loads on android studio, but ive tried and failed numerous times trying to get the androud emulator loaded fronted app connect to my local express server. How do we inspect network traffic ? How to consume restFul APIs of an angular converter android app ?
@shubhifromyoutube9546
@shubhifromyoutube9546 2 года назад
hi, Simon & all the channel visitors, do we have any solution for the circular progress bar in ionic? if yes, please provide the URL for the same. I am really searching for it for a last long. I implemented ng-circle-progress but it does not work well
@galaxies_dev
@galaxies_dev 2 года назад
You can use the progress bar or the loading, but I guess those won't cover exactly your needs :/
@jvoirin
@jvoirin Год назад
Great video!! 👍👍
@galaxies_dev
@galaxies_dev Год назад
Thank you!
@JuanChehin
@JuanChehin 2 года назад
Hello, I made an application with Angular that I then export to android via capacitor, the problem is that when I want to start a session, I click on "start session" but it does not send the request to the back end. The application in Angular does send it and check the IP and it is correct, any solution?
@RajeevKumar-st5hr
@RajeevKumar-st5hr 2 года назад
How can select range fron center to left or center to right without using dual knob?
@raulangeljimenezhernandez3342
This is really great! I just needed to adapt the web aplicacion to a android device. I just have one question, is it possible to trigger custom actions for the back click? Lets say for example in one screen I click back but I dont want the usually history(-1) I want to return the user to a diferent page. Is this posible? I was trying to add the noHistory on the android manifest but got to result.
@galaxies_dev
@galaxies_dev Год назад
Yes you can use the @capacitor/app package where you can add a listener to the backButton: capacitorjs.com/docs/apis/app#addlistenerbackbutton-
@alanbique2548
@alanbique2548 2 года назад
interesting.. nice infoss
@egarabini
@egarabini 2 года назад
Thanks Simon!
@galaxies_dev
@galaxies_dev 2 года назад
You are welcome Eduardo!
@MoonMists
@MoonMists Год назад
Nice video. Great work! What solution would you use to make an Angular app look like a native window application? So what's the best way to get rid of the HTML look and make it look like a normal windows application. Any tips? PS: For your info: We are a group of students that have made a backend in C# (Entity Framework) with a frontend in Angular. We are able to create an installer file for easy install of the application on Windows, but we are looking for a good way to hide the html lay-out)
@galaxies_dev
@galaxies_dev Год назад
I'd probably just use Tailwind and create a unique UI with that!
@apinkavada1251
@apinkavada1251 2 года назад
amazing !!!!
@galaxies_dev
@galaxies_dev 2 года назад
Thank you! Cheers!
@samarthmali3541
@samarthmali3541 4 месяца назад
I have an angular application Which have Authorization authentication functionality but When I kill Application on Android my access token get cleared but same working fine for web
@prasadnarayana7257
@prasadnarayana7257 2 года назад
Can we do same process for ngrx store project? My company uses it for handle multiple applications at single code base. Can we have a short videos on it extension to this video
@galaxies_dev
@galaxies_dev 2 года назад
Sorry but haven't used ngrx yet :/
@anton98ilmilanista
@anton98ilmilanista 5 месяцев назад
Hello, I have an issue. When I follow these steps and the app is created on an Android device, on devices running Android 10 and below, the app opens, the Capacitor logo appears for a few seconds, and then instead of the view, nothing is displayed. However, on devices running Android 11 and above, everything works correctly. I don't understand why. I've tried on multiple PCs, and the issue remains the same.
@tikka6554
@tikka6554 2 года назад
Can i install capacitor and angular to sublime text
@garyyaral
@garyyaral Год назад
Hello!! How can I remove the button that opens gallery and only allows me to take one photo?
@ProjectAryawarta
@ProjectAryawarta 9 месяцев назад
In my angular project I am using payment gateway and replaceing url while payment. Also my backend using CORS filter. Will this work?
@galaxies_dev
@galaxies_dev 9 месяцев назад
Can't exactly predict, but for CORS you might just have to include another origin!
@aqueelalam4148
@aqueelalam4148 2 года назад
my aplication run on emulater .but after installon android phone not data fatch from server.? Please help me. !
@yacinedrissi8811
@yacinedrissi8811 2 года назад
Thé best as well
@prasadnarayana7257
@prasadnarayana7257 2 года назад
Can't we use ionic cli commands usually I use ionic cap run android
@prateekbhardwaj9943
@prateekbhardwaj9943 Год назад
what about performance? and lags? will it runs smoothly like flutter and other apps
@galaxies_dev
@galaxies_dev Год назад
Capacitor apps run at 60fps as well if you follow best practices of web dev.
@realisticanims9032
@realisticanims9032 2 года назад
is not related.. but is possible to upload a video to firebase and play it an ionic app? i appreciate any help on how to do it
@galaxies_dev
@galaxies_dev 2 года назад
Upload is definitely possible to Firebase storage! For playing I'm not sure if Firebase supports streaming the video or if you would first have to download the movie and then play it from your FS, but in general it should work :)
@pallelaharish7647
@pallelaharish7647 Год назад
Hai Simon this video is very useful for me . But i have a error in my application . Css not working in Android app what can I do now Help me plzzz.
@galaxies_dev
@galaxies_dev Год назад
You can use remote debugging and check what's wrong!
@TheBestDieEarly
@TheBestDieEarly Год назад
Is it possible, to load a ready android app project in Angular (e.g. Visual Code Studio) and rebuilding the same app for iOS?
@galaxies_dev
@galaxies_dev Год назад
You can deploy an Angular app to iOS and Android, but you can't easily convert a native Android app to iOS if you mean that!
@TheBestDieEarly
@TheBestDieEarly Год назад
@@galaxies_dev Correct, that's exactly what I mean. In your video I saw that in the dev tool within the Angular project the "Android module" has the same project structure as that in Android studio. My idea was to open (or copy) an existing native Android app project within the Angular project and then create an iOS version from it. But you think that probably won't work. Is something like this technically possible?
@rkkhadka1
@rkkhadka1 Год назад
I get build failure after integrating ionic if I want to use ionic command to build/run. e.g if I run ionic cap run ios/android. Did you encounter this?
@galaxies_dev
@galaxies_dev Год назад
No haven't seen that, what exactly is the issue?
@LexMadafaka
@LexMadafaka 10 месяцев назад
No where to find how to set up a "Run/Debug Configuration". My "Module:" dropdown/select is always empty, I can not select anything, and no matter what combination I check in, it will be incorrect according to Anroid studio. I have no idea what to do.
@ALex-ts1gu
@ALex-ts1gu Год назад
Is there a way to create an iOS app without using a Mac? I want to convert my Angular app and Windows to an iOS app? Thanks a lot.
@galaxies_dev
@galaxies_dev Год назад
There are cloud services, but usually you at least need to generate a certificate on a Mac and need it once.
@jamikhabir492
@jamikhabir492 Год назад
I ran the command: "npx cap open ios" and it only took me to a folder "xcshareddata".
@paranormalromance5288
@paranormalromance5288 2 года назад
1st and i need this video
@cirkulyaciya
@cirkulyaciya 2 года назад
Please make vue capacitor video
@erickreyes4485
@erickreyes4485 2 года назад
HI @simon i know that u are a pro, i need your help, try to get geolocation when app are in the next states, closed, background and open
@HamzaAhmed-yz6sn
@HamzaAhmed-yz6sn 2 года назад
did you find any solution for this i am also looking for something to get location in background
@prasadnarayana7257
@prasadnarayana7257 2 года назад
May I know why ionic 3, why can't latest ionic 5 or 4 ? 3 is way older
@galaxies_dev
@galaxies_dev 2 года назад
I'm not sure what you mean, I don't think I used Ionic 3 in here. And yes, I would always recommend the latest Ionic version!
@traversethedom
@traversethedom 9 месяцев назад
What’s the difference between Ionic and Capacitor ??
@galaxies_dev
@galaxies_dev 9 месяцев назад
Ionic is only the UI part, Capacitor does the heavy work of wrapping your website into a native app!
@christophermorgan8938
@christophermorgan8938 2 года назад
You are a legend for doing these vids. I had used the previous video you did on how to use angular's multiple applications feature with ionic. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-mlCdfAvny6o.html. I made the changes to the angular.json file. app to appOne and other recomendations. For some reason when running android it was looking for a capacitor.config.json file. I had to convert the ts file to json. Then I had an issue with ionic capacitor run android --project=appOne (NOTE: using capacitor not cordova) and it said android already exists. Basically, I am feeling a bit lost as to whether multiple projects does work using capacitor (or even cordova). Then I saw this video of yours and I was like sweet, but, the commands you use are directly interacting with capacitor and not ionic (and obviously not with the fixes for multiple apps). I just wondered if there was reasoning behind this as multiple apps and capacitor opens a can of worms not worth bothering with? Obviously, you don't have time to do every video based on every update and best practices. Just wanted to know if multiple apps will work with capacitor when running android and whether I should use ionic commands or or capacitor commands. ( I am not an expert so please forgive me if the answers are obvious I just need a green light to persist, Lol )
@galaxies_dev
@galaxies_dev 2 года назад
Hey Christopher, I'm really not an expert on having multiple apps in one project so I can't really say whether the stuff will work :/ But Ionic is basically "only" the UI of your components, Capacitor is the tool to build your app. So most likely you should interact with Capacitor!
@christophermorgan8938
@christophermorgan8938 2 года назад
@@galaxies_dev thanks mate. That definitely helps. Going through your vids has given me a good insight. Now I just have to bash away at it.
@abdelhamidtahiri9462
@abdelhamidtahiri9462 Год назад
How convert an app created with anguar and spring boot to android with capacitor
@galaxies_dev
@galaxies_dev Год назад
Sorry haven't worked with Spring boot for a long time :/
@abdelhamidtahiri9462
@abdelhamidtahiri9462 Год назад
@@galaxies_dev when i convert the angular app to android , how i connect it to api
@anujghadge4444
@anujghadge4444 Год назад
@@abdelhamidtahiri9462 Same Question, i have successfully converted the App, but cant seem to access the backend/Apis which are written in nodeJS
@yunus5949
@yunus5949 Год назад
Is that really Native app? :)
@galaxies_dev
@galaxies_dev Год назад
Sure, I can bring it to the app store and it's just like any other native app on a smartphone!
@prateekbhardwaj9943
@prateekbhardwaj9943 Год назад
now days everyone is asking website/ecommerce with its app! need to learn mobile development also i think..
@galaxies_dev
@galaxies_dev Год назад
It's that easy :)
@carlitros4494
@carlitros4494 Год назад
Fake
@galaxies_dev
@galaxies_dev Год назад
?
Далее
The Ionic Newsflash 🎉 July 2021
13:23
Просмотров 4,4 тыс.
Angular Material Mobile App with Capacitor
36:35
Просмотров 19 тыс.
КИТАЕЦ ЗА 24 МИЛЛИОНА / РАЗГОН
1:10:06
Why I moved to React Native
12:06
Просмотров 39 тыс.
MultiVersus_20230424033713
1:50
Просмотров 832
How to Build Your Own Capacitor Plugin for Ionic
26:59
These React Native Apps are 🔥 | App Review
20:04
Просмотров 8 тыс.
Git MERGE vs REBASE
16:12
Просмотров 1 млн
Мой странный компьютер 2024
18:33
КАК GOOGLE УКРАЛ ANDROID?
17:44
Просмотров 50 тыс.