17 Eylül 2018 Pazartesi

Ionic Android Push Notification

Ionic push notifications are really easy to implement but if you couldn't find the best tutorial to use push notification yet it can't be easy at the first. Due to this reason I decide to prepare this small tutorial for ionic developers.

Lets start with easy steps.

Android Push Notification

 - Create Firebase account at here https://firebase.google.com/

 - After creating your firebase account click to "GO TO CONSOLE" button from right top corner of page. (you should redirect to https://console.firebase.google.com/ link.)

 - Click to "Create Project" button and enter dummy values to input. Just care about application package name while you fill the input, it should has same name with your project root directory config.xml file widget id value.

 - Then end of the creating new project wizard you should download google-services.json file to your project "projectName/platforms/android/app/" directory.

- click the settings in the top of left nav bar and go to 'Cloud Messaging'  menu.then copy your senderID to use following steps.

- then run the following commands in console


cd projectName
ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID=yoursenderId

npm install --save @ionic-native/push


 - Then open component.ts file and add to following codes.

import { Push, PushObject, PushOptions } from '@ionic-native/push';

constructor(private push: Push) {

this.pushInit();

}

pushInit(){


const options: PushOptions = { android: {
senderID:'put your senderId here'
}, ios: { alert: 'true', badge: true, sound: 'false' } }; const pushObject: PushObject = this.push.init(options); pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification)); pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));
pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));


}


 - now when you start your application, you can get push message and regsiteredDeviceId values.

 - after that you can use 'Cloud Messaging' link from left nav menu and send push message to all users or deviceId spesific users.








27 Temmuz 2018 Cuma

React Native Fetch "Network Request Failed" Hatası

React native uygulamanızda http request talebinde bulunduğunuzda eğer erişmeye çalıştığınız kaynak https:// değil ise muhtemelen "fetch" komutunu çağırdığınızda "Network Request Failed" yazan kırmızı bir sayfa ile karşılaşacaksınız.

İlgili hatayı gidermek için eriştiğini http servisinin güvenilir olduğunu android yada ios config dosyanızda belirtmeniz gerekiyor.

Ben bu hatayı ios da almıştım o yüzden ios çözümünü belirtiyor olacağım.

IOS Çözüm :
Aşağıdaki dosya yolundaki info.plist dosyasını açalım.

Dosya yolu : ios/{projeadı}/Info.plist

</dict> kısmının hemen öncesine aşağıdaki kodu ekleyin

<key>NSExceptionDomains</key>
    <dict>
      <key>api.tatatahsilat.com</key>
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSTemporaryExceptionMinimumTLSVersion</key>
        <string>TLSv1.1</string>
      </dict>
    </dict>
    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>


Kaydedip tekrar konsol dan react-native run-ios demeniz yada açık olan similatörünüzün ekranında cmd + R yapmanız ve ekranı yenilemeniz yeterli.

12 Temmuz 2018 Perşembe

Swagger Controller include, exclude from document

Asp.Net Web Api Swasbuckle eklentisini kullanırken eğer herhangi bir controller sınıfımız api de gösterilmesin ister isek aşağıdaki tanımlamayı yapmamız controller ımızı gizlemek için yeterlidir.

[ApiExplorerSettings(IgnoreApi=true)]
public class MyController : ApiController
Böylece gizli bir metodumuz yada kullanılmasını istemediğimiz metodlarımızı saklamış oluruz.


In English: 

Asp.Net Swasbuckle  package lead controllers in metadata layer and we can lead include/exclude feature via [ApiExplorerSettings] annotation as following peace of code in our controller;

[ApiExplorerSettings(IgnoreApi=true)]
public class MyController : ApiController

12 Haziran 2018 Salı

Devexpress using with Angular2+

After tousands of code in Asp.Net projects with DevExpress. When the time is coming for angular 2+ front-end applications, we are ready to go for it.

Couse of that devexpress now supporting angular 2+ for current features like jquery, asp.net, etc. In order to discover and get some experience about dev express with angular. Lets start to visit https://js.devexpress.com/Overview/DataGrid/ page and click "See Demo" options and check them with "Angular" source code tab.

To Start development with angular in real life we need to figure out someting such as download nodejs, gulp, etc.

If you want to follow official steps and get more knowledge instead of faster startup, let visit https://github.com/DevExpress/devextreme-angular/blob/master/README.md


My Steps to test angular2+ with Dev Express

1- Download node.js in offical angular page:   https://nodejs.org/en/download/

2- download angular via node console with typing following command in command line


npm install -g @angular/cli

3-Creating new angular project which is calling test-project

 ng new test-project
cd test-project

4-To build and run project with dev express, we need to install gulp with following command
npm install --global gulp-cli

5- lets install dev express npm module

npm install --save devextreme devextreme-angular

6- Now we are ready to use any of dev express component.
To say hello world. lets add a dev express button.

 - add to dev express button into app.component.html

<dx-button text="Press me" (onClick)="helloWorld()"></dx-button>

 - add to following function into app.component.ts

helloWorld() {
        alert('Hello world!');
    }

 - define dev express button into app.module.ts as an import item.

import { DxServerTransferStateModule } from 'devextreme-angular';

@NgModule({
    ...
    imports: [
        ...
        DxServerTransferStateModule,
        ...
    ]
})
export class AppModule {}


- time to run :)
ng serve --open








Angular 2+ Failed to build project with JSZip library Issue Solving

While installing some of node packages you may have an issue as follow;


ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\username\angularprojectname\node_modules\jszip\lib'


just need to follow file path road to reach readable-stream-browser.js file and change content as below to solve issue like a charm :)


Before :

module.exports = require("stream");

After :

module.exports = require("readable-stream");

31 Mayıs 2018 Perşembe

Asp.Net Web Api - Swagger Dökümantasyon Alt Yapısı Ekleme

Backend tarafında rest api alt yapısı geliştirirken en büyük problemlerden biri şüphesiz ki bu API endpointlerini kullanacak kişilerle çok iyi iletişim kurabilecek bir dökümantasyon oluşturmak ve tabi bunun yanında kendi apilerini test caseler dışında kod yazmadan minimum efort ile manuel test edecek bir ortam olması.

Daha önce .Net ile Rest Api geliştirirken Microsoft un sunduğu Help Page alt yapısından bahsetmiştim, buraya tıklayarak bu yazıma ulaşabilirsiniz. Microsoft bu tarafta bize her ne kadar hem yardım dökümanı oluşturma ve test edebilme üzerine güzel nuget package lar sunsa da , bu işi daha profesyonel, görsel ve fonksiyonel bir şekilde swagger ile yapabiliyoruz.

Peki .Net Web Api projemizde swagger alt yapısını nasıl kullanabiliriz ?

(Normalde swagger ın .Net e özel nuget ı olsa da uygulaması biraz zahmetli ve uzun olduğu için ben kendi bulduğum kurulumu çok basit bir nuget package üzerinden anlatıyor olacağım.)

Bu işlem oldukça kolay aşağıdaki adımları izlememiz yeterli.
1-) İlk olarak swagger için gerekli xml dökümantasyon sistemini projemizde aktif etme işlemini yapıyoruz.
 Bunun için projemize sağ tuş tıklayarak 'Properties' seçeneğine tıklıyoruz. Ardından 'Build' sekmesine geçip, 'XML Documentation File' check ini işaretliyoruz.

2-) Sonrasında projemize sağ tuş tıklayıp - > 'Manage Nuget Packages' seçeneğine tıklıyoruz.

3-) Browse Sekmesine 'Swashbuckle' yazıp aratıyoruz.

4-) İlk çıkan kayda tıklayıp 'Install' diyoruz.

5-) Ardından projemizi çalıştırıp url ye ek olarak /swagger yazıyoruz.

6-) Ve swagger kütüphanemiz hazır :)


11 Mayıs 2018 Cuma

Angular5 Build Prod with base href

In normally angular2 and higher version projects building for prod with following command;



ng build --prod 


But sometimes we need to subdomain like domainname.com/subdomainname/ , in this situation we need to use base-href command to deploy properly otherwise it won't be work without console error.

To use base-href and define subdomain whichs is work like a directory, we just need to use following command:


ng build --prod --base-href /subdomainname/



with this command , we can solve this issue and deploy our project without any problem..