iOS App for Youtube -...

6
Youtube App for iOS Youtube app for iOS is a video browsing app in which you can add your favourite youtube channels and view their videos and playlists and get a personalised video watching experience. You can also rebrand and configure it to create a youtube app for your channel. Features - Browse and watch videos of Youtube channel. - Browse playlists of Youtube channels. - Play videos in native player. - Add or Delete youtube channels from code. - Share video with friends via mail, social platforms etc. - Admob support. - iOS 7 and 8 compatible. - Supports iPhone 6, 6 plus and iPad. - Internationalisation Options. Modify any text easily. - Basic theming. Change colour of icons and background. APP SUBMISSION TIPS Your icon, launch image or app name must not contain word Youtube or logo of Youtube or anything which tries to mimic Youtube. It increases your chances of app rejection. Upcoming features - Data caching using Core Data - Bookmarking a video - Smart Native Player - Plays next video in the current playlist. - Optimise UI for iPad - Use split view controller - Channel can be added from app - iOS notifications if a new video is added in subscribed channels - Google Login - Adaptive Hamburger - Hamburger disappears if there is only one channel - Different viewing styles - list and thumbnail views - Static pages and add social media links in app App Walkthrough App loads all recent videos (Fig 1 A) upon launch and start to update the thumbnails in background. Tapping on any entry loads the video (Fig 1 B). Clicking on more options icon on the top right opens a list of actions. Currently there is only one action which is share action (Fig 1 C). More actions like Bookmark are intended to be added on this list. As usual clicking on share option opens the share modal (Fig 1 D) from bottom and it shares the video embed URL. Clicking on the video plays the video in the native player (Fig 1 E). Now the clicking on playlist tab loads all playlists (Fig 1 F). Clicking on a particular playlist opens all videos in that playlist (Fig 1 G). And again clicking on a particular video opens the video page (Fig 1 B). There is a refresh button in the all videos page (Fig 1 A) and playlist videos page (Fig 1 G) tapping on which refresh the contents of table view and if any new video is uploaded since last refresh then it will show up right there. The all videos and all playlist pages have a channel button at top right to switch to different channels. Tapping on that button opens a drawer on the left with all channels listed (Fig 1 H). Tapping on a particular channel loads all videos from that channel.

Transcript of iOS App for Youtube -...

Page 1: iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

Youtube App for iOSYoutube app for iOS is a video browsing app in which you can add your favourite youtube channels and view their videos and playlists and get a personalised video watching experience. You can also rebrand and configure it to create a youtube app for your channel.

Features - Browse and watch videos of Youtube channel.- Browse playlists of Youtube channels.- Play videos in native player.- Add or Delete youtube channels from code.- Share video with friends via mail, social platforms etc.- Admob support.- iOS 7 and 8 compatible.- Supports iPhone 6, 6 plus and iPad.- Internationalisation Options. Modify any text easily.- Basic theming. Change colour of icons and background.

APP SUBMISSION TIPSYour icon, launch image or app name must not contain word Youtube or logo of Youtube or anything which tries to mimic Youtube. It increases your chances of app rejection.

Upcoming features - Data caching using Core Data- Bookmarking a video- Smart Native Player - Plays next video in the current playlist.- Optimise UI for iPad - Use split view controller- Channel can be added from app- iOS notifications if a new video is added in subscribed channels- Google Login- Adaptive Hamburger - Hamburger disappears if there is only one channel- Different viewing styles - list and thumbnail views- Static pages and add social media links in app

App Walkthrough App loads all recent videos (Fig 1 A) upon launch and start to update the thumbnails in background. Tapping on any entry loads the video (Fig 1 B). Clicking on more options icon on the top right opens a list of actions. Currently there is only one action which is share action (Fig 1 C). More actions like Bookmark are intended to be added on this list. As usual clicking on share option opens the share modal (Fig 1 D) from bottom and it shares the video embed URL. Clicking on the video plays the video in the native player (Fig 1 E). Now the clicking on playlist tab loads all playlists (Fig 1 F). Clicking on a particular playlist opens all videos in that playlist (Fig 1 G). And again clicking on a particular video opens the video page (Fig 1 B). There is a refresh button in the all videos page (Fig 1 A) and playlist videos page (Fig 1 G) tapping on which refresh the contents of table view and if any new video is uploaded since last refresh then it will show up right there. The all videos and all playlist pages have a channel button at top right to switch to different channels. Tapping on that button opens a drawer on the left with all channels listed (Fig 1 H). Tapping on a particular channel loads all videos from that channel.

Page 2: iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

Fig 1 A Fig 1 B Fig 1 C

Fig 1 D

Fig 1 E

Page 3: iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

Fig 1 F Fig 1 G Fig 1 H

Page 4: iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

Project Setup As soon as you download the project it is recommended to go to the project directory from a terminal and run command pod install. This will update the project dependancies which is crucial for the project. To learn more about cocoapods or installing one visit cocoapods.org. For more information on updating pods in your project goto http://mobilemerit.com/iosforum/forums/topic/installing-ios-project-dependencies/

Requirements 1. A MAC OSX device (Macmini, Macbook Air, Macbook Pro, iMac or Mac Pro)2. Software requirements: Xcode 6 or greater3. Technical Requirements: Basic knowledge of programming in Objective C and know how of

using Xcode.

STEP 1: INSTALL XCODE FROM APPSTORE

- Xcode is needed to open, customise and test any iOS application source code. It is created by Apple and is a free MAC app.

- Click here (https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12) or directly launch the Mac App Store app and search for Xcode. Xcode is about 2-3 GB so it will take some time to download and install it.

- Once the Xcode app download is complete look for the “YoutubeApp.xcworkspace" (White icon, tagged as blue) file inside the YoutubeApp folder and open it.

- For more information goto http://mobilemerit.com/xcode-setup-guide/.

STEP 2: GENERAL APP CONFIGURATION

2.1 Xcode overview

If you’re comfortable with Xcode interface the you can jump to 2.2 else read the basics of Xcode by clicking on Help > Xcode overview

2.2 Changing the app name

This is important when you want your app to be named something else. e.g. My Custom App.

Go to Project target (cmd + 1 and click the blue icon at the top of project navigator). Click the RSSApp app target and select the Build Settings tab. Search for term “Product Name” and change the value on the right accordingly.

For more information goto http://mobilemerit.com/how-to-change-the-app-name-of-ios-app/

2.3 Changing the App Icon

You company much be having some Logo of its own and so your custom app may need to show that Logo as App Icon. Detailed instructions are provided here http://mobilemerit.com/ios-changing-the-app-icon/.

Page 5: iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

2.4 Changing the App Launch Image

Launch Image is an image which shows when your app is loading. Duration depends on your app. but generally for light apps like this it displays for 1-5 seconds. If you don’t set a launch image then a black screen is displayed and the user may think that your app is buggy or not functional or slow. Its not a good practice to not have a launch image and if you’re submitting your app to app store then its required else it will be rejected.

Detailed instructions are provided here http://mobilemerit.com/ios-changing-the-app-launch-image/.

2.5 Add More Channels

There are two channels present by default. TheViralFeverVideos and scishow. You definitely want to change them.

- Open AppConstants.m (YoutubeApp > Helpers).- Find a line with text CONFIG_YOUTUBE_USERNAME. Basically its a comma separated string

of all channels names. It will look like this.NSString * const CONFIG_YOUTUBE_USERNAME = @"TheViralFeverVideos, scishow”;

- Change it to the desired channel names. e.g. if you want to show vsauce and TED-Ed then change the line to NSString * const CONFIG_YOUTUBE_USERNAME = @“vsauce, TED-Ed”;

- If you want to show only one channel then just type its name. e.g.NSString * const CONFIG_YOUTUBE_USERNAME = @“TED-Ed”;

2.5 Internationalisation

Go to AppConstants.m and find a section with comment // Internationalisation. Below that you will find constants with self explanatory names and values. You can modify the tab name, error messages, status messages, button labels etc. I tried to cover all strings possible.

2.5 Theming

You can change the background colour of top bar and bottom Tab bar. And you can change the colour of text and images in tab bar and the colour of text on title bar to some other colour which will match the background colour. Theming section follows the Internationalisation section with a comment // Theming. There are 5 colour constants. They take colour in hex values prefixed by pound symbol.

Channel drawer has a gradient as BG and it is controlled by these 2 colour constantsTHEME_CHANNEL_MENU_BG_COLOR_TOPTHEME_CHANNEL_MENU_BG_COLOR_BOTTOM

The text colour for channel drawer is controlled byTHEME_CHANNEL_MENU_TEXT_COLOR

Page 6: iOS App for Youtube - MobileMerit.commobilemerit.com/wp-content/uploads/2015/02/PDF-iOS-App-for-Yout… · Youtube App for iOS Youtube app for iOS is a video browsing app in which

The navigation bar and tab bar colour on whole app is controlled byTHEME_BG_COLOR

The icon and text colour on whole app is controlled byTHEME_FG_COLOR

At last these is a opacity constant which controls the opacity of inactive tab. Its value should be in between 0-1.THEME_ICON_OPACITY

Fig 2 A and B shows a personalised Navigation drawer, Navigation Bar and Tab bar.

Fig 2 A Fig 2 B