-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
225 lines (212 loc) · 12.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map Tracker Yürüyüş Aktivitesi Uygulaması</title>
<link rel="icon" href="assets/map-tracker/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
}
header {
margin-bottom: 1rem;
}
.navbar-brand img {
height: 50px;
}
.card-body ul {
list-style: none;
padding: 0;
}
.card-body ul li {
margin-bottom: 0.5rem;
}
footer {
background-color: #f8f9fa;
}
.footer-links a {
color: #007bff;
}
.footer-links a:hover {
text-decoration: none;
}
/* Navbar center alignment */
.navbar-nav {
flex-direction: row;
}
.navbar-nav .nav-item {
margin: 0 10px;
}
.navbar-nav .nav-link {
padding: 10px 15px;
}
.navbar-nav .nav-item.active .nav-link {
font-weight: bold;
}
</style>
</head>
<body>
<header>
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="assets/map-tracker/logo.png" alt="Logo" class="mr-2" style="height: 50px;">
Map Tracker Yürüyüş Aktivitesi Uygulaması
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#tanitim">Tanıtım <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ozellikler">Özellikler</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kurulum">Kurulum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kaynaklar-ve-araclar">Kaynaklar ve Araçlar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gelistirici-hakkinda">Geliştirici Hakkında</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container my-4">
<!-- Tanıtım Section -->
<section id="tanitim" class="mb-5">
<h2><i class="fa fa-info-circle" aria-hidden="true"></i> Tanıtım</h2>
<div class="card">
<div class="card-body">
<p>Bu proje, Flutter kullanarak geliştirilen bir yürüyüş aktivitesi uygulamasıdır. Uygulama, kullanıcıların yürüyüş/koşu aktivitelerini başlatıp bitirmelerini, bu aktivitelerin süresini ve mesafesini hesaplamalarını ve verileri SQLite/SpatiaLite veritabanına kaydetmelerini sağlar. Ayrıca geçmiş aktiviteleri görüntüleme ve detaylarını inceleme imkanı sunar. Uygulamanın diğer önemli özellikleri arasında şunlar bulunmaktadır:</p>
<ul>
<li>Kullanıcı dostu arayüz ile kolay gezinme ve kullanım.</li>
<li>Gerçek zamanlı konum ve rota takibi ile doğru mesafe ve süre hesaplaması.</li>
<li>Aktivitelerin hem lokal veritabanına hem de Firebase Firestore'a senkronize edilmesi.</li>
<li>Offline mod sayesinde internet bağlantısı olmadan da aktivite verilerini kaydedebilme.</li>
<li>Gelişmiş raporlama ve istatistik özellikleri ile kullanıcı performansının izlenmesi.</li>
</ul>
<div class="text-center my-4">
<img src="assets/map-tracker/uygulama.png" alt="uygulama" class="img-fluid" style="max-width: 50%;">
</div>
<div class="alert alert-warning" role="alert">
<strong>İndirme Linki:</strong> <a href="https://apkpure.com/p/com.map_tracker" target="_blank">APK Pure</a>
</div>
<div class="alert alert-info" role="alert">
<strong>Not:</strong> Bu proje benim ilk Flutter projem olup, 0'dan öğrenerek 3 haftada geliştirdiğim bir çalışmadır. Proje süresince edindiğim deneyimleri ve karşılaştığım zorlukları bu uygulama üzerinde pratiğe dökerek kendimi geliştirdim. Bu nedenle, projede bazı eksiklikler veya hatalar olabilir. Geri bildirimleriniz benim için çok değerli.
</div>
</div>
</div>
</section>
<!-- Özellikler Section -->
<section id="ozellikler" class="mb-5">
<h2><i class="fas fa-star"></i> Özellikler</h2>
<div class="card-deck">
<div class="card">
<img src="assets/map-tracker/Screenshot_20240719_125540.png" class="card-img-top" alt="Splash Ekranı">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-mobile-alt"></i> 1. Splash Ekranı</h5>
<p class="card-text">Uygulama açıldığında 2-3 saniyelik bir logo animasyonu gösterilir.</p>
</div>
</div>
<div class="card">
<img src="assets/map-tracker/Screenshot_20240719_125557.png" class="card-img-top" alt="Giriş Ekranı">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-user"></i> 2. Giriş/Kayıt Ekranı</h5>
<p class="card-text">Google hesabı ile giriş (authentication) yapılır. Kullanıcılar mail, ad, soyad, şifre gibi bilgilerle kayıt olabilir. Kayıt bilgileri Firebase üzerinde tutulur ve login aşamasında bu bilgilerle giriş yapılabilir.</p>
</div>
</div>
<div class="card">
<img src="assets/map-tracker/Screenshot_20240719_125727.png" class="card-img-top" alt="Dashboard">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tachometer-alt"></i> 3. Dashboard</h5>
<p class="card-text">Kullanıcının genel profili ve spor durumu (toplam mesafe, toplam süre, aktivite sayısı) gösterilir. Kullanıcının yeni aktivite başlatabileceği ve geçmiş aktiviteleri görüntüleyebileceği butonlar bulunur.</p>
</div>
</div>
<div class="card">
<img src="assets/map-tracker/Screenshot_20240719_125701.png" class="card-img-top" alt="Yeni Aktivite Ekranı">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-walking"></i> 4. Yeni Aktivite Ekranı</h5>
<p class="card-text">Kullanıcı, bu ekranda yürüyüş/koşu aktivitesini başlatıp bitirebilir. Aktif olunan süreçte kullanıcı, mevcut konumunu ve rota bilgisini harita üzerinde görebilir. Aktif aktivitenin toplam mesafesi, geçen süresi ve ortalama hızı anlık olarak güncellenir. Aktivite sonuçları Google Firestore veritabanına kaydedilir. Güncel hava durumu bilgisi OpenWeatherMap API'sinden alınır ve gösterilir.</p>
</div>
</div>
<div class="card">
<img src="assets/map-tracker/Screenshot_20240719_125712.png" class="card-img-top" alt="Aktivite Geçmiş Hareketleri">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-history"></i> 5. Aktivite Geçmiş Hareketleri İçin Liste Ekranı</h5>
<p class="card-text">Kullanıcının geçmiş aktivitelerini listeleyen bir
<p class="card-text">Kullanıcının geçmiş aktivitelerini listeleyen bir ekran içerir. Bu liste, tarih ve süre gibi temel bilgileri içerir ve her aktiviteye tıklayarak detaylarına erişilebilir. Ayrıca, bu ekran, kullanıcıların aktivitelerinin zaman, mesafe ve hız gibi verilerini görselleştirmesine yardımcı olur.</p>
</div>
</div>
<div class="card">
<img src="assets/map-tracker/Screenshot_20240719_125727.png" class="card-img-top" alt="Aktivite Detayları Ekranı">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-info-circle"></i> 6. Aktivite Detayları Ekranı</h5>
<p class="card-text">Kullanıcı, bu ekran üzerinden belirli bir aktivitenin detaylarını görebilir. Detaylar arasında aktivitenin başladığı ve bittiği konumlar, toplam mesafe, süre, ortalama hız gibi veriler yer alır. Harita üzerinde rota da gösterilir.</p>
</div>
</div>
</div>
</section>
<!-- Kurulum Section -->
<section id="kurulum" class="mb-5">
<h2><i class="fas fa-cogs"></i> Kurulum</h2>
<div class="card">
<div class="card-body">
<h5 class="card-title">Flutter Kurulumu</h5>
<p>Projeyi çalıştırmak için Flutter SDK'sının kurulu olması gerekir. Flutter SDK'sını [Flutter'ın resmi web sitesinden](https://flutter.dev/docs/get-started/install) indirip kurabilirsiniz.</p>
<h5 class="card-title">Proje Bağımlılıkları</h5>
<p>Projenin bağımlılıklarını yüklemek için terminalde proje dizinine gidip şu komutu çalıştırın:</p>
<pre><code>flutter pub get</code></pre>
<h5 class="card-title">Firebase Kurulumu</h5>
<p>Firebase konfigürasyon dosyasını projenize eklemelisiniz. Firebase konsolundan bir proje oluşturun ve ilgili `google-services.json` dosyasını indirin. Bu dosyayı proje dizininize ekleyin ve gerekli Firebase ayarlarını yapın.</p>
</div>
</div>
</section>
<!-- Kaynaklar ve Araçlar Section -->
<section id="kaynaklar-ve-araclar" class="mb-5">
<h2><i class="fas fa-tools"></i> Kaynaklar ve Araçlar</h2>
<div class="card">
<div class="card-body">
<ul>
<li><a href="https://flutter.dev" target="_blank">Flutter</a> - Mobil uygulama geliştirme framework'ü</li>
<li><a href="https://firebase.google.com" target="_blank">Firebase</a> - Backend hizmetleri ve veritabanı</li>
<li><a href="https://pub.dev" target="_blank">Pub.dev</a> - Flutter paketleri ve eklentiler</li>
<li><a href="https://openweathermap.org" target="_blank">OpenWeatherMap</a> - Hava durumu API'si</li>
</ul>
</div>
</div>
</section>
<!-- Geliştirici Hakkında Section -->
<section id="gelistirici-hakkinda" class="mb-5">
<h2><i class="fas fa-user-tie"></i> Geliştirici Hakkında</h2>
<div class="card">
<div class="card-body">
<p>Bu proje, <strong>Furkan Bulut</strong> tarafından geliştirilmiştir. Proje, yürüyüş aktiviteleri uygulaması geliştirme sürecindeki deneyimlerinizi paylaşmak amacıyla oluşturulmuştur. Yazılım geliştirme konusunda derinlemesine bilgi sahibi ve mobil uygulama geliştirmede tutkuluyum. İletişim için:</p>
<ul>
<li><a href="mailto:furkanbtng@gmail.com">Email</a></li>
<li><a href="https://github.com/Furk4nBulut" target="_blank">GitHub Profilim</a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="footer py-3">
<div class="container text-center">
<p>© 2024 Furkan Bulut. Tüm hakları saklıdır.</p>
<p>Projenin kodlarına ve diğer detaylarına <a href="https://github.com/Furk4nBulut/Map-Tracker-Flutter" target="_blank">buradan</a> ulaşabilirsiniz.</p>
</div>
</footer>
</body>
</html>