“IOS” traffic service app “client, backend thinking + code”

Recently developed a service project, iOS client written by Objective-C, is set up with PHP, deployed in the cloud, the operating system is Linux CentOS 7.3, the database server is Apache, MySQL, LAMP combination is the basis of comparison. IOS code side, I will tell about the overall development of ideas, some interesting function points will be detailed. Back end code is relatively simple, want to try their own development API iOS developers can refer to. The main purpose of this paper is to do an overall review on the recent development at the same time, I hope there is a need for students to provide some help, there are many unreasonable and imperfect place, also request you thank you for your generous with your criticism!

First, the overall effect diagram is:


show.gif

In POI search results page, the map is blank, the reason is because the running effect is good, real

Here is the iOS project address and the backend project address. If it helps, I’d like to order Star as a token of encouragement, thanks ~!

“Tips”: the project uses CocoaPods to integrate the third party libraries for students who find the code running out of error. Before, I made ignore operations on the Pods folder for my convenience. Has just been updated, you can directly open the suffix xcworkspace for the project file run. However, the volume of the items above Github will be larger.

Brief introduction: project UI as a whole to try to keep the blue style of hunger, some of which refer to the high moral map, hungry, Max+ design style?.

Project function point

  • Account and user data management
  • Refer to hungry, UI positioning, weather module
  • Based on the High German map API developed POI retrieval, and at the same time, the interface also added some of the high moral map app similar features
  • Custom interaction logic for scheduled and result notification functions
  • Simply refer to the Max+app information module
  • User’s historical footprint, historical events maintenance

The API and three party libraries used by the project

  • High moral map, API
  • And wind weather, API
  • Built back end related interfaces
  • AFNetworking 3
  • SDWebImage
  • MBProgressHUD
  • The Icon within the project uses Alibaba’s iconfont icon heavily

Technical points involved in the project

  • High moral map API related use. Including maps, POI search, navigation and other functions.
  • Examples of GCD usage. Includes time consuming operations such as background execution, UI updates, and related operations.
  • NSUserDefaults maintain account information. This is for convenience and for reference only.
  • The use of Core Animation. Since the TableView user experience is not very friendly when loading HUD, I encapsulate the Loading page myself.

Development idea

  • Using Tabbar VC as rootController
    IMG_2008.PNG login page project initialization, if there is no account information at this time, the modal pop-up pop-up login page. This section is relatively simple, the client will first of the user input information for a simple legal judgment, and then call the login interface. There are some codes about TextField’s click margin and Return recovery keyboard, and when you move out of the keyboard, shift controls to prevent occlusion. When Tabbar VC is initialized, the VC in the first tab column will do the positioning operation. If this is the logged in state, the interface that sends the history trace is called directly. In the unregistered state, when the user clicks on the login button, when the login is successful, a notification is sent to the first tab column VC to call the historical footprint interface.
  • Main interface (tabbar column, home page)
    IMG_2009.PNG

IMG_2010.PNG
  • Geographical location and weather section. This part is wrapped separately, View, UI reference, hungry?. The click event of the geographic location and the notification list button is implemented by the agent by the current VC. The coordinate simulator localization cannot be used to obtain the high moral map of the domestic API, I made a judgment on the operating environment, if it is running, then set the default coordinate, the corresponding location is probably Beijing Haidian District City, Beijing Institute of Technology. During the current VC load, open the location and interface the weather messages in the successful callback of the geo location code. Note that the UI update of geographical location and weather information is performed on the main thread. Click on the location of the text, will reposition modal pop-up interface, reposition button click by the main interface VC realize the use of agents, avoid objects in this interface again instantiate the related.
  • The function bar is shown using UICollectionView. Each Cell’s Icon uses the Alibaba’s iconfont icon to convert past picture material to fonts, which is highly efficient for material consolidation, HD fidelity, and code convenience. In the Web, mobile client development field has been very widely used.
  • One function, VC, ,
    , IMG_2011.PNG, this section of UI refers to the nearby interface, UI, and some of the properties of the Gould map. The navigation bar is hidden, at the top of which is a map control, and a transparent return button. Here is the tableview for the POI information. When tableview is sliding down, the map is hidden, the tableview of frame moves up, and the navigation bar appears. Slide upward to the top, tableview down, the map appears, navigation bar hidden. The characteristics of the tableview slide by scrollViewDidEndDragging: (UIScrollView *) scrollView willDecelerate: (BOOL) decelerate agent method, to determine the direction of slip, and thus the tableview frame and other elements of the operation of the navigation bar. The
    code is as follows: / / judge sliding gestures direction, tableview frame decided to change – (void) scrollViewDidEndDragging: (UIScrollView *) scrollView willDecelerate: (BOOL) decelerate translation translationInView:scrollView.superview] {CGPoint = [scrollView.panGestureRecognizer; if (translation.y> 0) {NSLog (@ SSSSSS) {NSIndexPath; *dic = self.poiList.indexPathsForVisibleRows.firstObject; if (self.poiList.frame.origin.y = = 64 &amp &; dic.row = = 0) {[UIView animateWithDuration:0.2 animations:^{NSLog (@ visible::% @ “, DIC); showMap = YES; self.navigationController.navigationBar.hidden = YES; self.poiList.frame = listFrame;}]; }else}} if {NSLog (translation.y< 0) (@ “tttt”); if (self.poiList.frame.origin.y = = 300) {[UIView animateWithDuration:0.2 animations:^{showMap = NO; self.navigationController.navigationBar.hidden = NO; self.poiList.frame = listFullFrame;}];}}}
  • In the interface load, using its own package loading page:

    IMG_2018.PNG view in the page loaded in the beginning, will be added to the loading page view VC view. In the callback that completes the page data load, call the tableview method of reload, and then remove the loading page. The loading page makes a simple breathing animation using basicAnimation, and keyPath transparency for the logo icon.
  • The first cell’s POI site defaults to an appointment, displays the appointment icon, and clicks on the appointment interface. The interaction logic of this part of the

    IMG_2012.PNG and the back end of the is defined by itself. The general booking process is an appointment request, after the successful delivery, for a period of time by the store to agree or refuse to operate, and then the client received the results of receipt. Since this project simulates the process simply, the HTTP protocol is used for communication. So my implementation is that after receiving the reservation request, the latter directly adopts the random number to simulate the acceptance or rejection of the store. After a certain time, the client invokes the interface of the result query to obtain the reservation result. The implementation method is, click the reservation button, if the appointment interface calls successfully, the button word becomes an appointment, the clock icon begins to rotate, and the button becomes non clickable state. At the same time, use performSelector mode delay call to obtain the results of the reservation interface. In the successful callback of the network request, a notification is sent to the main interface, and then the red button of the notification number is displayed on the right side of the main interface notification button. As shown. The data that tells the list here is in UserDefaults, and cannot be synchronized between different devices. Which involves some of the data requirements of userDefaults knowledge, specific reference code. This is because the requirements are improvised, and if conventional implementations need to develop interfaces to obtain notification data. I use this approach to simulate implementation in order to save development time. This place can be perfected in the future ~
    , ,
    , IMG_2013.PNG

  • Information Tab column
    IMG_2014.PNG here does not cost too much effort. Data preset NetEase news related data. The interface UI refers to the information capabilities of my frequently used Max+iOS client. The first Cell is based on the full map, which can be used to highlight key content. The information details page is a simple webView. Similarly, the Loading diagram is encapsulated in its own package. The timing of the removal is simply in the finishLoad webView callback method. In fact, for the real Webview loaded to judge the time when there are many things you can chat, days after the supplement.
  • Setting up the page
    IMG_2015.PNG is obviously a tableview implementation of two section. In the viewWillAppear method of the page, you need to call the way to get the cached data size, and update the contents of the cached cell separately. Because every time the tab is switched, the cached data can change. Personal information page is still implemented using tableview. In the information editor page, modeled on the WeChat information to change the logic of the page. The keyboard pops up immediately when the page appears. As for the problem of making textField a first responder when page completion is complete, a rewrite – (BOOL) becomeFirstResponder method is required. The code is as follows: – (BOOL) becomeFirstResponder return [self.textInput becomeFirstResponder] {[super becomeFirstResponder];
    IMG_2016.PNG;}, history, history book
    IMG_2017.PNG
    information integration
    IMG_2019.PNG this part is still using the package of loading page. If the data entry is empty, no tableview is displayed and no relevant information is indicated, as shown in fig.. Clearing the cache here uses only SDImageCache related methods. We can also clear the cache data app directory to achieve the real purpose of clearing the cache, days after the discussion. The initial unit of cache data acquisition is B, and we need to divide the data by 10241 or 2 times to determine whether the current data is at the KB level or the MB level and display it correctly. Log out, click this button to clear the relevant data in the userDefaults, and then pop-up the login page mode. One thing to note here is that after we have popped up the login page and logged in again, the interface is on the page before exiting the login, that is, the third page of the tab column. If you want to log in again, and the interface appears on the front page of the tab column, we can set the selected index of the current tabVC in the callback of the modal pop-up login page. The following code: DELoginViewController *loginVC = [[DELoginViewController alloc] init]; [self presentViewController:loginVC animated:YES completion:^{dispatch_async (dispatch_get_global_queue (DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{/ time consuming operation (dispatch_get_main_queue), dispatch_async (^{/ update interface AppDelegate (AppDelegate*) [UIApplication * appDelegate = sharedApplication].delegate; appDelegate.tabbarVC.selectedIndex = 0;});});}];

The main idea of the development of the code, the basic narrative, the specific details, we can continue to communicate with ~ ~ project there are many ways to achieve unreasonable, the small part of the time factor is taken into account. All are welcome to discuss and advise.
has some questions. Welcome to leave a message. The project uses its own interface, deployed in my Ali cloud server, can be accessed outside the network. Ask for reasonable use.

Back end project related SQL code, if necessary, I can post it later.

If you are interested, later I can talk about the server side of the code, of course, the back-end, I’m also beginners level, only for students who want to enter reference.

My personal blog website address: Halo’s personal blog, welcome to visit.

The code is open source, and the address is in the header of the article. If you click star, I’ll really appreciate it! ~
halo!