Due to certain reasons I can't download android studio. And I recently incorporated sqlite DB in my app. As far as i know, ionic serve cannot run a sqlite DB. I wanted to know if it's possible to test my ionic 3.x app on an android device without having android studio.
You don't need Android studio at all to work on Ionic development. Any editor + a terminal will do.
Having said that it is strongly recommended to work with the free Visual Studio Code editor, as it's built by Microsoft, the same team that built Typescript which makes coding there a great experience.
I also suggest this set of plugins to get you started.
Unfortunately you cannot work on SQLite in the browser but I strongly recommend you use ionic-storage anyway, which provides a single API and will use automatically whatever best storage method is available in the current platform, with no additional effort from you.
Ionic Storage is a package created and maintained by the ionic team to abstract development from the specifics of each browser or platform and automatically use the best storage solution available.
1. Installing Dependencies
In your case for SQLite you need to first install the dependencies for both Angular and Cordova:
npm install #ionic/storage --save
and
cordova plugin add cordova-sqlite-storage --save
Then edit your NgModule declaration in src/app/app.module.ts to add IonicStorageModule as an import:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [...],
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql'],
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...],
})
export class AppModule { }
2. Inject Storage module into your component
import { Component } from '#angular/core';
import { Storage } from '#ionic/storage';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public storage: Storage) {}
}
3. Using Ionic Storage
Whenever you access storage, make sure to always wrap your code in the following:
storage.ready().then(() => { /* code here safely */});
3.1 Saving a key-value pair
storage.ready().then(() => {
storage.set('some key', 'some value');
});
3.2 Retrieving a value
storage.ready().then(() => {
storage.get('age').then((val: string) => {
console.log('Your age is', val);
});
});
3.3 Deleting a key-value pair
storage.ready().then(() => {
storage.remove('key').then((key: string) => { /* do something after deletion */})
});
Related
I'm using capacitor v3 beta and there are no problem working in web and iOS but can't run android app.
Build is done fine but when running the app appears this error:
E/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 41296 - Msg: ERROR Error: Uncaught (in promise): Error: "Storage" plugin is not implemented on android
Error: "Storage" plugin is not implemented on android
To solve this error I've removed the storage plugin and replaced with ionic/storage plugin. But when I use other plugin, for example the Keyboard, the error shows up saying that Keyboard plugin is not implemented on android.
So I suppose that there is some problem with Android builds or project configuration.
These are de node dependencies in my package.json
"#capacitor/android": "^3.0.0-beta.6",
"#capacitor/core": "^3.0.0-beta.1",
"#capacitor/storage": "^0.3.1",
And my capacitor.config.json file
{
"appId": "net.flowww.me",
"appName": "FLOWwwMe",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "www",
"cordova": {}
}
iOS version works well with this configuration.
Storage plugin not worked after Ionic v3 upgrades from v2.
It work after manually adding a plugin to MainActivity.java for me:
package com.ionic.app;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.capacitorjs.plugins.storage.StoragePlugin;
public class MainActivity extends BridgeActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
registerPlugin(StoragePlugin.class);
}
}
I also faced the same problem when upgrading from capacitor 2 to 3
As it turned out, I forgot to execute:
npx cap sync android
This solved the problem
you must in mainActivity : add(StoragePlugin.class);
After creating new project and reviewing file differences saw that I have not installed
"#capacitor/cli": "^3.0.0-beta.6"
So I installed it and all compiles successfully.
In Capacitor's v2 doc, in the page dedicated to Storage Plugin (https://capacitorjs.com/docs/apis/storage) the import is done like:
import { Storage } from '#capacitor/storage';
Then in the Capacitor's v2 doc for Using Plugins (https://capacitorjs.com/docs/v2/apis) you'll find that:
Import the Plugins object. It represents the registry of all Capacitor plugins.
import { Plugins } from '#capacitor/core';
Get a plugin from the Plugin Registry (Plugins object).
const { Browser } = Plugins;
Use the plugin API:
async openBrowser() {
// On iOS, for example, open the URL in SFSafariViewController (the in-app browser)
await Browser.open({ url: "https://ionicframework.com" });
}
A common mistake is to import a plugin directly, then use the plugin API >immediately, resulting in the web implementation being used:
import { Browser } from '#capacitor/core';
async openBrowser() {
// On iOS, for example, this will open the URL in Safari instead of
// the SFSafariViewController (in-app browser)
await Browser.open({ url: "https://ionicframework.com" });
}
By using the plugins from the plugin registry (Plugins object), the native implementation of the plugin is used (if available), with fallback to the web version.
So if you're using Quasar with Capacitor v2 you probably gone crazy like me. Just replace Browser with Storage.
Maybe in v3 that problem is solved and that's why legomolina's answer works.
For Capacitor V3 plugins (tested on Android 11 & Ionic 5)
capacitor.plugins.json has the entry for Storage plugin,
MainActivity.java should not have the onCreate function, where CapV3 uses native API,
Try setting minifyEnabled=false in build.gradle.
If error disappears, create pro-guard rules in proguard-rules.pro as in https://github.com/ionic-team/capacitor/issues/739
I found the issue was solved by simply starting up Android Studio. It sync'd Gradle automatically and then I just restarted my Android dev environment - the error was gone and I was able to access Storage as per the capaitor plugin docs.
See https://capacitorjs.com/docs/android/troubleshooting#plugin-not-implemented
native. I want to active StackNavigator in App.js file. Please note my App.js file in different folder named 'app' and under app there is components folder under this I want to make all component file. here is my App.js
import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import Attendence from "./components/Attendence";
const Application = StackNavigator(
{
Home: { screen: Attendence }
},
{
navigationOptions: {
header: false
}
}
);
export default class App extends React.Component {
render() {
return <Application />;
}
}
As you said you have downloaded an old project ! it means you are about to tackle different node dependency packages errors on the route to get it running!
My tips to get your self saved from errors are like this
1: go into the package.json
2: note down every dependency names and versions
(the reason why to do that is simple ! you gonna need some awesome code that were in old version is now deprecated in new versions of those libs running!) so installing old ones would help you with that
3: if the point 2 does not work! please do check the version number of react native that you have and the one the real coder of the app used! and install the older version of react native in newer version there are some new things than old versions!
PRO TIP::: USE YARN
instead of NPM to save your self from the problems!
I have a problem with Ionic storage in my Ionic App for Windows (UWP app). I already tested and deployed my app for Android without any trouble.
Now I would like to generate an UWP app.
The app I’m developing is a workshop’s dashboard. The indicators change every day and I need to save them from one day to another. To do this I usethe storage module of Ionic.
When launching the command
$ionic serve
the app responds exactly as it should in the web browser (Firefox). From one launch to another my data are still there.
When I use
$ionic cordova run windows
the installation and launch steps of my app work fine. Every function of my app runs fine, but the call to storage (get and set) doesn’t work : when I close, and then reopen it as an autonomous application, I loose all data every time. It is the same when I run the app from Visual Studio.
Moreover, I write some console.log in the result of the promise and none of them is written in the Javascript console. It is like Windows does not recognize the command.
I tried with Visual Studio 2015 Update 3 and Visual Studio 2017, the result is identical. I followed the recommendation of Ionic Doc and add the target platform windows10 in the config.xml.
Does anyone have an idea of what I’m doing wrong ? Is there an incompatibility between Windows and Ionic ?
Thanks for any help.
Config :
Windows 10 64-bits
Ionic CLI: 3.19.1
Cordova CLI : 8.0.0
Node : v6.11.2
Visual Studio Community 2017 (15.5.27130.2036)
Extract of my code maPage.ts :
import { Storage } from '#ionic/storage';
export class maPage {
constructor(public storage: Storage) {
this.downloadData();
}
ionViewWillLeave()
{
this.saveData();
}
TabData = {
id: 0,
label: '',
Tab1: [],
Tab2: [],
attri1 : 0,
attri2: false
}
Param = {
Objet1: {NbObj1: 7},
Objet2: {NbObj2: 5}
}
saveData()
{
var Data: object;
Data =
{
TData: this.TabData,
TParam: this.Param
}
this.storage.set('Data', Data).then(_=> {
console.log('Backup done!');
}, error => {
console.log('erreur : ', JSON.stringify(error))
});
}
downloadData()
{
this.storage.ready().then(()=>{
console.log('storage ready');
this.storage.get('Data').then((val) => {
this.TabData = val.TData;
this.Param = val.TParam;
console.log('Récupération terminée !');
}).catch(erreur => {
console.log('La variable Data est vide ou n\'existe pas!');
console.log('erreur : ', JSON.stringify(erreur));
}).catch(err => {
console.log('storage not ready');
console.log('err : ', JSON.stringify(err));
});
}
}
On Windows platform, console.log is not supported. To do that, you should install cordova-plugin-console, or need to use alert function.
Regarding storage, I am suggesting you could use localstorage or cordova-sqlite-storage.
I want to get the android device language from the app developed using Ionic3, Cordova and Angular4.
How can I get it?
window.navigator.language worked for me with no plugin. I didn't check to see how the results compare to the Globalization plugin, but I got results like: Android: "en-us", "es-us" and on iOS: "en-US" and "es-XL"
also see https://stackoverflow.com/a/4079798/431296 -window.navigator.userLanguage wasn't defined on either Android or iOS, so I didn't include it
You can use cordova-plugin-globalization which also offers an ionic-native wrapper. It offers a lot of useful methods, but you are probably looking for getPreferredLanguage() or getLocaleName().
Installation:
ionic cordova plugin add cordova-plugin-globalization
npm install --save #ionic-native/globalization
Example:
import { Globalization } from '#ionic-native/globalization';
constructor(private globalization: Globalization) {
this.globalization.getPreferredLanguage()
.then(res => console.log(res))
.catch(e => console.log(e));
}
Follow up to David's answer, the Globalization API is deprecated.
With the ECMA Internationalization API now supported on iOS, Android and Windows devices, this plugin is not required any more.
* Migrating from this plugin to the ECMA Internationalization API is explained in this Cordova blog post.
If you're using ngx-translate,
import { TranslateService } from '#ngx-translate/core';
constructor(private translate: TranslateService) {
console.log(this.translate.getBrowserLang());
}
works fine on the devices and in the browser. It's returning "en" or "de".
For ionic 5 with capacitor:
npm install #capacitor/device
npx cap sync
in code:
import { Device } from '#capacitor/device';
console.log((await Device.getLanguageCode()).value); // en-US
https://capacitorjs.com/docs/apis/device
Ionic 4
In Ionic we call it Globalization performs operations specific to the user's locale, language, and timezone.
Installation : Terminal
ionic cordova plugin add cordova-plugin-globalization
npm install #ionic-native/globalization
Usages: Any Component or service file.
import { Globalization } from '#ionic-native/globalization/ngx';
constructor(private global: Globalization) { }
...
this.global.getPreferredLanguage()
.then(res => console.log(res))
.catch(e => console.log(e));
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.