App Icon:
Loading Animation:
Application Aims:
This app basically for the electric car users the app users can make appointment according to their choices. Also app users can choice to receive notification option.
- About The Project
- Used Packages
- Pages
- Screen Recording
- Small Screen Views
- This project has been created with using MVVM architecture pattern
- This project made with custom font Proxima Nova (This font family is used by big companies like Buzzfeed)
- The Status Bar will always be the light Mode
- All of the Constants are received from the Constants Files the Usage of the quotes as less as possible
- All of the GradientView backgrounds are handled from the same class
- App compatible with small screen sizes.
- Local notifications can be set
- Local notification will be deleted after the appointment deleted
- All of the datas provided by API
- All of the API processes handled from Alamafire Generic API Handler.
- Users can only make appointment only for the future dates
- All of the custom popups handled from the same view
- Create, Read with CoreData
- Supported Languages: English, Turkish
After using MVVM, I've found it to be very beneficial in many ways. Let’s get back to the list of things we set out to accomplish when architecting our app to see if MVVM addresses them.
- Single responsibility principles applied.
- Easy to iterate on.
- Collaboration friendly.
- Separated out concerns.
- Spec-ability.
- Testability.
- Alamofire = Alamofire let us do more work with less lines of codes than URL Session as I used a generic API handler function with Alamofire I made the project cleaner and more understandable for anyone.
- Skeleton View = Using skeleton View I created a gradient animation for Stations Page
- LottieFiles = Using LottieFiles package I create a nice animation as loading some of the pages datas
When the app opened for the first time notification and location permissions will be asked from the user. In this page we need to enter a valid email address to create an appointment if we enter a wrong email address firstly the mail address will be checked by the local side after that the server side. If the user exists the user will sign in, otherwise user will be signed up and logged in. if there is any error about entered email or any server side problem there will be custom error pop up in the screen. Also the keyboard type will be email here so user can see email characters in the main keyboard page when people pressed return button from the keyboard the keyboard will be disappear. Also title will be bold in both supported languages.
For all of the server type errors our custom popUp View's will look like this only the subtitle will be changed according to the error.
In this page you can see your past and current appointments if you haven't created any appointment you will not see any appointment in this page. As this page loading you will see lottifiles animation laoding view. In this page datafetch and showing animation made in the Viewwillload function so the appointments will be reloaded when user returns to this page.
In this page you can see your profile infos (email and deviceUDID) if you want to logout of current user profile you can logout from this page. This page supports the swipe to back page option.
You can reach this page after pressing create appointment button from the Appointments page. The cities those are catched from API will be listed in this page. Datas will be loaded in the ViewwillLoad function just like the Appointments page. As this datas loading you will see the lottieFile animation view. Via Custom SearchBar you can search by city names you can search by turkish or english character even the table shows in turkish. For example you can search for "can" for the city "Çankırı" the app will handle it and make bolder entered text in the result cities also change custom search textfield border color green color. if there is not any matching cities the no result view will appear also change custom search textfield border color red. Also the keyboard(for search city textfield) return button handled in this page as well when user press that button the keyboard will disappers. This page supports swipe to back page option.
You will see this page after selecting a city from City Selection Page. In this page you will see the stations according to selected city as loading the stations you will see a skeleton view as skeleton view appears you will not be able to touch the stations. You can see station values that are fetched from API like distance, charge type, number of available sockets and station name in this page. Also in this page you can use a custom searchText field to search stations by theirs name. If User allowed the location permission the distance values will be appears and the stations will be sorted according to that value, if not allowed that value will not be shown and sorted by the received order from the API. also with the label made the city name bold and showed the number of the stations. This page supports swipe to back page option.
City with No Station View:
Station without location value:
We reach this page via using the filter icon that is on the right navigation bar button item in stations page. We can select multiple filters in this page all of the buttons and titles are localized in this page. Also we need to press filter button to activate selected filters in our stations page if not the stations will not be filtered. If we presss clear button the filters will be cleared and after this when we press the filter button the filters will be cleared in the station page. After pressing filter button if there is any filter value the right bar button item in the station page will be green color and we will see the filter options in the stations page (inside the collectionview) also we can alter the filters via cancel button that is inside the filter buttons if we remove all of the filters from the station page the right bar filter button's color will be reset and when we return from our station page to filtering page the changed filters will be affected here as well I mean deleted filters button will be deactivated. Also for the searching by station name in the stations will be doing inside the filtered stations only. This page supports swipe to back page option.
We reach this page after selecting a station from the stations page. In the date picker the today's date will be selected. Date Picker will be independent from the appearance of the phone it will always have black background and white texts. Also in the date picker you are not allowed to selected later than 2022-12-31 (Even it is shown in the Datepicker, the later date after the maximum dates are disabled inside the datepicker.). Everytime when user select a new date from the date picker the sockets will be reloaded and the number of the sockets will be checked, according to that we will implement that view (The station may close socket 3 in the following date). The socket table's widths will be changed according to the width of the screen if there is only one socket it will completely cover the screen width if there are two sockets half of the screen otherwise each of them will be cover 30% of the screen if we select a old date or older time than now there will be custom popup and block to proceed next page from this page. We can choose the option "select today" via this option the date picker values will automatically set to today date. Also if the time slot is appointed before, it will be disabled. So user is not able to select that time. You can only select one socket and one time. If the user has not been selected any time socket the confirm time and date button will be deactivated. This page supports swipe to back page option.
Time Selection
Date Picker
Old Date Error
We reach this page after successfully processed from the date and time selection page. In this page we will able to see selected appointment infos.If the user not allowed the location permission distance cell will not be shown. In the last cell we can see get notified switch (its state is holded so when it gets redrawed it state will be the same) if we switch on this toggler we can ask to receive local notification from the app. After switching on we can see a cell appears that we can select and open a picker view "that picker selection also independent from appearance of the phone" the time when we want to receive notification.( You don't have to select receive notification option) After selecting this options and pressed confirm appointment button the app will check if the user allowed notifications and remaining time for the notification according to time choice. If there is any error about notification set there will be custom error pop up this will only occurred when reeive notification switch turned on. If Notification not allowed we will show user an error popup. If there is not enough time to show notification it will show that error in the custom error popup. If everything goes successfully the required infos(date, time, stationId, socketId, notificationIdentifier, notificationtimeselection) (Actually there is an API bug here if it should have returned the appointmentID here we could only save that data and UserID inside our coreData ) will be saved in our coreData. NotificationIdentifier will be create uniquely so if we want to remove the appointment we can remove the notification using this notificationIdentifier. The notification subtitle and title set as localized string. After this page successfully processed the Appointments page will be loaded. The coreData saving process will be only implemented when user selected receive notification option. This coreData will be used to receive notification identifier and notification timer in our Appointments page. This page supports swipe to back page option.
Wrong Notification Time Error
In this page we will see the created appointments that are divided into 2 different parts as current and past appointments. This page supports pull to refresh action. You can only delete appointments from the current parts as the deletion button of the appointments only appear in the current appointments page. Also in the current appointment part you can see if there is any notification set for that specific appointment if there is no notification for that appointment this timer will be hidden and show the power label instead of the notification time. This notification time values received from our Coredata model so even after closing the app this values will persist. If the user wants to delete any appointment there will be custom popup appeared in the screen that has localized text. If the user confirm deletion of the appointment the appointment will be deleted, datas will be reloaded and the notification will be cancelled. Only 10 current appointments allowed. If you have 10 current appointments and press create appointment button you will see a custom error popup.
screenvideo.mp4
