Posts

Showing posts with the label ionic-framework

Social login flow with Django backend and ionic frontend

Image
Clash Royale CLAN TAG #URR8PPP Social login flow with Django backend and ionic frontend I am trying to integrate social login with my ionic app, which is consuming data from a DRF server. The idea is that an user can login through fb, do some magic, the data will be sent back to the django server, and next time they log in they can retrieve their personal data again. So far I'm using native Cordova Fb plugin on ionic and I have managed to successfully log in with it. The problem now is I'm lost on what to do in the next step or the flow of the entire process. How do I register an user from Facebook to my django server so that the next time the user login I can retrieve the data from that respective user correctly? Let's say after I login with FB, I got an access token, do I pass that token back to django to register the new user and if so what tool should I use? For authentication I plan to have Django passing JWT back to the ionic app, but the part in the middle is where I...

How can we make a verticle range silder in ionic?

Image
Clash Royale CLAN TAG #URR8PPP How can we make a verticle range silder in ionic? I have been trying to make a vertical range slider in ionic and tried to use ion-range. As it is good until it is horizontal but when we tried to make it verticle it does not work. I have tried to make it by HTML input tag it is working fine, but not able to apply any CSS classes. The code for HTML is as follows, <ion-content padding> <ion-scroll scrollY="true"> <div class="timeline"> <div class="cashback-date" [style.padding-top.px]="paddingTop+(sliderValue*50)"> {{date}} </div> <div class="range"> <!-- <div class="range-track" [style.height.px]="cashbackArray.length*50"></div> <div class="range-handle"></div> --> <input class="input-range" [style.height.px]="cashbackArray.length*50" type=...

how to build apk from a ionic framework source code?

Image
Clash Royale CLAN TAG #URR8PPP how to build apk from a ionic framework source code? how do I build apk from an ionic framework source code? which app is used to build the apk? I tried to build with Cordova but I don't know how to work on a existing code. 2 Answers 2 1) Install the node.js from here 2) open the terminal, npm install -g cordova ionic 3) open the folder of the project from the terminal 4) in the terminal npm install(make sure node.js is insta 5) ionic cordova build android Sorry! ionic cordova build can only be run in an Ionic project directory. getting this error, in that project clearly written to build using node.js and cordova, but its not working – Suraj Sharma Jul 27 at 14:40 ...

Error:Invalid data, chunk must be a string or buffer, not object when running ionic -v

Image
Clash Royale CLAN TAG #URR8PPP Error:Invalid data, chunk must be a string or buffer, not object when running ionic -v Error in cmd I've tried uninstalling ionic, cordova and node.js and reinstalling them two times. One with lts node and the othe, current lts.But the error still persists. Any help would be greatly appreciated By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

How to import camanjs in ionic properly?

Image
Clash Royale CLAN TAG #URR8PPP How to import camanjs in ionic properly? I tried to install camanjs on my ionic project. I add to my app module : import * as Caman from 'caman'; add it in provider : @NgModule({ providers: [ Caman ] }) on my home.ts : home.ts import * as Caman from 'caman'; addBrightness(){ Caman('#caman-image', function () { this.brightness(50).render(); }); } getPicture(sourceType:PictureSourceType) { this.camera.getPicture({ quality: 100, destinationType: this.camera.DestinationType.DATA_URL, sourceType: sourceType, allowEdit: true, saveToPhotoAlbum: false, correctOrientation: true }).then((imageData) => { this.selectedImage = `data:image/jpeg;base64,${imageData}`; }); } and in my home.html : home.html <button ion-button full (click)="addBrightness()" [disabled]="!selectedImage">Add Brightness</button> <img [src]="select...

How to submit a JSON object to Database using *ngModel in ionic/angular

Image
Clash Royale CLAN TAG #URR8PPP How to submit a JSON object to Database using *ngModel in ionic/angular I have a problem when I using ionic to submit a form with an Object. I am using mongodb as a database and ionic for mobile app. Let me describe my problem. I have 2 pages. Page 1 and page 2. In page 1 I have location data object with JSON object like this: > public location: any = { > > address: '', > > longtude: '', > > latude: '' }; I am using *ngModel to store "location" variable and show the string of address on placeholder. <ion-input placeholder="Your location" (click)="navigateToPage2()" (ngModel)]="location" type="text"></ion-input> When I click on textfield input (ion-input) it's will navigate to page 2 with a map page, in page 2 I will select my location (longtude, latude, address) and after finish the selection I will pass location object bac...

error in retrieving the last document in firebase cloud firestore db

Image
Clash Royale CLAN TAG #URR8PPP error in retrieving the last document in firebase cloud firestore db I'm trying to get the last document from my collection using orderBy method and limit(1) everything is Ok and works as expected , but the problem is when I added a new document to my collection from somewhere else such as firebase console while opening the same page in my app I got the last 2 documents although I specified limit(1) . When I refresh the page everything goes well . how could I solve this problem ? Thanks in advance . -- Here is some of my code : first get my chats ordered descending , then get friend's details from chatUsers collection , finally get the last message document . chat-provider.ts getChats() { return this.afs.collection(`chatUsers/${this.userId}/chats` , ref => ref.orderBy('updatedAt' , 'desc')).valueChanges() } getlastMessage(friendId : string) { return this.afs.collection(`chatUsers/${this.userId}/chats/${friendId}/message...

Access Terminal and Run Shell Script in Ionic

Image
Clash Royale CLAN TAG #URR8PPP Access Terminal and Run Shell Script in Ionic I'm currently developing an app using Ionic framework and at some point, I need to access terminal to run a command. In my case, suppose I have an executable file which is named test.sh . normally in terminal, we can run it with ./test.sh (and I'm currently doing this with termux in anroid). Since I am using ionic, I don't have access to terminal nor a file executor. So my question is, how will I be able to execute a shell script using ionic? test.sh ./test.sh Thanks. By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

agm-info-window infoWindow Opened by default angular ionic3

Image
Clash Royale CLAN TAG #URR8PPP agm-info-window infoWindow Opened by default angular ionic3 In Ionic 3 + Angular 4 I have the following code : <agm-info-window #infoWindow> <strong>{{data.title}}</strong><br> </agm-info-window> The marker opens the bubble only when clicked How to make it open by default ? Thank you 1 Answer 1 Did you ever found how to open it by default ? By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

How to resolve white screen on ionic application (ios)

Image
Clash Royale CLAN TAG #URR8PPP How to resolve white screen on ionic application (ios) My app shows a white screen on the device but it correctly runs in the browser and emulator. I have tried a lot of solutions, but none have worked for me. I also use the ionic run ios -l -c command to see errors on the console log but it didn't show any errors. ionic run ios -l -c Does anyone have any suggestions on how I could debug this issue? what is your xcode , OS,and ios version ? – sam Jul 18 '17 at 11:27 xcode 8.3.3 , os sierra and ios version 9.3 – suniel kalwani Jul 18 '17 at 11:44 2 Answers 2 I also f...