- oryantasyon
- staj yetkilisinin önerdiği dökümanları inceleyip gerekli kurulumları yaptım. (node.js&vscode için eklentiler)
- front-end'de react çalışacağım için javascript ile değişkenler ve de dom kavramlarını öğrenip üzerinden geçtim.
- back-end çalışmalarım için python 3.10.5 versiyonunu yükledim.
- mysql ve workbench kurulumunu yaptım.
- django kullanarak örnek projeyi ile oluşturdum.
- django model yapısınıı inceledim.
- model yapısıyla class'lar oluşturarak veri tabanı bağlantısını yaptım.
- Verilen dökümantasyonlar üzerinden python bilgilerimi tazeledim.
- Projede kullanılacak olan mysql veritabanı için workbench yerine vscode içindeki eklentiyi kurdum.
- Django için aşağıdaki eklentiyi kurdum.
- Django ile models yapısı üzerinde alıştırmalar yapmaya devam ettim.
- django admin paneli düzenledim ve veritabanına kayıtlar ekleyerek crud işlemlerini gerçekleştirdim.
- dinamik verilerle render admin panel ve veritabanı ilişkili sayfalar oluşturdum.
- One to Many Relation ile uygulamalar yaparak etkileşimli sayfalar oluşturdum.
- Front-End tarafında react ile real dom&virtual dom yapısını inceledim.
- Callback Functions / async-await, Promises ve Array Functions konularını gözden geçirdim.
- React projemi oluşturdum =>
yarn create react-app hello-react cd hello-react yarn start
- Django Many to Many Relation kavramlarıyla uygulamalar yaparak etkileşimli sayfalar oluşturdum.
- Many to Many Relation yapısıyla ilgili aldığım hataları veritabanı kısmında düzelttim.
- https://docs.djangoproject.com/en/4.0/topics/db/examples/many_to_one/
- Django Many to Many Relation ile oluşturduğum sayfalara url yönlendirmelerini yaparak view.py içinde düzenlemeler yaptım.
- Django View Layer yapısını inceledim.
- Class ve Template View üzerined çalışıp Class Based View yapısını inceledim.
- Yapacağımız projen belirlendi ve kullanacağımız teknolojilerle gruplara ayrılıp görev dağılımı yapıldı.
Görev Bir havayolu şirketinin havalimanına eleman taşıması için kullanılacak web application. Web sitesi panel olarak kullanılacak. Web sitesinde admin için giriş ekranı, sürücü ekleme, yolcu ekleme ekranı, görev ekleme ve görev izleme ekranı olacak. Görev oluştururken başlangıç ve son durak seçilecek. Sürücü ve yolcular göreve eklenecek. Görev ekranında bir harita üzerinden yolcuların konumlarını ve sürücünün konumunu görülebilecek. Hangi yolcular arabaya alınmış görülebilecek. Mobil üzerinde sadece sürücü için giriş ekranı olacak. Sürücüye atanmış olan görevler listenecek ve sürücü bu görevleri kabul veya red edebilecek. Sürücünün aktif konumu backende her 1-5 saniyede bir gönderilecek. Uygulama üzerinden kendi konumunu durakların konumunu ve yolcuların konumunu görebilecek. Yolcunun yakınına gelirse o yolcuyu aldım olarak işaretleyebilecek. Durak yakınlarında da vardım diyebilecek.
- Front-End olarak bir dashboard arayüzü kodlamamız istendi. Projenin ihtiyaçları doğrultusunda hem mobil hem web için Adobe Xd üzerinden bir tasarım oluşturdum.
- Tasarımı Figma'ya aktararak ekip arkadaşlarımla paylaştım.
- Tasarımı staj görevlisine göstererek onayını aldıktan sonra kodlamaya başladık.
- Front-End kısmında React ile beraber Material UI kütüphanesini kullandık.
- Dashboard'ın anasayfasını kodlamaya başladım.
- Projenin ihtiyaçlarına göre Sürücüler, Yolcular ve Görevler olarak oluşturduğum sidebar'ı böldüm.
-
- Anasayfayı şekillendirerek gerekli kısımları ekledim. Geçici olarak dolu gözümesi için FakerJs kütüphanesini kullandım.
-
- Sidebar'da ayırdığım kısımların sayfalarını kodlayıp routes.js kısmında path yönlendirmelerini yaptım.
- Genel taslağı tamamladığımda projeyi GitHub'a yükleyerek Vercel üzerinden build alarak yayınladım.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent