@mfacer wrote:

Hi - I believe the ionic apps can be reverse-engineered? If so, how have people got around securing API requests to their own webserver? We have an API where the app requests data - it’s available data on the website, so it’s not sensitive.

However, now we want to let people log in to the app using their website login. To do this, we can use the API - not a problem - but I’d have to store the API key in the app to make the request. If you then reverse-engineer the app, you could get the key and essentially use that to find out about every single member?

What have other people done to stop this? I don’t (ideally) want to use firebase or anything like that as we have the web server which can be used for these calls and storing data.

Thanks for any advice!

Posts: 1

Participants: 1

Read full topic

@lhk wrote:

Currently, when I want to see how my app looks on a mobile device, I use the android emulator. This works fine as long as I’m just changing the design. Debugging is possible, but so much more comfortable in the browser.

So I wonder: Wouldn’t it be possible to restrict the browser viewport to make it look like a mobile screen?
Can I somehow set up that the browser shows the exact same app layout that would be shown on an android phone?

This would definitely speed up my development workflow.

Posts: 1

Participants: 1

Read full topic

@lhk wrote:

I was looking at the sample code for ion-menu (here) and found the following code sample, which looks strange to me:

...
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
    ...

Basically all the elements here have ion-abc tags. But for ion-page it’s a div with a class attribute.
In my code IonPage can be imported and used without problems (react codebase).

I couldn’t find it in the docs.
But there is a similarly named IonicPage in the old v3 docs. Is this somehow related?

So, what is ion-page and how is it used correctly?

Posts: 1

Participants: 1

Read full topic

@JBalslev wrote:

Greetings, i have a problem with embedded youTube videos. It worked fine sometime ago, and works fine on Android. But i started getting user feedback, telling me something was wrong, so i did some tests…

When a video is muted the video plays fine, but if it is not muted, it will stop, and throw an error. So if i add &mute=1 to my embeded youTube url, the video plays. But when mute=1 is not added, it breaks instantly.

I have tested on 2 iPhones and 1 iPad Pro, same issue on all 3 devices, currently running softwareversion 13.3.

This is the error that is thrown and shown in Xcode:

 [assertion] Error acquiring assertion: <NSError: 0x28349c330; domain: RBSAssertionErrorDomain; code: 2; reason: "Client is missing required entitlement"> {
    userInfo = {
        RBSAssertionAttribute = <RBSLegacyAttribute: 0x103e67080; requestedReason: MediaPlayback; reason: MediaPlayback; flags: PreventTaskSuspend | PreventTaskThrottleDown | WantsForegroundResourcePriority>;
    }
}
[ProcessSuspension] 0x1149d0f28 - ProcessAssertion() PID 1358 Unable to acquire assertion for process with PID 1358
[ProcessSuspension] 0x1149d0f28 - ProcessAssertion::processAssertionWasInvalidated()

[assertion] Error acquiring assertion: <NSError: 0x2834aac40; domain: RBSAssertionErrorDomain; code: 2; reason: "Client is missing required entitlement"> {
    userInfo = {
        RBSAssertionAttribute = <RBSLegacyAttribute: 0x105a2fbc0; requestedReason: MediaPlayback; reason: MediaPlayback; flags: PreventTaskSuspend | PreventTaskThrottleDown | WantsForegroundResourcePriority>;
    }
}

[ProcessSuspension] 0x1149d0f78 - ProcessAssertion() PID 1358 Unable to acquire assertion for process with PID 1359
[ProcessSuspension] 0x1149d0f78 - ProcessAssertion::processAssertionWasInvalidated()

I have tried enablind/disabling all sorts of permissions. I tried looking through CDVWKWebViewEngine.m since i suspect there are some errors there. But in the end, it might be some simple permission i need to enable… or even some iOS related setting the user needs to enable/disable.

I really hope someone else have a solution to this problem, since it frustrates me a great deal. If not a solution, at least some ideas… thanks!

Posts: 1

Participants: 1

Read full topic

@jordanblaketold wrote:

Anyone knows how to make works, submit a reactive form in android with enter/go key,i need to implement it on my login page but i tried (keypress.enter) and (ngSubmit) but dont work, this is my form:

 <form [formGroup]="loginForm" class="ion-margin-top" (ngSubmit)="loginWithUser()">
                    <ion-row >
                        <ion-col size="12">
                                <ion-item lines="none">
                                    <ion-label position="floating">Email</ion-label>
                                    <ion-input formControlName="email" type="email"></ion-input>
                                </ion-item>
                        </ion-col>
                        <ion-col size="12">
                                <ion-item lines="none">
                                    <ion-label position="floating">Password</ion-label>
                                    <ion-input formControlName="password" type="password"></ion-input>
                                </ion-item>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <ion-button (click)="loginWithUser()">
                                Login
                            </ion-button><br>
                        </ion-col>
                    </ion-row>
                </form>

ts

loginWithUser() {
console.log(this.loginForm.value)
}

any help is welcome

Posts: 1

Participants: 1

Read full topic

@kim_ras wrote:

Hi,
I am rebuilding an old Cordova app where i used Phonegap-Build to build a iOS app.
I am hoping I can get everything working as PWA but if I need a iOS app I will need to setup some sort of DevOp environment to build on both Windows and Mac. I use github as repository, but would like a automated rebuild on the Mac when ever I publish on the Windows machine.

How do you do this in your projects. ?

Posts: 2

Participants: 2

Read full topic

@lhk wrote:

short version:
I would like to have the same IonMenu in all my IonPages. Is there a way to move the menu above the pages, maybe next to the routing?

How do I set this up properly?

Detailed version:

My app has an IonMenu that is used to navigate between routes. It has a list of entries, each of them an IonItem that links to a route like ‘/home’, ‘/config’, etc.

Here’s a mock up of the current state

<router>
  <route path="/home">
    <lots of layout code for the menu>
    <page>
  </route>
  <route path="/about">
    <same menu code again>
    <another page>
  </route>
  ...
</router>

So this is horrible code duplication, the same code for the menu is duplicated on each page.

As far as I can see, there would be two solutions:

• make a custom component for the menu. Then it’s only a single tag (and I would have to pass in the content-id via props)
• move the menu up, above the router

I would prefer the second solution. Because the menu really is the same everywhere, it doesn’t depend on the routes. So I think it should be specified outside of the routing, as a sibling to the router. That would mirror the structure of the UI.

As far as I understand, there are the following requirements:

• The IonMenu needs to be given a contentId. I think this should be IonRouterOutlet. The contentId specifies an element on which to listen for swipe actions. And I want that element to be the output of the routing.
• There needs to be a toolbar with the IonMenuButton. I think this should go into an IonHeader. Intuitively I would place this header next to the IonMenu, as another sibling to the router. But the documentation says that: It’s important to note that ion-header needs to be the one of the three root elements of a page. And I’ve got the impression that they mean an actual literal IonPage here.
• Every Route must be an IonPage and IonPages must not be nested inside of each other.

I tried placing the IonHeader next to the routing, but then the pages and the header overlap each other. This doesn’t seem to work. So I moved the header inside of the IonPage and came up with the following code (simplified to provide a minimal example):

App.tsx:

 <IonApp>
    <IonMenu side="start" contentId="main-content">
      <IonList>
        <IonItem routerLink="/home">
          <IonLabel>home</IonLabel>
        </IonItem>
        <IonItem routerLink="/config">
          <IonLabel>config</IonLabel>
        </IonItem>
      </IonList>
    </IonMenu>

      <IonReactRouter>
        <IonRouterOutlet id='main-content'>
          <Route path="/home" component={Home} exact={true} />
          <Route path="/config" component={Config} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/home" />} />
        </IonRouterOutlet>
      </IonReactRouter>
  </IonApp>

Home.tsx:

    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton></IonMenuButton>
          </IonButtons>
          <IonTitle>Routing Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton routerLink="/config">To the config!</IonButton>
      </IonContent>
    </IonPage>

Config.tsx (this one without the menubar)

      <IonPage>
        <IonContent>
          <IonButton routerLink='/home'>To the home!</IonButton>
        </IonContent>
      </IonPage>

This code doesn’t work. If I transition between routes with the buttons, they are changed properly, with a small animation. But if the menu is used for navigation, the page flickers and seems to re-render completely. There is no transition animation between the pages.

What is the correct way to do this?

Posts: 3

Participants: 2

Read full topic

@Sweg wrote:

In my Ionic 5 app, I am displaying a LoadingController like so:

async presentLoading() {
    const loading = await this.loadingCtrl.create({
      message: 'Please wait...',
    });
    await loading.present();
  }

getPosts() {
    this.presentLoading();

query.get()
      .then((docs) => {
        docs.forEach((doc) => {
          this.posts.push(doc);
        })
        this.cursor = this.posts[this.posts.length - 1];
      }).catch((err) => {
        console.log(err)
      })
}

Once this.posts is populated, I want the LoadingController to be dismissed.

Can someone please tell me how to do this? Thanks a lot in advance!

Posts: 2

Participants: 2

Read full topic

@PameNietop wrote:

Hello all,

I’m pretty new to Ionic, started building an App a while ago. I wanted to include a 5-star rating component so I used the method explained here:

I followed all the instructions, the problem is I get an error when I call the ranking component in the html and I cant find why:

<app-rating [(rating)]='rating'></app-rating>

That’s what I have in the html, and the error reads “Identifier ‘rating’ is not defined. The component declaration, template variable declarations, and element references do not contain such a member”

This is the beginning of my .ts file:

import { Component, Input, EventEmitter ,Output} from "@angular/core";

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.scss'],
})


export class RatingComponent {
  @Input() rating: number ;

  @Output() ratingChange: EventEmitter<number> = new EventEmitter();;

  constructor() {}

Any help is really appreciated, as I’m just learning Angular/ionic, I don’t have all the knowledge to be able to find a solution on my own. I tried with no luck. Please help!

Thanks

Posts: 1

Participants: 1

Read full topic

@ehboym wrote:

Hi

I have a tab application with a toolbar at the bottom and a list inside a tab:

Navigation is controlled by a router you can see the routes below.

app-routing.module -> loads -> tabs-routing.module -> loads -> protocols-routing.module -> loads -> p-gisha-clalit-routing.module && p-dom-lev-mevigarim-routing.module

Selecting a list item should load a page in the tab area.

while the tab buttons works perfectly, when I click the list items I do not get any response. If I click the second list item which points to routerLink="/tabs/medsequipment" the app loads the correct page. But, when I click the top list item which has routerLink=“p-gisha-clalit” the app does nothing. It mite be loading some default page but the visual effect is a click animation with no reaction.

I suppose the route is broken in some place but I cant find the problem in that route.

Ill appreciate any incites.

Thanks

Erez

---------------- app code below ------

App routing:

RoutesMap717×192 12.7 KB

tabs-routing.module:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'protocols',
        loadChildren: '../protocols/protocols.module#ProtocolsPageModule'
      },
      {
        path: 'medsequipment',
        loadChildren: '../medsequipment/medsequipment.module#MedsequipmentPageModule'
      },
      {
        path: 'gentables',
        loadChildren: '../gentables/gentables.module#GentablesPageModule'
      },
      {
        path: 'directive',
        loadChildren: '../directive/directive.module#DirectivePageModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/protocols'
  }
];

protocols-routing.module:

const routes: Routes = [
  {
    path: '',
    component: ProtocolsPage,
    children: [
      {
        path: 'p-gisha-clalit',
        loadChildren: '../protocolsPages/p-gisha-clalit/p-gisha-clalit.module#PGishaClalitPageModule'
      },
      {
        path: 'p-dom-lev-mevigarim',
        loadChildren: '../protocolsPages/p-dom-lev-mevigarim/p-dom-lev-mevigarim.module#PDomLevMevigarimPageModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/protocols'
  }
];

p-gisha-clalit-routing.module && p-dom-lev-mevigarim-routing.module
are very similar. p-gisha-clalit-routing.module is:

const routes: Routes = [
  {
    path: '',
    component: PGishaClalitPage
  }
];

The list in protocols is:

<ion-content>
  <ion-list>
    <ion-item class="HEBListItem" detail ="false" routerLink="p-gisha-clalit">
      <ion-label>גישה כללית למטופל</ion-label>
      <ion-icon name="caret-back-outline" item-right></ion-icon>
    </ion-item>
    <ion-item class="HEBListItem" detail ="false" routerLink="/tabs/medsequipment">
      <ion-label>דום לב במבוגר</ion-label>
      <ion-icon name="caret-back-outline" item-right></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

Posts: 1

Participants: 1

Read full topic

@sakotturi wrote:

I noticed this syntax being used by ion-chip:

:host(.ion-activated) {
    --background: rgba(var(--ion-text-color-rgb,0,0,0),0.2);
}

It looks like a way of getting the 0.2 opacity of a color set by a css variable. so I thought I would try it:

 border: 1px solid rgba(var(--ion-color-success), 0.5);

but this doesn’t work. also tried:

 --border: 1px solid rgba(var(--ion-color-success), 0.5);

I find the ion-success color to be too strong and would love to be able to get the 50% version of it.
I’m open to any ideas, not necessary nesting a variable from inside a rgba()…

Posts: 2

Participants: 2

Read full topic

@tomjaihk wrote:

Suppose I have code:

<ion-item>
     <ion-input formControlName="someCtrl" [disabled]="lockControl"></ion-input>
     <ion-icon name="{{lockControl? 'unlock' : 'lock'}}" (click)="handler()"></ion-icon>
</ion-item>

When I click the ion-icon, the ion-input can be disabled as I expect. But unfortunately, the click event of ion-icon is also disabled as well, which I don’t expect. Then I discover that if I disable the input, whole ion-item become “item-interactive-disabled” so the icon is disabled.

How can I solve this problem?

Posts: 1

Participants: 1

Read full topic

@abdosaeed wrote:

next is my tabs routes

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'explore',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../pages/explore/explore.module').then(m => m.ExplorePageModule)
          }
        ]
      },
      {
        path: 'browse',
        component:BrowsePage,
        children: [
                {
                  path: 'companies',
                  loadChildren: () =>
                    import('../pages/companies/companies.module').then(m => m.CompaniesPageModule)
                }
        ]
      },
      {
        path: 'profile',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../pages/profile/profile.module').then(m => m.ProfilePageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/explore',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/explore',
    pathMatch: 'full'
  }
];

i want to make sub page in browse tab called companies

when navigating /tabs/browse i want to open browse page
when navigating /tabs/browse/companies i want to open companies page

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to create an ionic app that has two types of users - customers & suppliers.

Use case example:
I sign in as a customer, & by default I can see all the suppliers within 5km’s of me on a map. I should then be able to select a supplier on the map, & contact them via the app.

Can someone please tell me if there are specific ionic plugins or other plugins that I can use in my ionic app to accomplish the above?

So far, I’ve found the following resources that may be helpful but I’m not 100% sure if they’re able to help with my requirement above:

https://github.com/ionic-team/ionic-native-google-maps/blob/d7898d7a58940a9eb478ee4a1ef5d3d431db9e25/documents/README.md

https://ionicframework.com/docs/native/geolocation

Thanks for reading this, & I appreciate any advice or feedback!

Posts: 1

Participants: 1

Read full topic

@blacktech wrote:

Hello.
I have been trying to cantact sales during the last two weeks but I didn’t receive any feedback.
I don’t know what’s wrong.

Please I need your help!

Posts: 1

Participants: 1

Read full topic

@Sweg wrote:

I am trying to display a map in my Ionic 5 app, but I’m getting this error in the console:

ERROR TypeError: Cannot read property ‘ROADMAP’ of undefined
at HomePage.loadMap

The error is in relation to mapTypeId: google.maps.mapTypeId.ROADMAP in the below typescript:

export class HomePage {

  locations: Observable<any>;
  locationsCollection: AngularFirestoreCollection<any>;
  user = null;

  @ViewChild('map', { static: false }) mapElement: ElementRef;
  map: any;
  markers = [];

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {
    this.anonLogin();
  }

  ionViewWillEnter() {
    this.loadMap();
  }

  loadMap() {
    let latLng = new google.maps.LatLng(51.9036442, 7.6673267);

    let mapOptions = {
      center: latLng,
      zoom: 5,
      mapTypeId: google.maps.mapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  }

  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(user => {
      console.log(user);

      this.user = user;

      this.locationsCollection = this.afs.collection(
        `locations/${this.user.uid}/tracks`,
        ref => ref.orderBy('timestamp')
      );

      // update map
    })
  }

}

Can someone please tell me how I can resolve this issue?

Posts: 2

Participants: 2

Read full topic

@Sweg wrote:

I am following an Ionic tutorial, & am trying to call this method:

upload(name: string) {

    return new Promise((resolve, reject) => {

      let ref = firebase.storage().ref('postImages/' + name);

      let uploadTask = ref.putString(this.image.split(',')[1], 'base64');

      uploadTask.on('state_changed', (taskSnapshot) => {

        console.log(taskSnapshot)

      }, (error) => {

        console.log(error)

      }, () => {

        uploadTask.snapshot.ref.getDownloadURL().then((url) => {

          firebase.firestore().collection('posts').doc(name).update({

            image: url

          }).then(() => {

            resolve();

          }).catch((err) => {

            reject();

          });

        }).catch((err) => {

          reject();

        });

      });

    });

  }

Here is how it is being called in the tutorial:

if (this.image) {
        await this.upload(doc.id);
      }

It is working fine in the tutorial, however I am getting this error message when I call await this.upload(doc.id)

Can someone please tell me how I can resolve this?

Posts: 2

Participants: 2

Read full topic

@Scobee wrote:

Hello,

I have an input field where I need to type only numbers, that can have 2 decimals (like 9.99), and I need to show the keyboard with only numbers.
Is there a way to do that on both IOS and Android ?

Thanks

Posts: 1

Participants: 1

Read full topic

@lily28 wrote:

I am trying to make a button transparent, it supposedly looks like this

instead, it looks like this. With the gray background behind the icon

this is the html code

<button ion-button clear [routerLink]="['/edit-appointment/', booking.$key]">
          <ion-icon name="create" style="zoom:2.0"></ion-icon>
</button>
<button ion-button clear (click)="deleteBooking(booking.$key)">
          <ion-icon name="trash" style="zoom:2.0"></ion-icon>
</button>

Does anyone know how to make the icon clear?

Posts: 1

Participants: 1

Read full topic

@accron wrote:

I’d like to use Ionic for an app I am going to make, but I’m a bit hesitant as a few things about Ionic are still very unclear to me, no matter how much I have searched for answers:

1. Is Ionic framework free? I.e. can you create, build and deploy a complete commercial (=paid) app to the app stores, with no restrictions whatsoever in the app features available (components, plugins, etc), without any paid plan?

2. If 1) is yes, what extras does a paid plan give you that you can’t do for free?

3. Is there a free and fully functional/non restricted Sqlite plugin for Ionic?

4. As far as I can tell Vue support is still in beta. Are there any known limitations with the Vue version (besides from possible bugs due to the beta status)?

Thank you

Posts: 3

Participants: 2

Read full topic