@vancurengroup wrote:

Hi friends!

Has anyone had any success implementing geofencing in Ionic 4 or Capacitor on Android? I have tried the three plugins below using Ionic 4 with Cordova and Android and then trying Ionic 4 with Capacitor.

It appears the one open-source Cordova Geofencing plugin does not work because of an outdated implementation.

For Capacitor the two plugins listed I can’t seem to get to work. The first has no additional code aside from the boilerplate echo method. The second, FancyGeo, will not work after registering in my MainActivity.java and importing into my component.

The three plugins in question are:

Cordova

Capacitor
https://github.com/mvollebregt/capacitor-geofence-tracker (no android code)
https://github.com/triniwiz/capacitor-fancy-geo

Have a great weekend!

Posts: 1

Participants: 1

Read full topic

@rageshantony wrote:

I am developing a hotel booking app for mobile and desktop

this this the screenshot

image.jpg1920×857 731 KB

my problem this when I hover mouse over the card list and scroll using my scroll wheel the whole page is scrolling

image.png1920×857 100 KB

How to prevent this ?

I tried but it not working

also gave scroll=“false” in mapelement div , but map stop loading

My code

<ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
          <ion-menu-button autoHide="false"></ion-menu-button>
        </ion-buttons>
      <ion-title>Hotel Location</ion-title>
    </ion-toolbar>
 
</ion-header>
<ion-content scroll="false" slot="fixed">


    <ion-grid  > 
      <ion-row>
          <ion-col size="2">
              <ion-list   >
                <ion-item  *ngFor="let hotel of hotels">
                  <ion-card >
                    <ion-img src="{{hotel.image}}" ></ion-img>
                    <ion-card-header>
                        <ion-card-title>{{hotel.hotelName}}</ion-card-title>
                      <ion-card-subtitle>Chennai</ion-card-subtitle>
                    </ion-card-header>
                    <ion-card-content> 
                       
                        <ion-item>
                            <ion-label>
                              <h2>Economy</h2>
                              <h3>2 Beds | 0 Balcony</h3>
                              <p>Listen, I've had a pretty messed up day...</p>
                            </ion-label>
                            <ion-badge style="text-align: end" color="danger" slot="end">$100</ion-badge>
                
                          </ion-item>
                               
                    </ion-card-content>
              
              </ion-card>
              </ion-item>
                </ion-list>
          </ion-col>
        <ion-col scroll="false"  size="10">
            <div  #mapElement class="map"></div>

        </ion-col>
       
      </ion-row>
    </ion-grid>
  


     
</ion-content>

.map {
    height: 95%;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

export class ListHotelDesktopPage implements OnInit, AfterViewInit {
  latitude: any;
  longitude: any;
  @ViewChild('mapElement',null) mapNativeElement: ElementRef;
  hotels: any;
  map: any;

  

  constructor(private router: Router,private httpN: HTTP,http: HttpClient,private geolocation: Geolocation,public modalCtrl : ModalController,public ngZone: NgZone) {
   
    const url: string = 'https://jsonbase.com/ragesh/getHotels';

    http.get(url).subscribe((data: any) => {
      console.log('get', data.hotels);
      this.hotels = data.hotels;
    }, (error) => {
      console.log('get - ERROR', error);
    });

  
  }
    
//------------------


ngOnInit() {
}

ngAfterViewInit(): void {
  this.geolocation.getCurrentPosition().then((resp) => {
    this.latitude = resp.coords.latitude;
    this.longitude = resp.coords.longitude;
    this.map = new google.maps.Map(this.mapNativeElement.nativeElement, {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    
    const pos = {
      lat: this.latitude,
      lng: this.longitude
    };

   

   this.map.setCenter(pos);
  }).catch((error) => {
    console.log('Error getting location', error);
  });
}
async openModal(){
  const modal = await this.modalCtrl.create({
    component: ModalPagePage
  });
  return await modal.present();
}



markMap(hotel: any)
{
  //alert(name);


  const pos = {
    lat: hotel.hotelLatLng.lat,
    lng: hotel.hotelLatLng.lng
  };
  const icon = {
    url: 'assets/icon/favicon.png', // image url
    scaledSize: new google.maps.Size(50, 50), // scaled size
  };

  const marker = new google.maps.Marker({
    position: pos, //marker position
    map: this.map, //map already created
    title: hotel.hotelName,
    icon: icon //custom image
  });
  
  const contentString = '<div id="content" style="height: 100%;margin: 10;padding: 10;" >' +

'<h1 id="firstHeading" class="firstHeading">'+hotel.hotelName+'</h1>' +
'<div id="bodyContent" style="height: 100%;margin: 10;padding: 10;">' +
'<img src="'+hotel.image+'" width="200">' +
'<ion-button color="primary" id = "'+hotel.hotelName+'">BOOK Now</ion-button> '+
'<p> '+hotel.hotelDescription+' </p>' +
'</div>' +
'</div>';

let infoWindow2 = new google.maps.InfoWindow({
  content : contentString
  });
  google.maps.event.addListenerOnce(infoWindow2, 'domready', () => {
  document.getElementById(hotel.hotelName).addEventListener('click', () => {
 // this.openModal();
 this.router.navigateByUrl('/hotel-details');
  });
  });

marker.addListener('click', function() {
  infoWindow2.open(this.map, marker);

});
}
   
}

Please help me make only card list scrollable

Posts: 1

Participants: 1

Read full topic

@Calll wrote:

Hi guys,

I’m new to Deploy and not sure how to get it up and running - I followed the quickstart installation guide. I’m using Ionic 3, and I don’t see any changes in my app.

From looking at this Deploy API page, I see that the quickstart guide doesn’t mention setting the update method to “none” (is this essential?) and include an import it into your code. Hence why it wasn’t doing diddly squat.

Ok, so I include this code into app.module.ts (I presume?)

import { Deploy } from 'cordova-plugin-ionic';

async changeToBetaChannel() {
  await Deploy.configure({channel: 'BETA'});
}

To which it says: “Cannot find module ‘cordova-plugin-ionic’”. I looked up the package and I ran “npm i cordova-plugin-ionic” to hopefully solve it, but it still can’t find cordova-plugin-ionic.

I feel like this is really simple and I’m missing something obvious, so before I waste another day trying to get it running…

A) Is there any other good guide? I think the quickstart isn’t detailed enough, and the Deploy API doesn’t elaborate enough.
B) Is there any difference between ionic deploy add or cordova plugin add? My variables were saved fine - but does anything else happen in the background?
C) What is the minimum code I need to listen for updates, and where do I put it - app.module.ts? app.component.ts? Its not very clear. I’m guessing the two bits of code mentioned above and this:

async configureDeploy() {
  const config = {
    'appId': 'YOUR_APP_ID',
    'channel': 'CHANNEL_NAME'
  }
  await Deploy.configure(config);
}

Any help would be greatly appreciated. In the appflow dashboard I see I have 6/10000 Live updates used - so something must be working somewhere, but I don’t see any changes ¯_(ツ)_/¯

Posts: 1

Participants: 1

Read full topic

@rolinger wrote:

I am running Ionic CLI 5.2.6, and app is still on Ionic-v1. I just upgraded from CLI v1.7.14 and never really used any of the ionic serve or --livereload features before and nowt attempting to use these features for the first time

Running ionic cordova run android -l successfully starts the service and launches the app to my test Samsung device. The service sees changes to saved files in www folder, but the app on the device is not getting updated with the changes. With the service running and the app deployed, from another cli I did another ionic cordova build android to see if the newest changes would get deployed to the already running app but nope, didn’t work.

Am i not doing something correctly or not understanding how this is supposed to work?

C:\dev\myApp>ionic cordova run android -l
[INFO] Hardware device(s) found for android. Using --device.
> ionic-v1.cmd serve --host=localhost --port=8101 --livereload-port=35730 --dev-port=53704 --engine=cordova --platform=android
[v1] [11:19:56] Serving directory www

[INFO] Development server running!

       Local: http://localhost:8101

       Use Ctrl+C to quit this process

> cordova.cmd build android --device
> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device --forward 8101:8101 --forward 35730:35730 --forward 53704:53704
[native-run] Selected hardware device 2752c2e3
[native-run] Forwarded device port 35730 to host port 35730
[native-run] Forwarded device port 8101 to host port 8101
[native-run] Forwarded device port 53704 to host port 53704
[native-run] Installing platforms\android\app\build\outputs\apk\debug\app-debug.apk...
[native-run] Starting application activity com.myApp/com.myApp.MainActivity...
[native-run] Run Successful
[v1] [11:22:12] www\templates\tab-menu.html changed
[v1] [11:28:39] www\css\ionic.app.css changed
[v1] [11:28:40] www\css\ionic.app.min.css changed

Posts: 1

Participants: 1

Read full topic

@wahibbel wrote:

Hello everyone, I’m in a big problem
I’m searching for some help in IONIC WebSocket client.
I am working on a project and I have to send notification from WebSocket spring boot server to ionic client, I tried a lot of examples, but no one is working, to be clear, I didn’t find an ionic web socket example so I tried to transform angular example to ionic, but it doesn’t work with me.
I’m asking if anyone had an experience with this or anyone can help me I’ll be very thankful.
have a nice day :).

Posts: 1

Participants: 1

Read full topic

@BrentAshWilliams wrote:

Hello,

I am using the latest version of ionic 4.

I am trying to use ion-toggle in the following way:

    <ion-item>
        <ion-label>Test</ion-label>
      <ion-toggle color="warning" [(ngModel)]="testVar" (ionChange)="toggleEvent($event)"></ion-toggle>
    </ion-item>

When I launch the app (testing in chrome browser) with ionic serve if I try to toggle it will do the first one, but then the entire chrome brower tab running the app freezes up.

If I use the ngModel but remove the ionChange it works continually.

If I use ionChange and remove ngModel it works continually.

Both together do not work.

Any ideas?

Thanks

Posts: 1

Participants: 1

Read full topic

@mtnoronha7 wrote:

Hello.

Installed and trying to use InAppBrowser (also tried BrowserTab),
but, nothing happens… Just no error, no success… No changes on the app… lol

Running on Genymotion, with chrome/inspect to debug.

//Imports
import { BrowserTab } from '@ionic-native/browser-tab/ngx'
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'

//Declarations
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  providers: [BrowserTab, InAppBrowser]
})
export class HomePage {

/html
<button ion-button (click)="open(carnet.moipBilletUri)">System browser</button>

Now, what I’ve tested:

//First go: 
  public open(url : string){
    console.log("Opeeeeeeeeen 2: ", url)
    this.iab.create(url, "_system"); 
  //also tried with .show(), just in case lol... but same result
  //also tried: _self and _blank
  }

//Second go:
    this.browserTab.isAvailable()
    .then(isAvailable => {
      if (isAvailable) {
        this.browserTab.openUrl(url);
      } else {
        console.log("errorrrr");
      }
    });

So, first case: nothing happens, no error nothing.
Second case: this error pops out:

ERROR Error: Uncaught (in promise): Class not found
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)

Posts: 1

Participants: 1

Read full topic

@veerne wrote:

when i try send a image to API Rest from android the image ( in base64 ) arrived but npm response that => (node:16247) UnhandledPromiseRejectionWarning: Error: Invalid base64 string,
but when i put the base string in a converter this work.

this is the code of api

API:
router.post('/CreateAccount/Mobile', async (req, res)=>{ let Image = await Base64ToImage({ target: "", Base64:req.body.imageBase64, Base64Ext: req.body.imageExtencion })

return await res.json(Image)
})`

this function go to this function:

`async function Base64ToImage(data){

if(data.Base64Ext){
var Extencion = data.Base64Ext
}else{
var Extencion = “jpg”
}

const pathNow = require(‘path’);
let Base64 = data.Base64
var path = pathNow.join(__dirname + /../../uploads/${data.target});

var optionalObj = { ‘fileName’: ${UUID()}.${Extencion}};
// Imagen es subida
let response = await base64ToImage(Base64, path, optionalObj);
if(response.fileName) return response.fileName

}`

Posts: 1

Participants: 1

Read full topic

@YotAlexander wrote:

Tengo una aplicacion la cual va a mostrar informacion confidencial me interesa saber si es posible Bloquear las capturas de pantalla tanto de iOS, como Android

Posts: 1

Participants: 1

Read full topic

@danieldugger wrote:

Has anyone successfully add ionic to a react native project and not used capacitor? I would love to leverage all of the markup already written and would like to not use capacitor or cordova.

I tried following their instructions for the beta press release and running the sync command and it does not compile.

Posts: 1

Participants: 1

Read full topic

@Saban wrote:

Hello,
Can someone help me how to prevent my OneSignal url from opening externaly in chrome?
When I click on push notification I have received, It leads me to chrome.
But I want to stop that and want to trigger opening my own app page instead of that opening in browser.
Thanks

Posts: 1

Participants: 1

Read full topic

@geo3433 wrote:

Ion-datetime input looks like that "“2019-08-31T06:31:38.586+03:00"” when it is converted to string.
The thing is, regardless of picking date or time, the output in both cases contains both date and time. How can time or date be isolated from the string depending on whether ion-datetime is used for picking time or date?

Posts: 1

Participants: 1

Read full topic

@Kelvin150 wrote:

I reopened my old Ionic project and when i tried to build it i got “Cannot read property ‘length’ of undefined” error.

Note: I updated my Android Studio Recently

I have tried uninstalling and installing node and ionic

Error

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=H:\sdk (DEPRECATED)
Cannot read property ‘length’ of undefined
[ERROR] An error occurred while running subprocess cordova.

    cordova.cmd build android exited with exit code 1.

ionic info :

Ionic:

   Ionic CLI          : 5.2.7
   Ionic Framework    : ionic-angular 3.9.5
   @ionic/app-scripts : 3.2.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic
-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   Android SDK Tools : 25.2.3 (H:\sdk)
   NodeJS            : v10.16.3 (J:\Program Files\nodejs\node.exe)
   npm               : 6.11.2
   OS                : Windows 8.1

I am getting this error while running ionic cordova build android . It isn’t building. Any help would be appreciated

Posts: 1

Participants: 1

Read full topic

@Jefferk wrote:

I am creating an ios webview using Ionic 4. I have already built the ios platform and I am testing on xcode with the iphone XR-12 simulator. My application calls an iframe to an ip https test with a self-signed certificate. The problem is that ios does not allow me to access this ip because it is self-signed. I’m calling this server with iframe and also use web service that access it from httpclient ionic. I cant access to server.

I have already tried adding the exception using NSAppTransportSecurity

    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>MI IP</key>
            <dict>
                <key>NSIncludesSubdomains</key>
                <false/>
                <key>NSExceptionAllowInsecureHTTPSLoads</key>
                <false/>
                <key>NSExceptionRequiresForwardSecrecy</key>
                <true/>
                <key>NSExceptionMinimumTLSVersion</key>
                <string>TLSv1.2</string>
                <key>NSThirdPartyExceptionAllowInsecureHTTPSLoads</key>
                <false/>
                <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
                <true/>
                <key>NSThirdPartyExceptionMinimumTLSVersion</key>
                <string>TLSv1.2</string>
                <key>NSRequiresCertificateTransparency</key>
                <false/>
            </dict>
        </dict>
    </dict>

But in a forum I read that it doesn’t work with ip and that I need a domain like www.example.com

So I tried to modify the host file but I would have to change all redirects and the css and links do not work correctly so I ruled out this possibility of editing the hosts Also try installing the certificates in the simulator. I was dragging the certificate to the simulator and install it and also activate it in certificate trust settings. But it does not work

Already try adding this code in AppDelegate.m

@implementation NSURLRequest(DataController)
+ (BOOL)allowsAnyHTTPSCertificateForHost:(NSString *)host
{
    return YES;
}

Also try adding this code in CDVWKWebViewEngine.m

- (void)webView:(WKWebView *)webView
didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge
                                   *)challenge completionHandler:(void (^)
                                                                  (NSURLSessionAuthChallengeDisposition
                                                                   disposition, NSURLCredential *credential))completionHandler {
    SecTrustRef serverTrust = challenge.protectionSpace.serverTrust;
    completionHandler(NSURLSessionAuthChallengeUseCredential,
                      [NSURLCredential credentialForTrust:serverTrust]);
}

Also add this in config.xml

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine"/>

But nothing works

In the logs from simulator ios

Task <837DAB71-F2D7-46C1-A29A-D1AD6736493F>.<2> load failed with error Error Domain=NSURLErrorDomain Code=-1202 “The certificate for this server is invalid. You might be connecting to a server that is pretending to be “IP WEB SITE” which could put your confidential information at risk.” UserInfo={NSLocalizedRecoverySuggestion=Would you like to connect to the server anyway?, _kCFStreamErrorDomainKey=3, NSErrorPeerCertificateChainKey=( “” ), NSErrorClientCertificateStateKey=0, NSErrorFailingURLKey=https://IPWEB:4430/domesticas3p/registro, NSErrorFailingURLStringKey=https://WEBIP/domesticas3p/registro, NSUnderlyingError=0x7fa1a8e15650 {Error Domain=kCFErrorDomainCFNetwork Code=-1202 “(null)” UserInfo={_kCFStreamPropertySSLClientCertificateState=0, kCFStreamPropertySSLPeerTrust=, _kCFNetworkCFStreamSSLErrorOriginalValue=-9843, _kCFStreamErrorDomainKey=3, _kCFStreamErrorCodeKey=-9843, kCFStreamPropertySSLPeerCer

And dont show nothing in the place where is the iframe and the sime proble calling to web service

Sorry my english, and thank you your help

Posts: 1

Participants: 1

Read full topic

@epimienta wrote:

I am having problems with this:

imagen.png962×61 3.13 KB

Some know why is this?

Posts: 1

Participants: 1

Read full topic

@JimGale wrote:

Using this, if works when the lat, lon or lat/lon are integers, but not containing decimals (404). How does one achieve this?

            <ion-route url="/" component="tab-home" />
            <ion-route url="/:city" component="tab-home" />
            <ion-route url="/:lat/:lon" component="tab-home" />
            <ion-route url="/z/:lat/:lon" component="tab-home" />
            <ion-route url="/:country/:state/:city" component="tab-home" />

Posts: 1

Participants: 1

Read full topic

@ismailcse11 wrote:

D:\ionic\mobile-directory\platforms\android>gradlew bundleRelease

> Configure project :app
Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
config.xml
../config.xml
../../config.xml
../../../config.xml
preference = 9
name = ScrollEnabled, value = false
name = android-minSdkVersion, value = 19
name = BackupWebStorage, value = none
name = SplashMaintainAspectRatio, value = true
name = FadeSplashScreenDuration, value = 300
name = SplashShowOnlyFirstTime, value = false
name = SplashScreen, value = screen
name = SplashScreenDelay, value = 3000
name = GOOGLE_MAPS_ANDROID_API_KEY, value = AIzaSyCtKVHlVCD564681FX-5uOhohxFuqHWs9M

> Configure project :CordovaLib
publishNonDefault is deprecated and has no effect anymore. All variants are now published.

> Task :CordovaLib:compileReleaseJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

BUILD SUCCESSFUL in 21s
23 actionable tasks: 23 executed

.aab files is not generated
What should i do?

Posts: 1

Participants: 1

Read full topic

@wmjoers wrote:

Hi all!

I’m creating an Ionic 4 app and use the NavController (from ‘@ionic/angular’) to navigate to and from pages.

Is there a way to find out how many pages there are in the navigation stack?

I found some docs about how to do this in Ionic3 but the API has clearly changed since then.

Best Regards
/John

Posts: 1

Participants: 1

Read full topic

@vinhtx1988 wrote:

Error when i run cmd : zipalign -v 4 app-release-unsigned.apk dml.apk

please, help me !

Posts: 1

Participants: 1

Read full topic

@lqrz wrote:

I’m trying to use Angularfire2 on an Ionic3 app.

When installing it npm install angularfire2 , I get a deprecation warning:

npm WARN deprecated angularfire2@5.2.1: AngularFire has moved, we're now @angular/fire .

But if trying to install the new @angular/fire npm install @angular/fire I see that every version requires an @angular/core >= 6.0.0 -which is greater than the Ionic3 supported on (i.e. “5.2.11”).

So, my question is how can I make use of a non-deprecated angularfire2 lib on Ionic3?

(You can also find this question on SO: https://stackoverflow.com/questions/57739589/angularfire2-ionic3?noredirect=1#comment101918279_57739589 )

Posts: 1

Participants: 1

Read full topic