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..

5 Mayıs 2018 Cumartesi

angular5 projemize nasıl html editor ekleriz ?

Angular5 projemize basit bir html editor implemente etmek için aşağıdaki aşamalrı uygulamamız yeterlidir.



1. cmd ekranını açıyor ve proje dosyamızı açıyoruz.

örnek : cd /projedosyamız
cd /projedosyamız

2. proje dosyamızda node package manager yardımı ile ngx editör pluginini indiriyoruz.

npm install ngx-editor --save

3. app.module.ts dosyamızda import kısmına plugin tanımını yapıyoruz.

import { NgxEditorModule } from 'ngx-editor';
@NgModule({
  imports: [ NgxEditorModule ]
})


4. ve son olarak ilgili modülü kullanmak istediğimiz html dosyamıza aşağıdaki kod parçası ile ekliyoruz.

<app-ngx-editor [(ngModel)]="htmlContent"></app-ngx-editor>




Kaynak : https://www.npmjs.com/package/ngx-editor