Kişisel Etkinlik Kaydedici Oluşturun: 6 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:16

Londra'dan arkadaşım Paul, yemeğini, etkinliğini ve konumunu tek bir gösterge panosunda izlemenin bir yolunu bulmak istedi. İşte o zaman, bir gösterge panosuna veri gönderecek basit bir web formu oluşturma fikri ortaya çıktı. Hem web formunu hem de gösterge tablosunu bir web sayfasına yerleştirir ve hareket halindeyken etkinliklerini kaydeder. Oradan aktivite kaydedici oluşturuldu! Bu eğitimdeki kod, renk, gösterge tablosu özelleştirmesi ve argodaki bazı küçük değişiklikler (İngiliz'den Amerika'ya çeviri benim tarafımdan yapılmıştır) dışında tamamen Paul'dür.

Bu proje için kullanacağız:

• kod kalemi
• Başlangıç hali
• netleştir

Kişisel bir aktivite izleyici oluşturuyoruz, ancak bu öğreticiyi ve kodu izleyerek bunu istediğiniz herhangi bir şey için bir web formuna ve izleyicisine dönüştürebilirsiniz! Başlayalım!

Adım 1: CodePen

CodePen geliştirme ortamıdır. Kodunuzu tarayıcıya yazmanıza ve ilerledikçe sonuçlarını görmenize olanak tanır. Açılır menüler, metin kutuları ve coğrafi konum içeren bir web formu oluşturmak için HTML, CSS ve JavaScript'te kodumuz var. Daha sonra ele alacağımız kodunuzu özel hale getiremeyeceğiniz tek şartla ücretsiz olarak kaydolabilirsiniz.

İlk önce CodePen'e kaydolun. Bunu yaptıktan sonra, önceden oluşturulmuş tüm kodlarla projemi Çatallayabilirsiniz. Bu, kendi kontrol panelinizde kodun bir kopyasını oluşturacaktır. Solda HTML, ortada CSS ve sağda JavaScript göreceksiniz. Tüm bunlarda uzmansanız, gerisini okumayı unutun ve istediğiniz gibi değişiklik yapın! Bu dillerde daha yeniyseniz, kolayca yapabileceğiniz değişikliklerle ilgili aşağıda bazı önerilerim var.

HTML

Bu kod parçası, tüm açılır menülerin ve kutuların biçimidir. İzlediğiniz ve açılır menülerde listelediğiniz şeylerin türünü buradan değiştirebilirsiniz. Egzersiz açılır menüsünde aktivite türlerini değiştirebilirsiniz (şu anda Ağırlıklar, Koşu, Yoga ve Kardiyo). Biçimi izleyerek listeye bir şeyler ekleyebilir veya daha fazla seçenek ekleyebilirsiniz. Aynı şeyler Et türü, Kahve boyutu ve türü ve Bira boyutu için de geçerlidir. Önemsiz metin kutusunda yer tutucu kelimeleri değiştirebilirsiniz (şu anda cips, çikolata vb.). Aynı şey Ağırlık (lbs), Egzersiz (dakika) ve Bira (abv %) için de yapılabilir.

Ayrıca bu taslağı kullanabilir ve bu web'i istediğiniz herhangi bir izleyici türünden yapmak için başlıkları, açılır seçenekleri ve yer tutucuları tamamen değiştirebilirsiniz.

CSS

Bu kod parçası, arka plan rengini, metin hizalamasını ve sütun hizalamasını ayarlar. Arka planı mide bulandırıcı pembeden daha hoş bir şeye dönüştürmek istiyorsanız, doğru renk değerini bulmak için çevrimiçi renk seçiciyi kullanın. Metni veya sütunları sağa, sola veya ortaya hizalayabilirsiniz.

JavaScript

Bu kod parçası, konum belirleme düğmesini ve gönder düğmesini çalıştırır. Burada değiştirmeni tavsiye edeceğim pek bir şey yok.

İhracat

Her şeyi beğeninize göre ayarladığınızda, sağ alttaki dışa aktar düğmesini tıklayın ve.zip olarak dışa aktar'ı seçin. Bu, kodu bir zip dosyasına indirecek ve onu indirilenler klasörünüzde göreceksiniz.

2. Adım: İlk Durum

İlk Durum, izlediğimiz etkinliğin özelleştirilmiş bir panosunu oluşturmamıza olanak tanır. 14 günlük ücretsiz deneme için kayıt olabilirsiniz. Bundan sonra, edu e-posta adresi olan Öğrenciler için ücretsiz veya Bireysel plan için aylık 9,99 ABD doları.

Oturum açtıktan veya kaydolduktan sonra kova rafınıza gidin ve akış grubu oluştur düğmesine (+bulut) tıklayarak yeni bir veri akışı paketi oluşturun. Adı istediğiniz gibi düzenleyebilir veya daha sonra değiştirebilirsiniz, Kişisel Etkinlik İzleyici'yi seçtim. Açık Tema kutusunu işaretlerseniz, gösterge panosuna beyaz bir arka plan verirsiniz. Bitti'yi tıkladığınızda akış paketiniz oluşturulur.

HTML koduna (API Endpoint & iframe embed) yerleştirmek için daha sonra paket ayarlarından bilgilere ihtiyacımız olacak.

3. Adım: Visual Studio Kodu

CodePen'in ücretsiz sürümünü kullandığım için tüm kodum herkese açık. Bu nedenle, İlk Durum erişim anahtarlarınızı gizli tutmanız gerektiğinden API uç noktalarımı ve iframe embed'imi koda koymak istemiyorum. Visual Studio Code, CodePen'den indirdiğim zip dosyasından kodumu yerel olarak düzenlememe izin verecek. En son sürümü web sitelerinden ücretsiz olarak indirebilirsiniz.

Kod dosyalarınızı açın ve bu klasörü Visual Studio Code'da açın. Buradan HTML kodunu düzenleyebilirsiniz. Dosyanın üst kısmına doğru “API ENDPOINTS BURAYA GİRİN” ifadesini göreceksiniz. API Endpoint'i Initial State'de oluşturduğunuz pakete giderek ayarlara tıklayarak bulabilirsiniz ve Data sekmesi altında API Endpoint'i göreceksiniz. Bunu kopyalayıp HTML koduna yapıştırın. HTML kodunun altında "BURADAN EMBED PAYLAŞIMI GİRİN" göreceksiniz. İlk Durumda tekrar kovanıza gidin, ayarlara ve Paylaşım sekmesine gidin. Herkese Açık Olarak Paylaş kutusunu tıkladığınızda, Gömülü Olarak Paylaş'ı görürsünüz. Yalnızca gömme paylaşım kutusundaki URL'yi kopyalayın ("https://iot.app.initialstate.com/embed/#/tiles/xxxxxx" gibi görünecektir). Bunu tırnak içine yapıştırın. Dosyayı kaydedin ve web sayfamızı oluşturmaya hazırız.

4. Adım: Netlify

Netlify, bir web projesi oluşturmanıza, dağıtmanıza ve yönetmenize olanak tanıyan hepsi bir arada bir platformdur. Ücretsiz olarak kayıt olabilirsiniz, bunu yapın. Kaydolduktan sonra, ana sayfanızda "Git'e bağlanmadan yeni bir site dağıtmak mı istiyorsunuz? Klasör sitenizi buraya sürükleyip bırakın" yazan bir kutu göreceksiniz. Güncellenmiş CodePen dosya klasörünüzü oraya sürükleyin ve bırakın. Buradan kodunuzu dağıtacak ve yeni web sayfanıza bir bağlantı oluşturacaktır. Bağlantıya tıklayın ve web formunuzu ve gösterge tablonuzu göreceksiniz.

Döşemelerinizin görünmesi için bazı veriler göndermeniz gerekir. Bu yüzden web formunuzu doldurun ve gönder düğmesine basın. Bunu yaptıktan sonra, İlk Durum kontrol panelinize gidin. Buradan döşeme türlerini değiştirebilir, döşemeleri yeniden boyutlandırabilir, düzeni hareket ettirebilir, veri renklerini göze daha hoş gelecek şekilde ayarlayabilir ve emojilere eşlemek için bazı gerçek zamanlı ifadeler ekleyebiliriz. Panonuzu yerleştirme boyutuna sığdırmak için iki seçeneğiniz vardır: Döşemelerinizi koda yerleştirme boyutunu sığdırmak veya ayarlamak için ayarlayın.

Adım 5: Kontrol Panelinizi Özelleştirin

Gösterge Grafikleri

Gösterge panelimde iki tür gösterge kullandım: kemer ve sıvı. Döşeme türünü değiştirmek için Döşemeye sağ tıklayın ve Döşemeyi Düzenle'yi seçin. Bu, Döşeme yapılandırıcısını açacaktır. Beer Size için Fayans tipi olarak Gauge Chart ve Gauge Style olarak Liquid'i seçtim. Başlık, sinyal anahtarı rengi ve minimum/maksimum değerleri de değiştirdim. Weight & Beer ABV için kemer ölçü stilini kullandım.

Emojilere Harita

Gerçek Zamanlı İfadeler kullanarak Egzersiz türünü ve Et türünü emojilerle eşleştirdim, böylece açılır listeden hangi öğeyi seçtiğime bağlı olarak belirli bir emoji ortaya çıkacaktı. Fotoğraflarda kullandığım kodu görebilirsiniz. Bu web sitesinden kontrol+komut+boşluk çubuğu tuşlarına basarak bir Mac'e veya Windows'a emoji ekleyebilirsiniz.

Web Formunda Emoji Gönder

Önemsiz gibi şeyler için doğrudan gösterge panelime emojiler göndermeyi seviyorum. Emojiyi kopyalayıp web formu metin kutusuna yapıştırıyorum ve gönder'i tıkladıktan sonra emoji kontrol panelimde görünüyor!

Mükemmel kontrol panelini özelleştirmek için çok uğraşmanız gerekir ve seçenekler sonsuzdur.

Arka plan görüntüsü

Verilerinize daha fazla kişilik veya bağlam kazandırmak için gösterge tablonuza bir arka plan resmi ekleyebilirsiniz.

6. Adım: Sonuç

Paul bunu bir aktivite izleyici olarak inşa ederken, bunun bazı küçük değişikliklerle nasıl kullanılabileceğine dair başka fikirler de sundu:

• Town Tracker İçindeki En İyi Kahve/Bira/Restoran
• Arkadaşlarım veya Çocuklarım Şu Anda Nerede ve Ne Yapıyorlar? izci
• Etkileşimli Golf Puan Kartı - Puanlar ve Kurslar İzleyici
• Yamaç Paraşütü Uçuş Kaydedicisi - (Paul'ün benden çok daha havalı hobileri var)

Artık her şeyi ve her şeyi takip edebilirsiniz. Bu kod, oluşturmak istediğiniz her tür web formu için kabuğu sağlar. O yüzden biraz oynayın ve yaratıcı olun ve bana elinizdekileri gösterin! Ve açıkçası, bunu yaratmaya yardım ettiği için Paul'e şerefe!