Merhaba, öyle döndüm, böyle döndüm VueJs ile bir masaüstü uygulaması geliştirdim. Bunu yaparken hem JavaScript hem de VueJs üzerine çok şey öğrendim. Şimdi bu öğrendiklerimi sizinle paylaşmak istiyorum.
Öncelikle NwJs ile uygulama kalıbını oluşturarak başlayalım.
Öncelikle NwJs sitesinden en son halini indirelim. Ben ne olur ne olmaz deyip SDK sürümünü indirdim. İndirilen bir zip dosya, bunu herhangi bir yerde açalım.
Merhaba , VueJs temelleri konusunda çok uzun yazıların ardından işe yarar bir uygulama için kolları sıvayalım.
Bİr sınav uygulaması yapmayı planlıyoruz. Daha önce öğrendiğimiz komponentleri kullanarak uygulamamızı gerçekleştireceğiz. Başlangıç olarak hazırlanan 3 dosyayı indirip bir yere kaydedin lütfen. app.txt , css.txt ve data.txt. Uygulamamızı Vue CLI kullanarak üretelim. Terminalde:
vue create sinav
Evet sinav çünkü Vue CLI proje adında Türkçe karakter kabul etmedi. Uygulamayı çalıştıralım test edelim.
cd sinav
npm run serve
Merhaba bu yazıyı okumaya başlamadan önce okumanız gereken 2 bölüm var.
Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 1
Vue3 (Vue.js versiyon-3) Öğreniyorum - Bölüm 2
Şimdi kaldığımız yerden devam edelim. Alt komponentlerden üst komponentde veri değiştirmenin ikinci yolu olarak Callback Fonksiyonları da kullanabiliriz demiştik.
Alt komponentten üst komponent verilerine müdahale için sağlıklı yol Olay Bildirimi (emit) geçen bölüm anlatmıştık. Call Back fonksiyonları da üst komponent verilerini değiştirmek için alternatif bir yoldur. Önce App komponentinde yaşDeğiştirCB adı ile kullanacağımız Call Back fonksiyonu tanımlayalım.
Okumadıysanız önceki bölümde VueJs versiyon 3 bölüm 1 yazısını okumanız burada anlatılanı daha iyi anlamanıza yardımcı olacaktır.
LifeCycle fonksiyonları, Virtual DOM ve Komponentler gibi daha ileri konulara dalıyoruz bu bölümde.
Hep olduğu gibi bir klasör ekleyerek bağlayalım, adı app7 olsun (en son app6 idi) ve içine şu dosyaları koyalım.
app7/app.js
Merhaba,
Ben bu VueJs öğrenme işine bıkmadım, çok takdir ediyorum bu işi. Bir gün mutlaka bir yerde bana para da kazandırır eminim. Bu güne kadar ne öğrendiysem bir projede kullandım.
İnternette gezerken güzel bir kurs dökümanı buldum. Şimdiye kadar gördüklerime nazaran daha ayrıntılı bir anlatımı vardı. Kafamda takılan sorulara da cevaaplar vardı. Bu öğrendiklerimi sizinle de paylaşayım dedim.
Merhaba ,
Önceki yazıda NwJs kuruluşunu göstermiştik. Bu sefer VueJs versiyon 3 kullanalım. https://unpkg.com/vue@next adresinden VueJs versiyon 3 indirebiliriz. Başlamak için helloWorld adında yeni bir klasör oluşturup içine indirdiğimiz vue.global.js dosyasını koyalım. Sonra da package.json , index.html , main.js isminde yeni dosyalar ekleyelim.
{
"name": "helloWorld",
"main": "index.html"
}
<!DOCTYPE html>
<html>
<head>
<title>Merhaba Dünya!</title>
<script src="vue.global.js"></script>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<script src="main.js"></script>
</body>
</html>
Merhaba, bu yazıda VueJs yardımıyla NwJs platformunda masaüstü uygulama geliştirmek için araştırma yapıyorum. Nw.js , Google Chrome ve NodeJs temelleri üzerinde kurulmuş ve masaüstü uygulamaları web teknolojileri kullanarak üretmeyi amaçlayan bir platform. İlgimi çekti ve bir deneyelim bakalım neler yapabiliriz diyerek başladım. Bu yazıda VueJs versiyon 2 kullandım.
Merhaba , pandemide uzun zamandır yazmadım. Ama boş durmadım. Uzun zamandır küçük işyerim için faturaları kayıt altına alabileceğim bir uygulama arıyorum. İnternette birkaç hazır site de kullandım ama hiç biri bana uymuyor ben hep onlara uymak zorunda kalıyorum. Ben kendi uygulamamı yaparım dedim. Başladım dönmeye. Önce kodsuz uygulama platformları denedim, AppGyver, Buble, FireBase, AirTable vs. baktım hepsi beni kısıtlıyor bir türlü istediğim gibi olmuyor. Döndüm yine eski ve her zaman dostum RubyOnRails'e. Debelene debelene ortaya bir uygulama çıkardım. Bu yazımda uygulamayı nasıl oluşturduğumu sizinle paylaşacağım.
Önce veri tabanı tasarımından başlamak lazım. En korktuğum yer burası, eğer veri tabanını yanlış tasarlarsak sonra bir sürü yanlış yollarda boğulabiliriz. Şöyle bir veritabanı tasarladım.
<!DOCTYPE html>
<html>
<head>
<title>VueJs Öğreniyorum</title>
</head>
<body>
</body>
</html>
_main_content.html.erb dosyasının içeriğini şöyle değiştirelim:
<div id="main-content" class="col-sm-9"> <h3 class="page-name"><%= link_to "Hobi Arkadaşı", hobby_posts_path %></h3> <div class="row"> <%= render @hobby_posts %> <%= render no_posts_partial_path(@hobby_posts) %> </div><!-- row --> <h3 class="page-name"><%= link_to "Çalışma Arkadaşı", study_posts_path %></h3> <div class="row"> <%= render @study_posts %> <%= render no_posts_partial_path(@study_posts) %> </div><!-- row --> <h3 class="page-name"><%= link_to "Takım Arkadaşı", team_posts_path %></h3> <div class="row"> <%= render @team_posts %> <%= render no_posts_partial_path(@team_posts) %> </div><!-- row --> </div><!-- ana içerik -->
posts klasöründe post adında bir alt klasör tanımlayalım ve içne _home_page.html.erb adında bir parça görsel dosyası tanımlayalım.
_post.html.erb parça görselindeki kodu kesip buraya yapıştıralım.
<div class="col-sm-3 single-post-card" id=<%= post_path(post.id) %>> <div class="card"> <div class="card-block"> <h4 class="post-text"> <%= truncate( post.title, :length => 60 ) %> </h4> <div class="post-content"> <div class="posted-by">Gönderen <%= post.user.name %></div> <h3><%= post.title %></h3> <p><%= post.content %></p> <%= link_to "İlgileniyorum", post_path( post.id ), class: "interested" %> </div> </div> </div><!-- card --> </div><!-- col-sm-3 -->
assets klasörü altındaki javascripts klasörü içine posts adında bir alt klasör ekleyelim ve içine style.js adında bir yeni dosya ekleyelim. Ayrıca javascripts klasöründeki default .coffee dosyalarını da silebiliriz çünkü kullanmayacağız.
Post modelini tanımlayarak başlıyoruz. Konsolda
rails g model post