RS Clone — JavaScript/Front-end kursu The Rolling Scopes School’un son projesidir. Bu, bazı oyunları veya uygulamaları yeniden yaratmamız gereken bir ekip görevidir. Skyscanner’ı seçtik ama sadece uçak biletlerine odaklandık.
Skyscanner nedir?
Skyscanner bir uçuş arama motorudur. Daha genel olmak gerekirse, bir otel rezervasyonu yapmanıza ve araba kiralamanıza da izin verdikleri için çevrimiçi bir seyahat arama motorudurlar. Web sitesinin kullanımı tamamen ücretsizdir. Gizli ücretler veya ek masraflar yoktur: gördüğünüz fiyatlar ödeyeceğiniz fiyatlardır. Skyscanner, 30 saniyenin altında en ucuz uçuş fırsatlarını görüntüleyerek havayollarını ve çevrimiçi seyahat acentelerinin web sitelerini arar.
Önerilen makale: evde iş fikirleri hakkında bilgi almak ve güncel iş fikirleri haberlerine ulaşmak için ilgili sayfayı ziyaret edebilirsiniz.
O nasıl çalışır?
1. Adım: Para birimini ve dili seçin
Sağ üst köşede, fiyatların görüntülenmesini istediğiniz para birimini en yaygın olanlar ($, €, £) veya diğerleri arasından seçin.
2. Adım: İstediğiniz bilet türünü seçin
Tek yön mü yoksa dönüş bileti mi aradığınızı seçin.
3. Adım: Seyahat bilgilerinizi girin
“Nereden” bölümüne hangi şehirden uçmak istediğinizi ve “Nereye” bölümüne varış noktanızı girin. Takvimden uçuş tarihinizi, yolcu sayısını seçin.
4. Adım: Aramaya basın ve uçuş sonuçları arasından seçim yapın
Skyscanner varsayılan olarak en ucuz seyahatten en pahalı uçak biletine kadar sonuçları görüntüler.
Ekibimiz iki kişiden oluşuyordu.
Ivanka – 2019 sonbaharından ilgi programlama. Kimyasal Teknoloji yüksek öğrenimi. RSSchool’da eğitimine başlamadan önce Ukrayna’da Logos It Academy’de kurslara katıldı.
Roman – okulun 11. sınıfından programlamaya ilgi göstermeye başladı. Yazılım mühendisliği mezunudur. RSSchool’da eğitim görmeden önce GeekBrains, HTMLAcademy, FreeCodeCamp vb. birçok ücretsiz kurs aldı.
Eğitim, farklı konular için farklı görevlerin aşamalarına bölünebilir. Okul, görevi önemli ölçüde basitleştiren noktalara bölünmüş olarak yayınlar. Öğretim görevlisine soru sorabileceğiniz veya daha sonra videoyu kayıtta izleyebileceğiniz çevrimiçi eğitim dersleri vardır. Okul, bilgi eksikliklerini belirlemek için düzenli olarak testler yapar.
Eğitim sırasında şunları yaptık:
Hesap Makinesi — eval() işlevini kullanmadan;
Momentum — localStorage ve API isteklerini kullanarak;
Sanal klavye — klavye ve fare olaylarıyla çalışın;
Oyun bulmacası — oyunu otomatik olarak sonlandırmak için sürükle ve bırak efektleri ve algoritması;
Çocuklar için İngilizce — ses kullanarak;
COVID-19 panosu — ilk ekip görevi;
RS Klonu — son görev.
Projeye başlamadan önce, sayfaların ve blokların ve bunların birbirleriyle nasıl etkileşime gireceklerinin bir şemasını yaptık:
Bu şemaya dayanarak, işi parçalara ve işlevselliğe ayırdık.
IP Adresi Aramayı kullanarak, kullanıcının konumunu belirler ve görüntüleriz. Ülkeye bağlı olarak para birimini de ayarlıyoruz. Kullanıcı bu verileri istediği zaman değiştirebilir.
Ayrıca, kullanıcıyı sisteme giriş yapmaya veya sisteme kaydolmaya davet eden bir oturum aç düğmesi de vardır.
Kayıt sayfasında, kullanıcı formu doldurur. Form doğru bir şekilde doldurulduğunda, kullanıcı verileri uygulayabilir ve kayıt durumu hakkında bir bildirim alabilir.
Bilet araması için Tequila API’sini kullanıyoruz. Aramayı başlatmak için tek yön veya dönüş bileti seçmeniz, ülke, şehir veya havaalanı IATA kodunu, tarihleri ve yolcu sayısını girmeniz gerekir. FROM ve TO alanlarına veri girerken, kullanıcıya konumuna veya girilen karakterlere bağlı olarak giriş seçenekleri sunulur.
Varsayılan olarak, biletler fiyata göre en düşükten en yükseğe doğru sıralanır. Kullanıcılar ayrıca daha iyi sonuçlar almak için filtreler uygulayabilir ve her bir bilet seçeneğinin ayrıntılarını kontrol ederek en iyisini seçebilir.
Kullanıcı, rezervasyonu onaylamak için bir e-posta girmelidir. Onaydan sonra, kullanıcı verilerinin korunmasını sağlayamadığımız için bilet rezervasyonu yapamayacağımızı bildiren bir e-posta göndereceğiz.
Ayrıca yurt dışına seyahat etmeyi planlayan kişiler için önemli olduğunu düşündüğümüz COVID-19 hakkında en son bilgileri içeren canlı bir harita yaptık. Kullanıcı gideceği ülkeyi seçer, harita üzerinde ilgilendiği ülkeyi seçerek giriş ve dönüş ile ilgili güncel kısıtlamaları okuyabilir.
Program, her kullanıcı aramasını hatırlar ve bilet rezervasyonunu onaylamadıysa, ona geri dönüp devam etmesini öneriyoruz. Ayrıca popüler destinasyonlara göz atın.
Güncel bilet ve fiyatları gösterip göstermediğimizi kontrol etmek isterseniz kiwi.com’u kullanmanızı öneririz.
Video genel bakışını burada bulabilirsiniz.
Birlikte çalışmak için Discord’daki mesajları kullandık, birkaç kez görevleri tartışmak için aradık.
Karşılaştığımız zorluklar:
Başlangıçta, ücretsiz bir API-Key sağlayan rapidapi.com sitesi üzerinden uçak bileti araması için Skyscanner API’yi kullanmayı planladık. Ancak, canlı olarak değil, yalnızca önbelleğe alınan sonuçlara erişim verdiklerini fark ettik. Uzun bir aramadan sonra Tequila API’yi kullanmaya karar verdik.
Kayıtlı kullanıcılar hakkında veri toplamak için Mysql veritabanını kullanıyoruz. Zorluk Mysql veritabanını Heroku sunucusuna bağlamaktı çünkü varsayılan olarak Heroku bir PostgreSQL sağlıyor. Saatler süren deneme ve googling ile sorun çözüldü ve Heroku’da Mysql çalışması için ClearDB uygulamasını kullandık.
Genel olarak şunları kullandık:
stiller için:
önyükleme — işaretleme ve yanıt verme için;
tost — bildirim için.
harita için:
broşür — etkileşimli harita için;
leaflet.fullscreen — haritaya tam ekran düğmesi eklemek için;
geojson — JSON’da coğrafi verileri temsil etmek için.
Kayıt ve giriş için:
bcryptjs — şifre karma için;
body-parser — gelen istek gövdelerini bir ara yazılımda ayrıştırmak için;
ekspres — uygulamalar için sağlam bir dizi özellik sağlar;
jsonwebtoken — kodlama ve kod çözme için;
mysql — bir MySQL veritabanına erişmek için;
sequenceize — bir nesne sözdizimini veritabanı şemalarımıza eşler.
API’ler:
https://corona.lmao.ninja/v2/countries — ülkelerde iso3 ve iso2’yi çıkarmak ve daha fazla karşılaştırma yapmak için;
https://www.skyscanner.co.th/g/can-i-go-map-api/map/feature-collection-translated — seyahat kısıtlamalarıyla ilgili verileri almak için kullanılır;
https://restcountries.eu/ — Ülkeler hakkında bilgi alın;
https://skyscanner-skyscanner-flight-search-v1.p.rapidapi.com/apiservices/autosuggest/v1.0/UK/GBP/en-GB/ — Skyscanner’ın desteklediği pazar ülkelerini alın;
https://tequila-api.kiwi.com/v2/search — uçuşlar için Ara;
https://extreme-ip-lookup.com/ kullanıcı konumunu bulmak için kullanılır.
Başka:
dikkat çekici — Markdown’ı HTML koduna dönüştürmek için kullanılır;
nodemailer — kolay e-posta göndermek için.
Kodu düzenlemek için MVC mimari modelini (Model–View–Controller) kullandık.
Proje yapımız:
Burada değişiklik günlüğü dosyamızı bulabilirsiniz.
Genel olarak Ivanka, bilet arama, kimlik doğrulama, veri tabanı ve sitenin genel görünümünden sorumluydu. Roman — CODIV-19 bilgileri, harita, Heroku hizmeti ve Web paketi yapılandırmasından sorumluydu.
Birbirlerinin görevleri ve testleri kontrol edilerek kalite kontrol sağlandı.
Bu proje sırasında, dikkatli planlamanın bir projenin başarısı için kesinlikle hayati önem taşıdığını öğrendik ve ayrıca bu proje harika bir öğrenme alıştırmasıydı.
İnovasyon Pazarlama 