Istanbul Üniversitesi Bilfest 19
Selamlar
7 Mayıs 2019’da İstanbul Üniveristesinde Bilfest19 etkinliği kapsamında, gerçek hayattan bir projeyi baştan sona kodladık.
Platform: MacOs
Kullanılan Teknolojiler:
- Backend’de Net Core 2.2 SignalR, Web Api,
- Frontend’de Angular 7, TypeScript 2.0
- Mobile’de Ionic 4
Bu workshop’da, Mobile ve Web arasında iletişimin QRBarcode ve SignalR Socket ile sağalandığı interaktif bir uygulama yazılmıştır. Backend tarafta signalR Hub sınıfına bağlanan herbir client’ın connectionID’sine karşılık, yeni bir QRBarcode oluşturulmuş ve Angular 7 ile yazılan bir web sayfasına oluşturulan bu QRBarcode, connectionId’si ile birlikte basılmıştır. Bu işlem Web ve Mobile platformlara göre farklılık göstermektedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
string connectionId = Context.ConnectionId; string FromPage = this.Context.GetHttpContext().Request.Query["key"]; if (FromPage == "web") { Guid imgName = Guid.NewGuid(); string barcodeUrl = CreateBarcode(connectionId, imgName); await this.Clients.Caller.SendAsync("GetConnectionId", connectionId, barcodeUrl); } else if (FromPage == "mobile") { await this.Clients.Caller.SendAsync("GetConnectionId", connectionId); } |
Ayrıca, socket uygulamada yazılan methodların neden asenkron olması gerektiği detaylıca anlatılmıştır. Mobile uygulamadan gelen komutların web ortamına iletilmesi ve ekrana basılan barcode resminin yüklendikten sonra silinmesi gibi gerekli methodlar detaylıca anlatılarak kodlanmıştır.
Ön yüz tarafında ilgili Hub sınıfına bağalanılması, QrBarcode’un ekrana basılması ve son olarak gelen komutlara göre ilgili resimlerin gösterilmesi işlemleri detaylıca kodlanmıştır.
|
1 2 3 4 5 |
this.hubConnection.on("GetConnectionId", (connectionId, barcodeUrl) => { this.connectionId = connectionId; this.barcodeUrl = barcodeUrl; console.log(`ConnectionId:${connectionId}`); }); |
Komut Çeşitleri:
|
1 2 3 4 5 |
export enum CommandType{ Login=3, OpenDoors=1, OpenLights=2 } |
Komutları Karşılıyan Function:
|
1 2 3 4 5 6 |
this.hubConnection.on("GetCommandId", (commandId) => { this.commandId = commandId; if (commandId == CommandType.Login) { this.IsLogin = true; } }); |
Son olarak Mobile uygulama, Ionic 4.0 Cordova Tab template ile aşağıdaki gibi oluşturulmuştur.
|
1 |
ionic start mobileSignalR tabs —cordova |
IOS Mobile uygulamada da Camera kullanımı için gerekli iznlerin “.plist” uzantılı dosyaya nasıl tanımlandığı aşağıdaki gibi gösterilmiştir.
|
1 2 |
<key>NSCameraUsageDescription</key> <string>The camera is used to scan QR codes.</string> |
Native toolardan “phonegap-plugin-barcodescanner” nasıl yüklendiği ve Dependency Injection ile sisteme entegre edilip, nasıl QRBarcode’un tarandığı detaylıca gösterilmiştir.
|
1 2 3 4 5 6 7 |
this.ertugrulBarcode.scan().then(barcodeData => { this._clientConnectionId = barcodeData.text; console.log("Client ConnectionID:" + this._clientConnectionId); this.setCommand(CommandType.Login); }).catch(err => { console.log('Error', err); }); |
Son olarak Mobile uygulama üzerinden web sayfasına basılan buttona göre komut gönderme işlemi yapılarak, IOS bir telefona publish işlemi gerçekleşmiştir.
|
1 2 3 4 5 6 |
<ion-header> <ion-button (click)="setCommand(_commandType.OpenDoors)" style="width: 100%" *ngIf="_clientConnectionId!=null">Kapıları Aç</ion-button> </ion-header> <ion-header> <ion-button (click)="setCommand(_commandType.OpenLights)" style="width: 100%" *ngIf="_clientConnectionId!=null">Far yak</ion-button> </ion-header> |
Mobile uygulamanın, Iphone bir cihaza publish işlemi için öncelikle Xcode üzerinde derlenmesi gerekmektedir. Ve bu işlem için MacOs bir bilgisayar gerekmektedir.
Publish işleminden sonra WebSayfasına basılan QrBarcode, mobile uygulamada Camera izni verildikten sonra taranır. Tam bu esnada web’e “Login” komutu gönderilerek, web sayfasındaki QrBarcode’un kaldırılıp, yerine karşılama resminin gelmesi sağlanır. Daha sonra ilgili buttonlara basılarak, web ortamındaki arabanın kapılarının açılması veya lambalarının yanması sağlanabilir.
Bu workshop’da, Web (Front End), Socket (Back End) ve Mobile uygulama geliştirme rolleri, bu işe yeni başlıyan arkadaşlara farklı açılardan gösterilmiştir. Aynı zamanda son güncelle teknolojiler, kendilerine özgü platformlardan tanıtılmıştır. 1 saat planlanan ancak 3 saat süren, ister sorulan sorular, ister ise seminere olan muhteşem katkılarından dolayı tüm katılımcıları teker teker kutlar, teşekkürü bir borç bilirim.
Geldik bir seminerin daha sonuna, yeni bir seminerde görüşmek üzere hepinize hoşçakalın.
Source Code: http://www.borakasmer.com/projects/bilfest19.zip
Son Yorumlar