digithun/clogii-mobile

Refactored version of the official F8 app of 2016, powered by React Native and the Apollo Stack.

clogii-mobile's Issues

[iOS] Facebook login failed

Happen on some device, will need more investigate.

[Mobile] Tracking app events

Maybe with Google Analytic or Firebase.

• App events get track by tags e.g. LOG, DEBUG, INFO, WARN, ERROR.
• Can change tag for target devices remotely.
• Admin can see app events and logs.

[Module] Player/Emotion

• Can add reaction to clog
• Can add reaction to episode

View

[Module] Profiles/Connect

• User can connect with Facebook after logged in.
• User can disconnect with Facebook after logged in.

[Test] Unit test infrastructure

Ref : https://github.com/TangentSolutions/ReactNative-Tutorial/wiki/Unit-Testing
Expected : >90% Code coverage

Clog following, subscription and social

• User can follow clog

NOTE: Integrate notification with Firebase notification server

• create firebase middleware for Following / unfollow clog resolver

• User can share clog (share button is under follow button) - additional

• Can notify user when followed book has update.

• Can notify user when followed category has update.

• Can notify user when get followed.

• Can notify user when followed author has some update.

View

[Module] Player/Comments (advance)

• Can reply each comment.
• Can mention anyone on comment list.
• Can mention follower.
• Can mention following.

view

[Release] 0.6.0

• ~~~Upgrade to react-native 0.40~~~.
• Update dependency.
• Release with git flow as 0.6.0

[Module] Editor (advance)

• Can save draft.
• Can open draft.
• Can continue where left off.
• Can edit while offline.
• Can undo/redo.
• Can custom transition.

[Module] Player_Navigate EP

• User can navigate to next/previous episode
  Remark: cancel function "Show editor pic & name"

View

[CI] Setup Fastlane

http://blog.thebakery.io/continuous-integration-for-react-native-applications-with-fastlane-and-bitrise-ios-version/

[Mobile] Ensure quality

https://developer.android.com/distribute/essentials/quality/core.html

[Module] Jelly Shop

• Can access jelly shop from profiles page.
• Can access jelly shop from popup.
• Can buy jelly.

View

[Module] Shelf

• Mock Screen
• connect with apollo
  • Hero Banner
  • Trending
  • Recommended
  • User 's favorite (hashtag)
  • Main category

View

[Mobile] Ensure all prerequisites for release app e.g. legal, title, description, icon, ss

http://developer.telerik.com/topics/mobile-development/your-guide-to-app-store-images/

• iOS

  iTunes Connect App Information

  • Primary Language : English
  • Bundle ID : n/a
  • Bundle ID Suffix : n/a
  • Apple ID : n/a
  • SKU Number : n/a
  • Name : Clogii
  • Privacy Policy URL : n/a
  • Primary Category : Books
  • Description : n/a
  • Keywords : n/a
  • Version Number : 1.0.0
  • Version Release Setting : manual; automatic; or automatic, no earlier than (please select)
  • Support URL : support.clogii.com (tentative URL)
  • Marketing URL (optional) : n/a
  • Copyright : © 2017 Digithun Co., Ltd.
  • Rating : 12+
  • Demo Account Login : Username: XXX Password: XXX

  App Store Icon

  The large app icon is displayed for your app on the App Store and, if needed, is used to feature your app on the App Store.
  iOS app icons need to meet the following requirements:
  1. 1024 x 1024 pixels (don’t scale up smaller artwork, because this could appear pixelated and blurry)
  2. 72 dpi, RGB, flattened, no transparency, no rounded corners
  3. High-quality JPEG or PNG image file format.
  Note: The small icon (57 x 57 pixels for iPhone and iPod touch, 50 x 50 pixels and 72 x 72 pixels for iPad) that you include inside the build is used on the device Home screen when installed.

  • 29×29
  • 40×40
  • 48×48 (watchOS)
  • 50×50
  • 55×55 (watchOS)
  • 57×57
  • 58×58 (watchOS)
  • 72×72
  • 76×76
  • 80×80 (watchOS)
  • 87×87 (watchOS)
  • 88×88 (watchOS)
  • 100×100
  • 114×114
  • 120×120
  • 144×144
  • 152×152
  • 172×172 (watchOS)
  • 180×180
  • 196×196 (watchOS)
  • 512×512
  • 1024×1024

  Screenshot

  iPhone
  At least one 5.5 inch Retina Display Screenshot (Support 3.5, 4, 4.7, 5.5-inch as well)
  iPhone add up to four screenshots. Smaller iPhone devices can use this set of screenshots. Screenshot
  requirements are:
  1. 72 dpi, RGB, flattened, no transparency
  2. High-quality JPEG or PNG image file format
  3. 1242 x 2208 pixels for hi-res portrait
  4. 2208 x 1242 pixels for hi-res landscape

  iPad
  iPad at lease one 12.9 inch iPad screenshot (Support 9.7-inch as well)
  Screenshot requirements are:
  1. 72 dpi, RGB, flattened, no transparency
  2. High-quality JPEG or PNG image file format
  3. 2048 x 2732 pixels for hi-res portrait
  4. 2732 x 2048 pixels for hi-res landscape

  • iPhone (Portrait)

  • 320×480 (iPhone <= 4)

  • 640×960 (iPhone 4S)

  • 640×1136 (iPhone 5/S/SE)

  • 750×1334 (iPhone 6/7)

  • 1242×2208 (iPhone 6/7 Plus)

  • iPad (Portrait)

  • 768×1024

  • 1536×2048 (Retina)

  • 2048×2732 (Pro)

    Check sheet -> The Savvy App Store Submission Checklist.pdf
    Ref: https://savvyapps.com/blog/app-store-submission-checklist

• Android

[Module] Profiles/Edit

About

• UI Screen
  • main screen
  • change email screen
  • change password screen
  • Modal DatePicker
  • Modal SexPicker
  • Loading Spinner on saving
• User can change name.
• User can change sex.
• User can change birthday day.
• User change profile picture.
• User change profile screen.
• ~~~limit profile picture/screen size~~~

Social

• User can link/unlink facebook.
• User change password.
• User change email.

[Module] Player/Moments

• User can see moment dot at that time on Player.
• User can swipe to see all moment at that time.
• User can add moment at that time.
• User can swipe to close moment.

[Module] Book

• User can navigate back to shelf or category (depend on route that user come trough)
• User can see book cover.
• User can see introduction.
• User can navigate to player by episode.
• User can see all available chapter list sorted by newest.
• User can follow book.

View

[Module] Clog Category/All clog (Only Editor List)

• User can navigate back to Clog Category
• User can see all clog of Editor list separate by clog category
• User can navigate to Editor 's Profile -> next issue Navigate to Editor Profile #55

View

[Module] Shelf/Clog Category

• Show Clog Category Name
• Banner (separate by category)
• Group item
  • What 's new
  • Top chart
  • Editor list
• User can navigate to see all clog as group item above

View

[Module] Feed_Pull to refresh ( reload new feed )

• feed pull to refresh

View

[Module] Subscriptions

• Can notify user when followed book has update.
• Can notify user when followed category has update.
• Can notify user when get followed.
• Can notify user when followed author has some update.

[DeepLink] cant redirect to app store when not installed

• http://stackoverflow.com/questions/7573566/iphone-browser-checking-if-iphone-app-is-installed-from-browser
• https://blog.branch.io/how-to-deep-link-on-facebook
• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
• https://developers.facebook.com/docs/applinks
• http://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active

[Module] Editor

• Can add text.
• Can add conversation.
• Can select male/female.
• Can add background image.
• Can save draft.
• Can post clog.

[LoginScreen] apply design

• IOS
• Android

[Module] Player/Share

• Can share each section.

View

[Module] Clog Category/All clog

• User can navigate back to Clog Category
• User can see all clog of What 's new
• User can see all clog of Top chart
• User can navigate to Book page (Clog page)

Remark:

• View all editor is on new issue ->[Module] Clog Category/All clog (Only Editor List) #39
• Sorting view of What 's new & Top Chart is on new issue -> [Module] Clog Category/All clog_Sorting #40

See all clog view

[Module] Player/Comments

Raw

• https://github.com/graphcool-examples/react-native-apollo-instagram-subscriptions-example/tree/8eb874a1603641e0536729da68badc4a014ac36a

Expect

• Can navigate to player => [Module] Player/Comments_Navigator #63
• Can comment clog (Text / Emoji)
• User can edit/delete on their own => [Module] Player/Comments_edit/delete #64
• Comment time stamp
• Can love comment => [Module] Player/Comments_emotion #65

view

Upgrade react-native

• upgrade react-native

[Module] Authenications/Facebook

• User can login with facebook.
• User can continue login session.
• User can login on other device.
• User can't login when session expire.
• User email is collected.

[Android] can't nested horizontal scroll

cant scroll horizontal list view when tab view is scrollable.

ptomasroos/react-native-scrollable-tab-view#510
facebook/react-native#8024

Episode list drawer menu in Clog reader page

• Can open episode page.
• Can close episode page.
• Can select episode.
• Selected episode is show in player page.

View

[Module] Feed/Navigator

• Navigator to Book
• Navigator to Player
• Navigator to Editor Profile -> Wait design

Remark: Review and improve navigation all page in the next issue => [Enhance] Navigator #51

[Module] Authenications/Email

How to

• http://blog.parse.com/2012/05/07/express-your-brand-with-parse/
• http://blog.mailgun.com/parse-partners-with-mailgun-for-simple-integration/

Source

• https://github.com/ParsePlatform/parse-server/tree/master/public_html
• https://github.com/ParsePlatform/parse-server-simple-mailgun-adapter/blob/master/index.js
• https://github.com/ParsePlatform/ParseReact/blob/master/demos/AnyBudget/js/LoginWrapper.react.js

Tasks

• User can signup with email.
• User get confirm by email via MailGun.
• User can login with email.
• User can recover forget password via MailGun.
• User can navigator back from Login Screen
• Add login with email button, inside playing app.

[Module] Profiles

• About
  • Show menu
  • Use Navigator to link other screen
  • Show ProfilePicture and detail (follower, following, candy)
• NavBar (use for nav each page)
  • show title
  • can handle back button (left)
  • can handle option button (right)
• Follower
• Following
• MyFan
• Activity
• Bookmark
• ~~~Post~~~

•  - [x] Show List
   - [x] remove handler
  

• Jelly
• ~~~Need to refactor (style is too duplicate)~~~
• Apply assets
  • Profile Screen
  • ~~~Bookmark Screen~~~ (have new design)
  • MyClog
  • Activity Screen
  • MyFan Screen
  • NavBar
  • Following

[Module] Feed

• feed new clog
• feed new episode of clog
• feed pull to refresh => next issue [Module] Feed_Pull to refresh #49

View

[Shelf/Clog Category] NavBar Design

[Module] Player

• User can navigate back to book
• ~~~Show editor pic & name~~~
• User can read clog
• User can navigate to next/previous episode

View

[Enhance] Config variables

• https://github.com/luggit/react-native-config

[Mobile] Tracking user behavior

Maybe with Google Analytic or Firebase.

• User get track navigate behavior.
• Admin can see user navigation flow.

[Migrate] Navigator

• Enhance navigation for all page
  Ref: https://github.com/react-community/react-navigation

[Module] Timestamp on Feed, Notification, Comment and Activity

Format Timestamp Condition

• <= 1 min use "Just Now"
• > 1 min & < 60 mins use "X/XX mins ago " (X is number of digit 1 or 2 digits)
• >= 60 mins & < 2 hrs use "X hr ago"
• >= 2 hrs & < 12 hrs use "XX hrs ago"
• >= 12 hrs & < 24 hrs use "Today at HH:MM"
• >= 24 hrs & < 48 hrs use "Yesterday at HH:MM" (HH is 24 hours)
• >= 48 hrs use " Day Month at HH:MM"

[Release] Release 0.5.0

• ~~~Change icon~~~
• Change bundle id to com.clogii.clog
• Use docker for backend by docker compose
• Update REAME.MD how to setup.
• ~~~Update dependency.~~~
• Release with git flow as 0.5.0

[Module] Shelf/Category Menu

• User can open and close menu
• Menu list
  • Clog categories
    • Gag Clog
    • Diary Clog
    • Novel Clog
    • Myth Clog
  • User 's name&surname
  • About ( About clog & Condition)
  • Clog social media (Facebook, Instagram, Line, etc.)
• User can navigate to each menu

View

[Module] Notifications

• Notification tab with mock data
• Can push notification from dashboard.
• Can receive iOS notification.
• Can receive Android notification.

View

[Module] Shelf/Search

Hpw to : https://dev-blog.apollodata.com/simplify-your-react-components-with-apollo-and-recompose-8b9e302dea51#.i9pu4afv5

• Can search clog / people / user 's bookmark
• Can search in shelf
• Can search in feed
• Can search in own post
• Can search in notification
• ~~~Can search in follower~~~
• ~~~Can search in following~~~
• ~~~Can search in bookmark~~~

[Module] Clog Category/All clog_Sorting

• User can sort What 's new by latest clog / hitz clog
• User can sort by highest reading / highest like

Sorting view

[Nav] Tab bar customizations

​Reference

• http://blog.differential.com/sharing-code-between-android-and-ios-in-react-native/
• https://github.com/exponentjs/react-native-tab-navigator
• https://github.com/skv-headless/react-native-scrollable-tab-view
• https://github.com/oblador/react-native-vector-icons

Expected

• ~~~Android user has tab bar on top.~~~ (need new design)
• iOS user has tab bar at bottom.
• User can navigate to mock page after touch navigation item icon.
• User can see mock notification badge at each navigation item icon.
• User can see mock notification badge clear after visited each page.

[react-native] Upgrade to react-native 0.37

• can compile with XCode 8.1+
• [IOS] can login with facebook after upgrade ref : #29
• can compile Android version
• [android] can login with facebook after upgrade
• upgrade or remove npm-shrinkwrap

[Test] Setup BDD with cucumber - calabash

Ref : https://www.smashingmagazine.com/2016/08/test-automation-frameworks-for-react-native-apps/
Ref : https://github.com/bamlab/rn-calabash-demo
Ref : http://bitbar.com/testing-react-native-apps-on-android-and-ios/

• iOS
• Android