Videon iOS
A video streaming iOS app with admin pane
by: W3 Engineers Ltd.
Email: info@w3engineers.com
At first thank you for purchasing this template. If you have any question or any problem
regarding
this template, feel free to Contact
us via
info@w3engineers.com.
1 - Introduction
Videon iOS is built with native Swift in XCode. It’s an iOS video application.
It has an admin panel by which admin can publish video to the app. Admin can publish video by uploading
video or youtube/vimeo link. Admin can also provide live streaming video of youtube.
It offers more than 22 screens and all are fully designed.
Videon iOS offers all required features, which can fulfil any modern application. It’s easy to customize.
You can customize any screen as per your needs. It follows all the standards to fulfil user’s requirements.
2 - Folder Structure
2.1Unzip the file.
2.2You see the following folders:
Videon (contain the iOS project files)
videon-admin (admin panel files)
videon.sql (sql file)
Server_Configuration_setup_process.mp4 (Video Tutorial)
3 - Requirements
XCode 10.0 or later (If you face any compiling error in XCode 10.0, Please try on XCode 11.0)
iOS version 11.0 or later
PHP 7+
mysql database
We have made important steps yellow for up and running the project.
4 - Installation of the Admin panel
4.1PHP version 7+ required(So update your Xampp control panel or install new one).
4.2Database Setup
In order to setting up database , first you create a database “videon_db”.
Then you can easily import the videon_db.sql file in your server.
Link the database to admin panel
For linking up, first you will find the file from this directory:
Insert the dbname (if it is empty),
username, password.
4.3Installation on Locally
Make sure that you have already installed Xampp control panel.
Copy the videon-admin folder and paste it in your
Xampp's htdocs folder.
Now run your Xampp Control Panel.
Create a database. Database name will be
"videon_db" or any other name
Import the videon.sql file in your created database.(videon.sql file is
located in the Main_files.)
Find your pc ip address.
Open Command Promt and type => ipconfig
Then find the IPv4 address (example: 192.168.2.88),copy the address
Open your browser.In your browser url type:
http://your_ip_address/videon-admin
For example, my pc ip address is: 192.168.2.88
So the url will be: http://192.168.2.88/videon-admin
If you see the admin login page, then admin-panel work successfully.
Username: admin
Password: 123456
4.4Installation on Server
To install it on the live server, First import the databse to the server.
Then copy the project folder and paste
it to your live server folder.
Please give the writeable 777 permission
to the following folders and the subfolders inside them:
public\uploads
public\uploads\thumb
Login as Admin:
UserName: admin
Password: 123456
5 - Installation of IOS
Update your gem file with command sudo gem install -n /usr/local/bin cocoapods
Then give your project path in terminal cd /your project path
Run pod install --verbose command in terminal
Another new file will create named Videon.xcworkspace
Double click Videon.xcworkspace to open
Project will open in XCode and you can see two projects are their and expand both
Videon contains full projects source code and Pods contains library files
Open XCode project and open Videon/Application/AppCredentials.json file
You need to update baseUrl, fileUrl, thumbUrl and apiToken
Select any simulator or iOS Device and Run the project
6 - Customizing the App
6.1Change app name and bundle identifier
Click the project file from the left and
then choose the General tab. It will open settings for this project
Update Display Name for App Name and Bundle Identifier
6.2Change App Logo
Open Resources/Assets.xcassets file and choose AppIcon on top.
Provide your app logo. This needs different sizes of images
for different device support.
6.3Change Splash screen
Open Storyboards/LaunchScreen.storyboard file. You can simply redesign or change
the image from the inspector window of XCode..
7 - Integrate Firebase iOS SDK
Please follow the steps described by Google to successfully integrate
Firebase iOS SDK
Reference:
https://firebase.google.com/docs/ios/setup
and download GoogleService-Info.plist file into your Xcode Project
8 - Firebase - Authenticate Using Google Sign-In on iOS
Please follow the steps described by Firebase
Reference:
https://firebase.google.com/docs/auth/ios/google-signin
9 - Firebase - Authenticate Using Facebook Login
Please follow the steps described by Firebase
Reference:
https://firebase.google.com/docs/auth/ios/facebook-login
In facebook developer console create a
new app and you will get App ID and App secret.
you may need those in the Firebase console.
10. Configure Push Notification
For iOS client apps, you can receive notification and data payloads up to
4KB over the Firebase Cloud Messaging APNs interface.
Reference:
https://firebase.google.com/docs/cloud-messaging/ios/client
11. Configuring APNs with FCM
The Firebase Cloud Messaging APNs interface uses the Apple Push Notification service (APNs)
to send messages up to 4KB in size to your iOS app,
including when it is in the background.
To enable sending Push Notifications through APNs, you need:
An Apple Push Notification Authentication Key for your Apple Developer account. Firebase Cloud Messaging uses this
token to send Push Notifications to the application identified by the App ID.
A provisioning profile for that App ID.
You can create both in the Apple Developer Member Center.
12 - Admob Configuration
Note : Real admob adds will be shown only after the publication into the google play store.
Login with your Email id
Go to this link
If its your first app tghen you have to select your country,
timezone and currency
Then you have to agree of the terms and condition and
Create Admob Account
Then you click Continue to Admob
Then you click App and Create your first app
If apps in play store then select yes otherwise no
Then provide app information and click add
Then you will get an App ID. Save it. You will need it later
Then click on ‘ CREATE AD UNIT ’ and you will find three type of
ads.
Select banner. Provide ad unit name and click on ‘ CREATE AD UNIT ‘
Copy Banner ad unit id
and save it. You will need it later
Then again go back and click ‘ ADD AD UNIT ’
Select ‘ Interstitial ’ ad type.
You will find a page like this. Provide ad unit name and select
‘ CREATE AD UNIT ’
Copy ad unit id and save it . You will need it later .
Now get saved Admob App ID, Banner Ad Unit ID.
Then go to Admin Panel click Admob from sidebar. Put App ID and Ad Unit ID
in the Banner Ad in the admin panel.
Now get saved Admob App ID, Interstitial Ad Unit ID.
Then go to Admin Panel. Click Admob form sidebar. Put App ID and Ad Unit ID
in the Interstitial Ad in the admin panel.
You can hide admob from the ap by clicking the on/off toggle button form the header.
13 - SMTP Server Config
To send the confirmation email and forgot password functionality
you have to configure your SMTP server. To configure the SMTP server,
click the SMTP Configuration menu from sidebar
and change the credentials of the SMTP server.
Host
Sender Email
Username
Password
Port
Encryption
13.2Google SMTP Server Config
Login to your Gmail account.
Then visit the link:
https://myaccount.google.com/security
In the security page, turn off the 2-step verification
Turn on the less secure app access
Also visit the link:
https://accounts.google.com/b/0/DisplayUnlockCaptcha
and enable it.
14 - Publishing the app in Appstore
This one is very good and detailed updated instruction
https://codewithchris.com/submit-your-app-to-the-app-store/
If you prefere text only then you can use this one:
https://medium.com/macoclock/how-to-submit-ios-app-to-app-store-c1e801ff817b
Admin Panel
15 - Folder Structure of Admin Panel
15.1Inside the project folder, you will see the following directories that are important
to setup and customizing the admin panel.
15.2public directory: All the public files like outlook, uploaded images/videos, apis are inside this directory.
public\api : List of all apis.
public\common\php : Common files like header, footer, sidebar.
public\common\other : Custom Styte and Script file.
backend\plugin-frameworks: All the external style and javascript files.
backend\uploads: All the uploaded image and video files.
15.3private directory: All the private files like models, controllers files are inside this directory.
private\controllers : All the controller files.
private\models : All the models.
private\vendor : External php scripts like phpmailer.
private\init.php : All the settings like database credential, uploaded folder name, item count for pagination.
Please make sure you have change the database credential in the
private/init.php file.
Please make sure you have set the writable 777 permission to the
public/uploads and public/uploads/thumb folder
15.4Changing maximum file size
For changing the maximum file size of the server,
first you must change the
post_max_size and
upload_max_filesize of the server and then restart the server.
For details please visit the following link
Click Here
In the root of our project there is a .htaccess file.
You can change this file to configure the upload file
size of the server.
Also you nedd to change the following constants form init.php file.
define("MAX_IMAGE_SIZE", 1.5)
define("MAX_VIDEO_SIZE", 15)
Open private > init.php
Go to line 15 and 16
Change the value of MAX_IMAGE_SIZE and MAX_VIDEO_SIZE
16 - Functionality of Admin Panel
16.1Category
Admin have to add category in order to upload videos.
Admin must be uploaded the category image and set the category name.
16.2Live TV
Admin can add Live TV.
Admin must be uploaded the livetv image and set the title and link.
16.3Videos
Admin can upload different types of videos.
Admin must upload the image for
any type of video. Then enter the video title and select the video type ( youtube, vimeo, upload ).
For Youtube and Vimeo admin will have to put the url of the videos. But when admin will choice the
upload option, then admin have to upload the video from his computer. Also if admin choose youtube or vimeo,
then admin have to put the Duration (In Sec) in the field. If admin choose upload option
then the duration would set automatically. Featured is optional. Admin have to put something in the
description field.
16.4Registered Users
In the Registered Users page admin can see all the registered users
of the app.
16.5Google Admob
Admin can configure admob credentials from admin panel.
Also admin can on/off admin from the on/off button in the admob page.
16.6Push Notification
Admin can send push notification from the admin panel.
First, Admin have to put the AuthKey in the AuthKey field.
To get the Auth key
First go to
the https://console.firebase.google.com.
Click Add Project
Put project name, country and create a project.
Click Add App
Click Android Icon
Put the package name
Click Register App
Click Setting icon on project setting
Click Cloud Messaging and copy the server key and paste it in the auth key field in the admin panel.
16.7Configuration
In the configuration page, admin will be able to change the icon, site title
and site tag line in the Site Configuration form .
Also, admin will be able to configure the smtp server
credentials for the user registration process from the app.
16.8Setting
From the setting page, Admin will be able to change the api key,
which used in the app.
Also, Admin will be able to change
Minimum view count to be in popular video list.