Posts Tagged :

programming

Create a React Native Web, Android, and IOS project with Expo CLI 1024 635 mezo

Create a React Native Web, Android, and IOS project with Expo CLI

Hello fellow programmer padawans

As you can understand from the title I will tell you how to create a web, Android, and IOS project with React Native and Expo. First, we need the Expo CLI package.

What’s Expo CLI?

Expo CLI is the npm package that creates a project that we can test on our devices. We won’t need to write codes on Xcode or Android Studio. We only need Visual Studio Code and we can write codes for 3 different environments.

First things first, we need NodeJs installed on our computer if you don’t have it you can download it here: https://nodejs.org/en/.

Install Expo and Create Project

To install the Expo CLI you need to open Node.js Command Prompt and run this code

npm install -g expo-cli

To create the project run this code below

expo init ProjectName

Template Selection

As soon as you make the code creation command run, you will see the selection menu as shown below. We need to select a template depending on our needs. I prefer to select a TABS template, it’s a TypeScript and a very good sample to learn and to see the structure of the project.

Start your project and see your app on your device

After the project creation is over we need to go inside the project folder from Nodejs Command Prompt to start your project.

expo start

Then we can see a website and a barcode on the command prompt, that barcode is the magic. I will show you…

After you see all these screens you now are ready to test your app on your device. Download the Expo app from the Apple App Store or Google Play and create an account.

Open your Camera and read the barcode. It will then ask you to open in the Expo app, do it and Voila! Your app is working on your phone or tablet.

First, open the project folder with Visual Studio Code so you can checkout the folder and file structure. Then you can find the Screens folder and make some changes on the TabScreenOne.tsx or TabScreenTwo.tsx files and you will see your app is changing on your device as well.

That’s all for now! I will write about components on React Native on my next post.

Thanks for reading

May the force be with you. 

Expo ile React Native Web, IOS ve Android Projesi Oluşturmak 1024 635 mezo

Expo ile React Native Web, IOS ve Android Projesi Oluşturmak

Selamlar sevgili programcı padavanlar

Başlıktan da anladığınız gibi bu makalemde sizlere nasıl React Native ile hem web hem android hem de IOS projesi oluşturabiliriz sorusunun cevabını anlatacağım. İlk olarak Expo CLI paketini yükleyerek başlıyoruz.

Expo CLI paketi ile oluşturduğumuz projemiz için XCode yada Android Studio gibi ek IDE yazılımlarına ihtiyaç kalmadan tek seferde 3 platform için yazılım geliştirebilmemizi sağlıyor.

Expo ile proje geliştirebilmek için öncelikle NodeJS e ihtiyacımız var. Eğer bilgisayarınız da NodeJS yoksa şuradan https://nodejs.org/en/ indirebilirsiniz.

NodeJS i kurduk şimdi sıra Expo CLI paketinde.

Expo Kurulumu ve Proje Oluşturma

ExpoCLI kurmak için Node.js command promptu bulup çalıştırın ve aşağıdaki komut satırını çalıştırın.

npm install -g expo-cli

Projeyi Oluşturmak için ise :

expo init ProjeAdı

Template Seçimi

Komut satırı çalışır çalışmaz aşağıdaki template seçim ekranı bizi karşılıyor. Buradan projenize uygun olan şablonu seçebilirsiniz ben TABS template ini seçiyorum. TABS ile gelen proje içerisinde çalışan bir sekme örneği var React Native i çok iyi anlayabileceğiniz güzel bir örnek olduğunu düşünüyorum.

Sonrasında yine Node.js command prompt üzerinden oluşturduğumuz klasörün içine giderek projemizi çalıştırıyoruz.

expo start

Proje çalışırken hem command prompt üzerinde hemde açılan localhost web sitesi üzerinde bir kare barcod çıkıyor bu barcod ne işe yarıyor birazdan anlatacağım…

Nodejs Command Prompt

Web Expo Proje Sayfası 

Projemizi Cihazlarda Çalıştırmak

Ardından elinizdeki cihaz üzerinde Google Play yada Apple App Store üzerinden Expo uygulamasını indirerek bir hesap oluşturun ardından projenizi eklemek için bir barkod isteyecek işte şimdi yukarda çıkan barkodların bir anlamı oldu. Cihazınızın kamerası ile barkodu okutun ve oluşturduğunuz uygulamanız telefonunuzda çalışmaya başlasın.

Başlangıç olarak projenizi Visual Studio Code üzerinde açıp Screens klasörü içindeki TabOneScreen.tsx , TabTwoScreen.tsx dosyalarını biraz değiştirerek uygulamanızı biraz değiştirebilirsiniz.

Şimdilik bu kadar bir sonraki yazıda sizlere React Native üzerinde component yapısını anlatacağım.

Okuduğunuz için teşekkürler

Bilgiyle Kalın…

Expert Delphi 302 373 mezo

Expert Delphi

Indirmek icin tiklayiniz…

C# – DataTable İçindeki Verilerin Sıralarını Ters Çevirmek 150 150 mezo

C# – DataTable İçindeki Verilerin Sıralarını Ters Çevirmek

Merhaba arkadaşlar
Her yazılımcının korkulu rüyası olan test uzmanı arkadaşlarımdan biri olan Bill bir hata kaydı açmış ve demiş ki şu şu sayfada ki listelenen verilerin sıralamaları yanlış ters olması lazım demiş. Bende ufak bir araştırma sonucu bir metod oluşturarak bu problemi çözdüm ve pratik bir bilgi olması açısından sizlerle paylaşmak istedim.
İşte o kodlar 🙂

[codebox 1]

Bilgiyle Kalın
M.Zeki OSMANCIK

AngularJS – Basit Search Filter 1024 789 mezo

AngularJS – Basit Search Filter

Merhaba arkadaşlar
Bu kez de AngularJS ile çooooooook ama çok basit şekilde listelediğimiz nesneler üzerinde bir Text input ile nasıl arama yapabiliriz sorusunun cevabını 2 satırda bir fiddle’da paylaşmak istiyorum.

Bu datayı AngularJS ile Controller içersinde oluşturalım ve bir $scope değiskeni içersine şu şekli tanımlamamız gerekiyor .
[codebox 2]

ve her zaman olduğu gibi HTML kodlarımızı bir oluşturalım ve listeme işlemini gerçekleştirelim.
[codebox 1]

Bu asamadan sonra JSON nesnemizin içersindeki elemanların ekranımıza listelendiğini görebileceksiniz.

İş arama kısmına geldiğinde ise HTML de de şu şekli bir değişiklik yapmamız gerekmekte.

[codebox 3]

Burada kullandığımız FILTER bizim listelediğimiz JSON nesnesi ya da array içersinde input üzerine tanımladığımız ng-model yardımı ile filtreleme yapıp $scope.companyList adında ki objeye atama yapar böylelikle siz de listeye abc yazdığınızda listedeki abc yi bularak $scope.companyList nesnesine atamasını yaparak bizlere gösterir 🙂

Benim yorumlamam bu kadar 🙂
Iste bu kadar basıt 🙂
Örnek kodu Fiddle’dan inceleyebilirsiniz.

Umarım Yararlı Olur
Bilgiyle Kalın.
M.Zeki OSMANCIK

Kanban Ne Ola ki ? 508 212 mezo

Kanban Ne Ola ki ?

Merhaba arkadaşlar

Proje geliştirme süreçleri ve bu süreçlerde kullanılan metotlar vs ile ilgili küçük bilgiler vermeye tam gaz devam ediyorum 😀 Sırada Kanban var

Kanban, tam zamanında Üretim ortamında malzeme hareketlerinin kontrolü amacıyla kullanılan bir çizelgeleme yaklaşımıdır. Toyota’nın üretim verimliliğini artırmak amacıyla Taiichi Ohno tarafından geliştirilmiştir. Yöntem 1953’ten bu yana kullanılmaktadır. Aslında japoncada görsel işaret veya kart anlamına gelir. Üretimin tam zamanında gerçekleşmesi konusunda başarılı bir metotdur. Tüm olayları görselleştirir ve üretim sürecini büyük resimde görme imkanı sağlar.

Toyotada kullanılmaya başladığına göre küçük bir tahminle biraz hayalgücü ile bu sistemin aslında nasıl çalıştığını hayal etmek çok da zor değil. Bir üretim hattı mevcut ve bu üretim hattı üzerinde ürün bazı işlemlere tabi tutuluyor ve en son olarak bir ürün yani araba ortaya çıkıyor. Örneklemek gerekirse bir band üzerinde önce arabanın iskeletine parçalar sıra ile takılıyor kapılar , çeşitli aksamlar , motoru ,camları, iç aksesuarları gibi bu sıra ile giden işlemlerde bir aksilik olmaması önemli bunun içinde süre ve malzeme kontrolü önemli 😉 Kanban tüm bu işlemleri görselleştirip takibi kolaylaştırıyor 😉

Sen ne anlatıyorsun değişik 😀 Toyota kullanıyorda bizdemi araba üreteceğiz ?  diyebilirsiniz 😀 demeyin çünkü Kanban olayının yazılımada uyarlanması çok da zor değil. Adamlar yapmış 2004 yılında bu Kanban felsefesini yani görselleştirme işini yazılımada uyarlayıp bir metodoloji haline getirmişler.

Özet olarak bahsetmek gerekirse Kanban metodu mevcut sürecinizde hemen bir değişikliğe gitmenizi zorunlu kılmaması önemli avantajlarından bir tanesi. Zamanla yazılımın veya sürecin evrimleşeceğini öngörür.

Yani Kanban Yazılım Geliştirme Süreci veya Proje Yönetimi diye bir şey yoktur. Kanban bir süreç değildir, sürekli akışı teşvik eden, hafif siklet bir metodtur.

Kanban, temelde 4 temel prensibi kullanır:

  • Ne biliyorsan onunla başla,
  • Artırımsal ve evrimsel değişimi takip etmeyi kabul et,
  • Mevcut sürece, rollere, sorumluluklara ve ünvanlara saygı göster.
  • Tüm seviyelerde liderliği teşvik et

Bu prensipler akabinde Kanban’ın 5 ana özelliğide şöyle özetlenebilir :

  • İş akışını görselleştirir
  • Aynı anda yapılan işleri sınırlandırır
  • Akışı yönetmeyi ve ölçmeyi kolaylaştırır
  • Süreç ilkelerini belirgin kılar
  • İşbirliği yaparak iyileştirmeyi sağlar

Bu süreçte belli adımlarda yapılan iş diğer adımlarda yapılan işlerden daha çabuk sonuçlanabilir. Bir adımın çıktısı diğer bir adımın girdisidir. Zamanında tüketilemeyen görevler o adımda bir birikime neden olacaktır. Kanbanda her bir adımda eş zamanlı yapılacak işlerin sayısına bir sınır getirilmesi sürecin darboğazlarının azalmasına imkan tanır. Bir üretkenlik yaratılıp arkadan gelmekte olan işler için bir yer açar. Sınırlama getirilmemesi durumunda bir sürecin belli bir adımında çok iş yapılıyor olmasına rağmen biten bir iş olmayacaktır. Sonuç olarak takım ne kadar çok çalışırsa çalışsın o zamana kadar bir değer üretememiş olacaktır.

Örnek olarak bir Web sayfası yapıyorsanız bu aşamada tasarım için 1 kişi , programlama için 2 kişi olduğunu varsayarsak kodlamada gerçekleşecek bir gecikme tasarımdan çıkan işler bitip ,development aşamasına gelen işleri çoğaltacak ve bu aşamada developer arkadaşlar zorlanacak belki de yeni bir developer ihtiyacı doğacak . Ama bu işler sınırlandırılırsa bu dar boğaz yada işlerin belli aşamalarda artması durumu desek daha doğru olur biraz daha aza indirgenmiş olur. Ayrıca Kanban ile büyük resim görüldüğünden , resimde bu problemin yöneticiler tarafından görüntülenmesi  çalışanlar açısından da önemli ve rahatlatıcı bir özellik.

Kanban’da görselleştirme Değer Akış diyagramları ile ve kanban tahtası ile sağlanabilir. Değer akış diyagramları mevcut durumun, gelecekteki sistemin anlaşılması ve israfın önlenmesi için kullanılır.
Kanban Tahtası ahanda aşağıdaki gibi birşeydir.

kanban-movement

Resimde görüldüğü gibi işler belli başlıklarla ayrılır her iş bittiğinde bir sonraki aşamaya geçer ve bitirilirler.

Kanban ile kendi kişisel işlerinizi bile takip etmek kolay 😉 bunun için internet ortamında kullanılan bazı uygulamalarda mevcut. 😉

Umarım Yararlı Olur

Bilgiyle Kalın

M. Zeki OSMANCIK

Proje Geliştirme Süreçleri – Agile Scrum 1024 841 mezo

Proje Geliştirme Süreçleri – Agile Scrum

Merhaba arkadaşlar

Proje geliştirme süreçleri ile alakalı bilgi almaya  devam ediyoruz. Bildiğiniz gibi bir önce ki yazımda Waterfall metodunu türkçem yettikçe anlatmaya çalıştım. Bu yazımda ise farklı bir tür yeni bir trend herkesin öğrenmeye uygulamaya çalıştığı bir metot olan Agile Scrum metodundan yine türkçem yettiğince bahsetmeye çalışacağım 🙂

Agile türkçe meali Çevik olan bu metot aşamalı olarak projeleri geliştirmemizi sağlıyor ve bu sayede biraz esnek davranabilmemizi sağlıyor. Waterfall metodunda analiz kısmı bittikten sonra müşteriyle uzun süre görüşemediğimiz çok özlediğimiz doğrudur işte Agile yöntemi bu özleme son veriyor ve müşteri ile sürekli iletişim içinde bulunmamızı sağlıyor 😀 Yani kısacası Agile adı gibi projemize çeviklik kazandırıyor ve gerek hız gerek üretilen değerler açısından bize güzel faydalar sağlıyor. 🙂

Agile denen yöntemin içersinde de farklı frameworkler mevcut bunlardan biri Scrum diğeri XP dir. Windows XP değil ama 😀  meali Extreme Programming. 🙂

Bu metotlardan şimdilik Scrum dan bahsedeceğim XP için sonraki yazılardan birinde bahsedebilirim…

Scrum denilen şey itiş kakış anlamına gelen ama anlamı kadar karmaşa içinde yürümeyen bir yöntem. Bu yöntem içersinde bulunan bazı terimleri sizlere konu ile birlikte açıklamak isterim 🙂

Product Owner : İşi yaptırmak isteyen tarafta bulunan ve yazılımın tüm detayına hakim olan bize anlatabilecek arkadaştır.

Product Backlog : Yazılım için yapılmış analiz diyebiliriz. yazılımımız şöyle güzel olsun, böyle iyi olsun , hatta şöyle de güzel olsun içinden atlar kuşlar böcekler çıksın şeklinde olabilen ve ürünü yaptıracak olan Product Owner tarafından yazılmış belli formata sahip User Story‘ ler  bütünüdür.

Herneyse bu PO (Petrol Ofisi değil Product Owner 😀 ) arkadaş bizlere fantazi dünyasının sınırlarını zorlayarak bütün bir product backlogu oluşturduktan sonra bu işleri en çok önemliden en az önemliye sıralar ve teslim eder. Product Backlog yaşayan bir liste olabilir yani sürekli madde eklenebilir silinebilir vs vs. Bu PO nun zevkine kalmış artık 🙂

User Story’ler INVEST diye kısa bir isimle adlandırılan kurallar dizisini içerirler.Invest şöyle sıralanır :

  • Indipendent(Bağımsızlık):User Story kendi başına bir içeriğe sahip olmalıdır. Diğer user story’lere bağlı olmamalıdır.
  • Negotiable(Tartışılabilir): User Story’ler, bir sprint içeriğine girene kadar her an değiştirilebilir.
  • Valuable(Değer): bir user story son kullanıcı için bir değer ifade etmelidir.
  • Estimable(Tahmin yürütülebilir): Bir user story’nin süresi tahmin edilebilmelidir.
  • Sized appropriately(Makul boyut): User Story’ler plan, görev ve öncelik bakımından derecelendirilmesi ele alınabilmesi için çok kompleks yapıda olmamalıdır.
  • Testable(Test edilebilirlik): User Story’ler test edilebilirliği mümkün kılmalıdır.

Sonrasında Scrum takımı bu product backloglar içersinde (burası önemli) her seferinde bir değer üretebilecek şekilde 2 veya 4 haftalık bir süre olan proje bitimine kadar tekrar eden  ve Sprint adı verilen dönem içinde gerçekleştirilmek üzere görevleri alır sıralar kendi içinde dağıtır ve geliştirmeye başlar. Tüm bu işleri yöneten arkadaşa Scrum Master denir. Çok karizmatik bir ünvanı bulunan bu arkadaş takımın tüm yükünü omuzlarında taşır ,ihtiyaçları sağlar , engelleri kaldırır, gaz verir vs vs.

Bu takım Scrum kuralları gereği bazı seremoniler yapmak zorundadır. Mesela her sabah maksimum 15 dk süren “Ne yaptım?” “Ne yapacağım?” “Önümde engel varmı varsa neler?” sorularının kısaca cevaplandığı bir toplantı. Sonra Sprint başlamadan önce acaba hangi taskları alsakta yapsak müşteriye nasıl bir değer üretsek sorusunun tartışıldığı Sprint Review. Bir de takımın kendi içinde birbirini tebrik ,tahrik edebildiği yanlış varsa “ben nerde yanlış yaptım” şarkısının söylendiği güzel bir durum varsa ortamın şenlendiği garip bir o kadar ilk seferde adını söylemesi zor bir toplantı vardır ki oda Retrospective toplantısıdır. 🙂

Sprint başlar mutlu yazılımcılar kodlarını yazmaya başlarlar her gün birbirlerine mutluluk içinde neler yaptıklarını anlatırlar ve 2 veya 4 hafta dediğimiz sprint süresi sonunda müşteriye bir demo gösterirler bu elle tutulur gözle görülür müşterinin test etmesine olanak veren hatta ve hatta müşterinin  “İyi olmuş hadi bunu Deploy edelim böylece” lafını söyletebilecek bir yazılım olmalıdır ki Scrum dediğimiz metot amacına ulaşabilsin 🙂

Scrum ı açıklayan çok güzel bir resim aşağıdaki gibidir 🙂

Scrum-Plan-Do-Check-Act-Diagram

 

Peki bitti mi tabiki de bitmedi 🙂 birde son olarak bahsetmek istediğim küçük bir konu da Burn Down Chart.

Born-down chart İş sonu grafiği anlamına gelir ve Sprint sırasında takım üyeleri görevlerini yerine getirildikçe kalan iş ve yapılan iş arasındaki korelasyonu belirten bir grafik ortaya çıkar.İşte bu grafik takım üyelerine veya yöneticilerine fikir verir. Aynı zamanda takımın iş için istediği sürelerin yeterli olup olmadığı ve işin zamanında tamamlanıp tamamlanamadığı konusunda da fikir veren bir grafiktir. Adının burn down olması sanırım takımın işlerini zamanla eş değer şekilde bitirmeleri yakmaları eritmeleri vs. olabilir 🙂 Bu chart örneğinide yine aşağıdaki gibi görebilirsiniz.

BurnDownChart

Kısaca fikriniz olması açısından Agile ve Scrum ı açıkladım.

Umarım Yararlı Olur

Bilgiyle Kalın

M.Zeki OSMANCIK

C# ile Powerpoint Sunumu Hazırlamak 554 382 mezo

C# ile Powerpoint Sunumu Hazırlamak

Merhaba arkadaşlar
Uzun süreden beri bir makale yazmaya vakit bulamıyorum ama yavaş yavaş geri dönüyorum. Bu yazıda sizlere zevkli küçük bir örnek göstermek istiyorum. 😀 C# üzerinden program yardımı ile PowerPoint sunumu hazırlamanın nasıl olduğu ile ilgili başlangıçta çok işinize yarayacak bir kod parçası
Bunun için öncelikle bir windows Forms projesi açalım ve 1 tane Buton ekleyelim 🙂 Projemiz içersine Referans olarak 2 önemli kütüphane eklememiz gerekiyor. Sağa tıklayıp “Add Reference” dedikten sonra “COM” sekmesi içersinde bulunan microsoft graph 15.0 object library ve microsoft PowerPoint 15.0 object library kütüphanelerini seçip ekleyelim.
Artık gerisi çok kolay 🙂 işte bundan sonra işi yapacak olan kod parçası

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Microsoft.Office.Interop.PowerPoint;
using Microsoft.Office.Core;

namespace testToCreatePttFileFromImages
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void button1_Click(object sender, EventArgs e)
{
string pictureFileName = “C:\\picToVideo\\2.jpg”;

Microsoft.Office.Interop.PowerPoint.Application pptApplication = new Microsoft.Office.Interop.PowerPoint.Application();

Microsoft.Office.Interop.PowerPoint.Slides slides;
Microsoft.Office.Interop.PowerPoint._Slide slide;
Microsoft.Office.Interop.PowerPoint.TextRange objText;

// Create the Presentation File
Presentation pptPresentation = pptApplication.Presentations.Add(MsoTriState.msoTrue);

Microsoft.Office.Interop.PowerPoint.CustomLayout customLayout = pptPresentation.SlideMaster.CustomLayouts[Microsoft.Office.Interop.PowerPoint.PpSlideLayout.ppLayoutText];

// Create new Slide
slides = pptPresentation.Slides;
slide = slides.AddSlide(1, customLayout);

// Add title
objText = slide.Shapes[1].TextFrame.TextRange;
objText.Text = “The Header Of The Presentation”;
objText.Font.Name = “Arial”;
objText.Font.Size = 32;

//objText = slide.Shapes[2].TextFrame.TextRange;
//objText.Text = “this text come after the heading with bullet”;

Microsoft.Office.Interop.PowerPoint.Shape shape = slide.Shapes[2];
slide.Shapes.AddPicture(pictureFileName, Microsoft.Office.Core.MsoTriState.msoFalse, Microsoft.Office.Core.MsoTriState.msoTrue, shape.Left, shape.Top, shape.Width, shape.Height);

//slide.NotesPage.Shapes[2].TextFrame.TextRange.Text = “the text is for the notes to specific page”;

pptPresentation.SaveAs(@”c:\picToVideo\fppt.pptx”, Microsoft.Office.Interop.PowerPoint.PpSaveAsFileType.ppSaveAsDefault, MsoTriState.msoTrue);
pptPresentation.Close();
pptApplication.Quit();

}
}
}

    Join our Newsletter

    We'll send you newsletters with news, tips & tricks. No spams here.