NewsPro

Table of Contents

Introduction #

Hello beautiful person! Thanks for buying our product, let’s set up your WordPress site first. ☺️

Although our documentation is an easy-to-follow guide if you are stuck anywhere, you can always knock us at @uixxy on telegram or send us a quick email at uixxy

Set up your WordPress site #

  1. Pre-Requirements:
  • Make sure your WordPress site is up and running
  • Make sure you have access to the file directory of the sites
  • Make sure it is running on a hosting service [You can test it locally but it is for advanced users]
  1. Install these plugins to your website:

Note: Sometimes on shared servers, the email-sending API doesn’t work for resetting the password, so it is recommended to install Easy WP SMTP if you are on shared hosting servers.

  1. Now we need to modify some files:
  • Add this below code to your .htaccess, you will find this file in your server root directory, for example, if you are on Cpanel then CPANEL -> File Manager -> public_html -> .htaccess
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
</IfModule>
  • Now go to public_html/wp-config.php, and add these lines
define( 'WP_DEBUG', false );
define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');
/* Below line is Optional */
define('JWT_AUTH_CORS_ENABLE', true);

4. Now there is a file called snippets.json inside the main_files folder

Go to your website dashboard, and search for snippets. and import that “snippets.json” file into your website. And activate the code.

5. Category Thumbnail

This step is not required, but if you want to set category images from your WordPress admin panel, you can follow the two steps. Now we need to import Advanced Custom Fields files like the screenshots below.

Select Custom Fields -> Tools

Then select the JSON file provided with the main_files.zip then click “Import File”.

Make sure you install ACF to REST API and Activate this plugin as well, otherwise it won’t work.

Setup Push Notifications #

First, go to the firebase console, create a project, and get a cloud messaging API Key like this picture, copy this KEY

Then, on your site:  Go to Settings => FCM Push Notification from WP, paste the API key here, and fill the rest of the fields like this

Hurray! No more step is needed. 

How to send push notifications? #

In your post editor there will appear a section now called “Push Notifications”, tick the box if you want to send push notifications every time you update or create a new post.

Setting Featured Post #

Create a new tag on your site, you can call this feature, trending, or something like this

Now get the ID of the tag, we will need this later, see the picture below to see how to get tag id, or you can check here if you are not understand

  • Now follow the same step and create another tag with the “Video” name and keep both videos and featured id written somewhere.
  • [INFO] You can add as many posts as you want, but only 10 recent Posts will show up on feature posts.

Okay, now let’s configure our app.

Setup Environment for App #

Our app is developed in a flutter environment, so if we want to compile our code on our computer we need to install it on our device. To modify our code and make it according to your setup, we need to install a code editor or an IDE. We prefer VS-Code because it is lightweight, however, you can install an IDE of your choice, but make sure to install Flutter extensions on your beloved IDE.

  • Install Flutter:
  • Requirements:
  • Flutter needs to be installed on your machine
  • “flutter” must be accessible from your path
  • A Mac is required to set up the iOS section
  • Okay now you are ready, extract the zip file newspro.zip, and you will see something like this.
  • Now open a terminal/command line in the root directory and run the below command, not the “lib” folder, in the root of this folder
flutter clean && flutter pub get

Congratulations 🥳, you just set up your projects. Now let’s make it yours.

Modifying App Contents: #

  • Open this file in config/wp_config.dart, and you will see something like this
  •  Change the app name to your desired one, but keep the 

‘ ’ quotations in their place. 

  • Url to your website URL, don’t include https:// or http:// or any slash at the end or before

Wrong – https://www.abdulmomin.com

Right – www.abdulmomin.com

  • The primary color of the app should be a hex code, so if your brand’s primary color is “#60B922”, then you will write something like this Color(0xFF60B922). 
  • Add your privacy policy URL in privacyPolicyUrl 
  • Add your terms and services page URL to termsAndServicesUrl
  • appStoreRatingUrl is your app url in the Apple App Store.
  • playStoreRatingUrl is your app url in Playstore.
  • Support Email is when the user taps contact us, it will be redirected to their default mail app with your email
  • Social Links are your social links, if left empty like this, nothing will appear in the UI
  • If the user is redirected to the login screen every time they open the app, if set to true then it will open the login screen every time.

Setting Categories #

  • homeCategories are the tabs, that are shown on the homepage, provide the category id on the left and the name to the right, for example, if you want to add a category with the name ‘Shirt’, and the category id is 10, then you will add a line with a comma 
  • featuredTagID is the ID of the Feature tag you settled earlier in the website setup, make sure it has at least one or multiple posts in this
  • videoTagID is the ID of the Video tag you settled earlier in the website setup, we will add our video post to this tag, and it will appear in our app
  • featureCategoryName is the category name of the Home tab, see the picture below
  • enableHomeTabCache, if it is false, then we will not cache the loaded news on the user’s device, every time they press a category then it will fetch the data again from the server, not from the cache
  • blockedCategoriesIds, add your desired category id that you wanna block, they will not appear in the UI or app, how to find category id? Check here

Change App Name Android #

  • Go to android/app/src/main/AndroidManifest.xml and edit android:label in Application tag

Change App Name iOS #

  • Go to ios/Runner/Info.plist and edit CFBundleDisplayName to your desired one

Change Packagename #

Important: If you are going to release this software in the play store or the app store then changing the package name is a must, otherwise it won’t work.
What is a package name? A package name is an identifier in a reverse domain style. Like if your website domain is www.mywebsite.com then you will write your package name like “com.mywebsite.newspro”, this is not a hard rule on how you name your package name, but it is a soft rule, so we should abide by it.

Changing Package name Android: #

Go to your root directory, open the terminal and run the below command

flutter pub run change_app_package_name:main com.new.package.name

Replace com.new.package.name with yours. We will need this later.

Changing Package name iOS: #

If you have Xcode installed on your device then open the ios folder in Xcode and click runner and change the bundle identifier name here.

  • If you don’t have xcode installed than open ios/Runner/Info.plist and change the CFBundleIdentifier value to your own reverse domain name or package
 <key>CFBundleIdentifier</key>
 <string>com.abdulmomin.newsPro</string>

Changing App Icon and Splash #

Replace these files in assets/others/ with your own logo and branding

  • logo.png
  • logo_dark.png
  • horizontal_logo.png
  • horizontal_logo_dark.png
  • Splash_logo_dark.png [Used for splash in dark mode]
  • splash_logo_light.png [Used for splash in light mode]

And run these command:

flutter pub run flutter_native_splash:create
flutter pub run flutter_launcher_icons:main

Adding Push Notification Support Android #

  • Open firebase console and open the project that you created earlier when setting up the website.
  • Now from the project overview tap on the android like the image below
  • Now enter the package name that you modified in the last step and tap register app.

  • Now download the google-services.json file
  • And put the file into the android/app/ directory, now it will look something like this.
  • That’s done, now push notification service will work on the android app every time you update or create a new post if you tick the button in the push notification section.
  • Adding Push Notification Support iOS:
  • Open the Firebase console again, tap “Add app” and then select the iOS icon, like the images below

  • Now register your app like this with the bundle id/package name.
  • Download the GoogleService-Info.plist
  • Open Xcode and tap the file menu bar and tap Add Files To Runner 
  • Select the Plist file that you just downloaded, and tick all the options like the screenshot below and press ADD

Ad Setup:  #

This is not a required step, you can skip this if you don’t want ad’s on your app. But if you are enabling ads on your app, there are two types of ad-supported in the app, one is Banner Ad and another one is Interstitial Ad. If you are using debug mode then a test ad will replace the original ad, So you can play with it as long as you want.

  • Adding Ad Mob to Android App: Go to Admob website and add an android app, then you will get an ID like this, copy this.
  • Then open this file in the directory  android/app/src/main/AndroidManifest.xml and add the below lines in the application tag like below
<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
  • Adding AdMob to your iOS App: Create an ios app in the admob console, grab the App ID from the app setting like android. And paste that into your app’s ios/Runner/Info.plist file, like below
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

You need to generate two types of ad unit in each application, after adding an app in google admob, copy these two ad units and add it to their respective field defined in config/ad-config.dart. Like the image below. You need to change the value of isAdOn to true to show ads.

  • After adding your banner ad id and interstitial ad id, you will see ads on your project, if you are running on debug mode you will see test ads.
  • The Ad Interval in HomePage and Ad Interval in Category settings for how many posts/articles after you wanna show a Banner Ad, see the image below to see an example.

Example of Ad In Between Posts

How do two types of ads look likes in the actual app: #

  • When will The Interstitial ad appear? 
  • When the user opens the comment section of a post, When a user searches for something, When the user opens a category in the details page, When the user press the save button.
  • These are all in the intersection of an app

That’s it for the ad setup 🚀. 

Adding a new language to your app #

Currently, there are five languages added to the app, if you want to add one more then create a JSON file with the name of the language code and country code at the end, for example, if we are adding the English language in the US then we will rename the file like “en-US.json”. 

On the left are the keys, and on the right is the translated messages. [You shouldn’t modify a key]. Then translate each message to the language you are adding.

Example Of English Language JSON:

Example Of A Translated Language JSON:

For example let’s add French to our app:

  • First we will create a file in our assets/translations with the name of ‘fr-FR.json’

  • [iOS Only] Now we need to add our language to ios/Runner/Info.plist in the CFBundleLocalizations key.
  • Now let’s go to our lib/core/localization/app_locales.dart and modify our file to something like this

After Adding French to our file, our file will look something like this. First, we will create a variable with our new language, then we will add it to the supported locales, then we will add it to the dropdown function.

Hurray, you just added a new language to your app. 🥳

Releasing the app on the market #

Flutter website has a detailed and awesome guide for both Android and iOS to upload the app on the play store and app store, for android we have already done some steps for you. With our current file setup, you just need to do the following two steps for Android:

  • You can create the Keystore with the below command
 keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload -storetype JKS

Then you can generate the appbundle with the below command and upload it to the play store.

flutter build appbundle --obfuscate

Or to test on your device

flutter build apk --split-per-abi

For Releasing on the App Store, please follow this guideline.

The End 👨🏻‍💻 #

We are ending here.

We would love to hear your feedback and thoughts. And improve our documentation and app. You can submit your feedback here. 

If you face any problems, you can always contact us at this mail or message us on telegram at uixxy.

Take care. Have a good day. 🥳

What are your Feelings

Powered by BetterDocs