I'm a tech teacher and I'm designing a coding course for high school students. I want to teach them Ionic without also having to teach them React, Angular, or Vue. They already know basic web development, so I want them to be able to create iOS, Android, and web apps using only vanilla Javascript + Ionic.
When I run "ionic init" to get started, I'm forced to select from Angluar, React, Vue, or Custom. So, of course, I select Custom.
Then I start building a "Hello World" app. When it comes time to view the simple app in Android Studio, I run "ionic capacitor add android" and then "npx cap open android." All good.
The problem arises when I start adding more to my simple app, and then try to view those changes in Android Studio. Normally, this would be done by running "ionic capacitor copy android". But that doesn't work in my custom app. I get this error message:
[ERROR] Cannot perform build.
Since you're using the custom project type, you must provide the ionic:build npm script so the Ionic CLI can build your project.
How do I solve this problem? How I provide a build script for my custom app?
Thank you for your help!
Since you are using vanilaJS you shouldn't need any build step at all. Just put your index.html to www folder, with some content. You can start off with something like
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ionic without any framework</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core#latest/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core#latest/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core#latest/css/ionic.bundle.css"/>
</head>
<body>
<!-- We create a vanilla Javascript function to call the alert -->
<script>
hello = async function () {
alert('Hello World!');
};
</script>
<!-- We declare an Ionic app using the <ion-app/> element -->
<ion-app>
<!-- Cool thing, the Ionic CSS utilities could be used too -->
<ion-content text-center>
<h1>Basic usage</h1>
<!-- We add an ion-button with an onclick event -->
<ion-button onclick="hello()">Click me</ion-button>
</ion-content>
</ion-app>
</body>
</html>
and then ionic capacitor copy android should work. (I assume following initialization steps ionic init, npm init, ionic capacitor add android)
I think what is needed after making any changes is to run npx cap sync and then npx cap open android.
Since it would appear you are trying to teach them the bar bones of development I would not even use Ionic. It is a framework for cross-platform development. And once you make a choice of using that framework, you may as well buy in to one of the Javascript/Typescript development frameworks to get the advantages those bring.
For doing POJO work targeted to iOS and Android, I would investigate using Cordova.
Consider it the difference between teaching a student the basics of audio recording on a four-track tape deck rather than a 128-track digital studio with all the bells and whistles.
Many of the basics are the same without the complications of all the advancements.
At my day job doing Enterprise-level financial applications we still use Cordova and have no plans to migrate any time soon.
In my admittedly biased opinion, Cordova would be a better starting point for a "Plain old Javascript object" based introduction to cross-platform development.
This will make the leap into Ionic and Capacitor easier.
Because, again just my opinion, if they haven't learned the advantages of a framework like Angular, going to Ionic/Capacitor is the cart before the horse.
Related
I might need to decide for a company which technology to choose, Ionic (with Cordova or Capacitor) or React Native. In this context, please help me to understand the Code-Push process.
Ionic ships all non-native code for an utilized (system-default) browser. As a developer you write REAL web code, e.g. JS, HTML and CSS. Therefore, there is no need to submit a new build version to the App-/Playstore, unless native plugins were changed.
Now writing React Native feels like writing a React web app, but as a developer you quickly notice that you can only use specific tags like <Text> which later get compiled to native components. Stuff like <div> and <span> does not work in that context.
So my question is, if React Native compiles basically all the code (not just the native Android/iOS modules) into native code, how does CodePush still work? If native code is updated with basically every change, why does CodePush not work after updates of those actual native modules that require a bridge? Where is the difference between a native and non-native module in React Native?
I think the third framework relevant in that context is Flutter, which seems to have its own live-update service: https://waytoon.github.io/Chimera/ Is that also limited to updates of non-platform-specific code?
I've just finished building my website and will deploy it shortly, however I want to make an app and I was hoping to find a way of taking my existing front end code and dump it into ionic and get a nice app out of it.
Is it going to be that simple to make an app using ionic or will I have to rebuild the front end all over again if I'm going to use ionic?
It depends on what you made your site with. If you used a framework compatible with ionic like angular it is fine (see this article: https://levelup.gitconnected.com/converting-angular-web-application-into-ionic-app-5af678325626)
If you have developed in pure Html / css / js you can always reuse part of your code but you will need to import it in a framework (React, Vue or Angular)
Does phonegap or Ionic framework can be used for mobile website.
Actually I am planing to build mobile app. But confused to pick one of them (phonegap/Ionic).
So, please guide me which one is better. And please guide which one is best for both mobile app and mobile website.
Yes you can. In ionic2 you can do
ionic platform add browser
ionic build browser
Example of website using ionic http://m.stubapp.com/
At first Phonegap is now called Cordova.
Cordova builds an native App using HTML, Javascript and CSS.
With the ionic framework you can Create and Design "Apps" with HTML, Typescript and Sass. Ionic is perfect if you want your App our mobile website to look like an normal native App. Ionic uses Cordova to build the App. I used Ionic myself to build a website.
Ionic gives you the option to build for a browser (ionic build browser).
Then you get the computed HTML, Javascript and CSS.
Please excuse my English, i´m from Germany ;)
Do you have an idea what is this "Install this web app" bubble called? I want to know whats the name of that thing so I can research more about it.
Do you also have an idea on how to implement it? I need it to function exactly like the one on the image.
Any useful links related to it will be a great help.
see this .
is very simple to use
<link rel="stylesheet" href="path/to/add2home.css">
<script type="application/javascript" src="path/to/add2home.js"></script>
I'm a newbie in BB10 Webworks... I am doing some experiments with the dev alpha's magnetometer...
how can I put these to work? I tried
function magCallback(sensor, data) {
$("#xvalueut").html(data.x);
$("#yvalueut").html(data.y);
$("#zvalueut").html(data.z);
}
blackberry.event.addEventListener("devicemagnetometer", magCallback);
and didn't worked, I also put <feature id="blackberry.sensors" /> in the config file, and inserted a <script src="local:///chrome/webworks.js" type="text/javascript"></script> in the index.html
I hope you can help me...
We have a really good sample app in our GitHub repo that you'll probably want to check-out. It deals with all of the sensors you can access via BlackBerry WebWorks.
Here's the link: Sensors Sample App