Mobile Application Design and Development (COMP1786) Full Name: DAO VINH KHANG ID: Khangdvgcs200222 ( Email: dk9621h@gre.uk ) Table of content Contents • Checklist of features ( Java ). 5 • Checklist of features ( C# Xamarin). 6 User Registration and Login:. 16 Hike Planning and Recording:.
27 Integration with Google Maps:. 37 Storing Hike Data in Local Database:. 70 User Interface (UI), List of saved hikes, CRUD Operations. 70 Data storage, SQL database.
75 • Reflect on the application development process. 76 System Analysis and Design:. 76 Areas for Improvement:. 77 Compatibility with Multiple Screen Sizes:.
77 Testing and Debugging:. 77 • Reflect on the application development process ( C# Xamarin ). 77 • Evaluate your application. 78 User Registration and Login:.
78 Hike Planning and Recording:. 80 Areas for Improvement:. 80 • Evaluate your application ( C# Xamrin ). 81 User-Friendly Design:.
81 Performance and Stability:. 82 User Feedback and Future Improvements:. 86 Table of Figure Figure 1 Login. 17 Figure 4 Hike Planning.
30 Figure 6 Google Maps. 38 Figure 7 List of Hike. 52 Figure 9 Set Goal. 56 Figure 10 Hiking Chat.
62 Figure 11 Hiking Guide. 65 Figure 12 Hiking Shoping. 68 Figure 13 User Interface. 70 Figure 14 List Hike.
71 ASSIGNMENT • Checklist of features ( Java ) Feature Description Authentication and User Management Registration and Login User registration with email and password along with the ability to log in. Password Reset Allows users to reset their password if they forget their password. Main Interface List of Itineraries Displays a list of hiking itineraries for the user. Itinerary Details Allows users to view the details of an itinerary when they select one from the list.
Add an Itinerary Create a New Itinerary Users can create a new hiking itinerary with details such as location, date, distance, and notes. Save New Itinerary Saves the details of the new itinerary to the database. Delete Confirmation Confirm Deletion Displays a confirmation dialog when the user wants to delete an item from the hiking itinerary list. Perform Deletion Deletes the item when the user confirms the deletion.
List Observations List of Observations Displays a list of observations made during hikes. Link to Specific Itinerary Links observations to specific hiking itineraries. Enter Observations Record Observations Allows users to record observations and notes during a hike. Associate with an Itinerary Associates observations with a specific hike.
Pedestrian Rating Rate Pedestrian-Friendliness Allows users to rate the pedestrian-friendliness of hiking trails. Display and Update Ratings Displays and updates ratings for each trail. Hiking Chat Hiking Chat Implements a chat feature for hikers to communicate and share their hiking experiences. Real-time Message Display Displays chat messages in real-time.
• Checklist of features ( C# Xamarin) Feature Description User Interface (UI) Responsive UI design using Xamarin.Forms for both iOS and Android, with a main page containing input fields for Hiking Name, Location, Date, Description, and a "Choose Photo" button to select an image. Data storage Uses an SQLite database to store information about hiking trips. SQL database Connects and interacts with an SQLite database to store and retrieve information about hiking trips. CRUD Operations (Create, Read, Update, Delete) Allows users to create, read, update and delete mountain trip records.
Data synchronization Ensure data synchronization between your device and remote data (if available) to stay up-to-date on your hike. List of saved hikes Displays a list of saved trekking trips as a list or table, helping users easily view trip information. • Feature screenshot User Registration and Login: User Login: UI: Create a login screen with fields for Email and Password. Validation: Check input validity and completeness.
Backend: Send login data to the server for verification. Receive and handle the server's response. Figure 1 Login This Java code is for an Android login screen (MainActivity). It checks entered credentials against stored user data in SharedPreferences, displays appropriate messages, and navigates to the main screen upon successful login.
It also provides an option to navigate to the registration screen (RegisterActivity).HikingApp_GCS200222; import android.Intent; import android.SharedPreferences; import android.Bundle; import android.View; import android.EditText; import android.Toast; import androidx.AppCompatActivity; import com.R; public class MainActivity extends AppCompatActivity { private EditText usernameEditText, passwordEditText; private SharedPreferences sharedPreferences; private static final String PREFS_NAME = "MyPrefs"; @Override protected void onCreate(Bundle savedInstanceState) { super.activity_main); initializeViews(); sharedPreferences = getSharedPreferences(PREFS_NAME, MODE_PRIVATE); } private void initializeViews() { usernameEditText = findViewById(R.usernameEditText); passwordEditText = findViewById(R.passwordEditText); } public void onLoginClick(View view) { String username = getUsernameInput(); String password = getPasswordInput(); if (isUsernameRegistered(username)) { String savedPassword = getSavedPassword(username); if (isPasswordCorrect(password, savedPassword)) { showLoginSuccessMessage(); Intent mainScreenIntent = createMainScreenIntent(username); startActivity(mainScreenIntent); } else { showPasswordErrorMessage(); } } else { showUsernameNotFoundMessage(); } } private String getUsernameInput() { return usernameEditText.toString(); } private String getPasswordInput() { return passwordEditText.toString(); } private boolean isUsernameRegistered(String username) { return sharedPreferences.contains(username); } private String getSavedPassword(String username) { return sharedPreferences.getString(username, ""); } private boolean isPasswordCorrect(String enteredPassword, String savedPassword) { return savedPassword.makeText(this, "Logged in successfully", Toast.show(); } private Intent createMainScreenIntent(String username) { Intent mainScreenIntent = new Intent(this, Home.makeText(this, "Password error", Toast.makeText(this, "Username not found", Toast.show(); } public void onRegisterClick(View view) { startRegisterActivity(); } private void startRegisterActivity() { Intent intent = new Intent(MainActivity.class); startActivity(intent); } } XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.com/apk/res/android" xmlns:app="http://schemas.com/apk/res-auto" xmlns:tools="http://schemas.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background_walking" android:orientation="vertical" android:padding="16dp" tools:context="com.MainActivity"> <ImageView android:id="@+id/imageView5" android:layout_width="wrap_content" android:layout_height="246dp" android:layout_gravity="center_horizontal" android:layout_marginTop="80dp" app:srcCompat="@drawable/pathfit3" /> <EditText android:id="@+id/usernameEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Username" android:minHeight="48dp" /> <EditText android:id="@+id/passwordEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Password" android:inputType="textPassword" android:minHeight="48dp" /> <Button android:id="@+id/loginButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:backgroundTint="@android:color/holo_blue_light" android:text="Login" android:onClick="onLoginClick" /> <Button android:id="@+id/registerButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:backgroundTint="@android:color/holo_blue_light" android:text="Register" android:onClick="onRegisterClick" /> </LinearLayout> User Registration: UI: Design a registration screen with fields like Name, Email, Password, and Confirm Password. Validation: Verify input format and length. Ensure password and confirmation match. Backend: Send registration data to a server API to store user information in a database.
User Login: UI: Create a login screen with fields for Email and Password. Validation: Check input validity and completeness. Backend: Send login data to the server for verification. Receive and handle the server's response.
Figure 2 Register This Android RegisterActivity handles user registration by collecting information such as full name, display name, username, password, and confirming the password. It validates the input, saves user information to SharedPreferences, and navigates to the main screen (MainActivity) upon successful registration. The activity includes methods for input validation, data saving, and displaying a registration failed message.HikingApp_GCS200222; import android.Intent; import android.SharedPreferences; import android.Bundle; import android.View; import android.EditText; import android.Toast; import androidx.AppCompatActivity; import com.R; public class RegisterActivity extends AppCompatActivity { private EditText fullNameEditText, namescreenEditText, usernameEditText, passwordEditText, confirmPasswordEditText; private SharedPreferences sharedPreferences; private static final String PREFS_NAME = "MyPrefs"; @Override protected void onCreate(Bundle savedInstanceState) { super.activity_register); initializeViews(); sharedPreferences = getSharedPreferences(PREFS_NAME, MODE_PRIVATE); } private void initializeViews() { fullNameEditText = findViewById(R.fullNameEditText); namescreenEditText = findViewById(R.namescreenEditText); usernameEditText = findViewById(R.usernameEditText); passwordEditText = findViewById(R.passwordEditText); confirmPasswordEditText = findViewById(R.confirmPasswordEditText); } public void onRegisterClick(View view) { String fullName = getEditTextValue(fullNameEditText); String namescreen = getEditTextValue(namescreenEditText); String username = getEditTextValue(usernameEditText); String password = getEditTextValue(passwordEditText); String confirmPassword = getEditTextValue(confirmPasswordEditText); if (validateRegistration(fullName, namescreen, username, password, confirmPassword)) { saveUserInformation(username, password, fullName, namescreen); startMainActivity(); } else { showRegistrationFailedMessage(); } } private String getEditTextValue(EditText editText) { return editText.toString(); } private boolean validateRegistration(String fullName, String namescreen, String username, String password, String confirmPassword) { if (isEmpty(fullName) || isEmpty(namescreen) || isEmpty(username) || isEmpty(password) || isEmpty(confirmPassword)) { return false; } return password.equals(confirmPassword); } private boolean isEmpty(String value) { return value.Editor editor = sharedPreferences.apply(); } private void startMainActivity() { Intent intent = new Intent(RegisterActivity.class); startActivity(intent); finish(); } private void showRegistrationFailedMessage() { Toast.makeText(this, "Registration failed", Toast.show(); } } XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.com/apk/res/android" xmlns:app="http://schemas.com/apk/res-auto" xmlns:tools="http://schemas.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:padding="16dp" android:background="@drawable/background_walking" tools:context="com.RegisterActivity"> <ImageView android:id="@+id/imageView5" android:layout_width="match_parent" android:layout_height="236dp" app:srcCompat="@drawable/pathfit3" /> <EditText android:id="@+id/fullNameEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Full Name" android:minHeight="48dp" /> <EditText android:id="@+id/namescreenEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Namescreen" android:minHeight="48dp" /> <EditText android:id="@+id/usernameEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Username" android:minHeight="48dp" /> <EditText android:id="@+id/passwordEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Password" android:inputType="textPassword" android:minHeight="48dp" /> <EditText android:id="@+id/confirmPasswordEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:hint="Confirm Password" android:inputType="textPassword" android:minHeight="48dp" /> <Button android:id="@+id/registerButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:backgroundTint="@android:color/holo_blue_light" android:text="Register" android:textColor="#E9EFE9" android:textStyle="bold" android:onClick="onRegisterClick" /> </LinearLayout> User Registration: Users can create new accounts by providing their email and a password. Login: Registered users can log in with their credentials to access the app's features.
Main Screen: MainScreen is the screen users see when they open their app. This is where main functions and important information are organized and displayed. On the home screen, users can usually access the most important features of the app conveniently and quickly without having to go through many steps. Elements that typically appear on the home screen include icons (icons) or buttons for key features, notifications, user personal information, and other options that depend on the user's goals.
The goal is to create a user experience that is comfortable and easy to use from the home screen. Figure 3 MainScreen This Android Home activity displays user information, includes a VideoView, and provides buttons to navigate to various features of a hiking app. It initializes views, sets up a video view, displays user information retrieved from SharedPreferences, and handles button clicks to navigate to different functionalities. The activity also includes a logout button that clears the user session and returns to the login screen (MainActivity).HikingApp_GCS200222; import android.Intent; import android.SharedPreferences; import android.Uri; import android.Bundle; import android.View; import android.Button; import android.TextView; import android.VideoView; import androidx.AppCompatActivity; import com.R; public class Home extends AppCompatActivity { private TextView fullNameTextView, namescreenTextView; private SharedPreferences sharedPreferences; private static final String PREFS_NAME = "MyPrefs"; private VideoView videoView; @Override protected void onCreate(Bundle savedInstanceState) { super.activity_main_screen); initializeViews(); setupVideoView(); displayUserInformation(); setupButtons(); } private void initializeViews() { fullNameTextView = findViewById(R.fullNameTextView); namescreenTextView = findViewById(R.namescreenTextView); videoView = findViewById(R.videoView); sharedPreferences = getSharedPreferences(PREFS_NAME, MODE_PRIVATE); } private void setupVideoView() { Uri videoUri = Uri.your_video); videoView.getStringExtra("username"); String fullName = sharedPreferences.getString(username + "_fullname", ""); String namescreen = sharedPreferences.setText(namescreen); } else { fullNameTextView.logoutButton); } private void setButtonClickAction(int buttonId, Class<?> destinationClass) { Button button = findViewById(buttonId); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(Home.this, destinationClass); startActivity(intent); } }); } private void setLogoutButtonAction(int buttonId) { Button logOutButton = findViewById(buttonId); logOutButton.setOnClickListener(new View.Editor editor = sharedPreferences.apply(); } private void navigateToLoginScreen() { Intent loginIntent = new Intent(Home.class); startActivity(loginIntent); finish(); } } XML: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.com/apk/res/android" xmlns:app="http://schemas.com/apk/res-auto" xmlns:tools="http://schemas.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background_walking" android:orientation="vertical" android:padding="16dp" tools:context="com.Home"> <!-- Full Name --> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" tools:context="com.Home" tools:ignore="ExtraText"> <!-- TextView cho tên đầy đủ --> <TextView android:id="@+id/fullNameTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:text="Account" android:textSize="15dp" tools:ignore="DuplicateIds,TextSizeCheck" /> <!-- TextView cho namescreen --> <TextView android:id="@+id/namescreenTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@id/fullNameTextView" android:layout_marginTop="-25dp" android:text="Name Screen" android:textSize="20dp" android:layout_marginLeft="250dp" /> </RelativeLayout> <Button android:id="@+id/addHikeButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Record a Hike" android:backgroundTint="@android:color/holo_blue_light" /> <Button android:id="@+id/recordHikeButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Google Map" android:backgroundTint="@android:color/holo_blue_light" /> <Button android:id="@+id/planHikeButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Observe a Hike" android:backgroundTint="@android:color/holo_blue_light" /> <Button android:id="@+id/searchTrailsButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:backgroundTint="@android:color/holo_blue_light" android:text="Shoping" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/pedestrianRatingButton" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:layout_weight="1" android:backgroundTint="@android:color/holo_blue_light" android:text="Hiking Rating" /> <Button android:id="@+id/hikingGuideButton" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginTop="16dp" android:text="Hiking Guide" android:backgroundTint="@android:color/holo_blue_light" /> <Button android:id="@+id/hikingChatButton" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginTop="16dp" android:text="Hiking Chat" android:backgroundTint="@android:color/holo_blue_light" /> <Button android:id="@+id/setGoalButton" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:layout_marginTop="16dp" android:text="Set Goal" android:backgroundTint="@android:color/holo_blue_light" /> </LinearLayout> <Button android:id="@+id/logoutButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:backgroundTint="@android:color/holo_blue_light" android:text="Log Out" /> <VideoView android:id="@+id/videoView" android:layout_width="wrap_content" android:layout_height="253dp" android:layout_marginTop="16dp" /> </LinearLayout> Profile Editing: Users can edit their profiles, update information, and set profile pictures.
Hike Planning and Recording: Hiking Plan (Planning Your Hiking Trip): Function: Allows users to plan hiking activities before doing them. Interface: Provides tools for selecting detection locations, destinations, and important points on the map. Users can also view information about difficulty, distance, and estimated time. Record your hiking trip (Hiking Journey Recording): Function: Allows users to record information about actual climbing activities.
Interface: Includes buttons or features to start and end recording. Information such as start time, end time, distance traveled, etc., is displayed and can be saved. Figure 4 Hike Planning The AddAHike activity in the HikingApp allows users to input details about a hike, validates the input, saves the information to SharedPreferences, and provides options to view a list of hikes or return to the home screen. It includes EditTexts, a CheckBox, a Spinner for difficulty levels, and buttons for adding a hike, viewing the list, and returning.