Open source of Watercress Client source code we can learn under

Open Source Code

Because the watercress closed the developer API Key application, the application is impossible to release to the public, so decided to open up the source code early, but also to interested people do some HACKING.

Here is a description of the bean sprouts.

Partial features

• Material Design
• Home Neighbor Broadcast
• Start Speed optimization
• Interface animations
• Support Screen rotation
• Flat Multi-column view
• Support for opening Web pages with Custom Tabs
• Support Toggle long/Short link display

Preview

Image:

Video:

• Youku Link
• Vimeo Links

About the name

The name of the bean sprouts is taken from the abbreviation of "Douban, yet another" and the Chinese word "bean sprouts" Pinyin just the same coincidence.

After naming, I learned that Watercress's Windows Phone client's name is also called "bean sprouts." So compared to the official application of the watercress "a call ' watercress ' app", it is also called the application of "Another bean sprouts application".

Why should I have bean sprouts?

The most common and consistent use of direct access to the watercress is to review, discover and discuss the ratings of movies, television, books, records, events (things we call "articles"). We will be a starting point and basis for the review of the site's synchronized ratings and re-structuring the discovery and discussion of personal interests on the phone.

A app--watercress diary called "watercress"

Watercress is never a single site, and the usage of watercress is naturally different. The use of watercress is to obtain information, but the information obtained is based on the entry and algorithm, or based on neighbors and people, this problem in the watercress's many revisions have probably been unresolved.

This time, an application called "watercress" was chosen based on the recommendation of the article. But I personally as a heavy watercress user, the attention is exactly based on people's recommendations, like the consensual between the neighbors, as well as wandering when the comments from the article, radio, Diary of the new neighbors found surprises. As I heard in a "still my old version" movement, "no matter how the revision, as long as the neighbors are still in good", the revision is the path of continuous good development of watercress, but this sentence in the treasure of the neighbors and make me feel the most valuable characteristics of the watercress.

The value of watercress as a tool can be well embodied by entries, but as a unique community, watercress can only be sustained through its unique, restrained, people-centred approach. As a common but also deep love watercress user, I hope the watercress in this direction also do not lose, because a only tool properties of the site for me will no longer have such a sense of belonging.

I have a different pursuit with the watercress application at this point, and just have some of this ability, and the watercress provides an open API, so I want to realize this idea.

Choose to start the bean sprouts This project, there is another reason is I hope in the watercress continue to see the platform native design.

Watercress Radio has been a few years ago in the domestic few Android Design applications, which has been my admiration and love. In the initial version of the Watercress application, there was also an attempt to Material design, but with the blend of iOS-style design, it gradually became outdated, so that the ultimate choice of the full iOS style. I've been feeling a little sorry for that, and Material design is a better language. So, I want to achieve another possibility that I have not seen.

Guiding Principles

The ultimate goal of bean sprouts is to provide convenience on the mobile side for the information acquisition of the Watercress You You. To achieve this gracefully, bean sprouts will be guided by the following principles:

• Follow the Material Design specification, and the guideline takes precedence over the details.
• Pixel perfect, but more focused on people-oriented.
• To be precise, the code can defend itself.
• The behavior is qualified, support screen rotation and flat layout.
• Function advocating simple, do not disturb users.
• The behavior default value is reasonable, and the user can adjust.
• Positive performance of the characteristics of the watercress, such as radio, neighbors, bean mail and so on.
• Through the details of the design, to promote intentions, taking into account the content of others.

Rules can be broken, but only if the rules are understood.

Functional architecture

The bean sprouts architecture will be very similar to the design of the current Web site.

You may ask, is bean sprouts just to do a Douban station source of mobile interface? Not so. The ultimate goal of the bean sprouts is to facilitate the information acquisition of the base You You, so the architecture is also designed for this service. And the architecture is basically the same as the current Web page design, it is because the correct page is now a design to meet this goal, and the mobile side of the navigation can also be a good fit.

Let's plan the bean sprouts in detail.

Navigation using the Drawer level navigation + TAB level two navigation mode. The global action is displayed on the toolbar.

• Tool bar
  • Reminders: Reminders of all categories to view historical reminders
  • Bean Mail: Email between users, want to encourage solemn rather than chat.
  • Search: Immediate access to the content you want.
• User: Click to show the personal page, the equivalent of "my watercress."
• Home
  • Neighbor Broadcast: Neighbor interaction, neighbor recommendation, System customization recommendations.
  • Nine points: The Diary of Neighbors, blog articles, etc., have a deep content.
  • Moment: Popular content recommendations for the full site range.
  • The same city: location-based content.
  • Online activity: Content based on common interests.
• Reading
  • Category Browse, home page recommendations: Portals, and places where new content is most likely to be found.
  • I read: the management of their own reading marks, the creation of content.
  • News: View your neighbors ' reading trends, interact and get recommendations.
  • Watercress guessing: algorithm-based recommendations.
• Movie
  • Like reading.
• Music
  • Like reading.
• Settings: Provide app settings and more.

In the sub-page design, bean sprouts will try to encourage long content and intentions of interaction. Because I believe that only the watercress is worth trying.

Implementation status

Within the first 20 days of my sprint, I implemented infrastructure such as the application's network layer, account system, and most of the features needed to see the neighbor broadcast, about 8000 lines of code.

During the next 80 days, the implementation slowed down due to schoolwork, other things, and speed bottlenecks. However, the details of the application and interface interaction are constantly being implemented and optimized. The code amounts to 14000 lines, and thousands of lines of code for multiple open source libraries that are written for this application are not counted.

At present, it realizes the view, response, deletion and other actions of the neighbor broadcast, the reminder view, and the related setting item. The rest of the work is continuing.

Implementing the Schema data plane

In addition to caching a small number of content, other content is obtained directly from the network.

• Provides user account and identity authentication based on Android account system.
• Process network requests using volley and partial custom enhancements.
• Use Gson to populate the data model automatically.
• Load the picture with Glide.
• Cache the home page data using Disklrucache and custom enhancements.
• Use Eventbus to synchronize object states between different pages.

Interface level

Use the AppCompat, design, CardView, Recyclerview in the support library for Material design implementations, and, if necessary, introduce/write your own third-party libraries to implement some of the interface elements and effects.

Use the framework's Shared Element Transition to achieve transition animations over Android 5.0.

Interface implementation is generally divided into Activity, Fragment, Adapter three modules, respectively, responsible for as a container, initiating requests, display data and user interaction, as well as data/interaction binding.

Implementing difficult network requests

Volley itself is not a very complete library, for request parameters, retry, authentication and other aspects need to be implemented by the developer. In bean sprouts, the application of volley packaging, added the above functions, and try to do the general, for the API layer after the establishment of a lot of convenience.

Disk Cache

Disklrucache is a library that only implements synchronous read-write, so bean sprouts package it, provide asynchronous read-write API, implement correctly, and improve the response speed of the application.

State synchronization

Because each interface obtains the data independently, the data itself is different from the conventional contentprovider mechanism, which is to be centralized, that is, the problem that the state is not synchronized.

Specifically, it is possible for the user to go back to the main interface list view and find that the status is not updated after liking the broadcast detail interface.

The bean sprouts solution uses Eventbus to notify all interfaces to refresh the same data after the request is complete.

Interface animations

Android 5.0 above provides sharedelementtransition, however, by default, shared interface elements are placed on top of other interface elements when animated, causing them to suddenly cross the AppBar or StatusBar case.

Through a large number of document reading, source code analysis and debugging, after about a week of time, and finally achieved a more desirable effect.

Screen rotation

When Android is rotated on the screen, the view and Activity are destroyed and rebuilt, and the problem is how to save view state and loaded data, in-progress network requests.

Android provides automatic save recovery for some view states, while bean sprouts are customized for other states that need to be saved onSaveViewState() onRestoreViewState() .

For data, bean sprouts are preserved by customizing a non-interface RetainDataFragment , and the interface is very easy to use.

At the same time, because of the asynchronous nature of the network request, bean Sprouts realizes the reservation of the RequestFragment network request during activity reconstruction through a custom one, and can callback the state and the request result to the new activity after the activity reconstruction is completed.

Tablet fit

Android's own resource system provides good support for different configurations, and allows different interface settings to be used on phones and tablets by creating different resource files.

In addition, due to the use of Recyclerview, by the runtime to determine the current device configuration, you can dynamically set the interface to 1, 2, 3 column view, make full use of screen space.

Start speed

Android defaults to a preview of the background in the app theme that is loaded before the cold boot app process can be called, Activity.onCreate() and the default background is white, which does not match the effect that the app has green AppBar at the top.

In order to generate images for different screen sizes and system versions, I used bash to write a series of scripts and implemented a generic templating SVG format, see Materialcoldstart and androidsvgscripts for details.

After a custom window background and other optimizations, the app on the phone already has a visual effect that can be started immediately.

: http://www.codesocang.com/gn/xiangmu/29703.html

Open source of Watercress Client source code we can learn under