One, foreword

In our previous article “Charles”, we have told you how to grab THE App data of Https. Among them, the Demo shows the capture of JD home page. As I said at the beginning of this series, we will study iOS Swift5 development for JD App imitation.

This article has no technical content, does not involve the technology, only analyzes the UI and data (do not mess with my hydrology, for later UI component development pave the way).

Ii. UI structure analysis of home page

Let’s take a look at what JD App looks like, as shown below:

The above image does not fully show all the elements, you can open it yourself if you have JD App:

  • Custom navigation bar;
  • Category navigation bar;
  • Banner;
  • Small icon (tofu);
  • Horizontal scroll bar;
  • Adjustable top classification navigation bar;
  • The waterfall flow;

As we all know, the home page is very important and is the top traffic entrance. Therefore, the home page will display recommended products or popular products to users in as many different ways as possible through different UI components. In addition to the UI components used by JD above, There can also be other UI components (you can look at different apps, such as: Tmall, PDD, IQiyi, Tencent Video, etc.).

Packet capture & data analysis

After using Charles to capture the packet, we get the original request, then we can use other network request tools to repeatedly request the interface. Here, I use Postman to simulate the request:

This tool can beautify the returned JSON for viewing data structures and fields.

As I said before, THE data structure returned by the home page interface of JD App is “staring at the dog”! Why so say, see me to analyze (specially open a to vomit bad) :

In the figure above, we can see that the floorList is an array of objects:

The first object, which is what we call the category navigation bar, has a Content field, which is also an array of objects;

Next, we examine the second object, which is the Banner:

Let’s skip the third object and look at the fourth object, which is the little icon (tofu block), where the Content field, the type becomes an object instead of an array of objects;

Okay, I don’t want to analyze the rest of it, so that’s it for now. Why?

After analyzing the first two objects (the first and the second), I naivedly thought that the content field in all objects would be an array of objects. Then, when I deserialized, I reported an error directly. I was very surprised, and I subtracted the receiver model I defined, and finally found that there was something wrong with the Content field. After looking at the floorList data one by one, I found the truth (I said how sad the programmer responsible for JD’s front page was). However, on second thought, in fact, I may be wrong, big company is vertical lines of business, as a result, there will be multiple vertical business team (products, operations, research and development, testing, etc.), so the home page is the importance of the vertical team, therefore, the homepage interface may be only aggregate interface from these a few business team, the App is responsible by the corresponding business team, It’s not like a small company where one person is in charge.

At this point, we will say goodbye to you for the time being. Starting with the next article, we will move into componentized development and then integration, using real data to show the final effect of all UI components.