20 Temmuz 2017 Perşembe

npm ERR! missing:


Merhaba Cinlerim..

.net core mvc ile ufak çaplı bir projeye başlamışken bootstrap'i jquery'yi fln npm'den eklemeye kalktım pratik olur diye. :) Yine mono laneti vuku bulup sorun çıktığı için çok da pratik olduğu söylenemez ama birşey daha tecrübe etmiş oldum.

Sıkıntı şöyle başladı, vs'den "Add New Item" deyip "npm Configuration File" seçtim. Sonra oluşan package.json dosyama aşağıdaki gibi paketleri ekledim, kaydettim.

"dependencies": {
"bootstrap": "3.3.7",
"jquery": "3.2.1",
"jquery-validation": "1.16.0",
"jquery-validation-unobtrusive": "3.2.6"
}

bu işlemi yaptıktan sonra "node_modules" diye bir klasör oluşup paketlerimin içine yüklenmesi gerekiyordu normalde ama eklenmedi. Paketlerin yanında yüklenmediğini belirten işaretler uyarılar vardı. Ardından Visual Studio üzerinden node.js Interactive Window'u açıp .npm komutlarını çalıştırmayı denedim.

Birkaç sitede çözüm olarak ".npm init -y" komutunun durumu düzelteceği yazıyordu. Olmadı, bende şöyle bir hata verdi;
Please specify a valid Node.js project or project directory. If your solution contains multiple projects, specify a target project using .npm [ProjectName or ProjectDir] <npm arguments> For example: .npm [MyApp] list

Dediğini yaptım..
.npm [ProjeminAdı] list
Yine bana aynı çıktıyı verdi; :(
+-- UNMET DEPENDENCY bootstrap@3.3.7
+-- UNMET DEPENDENCY jquery@3.2.1
+-- UNMET DEPENDENCY jquery-validation@1.16.0
`-- UNMET DEPENDENCY jquery-validation-unobtrusive@3.2.6
npm ERR! missing: bootstrap@3.3.7, required by asp.net@1.0.0
npm ERR! missing: jquery@3.2.1, required by asp.net@1.0.0
npm ERR! missing: jquery-validation@1.16.0, required by asp.net@1.0.0
npm ERR! missing: jquery-validation-unobtrusive@3.2.6, required by asp.net@1.0.0
[ProjeminAdı] list completed with errors
Sonra birkaç şey daha denedim, biraz daha araştırdım derken şu paketi buldum;

https://www.npmjs.com/package/npm-install-missing

Hadi bunu da deneyeyim bari;

 .npm install -g npm-install-missing

Bu paketi kurduktan sonra kullanmam lazım tabi, işte şöyle;


.npm [ProjeminAdı] npm-install-missing

Sonunda bir succesful mesajı görebildim :) Sonrasında tekrar şu komutu çalıştırdım;
.npm [ProjeminAdı] install
Oldu ve hasretle yolunu gözlediğim klasörüm geldi. Ve paketlerim yüklendi. Aferim, bugün de iyi eğlendik. :)
 








17 Şubat 2017 Cuma

Nahoş bir girişimcilik hikayesi; ofisinizin tuvalet bekçisi; "Gorilla"! (Bitemedi :P)


Sevgili cinlerim.. Sizinle bugün bağrımızda sürekli kanayan bir yara olan ofisimizdeki tuvalet sorununu paylaşacağım. :( Tuvalet manzaralı bir yerim var ve o tuvaleti kullanmaya çalışanları gördükçe içim parçalanıyor. Rüşvet, adam kayırma, kaynak yapma, tehdit, itişme, torpil.. Bilimum yasa dışı durum yaşanıyor ve ofisçe bunun ilerlemesinden korkuyoruz :S Baktık bu böyle olmayacak, önlemimizi alalım dedik.

Bu sorunla ilgili tüm binanın orijinal fikirleri vardı uzun süredir konuşulan. Ama bu fikirler hiçbir zaman geyikten öteye gidememişti. Ama biz aksiyon insanları bu fikirlerin bir kısmını hayata geçirmeye karar verdik. Daha doğrusu uzmanımız ilk adımı attı. Eğer bu proje hayata geçerse çok dua alacağından eminiz. Hayata geçmese de biz bayağı birşey öğrenmiş olacağız :)

Öncelikle projemize bir isim vermemiz gerekiyordu. Tuvalet Bekcisi dediler itiraz etmedik. Gülmekle çalışmak arasında kala kala projeyi şekillendirmeye başladık. Sonra isim değişti, Gorilla oldu :)) Buna da güldük ne alaka diye, bekçi manası içerdiği için bu ismi de bağrımıza bastık.

Projenin amacı legal bir tuvalet sırası oluşturmak ve tuvaletin boş mu dolu mu olduğunu yerimizden kalkmadan öğrenmek özetle. Başka pek çok özellik eklenebilir de, ilk aşamada bu kadarı pek çok suçun önüne geçecektir diye tahmin ediyoruz. Her şey ofisimizin huzuru için. Ağzımızın tadı bozulmasın.

Tuvaletimizin kilidi sürgülü. O halde sürgünün kapalı olduğunu tespit edebilirsek tuvaletin dolu olduğunu da anlayabiliriz. O halde gerekli malzemeleri temin etmeye başlayalım. Robotistan.com'dan sipariş etmişler, muhtemelen elektirikçilerden vs de temin edilebilecek şeylerdir :)

1 Adet Orange Pi,
6-7 adet fotosel (ışık ölçen bir sensör),
32'lik bir hafıza kartı,
Uzatıcı kablolar vs

Bu alet edevat edinildikten sonra toplanıldı. Öncelikle 3 gruba ayrıldık. İsimleri atıyorum :p

1. Al gülüm: Linuxcular, yani Orange Pi'ye Linux kurup fotosellerle bağlantı kurup tuvaletin durumunu bize bildirecek arkadaşlar. (2 kişi)
2. Ver gülüm: Tuvalet Bot'u oluşturup tuvalet talebi alıp bunu anlamlandıracak olan arkadaşlar. (2 kişi)
3. Al gülüm Ver Gülüm: Al gülüm ve Ver gülüm ü iletiştirecek API'ci arkadaşlar. (ki ben bu gruptayım) (3 kişi)

 "Pair programming" yöntemi ile geliştirmeye başladık.

Al gülüm grubu Orange Pi'ye hafıza kartını takıp bu karta linux kurulumu yapmaya başladılar.

Ver gülüm grubu https://api.ai/ kullanarak tuvalet taleplerini nasıl anlamlandıracakları ile ilgili çalışmaya başladılar.

Bizim grup ise .Net Core ve MongoDB kullanarak bir web api yazmaya başladı.

Tüm gruplar kendi alanlarında acemiler aslında, bu yüzden çok hızlı bir başlangıç yapamadık. Ben daha önce MongoDb ve core kullanmadım mesela :)

Neyse bu yazı uzun başladı, bu girişi olsun. Diğer aşamalarını detaylandırmak için sonraki blog postlarımı bekleyelim ;) (Bitemedi :P)

Büyüğe de saygımız olsa mı bu arada? Bu da fikirler arasında. :P




Taam Taam gittim.



14 Şubat 2017 Salı

macOS'ta .Net Core'la ve Docker'la tanışma "Hello Core!" with mssql ;)



.Net Core ile tanışmam elimde olan ya da olmayan nedenlerden ötürü bir şekilde gecikmiş olsa da geç olsun güç olmasın mantığıyla ufaktan birbirimizi tanımaya başladık. ;)

Öncelikle .net core sdk'sını mac'imize kurmamız gerek;

https://www.microsoft.com/net/core#macos

Buradaki anlatımı yapan hanım pek şirin :) Ben buradaki sadece 2. adımla ilgilendim çünkü diğer adımları yaptırmak için farklı uygulamalar kullanacağım. Bir önceki postumda kurduğum Yeoman gibi. Yeoman'i yeni uygulama oluştururken kullanacağız.

Terminal'imizi açıp fishimize

~ sudo npm install -g yo generator-aspnet bower


paketlerini ekleme komutlarımızı yazıyoruz. Bunlar Yeoman'in uygulama oluşturucusu ve npm gibi bir paket yöneticisi olan bower'ı kurmak için.

Şimdi uygulamamızı oluşturabiliriz;

~ yo aspnet

yazarız ve karşımıza aşağıdaki gibi bir uygulama seçim ekranı çıkar.


Kullanmak istediğimiz UI Framework'ü seçeriz;

Ve tabii ki uygulamamıza isim veririz;

Uygulamamız oluştu. Yeyyyy :)



Uygulamayı oluşturduğumuz dizine
~ cd "HelloCore"
komutuyla gidip projeyi
~ dotnet restore
~ dotnet build
~ dotnet run
komutlarıyla derleyip geliştirmeye hazır hale getiriyoruz.


dotnet run komutumuzdan sonra "Now listening on: http://localhost:5000" uyarısını gördükten sonra tarayıcıya  http://localhost:5000 adresini yazdığımızda sitemizi görebiliyor olmamız lazım. İşte şöyle; 



Projemiz geliştirmeye hazır ama nerede geliştirsek? Ben çoğu yazılımcının olduğu gibi bir Visual Studio fanı olarak Visual Studio Code'da geliştirmek istedim. (Duyduğum kadarıyla Visual Studio for Mac'in daha çok yolu varmış.)

Bunun için Visual Studio Code'dan oluşturduğum uygulamanın dizinini açıyorum;



Tatlış ekranımız geldi. Peki neden tatlış böyle renkli renkli? Çünkü Code'a vscode-icons diye eklenti kurduk :)

Artık kodlamaya başlayabiliriz. Ne kodlasak ki? Ne yapsaaak ne yapsaaak.. Bir db kullansak, vee bu mac üzerinde mssql olsa :) Mümkün mü? Docker'la mümkün. (reklammlarr)

Docker'la da daha önce havalı havalı kullananları görmüş ama hiç kullanmamış biri olarak tanışma vesilemi .net core yapayım dedim mssql'i işin içine katarak.

https://blog.kodcu.com/2015/06/docker-nedir-neden-kullanilir/
"Docker işletim sistemi imajlarını versiyonlayan, Apache versiyon 2 lisanslı, Go dili ile yazılmış bir sanallaştırma ve konteyner teknolojisidir.

İşletim Sistemi İmajı Nedir?

Docker Linux türevinden işletim sistemleri üzerinde çalışan bir uygulamadır. Buradaki söylenen imaj ise, Linux türevi işletim sistemlerinden türetilmiş, boyut olarak küçültülmüş, Docker sanallaştırma ortamında çalışabilir işletim sistemi birimleridir."
Bu güzel buluşu kurup işimize başlayalım madem;
https://docs.docker.com/docker-for-mac/

Download linki;
https://download.docker.com/mac/stable/Docker.dmg

Kurduktan sonra terminalimizden docker üzerinden mssql'i şu kodla kurabiliriz;

~ docker run -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=defineYourPassw0rd' -p 1433:1433 -d microsoft/mssql-server-linux
Kuruldu :)

Şimdi dbmize bağlanalım;


~ mssql -u SA -p defineYourPassw0rd
Artık bir db'miz var..



Şimdi Db'mizi projemizde kullanalım.

Bu adresteki 2. adımda nasıl kullanacağımız çok güzel anlatılmış.
https://www.microsoft.com/en-us/sql-server/developer-get-started/csharp-mac


// Build connection string
SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder();
builder.DataSource = "localhost";   // update me
builder.UserID = "sa";              // update me
builder.Password = "defineYourPassw0rd";      // update me
builder.InitialCatalog = "master";

// Connect to SQL
Console.Write("Connecting to SQL Server ... ");
using (SqlConnection connection = new SqlConnection(builder.ConnectionString))
{
    connection.Open();
    Console.WriteLine("Done.");
}

Ben Program.cs class'ımda yeni db oluşturma kısmını ve tablolara kayıt ekleme kısımlarını yaptım, çalıştırdım, oldu.

Faydalı bir eklenti olarak mssql eklentisini code'a kurdum. Şöyle faydalı bir arkadaş;





İşte böyle.. Bundan iyisi işe yarar bir proje :p Onu da yapacağız inşallah ;) 

Aşağıdaki linklerden de güzel faydalandım;

https://social.technet.microsoft.com/wiki/contents/articles/36247.net-core-on-mac-building-an-asp-net-core-app-with-web-api-ef-postgresql-and-running-it-on-docker.aspx

https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-develop-use-vscode 


Bu yazımı bu özel günde paylaşıyor olmam mesleğimi ne kadar sevdiğimin göstergesi aslında, altını çizerim :p Kendime bu kafam kadar karışık blog yazısını verdiğim için teşekkür ederim :))




8 Şubat 2017 Çarşamba

macOS'da "Developer Friendly" Terminal ortamı oluşturma

Terminal'imi güzelleştirme ihtiyacım .Net Core öğrenesim geldiğinde başladı. İlk olarak güzel bir ortam oluşturup sonra başlarsam .Net Core'a daha hızlı ve zevkli adapte olurum diye uzmanımdan tavsiyelerle ortamımı kurmaya başladım.

Ortamı macOS'da kurduğumu belirteyim. 

Daha iyi bir terminal deneyimi için iTerm'i indirip kurduk. Arka plan resmi verebilmeyi çok sevdim :P Ben arka plana "Bender" ı koydum :) 

O zaman Renk!


https://www.iterm2.com/downloads.html

Terminalimize aşağıdaki kodu yapıştırarak Brew kurduk.. :)  Brew nedir; "Homebrew Mac OS X işletim sistemi üzerinde yazılım kurulumunu kolaylaştıran bir paket yönetim sistemidir."


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
http://brew.sh/ 

Ardından Node.js i kurduk. Node.js nedir; "Javascript ile server side uygulamalar yazabileceğimiz bir framework'tür". 
https://nodejs.org/en/

~brew install node.js

Bu sayede npm'imiz  de oldu. npm nedir;
"Npm aynı Nuget’de olduğu gibi Node.js için çeşitli scriptleri otomatik olarak sisteme yüklemek, listelemek, silmek, update etmek gibi işlere yarıyan, command prompt’tan çalışan bir uygulamadır. Eğer Npm makinada yok ise Node.js‘in yüklenmesi ile Npm de otomatik olarak gelmiş olur."

Node.js'i kurduktan sonra npm metodlarını kullanarak yo 'yu kurduk. Yo yani Yeoman nedir? "Yeoman, her tür uygulamayı oluşturmaya olanak tanıyan genel bir iskele sistemidir. Yeoman command-line arayüzü ile node.js kullanan yo komutu ile pluginleri çağıran google tarafından geliştirilmiş bir uygulamadır."

sudo npm -g install yo
Buradaki "sudo" ifadesi yönetici yetkileriyle komutu çalıştırmak demek. 
"-g" ise bu uygulamaya global olarak heryerden erişebileceğimiz anlamına geliyor. 


Sonra programlanabilirlik, auto compilation, smart history gibi avantajlarından dolayı "fish" adında bir shell tercih ettik.
https://fish.sh/

Bunu kurmak için de şu kodu çalıştırdık;

brew install fish

Fish'i varsayılan shell yapmak için öncelikle mevcut shell'lerin içine fish'in yolunu tanımlamamız gerekiyor. Bunun için öncelikle shell'lerin listesini çekiyoruz;

sudo nano /etc/shells
listeye 
/usr/local/bin/fish 
ekleyip kaydediyoruz.

bu işlemi tamamladıktan sonra fish'e geçmek için terminal'i kapatıp açmamız yeterli. Ya da direk bash ekranına fish yazarsak da geçiş yapabiliyoruz :)

Sonra google amcaya "fisher install" yazıp fishermanin sitesine girip bulduğumuz install komutuyla fisherman'i yükledik. Fisherman nedir; "fish için eklenti yöneticisidir."


curl -Lo ~/.config/fish/functions/fisher.fish --create-dirs git.io/fisher

fisher z yapıp ilk plugin'imizi yükledik. Detaylar için;
https://github.com/fisherman/fisherman/wiki/T%C3%BCrk%C3%A7e

Asıl bu zamandan sonra herşey renklendi. Tüm komutlar renklendi ben leb deyince çorum demeye fln başladı Terminal. Sevdim. Rengi verdik. .Net Core'da da dans ederiz umarım. 

Bu arada bu ortamla ilgili tek sevmediğim yan ilk terminal açılışında beni karşılayan ayıplı kelime :P 

O zaman work!



7 Kasım 2016 Pazartesi

Xamarin.Forms Simple Popup Layout

Hi there, I needed Popup in my project, but I couldn't find a simple solution for Xamarin.Forms. So me and my friend developed a simple PopupLayout for us. It is a quick solution until find a better one. Maybe it can help you too;

Let's create a class in Forms project.



using System.Threading.Tasks;
using Xamarin.Forms;

namespace MyProject
{
    public class PopupLayout : RelativeLayout
    {
        private View _content;
        private View _popup;
        private RelativeLayout _backdrop;

        protected override void OnChildAdded(Element child)
        {
            base.OnChildAdded(child);
        }

        public View Content
        {
            get { return _content; }
            set {
                if (_content != null)
                    Children.Remove(_content);
                    _content = value;
                    Children.Add(_content, () => Bounds);
            }

        }

        public bool IsPopupActive
        {
            get { return _popup != null; }
        }

        public async Task<bool> ShowPopup(View popupView, string title = null)
        {
            await DismissPopup();

            _popup = popupView;

            _popup.VerticalOptions = LayoutOptions.CenterAndExpand;

            if (_content != null)
                _content.InputTransparent = true;

            var backdrop = new RelativeLayout
            {
                BackgroundColor = Color.FromRgba(0, 0, 0, 0.4),
                Opacity = 0,
                GestureRecognizers = { new TapGestureRecognizer() },
                Padding = new Thickness(20),
                VerticalOptions = LayoutOptions.CenterAndExpand
            };

            var clickArea = new RelativeLayout
            {
                BackgroundColor = Color.Transparent,
                Opacity = 0
            };

            var tap = new TapGestureRecognizer();
            tap.Tapped += Tap_Tapped;
            clickArea.GestureRecognizers.Add(tap);

            var w = Constraint.RelativeToParent(p => p.Width - 40);
            var h = Constraint.RelativeToParent(p => p.Height - 40);
            var zero = Constraint.Constant(20);

            var sl = new StackLayout
            {
                Orientation = StackOrientation.Vertical,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Spacing = 0
            };

            var csl =new StackLayout
            {
                Orientation = StackOrientation.Vertical,
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Spacing = 0
            };


            if (!string.IsNullOrEmpty(title))
            {
                //This is a FontAwesome Label. We made it. You can use anything you want instead of this.
                var closeLabel = new FALabel 
                {
                    Text = FAIcon.Times, //this it fontawesome icon Unicode
                    HorizontalOptions = LayoutOptions.EndAndExpand,
                    VerticalOptions = LayoutOptions.StartAndExpand,
                    TextColor = Color.White,
                    VerticalTextAlignment = TextAlignment.Center,
                    FontSize = 22
                };                

                closeLabel.GestureRecognizers.Add(tap);

                var slTitle = new StackLayout
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    VerticalOptions = LayoutOptions.Center,
                    Orientation = StackOrientation.Horizontal,
                    Children =
                    {
                        new Label
                        {
                            HorizontalOptions = LayoutOptions.StartAndExpand,
                            VerticalOptions = LayoutOptions.Center,
                            Text = title,
                            TextColor = Color.White
                        },
                        closeLabel
                    },

                    Padding = new Thickness(8, 5, 8, 5),
                    BackgroundColor = Color.FromHex("#D10000")
                };

                csl.Children.Add(slTitle);
            }

            csl.Children.Add(_popup);
            sl.Children.Add (csl);

            backdrop.Children.Add(clickArea, Constraint.Constant(0), Constraint.Constant(0), Constraint.RelativeToParent(p => p.Width),
                Constraint.RelativeToParent(p => p.Height));

            backdrop.Children.Add(sl,
                zero,
                zero,
                w,
                h);

            _backdrop = backdrop;

            Children.Add(backdrop,
                Constraint.Constant(0),
                Constraint.Constant(0),
                Constraint.RelativeToParent(p => p.Width),
                Constraint.RelativeToParent(p => p.Height)
            );

            UpdateChildrenLayout();

            return await _backdrop.FadeTo(1);
        }

        private async void Tap_Tapped(object sender, System.EventArgs e)
        {
            await DismissPopup();
        }

        public async Task DismissPopup()
        {

            if (_popup != null)
            {
                await Task.WhenAll(_popup.FadeTo(0), _backdrop.FadeTo(0));
                _backdrop.Children.Remove(_popup);
                Children.Remove(_backdrop);
                _popup = null;
            }

            if (_content != null)
            {
                _content.InputTransparent = false;
            }
        }
    }
}






How to use it in xaml page;


<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="MyProject.SamplePopup" 
        xmlns:l="clr-namespace:MyProject;assembly=MyProject">
    <ContentPage.Content>
        <l:PopupLayout x:Name="plDefault" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <StackLayout x:Name="slMain" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                .

                .

                .

                .

            </StackLayout>
        </l:PopupLayout>
    </ContentPage.Content>
</ContentPage>





You should set your PopupLayout from .cs too;

Appearing class;


    plDefault.Children.Remove(slMain);
    plDefault.Children.Add(slMain, Constraint.Constant(0), Constraint.Constant(0), Constraint.RelativeToParent(p => p.Width), Constraint.RelativeToParent(p => p.Height));




override OnSizeAllocated class for issues;



        protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height); //must be called    

            slMain.WidthRequest = width;
            slMain.HeightRequest = height;

        }




How to open/close it;


   var popupMainStack = new StackLayout
   {
      VerticalOptions = LayoutOptions.FillAndExpand,
      HorizontalOptions = LayoutOptions.FillAndExpand,
      BackgroundColor = Color.White
   };
//You can add anything you want to main stack as children.
   await Popup.ShowPopup(popupMainStack,"Popup Title");






await Popup.DismissPopup(); //Close popup




Simple ;)