Absolutely! This is the second video I checked on Ionic (first was from Simon as well), and found it excellent👍 Thankyou Simon🙏
Год назад+38
9:42 - "cap command not found" -> had to type in "npx cap open ios" or "ionic cap open ios" 16:27 - "no devices or emulators found", but android studio sees my device -> "npx native-run android --list" can reveal potential errors 3:00:22 - I think he's referring to this video: ruclips.net/video/SSv--IrWH3c/видео.html
Honestly, I'm lost as to how Ionic Capacitor isn't more popular. I've made apps with Capacitor and not only is it easy, the things you make also run fluid and work pretty good. Especially if you make it a single-page app, use CSS animations and some things to make it feel like a native app (larger buttons, disabling the webkit highlighting). Like sure you're not gonna get native performance/flexibility but for social media apps and stuff it works great
@@peterfrom80s I guess you're right but, I don't think it's a bad option for CRUD based apps, like a social media or restaurant apps. If you need more native functionality then yes, Kotlin or react native is the way to go
I really do like Ionic. I must admit I stop short of creating 'native' applications, not because I don't like the approach but because I hate the app stores. If your audience is targeted then you can absolutely go for this by giving a url with an instruction to create a home page link. HTML5 support for stuff like barcoding, offline functionality, geo awareness, and now notifications seriously reduces the need to have a native app. Fab video!
Coming from a data science background, I finsished mobile app , via (ionic html css & plain vanila javascritp) and backend on flask python. I wrapped around with webview. It came easy to me, as i manage quite ok in python. Was thinking to build completely using ionic and capacitor, but looks like asteep learning curve required. Wondering should i spend so much time on this, or I continue with what I know, and just navigate around the way with that.
Nice tutorial ! Very easy to follow and so far (I haven’t saw it all just yet). Although I have a question please: should we always use ionic components (the IonSomethings)? I ask this as their choices for how a component is structured proves quite challenging to change even the styles (due to the shadow DOM)
To avoid the glitchy looking change from the Intro page to the Login page after the checkStorage call, set the introSeen variable default to null and do not render the Intro component nor the Login page until the introSeen has been set to an actual boolean value. Like: ... const [introSeen, setIntroSeen] = React.useState(null); {introSeen === false ? ( {/* Intro component... */} ) : introSeen === true && ( {/* Login page... */} )} ...
When teaching, showing, it is necessary to move more slowly between programs, pages, files. Hold for 2-3 seconds. I understand that kind of jumping around. When I work, I do the same. But when something is shown, it is not your speed that needs to be worked on. This is the target speed. And the target is the beginner. Otherwise, "he might have an epileptic fit from such flashing."
Very nice. Staying on the Android side everything is fine except the only beef I have is with gradle builds and conflicts between Android and Capacitor. The last time I used capacitor with Ionic I had to fix a lot of the configuration. Some of those problems have been corrected but new ones have emerged. This compatibility between Android versions and capacitor/gradlle versions is annoying. Previously I could use 'ionic cap run android --open --livereload --external' but only because I fixed the configuration myself. This time it won't run because 'com.android.tools.build.gradle:8.5.0' could not be resolved. I am up to gradle 8.7 and according to Android docs this is compatible with Android gradle 8.5. It seems that capacitor doesn't think so though. It brings up 'org.gradle.plugin.api-version required 8.7. Then mentions that Java 11 being compatible with Java 8. In Android Studio I point to a Java version that I downloaded to satisfy compatibility with the Java version which I guess now satisfies running the Kotlin code that is generated for the Android app. But it seems I'd have to manually change the configuration again which is a major pain in the a**. So not wanting to have gradle issues and old Java home pointers to my machine (because I do Java, Python and I currently have 5 different Java versions for different reasons including running docker images) I just develop from using 'ionic serve' and just open android and check if things look good on Android. I just have to live without ionic cap run android which for my purposes is fine.
They are different in many ways as Ionic is truly web, while RN is actually not using the standard web elements. Nonetheless, both approaches are great and work for many companies in different scenarios!
Thank you for this I am busy with a project for work that needs a mobile app. Im still working through this video. Are you showing push notifications at all in this video, If not have you got another video that can assist with that?
I have a rare error :( First I run the command ng build, after that I run the command ionic cap add android command, finally I run the command ionic cap open android. I am getting this error in the console after android studio has been opened. Cannot convert string value 'UNIFIED_TEST_PLATFORM' to an enum value of type 'com.android.builder.model.AndroidGradlePluginProjectFlags$BooleanFlag' (valid case insensitive values: APPLICATION_R_CLASS_CONSTANT_IDS, TEST_R_CLASS_CONSTANT_IDS, TRANSITIVE_R_CLASS, JETPACK_COMPOSE, ML_MODEL_BINDING) I already tried deleting the android folder but nothing changed
If you have an error similar to: `[capacitor] A problem occurred configuring root project 'android'. [capacitor] > Could not resolve all files for configuration ':classpath'. [capacitor] > Could not resolve com.android.tools.build:gradle:8.0.2.` When running 'ionic cap run android --livereload --external' I found the following helped fix the error for me on Mac Upgrade to Java 17 with Homebrew by running: 1) brew install openjdk@17 Make Java 17 your default Java: 2) echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc Refresh your current shell session to pick up the changes: 3) source ~/.zshrc To check your Java has updated: 4) java -version
How do you disable the GENERATE_SOURCEMAP? I'm using Ionic CLI 7.2.0 and it seems like there is no longer an option in "ionic build --no-source-map". "GENERATE_SOURCEMAP=false" in ".env" not working either. I also try putting the "GENERATE_SOURCEMAP=false" inside package.json under "scripts: { build }" parameter but no luck. Would you help me? Thanks in advance.
I am using external self created angular library in my project. In project when I do "ionic/npx cap add android" it works fine, and when I do "ionic/npx cap sync android" it gives an error project/android/src/main not found. Why it is finding assets in android/src/main rather /android/app/src/main
Blank white screen when using livereload. Hours of searching on Google for an answer with no good answers. Getting the PTSD again which I've suffered since the early days of Cordova and remembering why I keep avoiding trying to build a hybrid app. The tooling of these systems is so incredibly convoluted and painful.
help how to fix this => [error] Unable to launch Android Studio. Is it installed? // iahave already installed android studio [error] Error: spawn UNKNOWN at ChildProcess.spawn (node:internal/child_process:413:11) at Object.spawn (node:child_process:757:9) at baseOpen (C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli ode_modules\open\index.js:224:34) at async openIOS (C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli\dist\ios\open.js:8:5) at async runTask (C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli\dist\common.js:144:23) at async open (C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli\dist\tasks\open.js:48:9) at async openCommand (C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli\dist\tasks\open.js:32:13) at async C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli\dist\index.js:139:9 at async C:\Users\TRUPOS\AppData\Roaming pm ode_modules\@capacitor\cli\dist\telemetry.js:26:13 at async Command.=>
I have a error that i have been trying to fix all day, been through every stackoverflow issue, and nothing fix it: [capacitor] A problem occurred configuring root project 'android'. [capacitor] > Could not resolve all files for configuration ':classpath'. [capacitor] > Could not resolve com.android.tools.build:gradle:8.0.2. When running 'ionic cap run android --livereload --external' Please, somebody help, i need this to run. It's my work.
For myself I had to update my Java to 17 and found the following worked for me. Bare in mind I am on Mac Upgrade to Java 17 with Homebrew by running: 1) brew install openjdk@17 Make Java 17 your default Java: 2) echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc Refresh your current shell session to pick up the changes: 3) source ~/.zshrc To check your Java has updated: 4) java -version
@@saadhabashneh5587 no nothing is like flutter,flutter uses one language,dart, this one is uses html css,js, go with flutter don't waste your time with this
Getting an error here on "ionic cap run ios" or "npx cap run ios": warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'App' from project 'App') ** BUILD FAILED **
![Vue.js Course for Beginners [2021 Tutorial]](/img/1.gif)
This by far has to be the best Ionic-react-capacitor tutorial on youtube. Thanks Simon.
That's exactly what I wanted to create - thank you and hope you enjoy it :)
Absolutely! This is the second video I checked on Ionic (first was from Simon as well), and found it excellent👍
Thankyou Simon🙏
9:42 - "cap command not found" -> had to type in "npx cap open ios" or "ionic cap open ios"
16:27 - "no devices or emulators found", but android studio sees my device -> "npx native-run android --list" can reveal potential errors
3:00:22 - I think he's referring to this video: ruclips.net/video/SSv--IrWH3c/видео.html
thanks bro you're a life saver
the real mvp
Honestly, I'm lost as to how Ionic Capacitor isn't more popular. I've made apps with Capacitor and not only is it easy, the things you make also run fluid and work pretty good. Especially if you make it a single-page app, use CSS animations and some things to make it feel like a native app (larger buttons, disabling the webkit highlighting). Like sure you're not gonna get native performance/flexibility but for social media apps and stuff it works great
@@peterfrom80s I guess you're right but, I don't think it's a bad option for CRUD based apps, like a social media or restaurant apps.
If you need more native functionality then yes, Kotlin or react native is the way to go
This course came at the perfect time because I've recently started building native applications with ionic and capacitor! Thanks
Awesome, hope you enjoy the course! Let me know if you ever encounter problems :)
@@galaxies_dev can you please make video on building the auto complete search bar in ionic.
I really do like Ionic. I must admit I stop short of creating 'native' applications, not because I don't like the approach but because I hate the app stores. If your audience is targeted then you can absolutely go for this by giving a url with an instruction to create a home page link.
HTML5 support for stuff like barcoding, offline functionality, geo awareness, and now notifications seriously reduces the need to have a native app.
Fab video!
Coming from a data science background, I finsished mobile app , via (ionic html css & plain vanila javascritp) and backend on flask python. I wrapped around with webview. It came easy to me, as i manage quite ok in python. Was thinking to build completely using ionic and capacitor, but looks like asteep learning curve required. Wondering should i spend so much time on this, or I continue with what I know, and just navigate around the way with that.
Nice tutorial ! Very easy to follow and so far (I haven’t saw it all just yet).
Although I have a question please: should we always use ionic components (the IonSomethings)? I ask this as their choices for how a component is structured proves quite challenging to change even the styles (due to the shadow DOM)
I barely speak English and I learned a lot. Really very good!
A perfect timing of this course, cause one day before I started this journey and got this course today
You really deserve more than a like or a comment. I learned a lot from you. Love from Pakistan ❤
I'm sure I'm gonna be making a bootcamp study just for this course.
Let me know if anything is unclear ✌
To avoid the glitchy looking change from the Intro page to the Login page after the checkStorage call, set the introSeen variable default to null and do not render the Intro component nor the Login page until the introSeen has been set to an actual boolean value. Like:
...
const [introSeen, setIntroSeen] = React.useState(null);
{introSeen === false ? (
{/* Intro component... */}
) : introSeen === true && (
{/* Login page... */}
)}
...
Nice idea, thanks for the addition!
but what's the reason behind that glitch?
This is great. I use Ionic for a while (just newbie) but now I learn I can do alot with it. Very nice video. Thx again
Sir, I am waiting for your ionic-angular course in udemy. I am sure that will be a viral since it is rare :D
I was waiting for Angular... But I had to close the video at the beginning
When teaching, showing, it is necessary to move more slowly between programs, pages, files. Hold for 2-3 seconds. I understand that kind of jumping around. When I work, I do the same. But when something is shown, it is not your speed that needs to be worked on. This is the target speed. And the target is the beginner. Otherwise, "he might have an epileptic fit from such flashing."
nah bruh! your pc must be monster super smooooothhh
Fantastic Video, thank you very much !
Very nice. Staying on the Android side everything is fine except the only beef I have is with gradle builds and conflicts between Android and Capacitor. The last time I used capacitor with Ionic I had to fix a lot of the configuration. Some of those problems have been corrected but new ones have emerged. This compatibility between Android versions and capacitor/gradlle versions is annoying. Previously I could use 'ionic cap run android --open --livereload --external' but only because I fixed the configuration myself. This time it won't run because 'com.android.tools.build.gradle:8.5.0' could not be resolved. I am up to gradle 8.7 and according to Android docs this is compatible with Android gradle 8.5. It seems that capacitor doesn't think so though. It brings up 'org.gradle.plugin.api-version required 8.7. Then mentions that Java 11 being compatible with Java 8. In Android Studio I point to a Java version that I downloaded to satisfy compatibility with the Java version which I guess now satisfies running the Kotlin code that is generated for the Android app. But it seems I'd have to manually change the configuration again which is a major pain in the a**. So not wanting to have gradle issues and old Java home pointers to my machine (because I do Java, Python and I currently have 5 different Java versions for different reasons including running docker images) I just develop from using 'ionic serve' and just open android and check if things look good on Android. I just have to live without ionic cap run android which for my purposes is fine.
Wholly christ that guys almost my twin! That screwed me up when he popped up. I didn’t remember making the video. 🤣
My best channel ever❤❤
Cheers dude, great course!
Los mejores tutoriales siempre, ojalá hagan más en español
Sorry, my Spanish is not yet good enough to make a 3 hour course :(
this looks very good. so how does this stack up to react native? I like that ionic has its own built in version of tailwind and icons.
They are different in many ways as Ionic is truly web, while RN is actually not using the standard web elements. Nonetheless, both approaches are great and work for many companies in different scenarios!
So far so good
Hope you enjoyed the course even more!
@@galaxies_dev sure, I hope so
Thank you for this
I am busy with a project for work that needs a mobile app. Im still working through this video. Are you showing push notifications at all in this video, If not have you got another video that can assist with that?
We don't cover push notifications in this video, but I should have a video about that on my own channel!
@@galaxies_dev Thank you so much
Ionic react with pwa..... please do the video on this
@galaxies_dev Can you tell me how are you getting that cool dropdown autocomplete ?
What would be a good place to store API bearer token after a login? Would you use @capacitor/preferences?
I have a rare error :(
First I run the command ng build, after that I run the command ionic cap add android command, finally I run the command ionic cap open android. I am getting this error in the console after android studio has been opened. Cannot convert string value 'UNIFIED_TEST_PLATFORM' to an enum value of type 'com.android.builder.model.AndroidGradlePluginProjectFlags$BooleanFlag' (valid case insensitive values: APPLICATION_R_CLASS_CONSTANT_IDS, TEST_R_CLASS_CONSTANT_IDS, TRANSITIVE_R_CLASS, JETPACK_COMPOSE, ML_MODEL_BINDING)
I already tried deleting the android folder but nothing changed
Can you guys do a RPA Development tutorial plz?
How do you build a project with ionic without a javascript framework?
Thank you very much
You're welcome, if you're interested in anything specific about cross-platform development just let me know ✌
waiting for the similar with angular and vue possible
If you have an error similar to:
`[capacitor] A problem occurred configuring root project 'android'.
[capacitor] > Could not resolve all files for configuration ':classpath'.
[capacitor] > Could not resolve com.android.tools.build:gradle:8.0.2.`
When running 'ionic cap run android --livereload --external'
I found the following helped fix the error for me on Mac
Upgrade to Java 17 with Homebrew by running:
1) brew install openjdk@17
Make Java 17 your default Java:
2) echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc
Refresh your current shell session to pick up the changes:
3) source ~/.zshrc
To check your Java has updated:
4) java -version
How are both native and cross platform??
ionic serve --lab not showing different platform views
Can we all appreciate that how he spends his 24 hours to entertain us ❤️.
What ??
Bot
Is the Apple Store approving capacitor projects?
Yes of course
I haven't heard from ionic in quite some time.
Well, they are doing better than ever and just released a major new version this year! Plus especially Capacitor is getting more traction lately.
What about mac book air? How many ram required and space?
How do you disable the GENERATE_SOURCEMAP? I'm using Ionic CLI 7.2.0 and it seems like there is no longer an option in "ionic build --no-source-map".
"GENERATE_SOURCEMAP=false" in ".env" not working either.
I also try putting the "GENERATE_SOURCEMAP=false" inside package.json under "scripts: { build }" parameter but no luck.
Would you help me? Thanks in advance.
is anyone else encountering the glitchy IonHeader, where the Menu button seems to be rendered later than the IonTitle?
Thank you so much 👋👍🫡👏👌🙏🏻😎🤝🫰🏻✌️
Happy to help!
Let's see what this one is all about
It's about building native mobile apps with just web technology - let me know when you got any questions about this 👋
@@galaxies_dev yes sir
@@jordanyoung1836 h hl o
the D in anDroid is not silent!
I am using external self created angular library in my project. In project when I do "ionic/npx cap add android" it works fine, and when I do "ionic/npx cap sync android" it gives an error project/android/src/main not found. Why it is finding assets in android/src/main rather /android/app/src/main
Blank white screen when using livereload. Hours of searching on Google for an answer with no good answers. Getting the PTSD again which I've suffered since the early days of Cordova and remembering why I keep avoiding trying to build a hybrid app. The tooling of these systems is so incredibly convoluted and painful.
Great
Thank you! If you encounter any problems, just let me know :)
I am on windows can I create IOS app? I dont have xcode for simulation
Great ❤
Thank you - hope you can build some epic mobile apps soon!
help how to fix this =>
[error] Unable to launch Android Studio. Is it installed? // iahave already installed android studio
[error] Error: spawn UNKNOWN
at ChildProcess.spawn (node:internal/child_process:413:11)
at Object.spawn (node:child_process:757:9)
at baseOpen (C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli
ode_modules\open\index.js:224:34)
at async openIOS (C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli\dist\ios\open.js:8:5)
at async runTask (C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli\dist\common.js:144:23)
at async open (C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli\dist\tasks\open.js:48:9)
at async openCommand (C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli\dist\tasks\open.js:32:13)
at async C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli\dist\index.js:139:9
at async C:\Users\TRUPOS\AppData\Roaming
pm
ode_modules\@capacitor\cli\dist\telemetry.js:26:13
at async Command.=>
I have a error that i have been trying to fix all day, been through every stackoverflow issue, and nothing fix it:
[capacitor] A problem occurred configuring root project 'android'.
[capacitor] > Could not resolve all files for configuration ':classpath'.
[capacitor] > Could not resolve com.android.tools.build:gradle:8.0.2.
When running 'ionic cap run android --livereload --external'
Please, somebody help, i need this to run. It's my work.
For myself I had to update my Java to 17 and found the following worked for me. Bare in mind I am on Mac
Upgrade to Java 17 with Homebrew by running:
1) brew install openjdk@17
Make Java 17 your default Java:
2) echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc
Refresh your current shell session to pick up the changes:
3) source ~/.zshrc
To check your Java has updated:
4) java -version
It seems like you don't like mysql for data
This is great tutorial, thank you for sharing it with us
the navigation is so confusing... the 2 routeroutlet is hurting my brain!! :((
Beacause I'm in Vietname.
lots of pluckins :D
ios simulator does not work on a linux device...
What is the theme of the IDE ?
Vs code
@@cryptoboy1461 i mean the syntaxe color and background color
It's the Shades of Purple theme :)
@@galaxies_dev thank you for your answer !
26:36
I am getting error while running " cap open ios" command
That's because capacitor isn't installed globally on your device. You can run... npx cap open ios... This should work for you.
What is ionic and capacitor
Ionic is a set of mobile-ready UI components, and Capacitor helps to build native iOS/Android apps from a single codebase with JS, HTML and CSS!
@@galaxies_dev so it's like flutter but for js ?
@@saadhabashneh5587 no nothing is like flutter,flutter uses one language,dart, this one is uses html css,js, go with flutter don't waste your time with this
Getting an error here on "ionic cap run ios" or "npx cap run ios":
warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not
specify any outputs. To address this warning, either add output dependencies to the script phase, or configure
it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'App' from
project 'App')
** BUILD FAILED **
First to comment
Yo first comment 😅
Such a shame you are teaching Capacitor using React. This is plain wrong.