This is a journey about one of my project in my internship period which is a creating Android quiz game App using Ionic framework. I wanted to share my story of working on this app so it would help other developers who takes on the same journey. So, I hope this post helps and inspires other programmers who want to create android app using ionic.

Intro for quick start

As First step, You must refer Ionic Framework Documentation and select one of web application framework such as Angular, React or Vue. In my project I used Angular with ionic and VS Code as code editor.

Using above documentation you will get idea how to setup environment for ionic development. After setup environment completely you can start continue with the article.

Before design and make logics you must create a new ionic project. You can use below command on your terminal/cli to do so.

ionic start myApp tabs

You can use your app name instead “myapp”. Then your terminal shows like this Type Y at the prompt Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N) in here type y and press enter key. After run command below I mentioned. You must use your app name instead “myapp” every command which has “myapp”

cd myApp
ionic serve

After run this commands, If your setup and other installations completed correctly you can show your sample app open in the browser. Some times your browser will not open automatically don’t worry about that copy link address in your terminal and past in your browser. You can see your ionic app in the browser. Now, you have ionic app and you can develop it as you need..

Create Quiz App

We are building this app for Android OS to start with. So first add android platform using command “cordova platform add android”. Before starting developments take few minutes to read below. https://ionicframework.com/docs/developing/android
It will resolve most of the problems you might get. Important thing is you must separate your project to pages, components, modules and Services.

Now you have to make specific folders to separate your code very clean. For that go to src>app and create folder called “models”. In same directory go to tab1 and open integrated terminal to that directory. Use commands in below

ionic generate component start

ionic generate component view-question

ionic generate page user-level

ionic generate page view-quiz

In this game I used images to levels and all of these images in assets folder. following this directory open assets folder src>assets . Now you have to make folders called fonts, icon, images, quizes, levels, in this assets folder. Font folder has all of external fonts that use in app. Icon folder has images such as app icon, logo like that. Images folder has level images, background images etc. Quizes folder has json files and All of these json files have all of information related to each level questions. User folder has userData json file which has information about each level such as level id, level name, level image link.

In models folder I used different models for different tasks. It will be different from person to person within their experience.

Lets move to Service folder which is the most valuable things in this app. In service folder we can use to store our CRUD operations and any other operations which wants to different places in our application. In this application I used firebase Realtime database for store users meta data such as User’s device id, current level, completed levels with marks like that. For using firebase, we must configure app with firebase.

1. Install Angular Fire and Firebase

You should connect your ionic application with the firebase database. install Angular Fire and Firebase from npm by running the following command.

npm install @angular/fire firebase - -save

As a next step you have to config your app with firebase.

2. Create Firebase Account

Visit console.firebase.google.com and sign in using your Gmail account.

Click on the “create a project” button then click on continue button.

Next, click on the web icon as shown in the screenshot.

Next, add Firebase to your web app. Enter the app’s nickname and then click on the next button.

It will take you to the screen where you will see Firebase configuration, copy the red marked Firebase configuration keys keep it in the notepad or something else. You will need these keys to register in your Ionic project.

Next, we will click on the “database” from the left side navbar. Then, look for Realtime Database and click on the “create database” button.

It will open the security rules model popover, select “start in test mode” option. Remember we are setting up these rules for testing purpose. In real world app be careful about database rules.

Now, we are all set to use the Firebase Real-time Database.

3. Configure Firebase Config Keys

In this step, we will register the Firebase config rules inside the
environment.prod.ts and environment.ts file, you can find these files in the src > environments folder.

Add the following code inside the environment.prod.ts file. In previous section I mentioned to keep this details in notepad.

export const environment = {
  production: true,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  }
};

Place the following code inside the environment.ts file.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  }
};

4. Import and Register Firebase in AppModule

Finally, go to app.module.ts file. Here import and register Firebase services along with that also inject Firebase config keys with the AngularFireModule.initializeApp() method.

//  firebase imports, remove what you don't require
import { AngularFireModule } from '@angular/fire';

// environment
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Then create database in you Realtime database. Using demo data.

Now, you can connect your Ionic app with Firebase Realtime database.

We want more plugins for our other implementations. There are implementing countdown and get user’s device id (UUID). For that following commands.

ionic cordova plugin add cordova-plugin-device
npm install @ionic-native/device
npm install ngx-countdown — save

At the moment now you have to define your CRUD operations and file read operations in side the service folder. First of all you have to make different service files as you need. In here I used three service file called level, quiz, userdata. You can make services like a my project using below commands in your terminal.

ionic generate service level
ionic generate service quiz
ionic generate service userdata

In level service, I defined get data from json file that store in inside asssets folder. Quiz service is used to get quizzes data from firebase which have all details about each level questions. User data service work with firebase which has lot of implementations such as get all users, update user, update marks, get one user’s data like that.

Let’s talk about UI and flow of this app. As a first UI I used start component which has two buttons for play and get information about app. Then user navigates to user level page while starting play game. In this page has user levels and show stars related to marks of each levels. Next user go to questions view page and has questions related to each level. Each questions has limited time. That shows top of the questions. After User completed answering all questions in that level shows the marks and provided a feature to try again or go to next level.

Flow of this App

After install and User open app first time, App will get user’s device id (UUID). It will help to save user data in firebase. Then user click “play now” button and go to game level screen. If user play game first time, he/she has able to play only level one and other levels are locked. Other levels will be unlock as how user win that level. Each level display three stars related to marks percentage obtained by user.

Next User clicks level and goes to the Quiz view screen. It has questions and it’s answers. Each question has time and displays it with each question. I already made admin panel for upload questions to firebase and that admin panel has features for upload all data about each game level question. After user clicks an answer then it will come next question. This process will continue until end of all questions in that level. In final step will calculate user’s total marks and will save it in firebase with it’s level and display whether if user pass or fail. If user pass the level, can go to next level but user fail the level, must try again that level. After click “next level” or “try again” button again user will go to game level screen. Now, user can look three stars in each level which are completed by user. That three stars displayed related to percentage of marks obtained by user for that level. User can complete all game levels in this game like that.

I attached my GitHub repo link below. Anyone who is interested in making an android app using ionic will be helped to refer for their practice. In this article, I explained special topics related to my app. In this journey, I used a lot of documentations which are on their official sites. I linked all of these websites beginning of this article.

GitHub Link: https://github.com/Ramesh-Nuwan/Quiz_App_ionic

Thank You.

Special Thanks to team Databox Technologies

The comment section is open for you to share special things, new updates, and mention mistakes regarding this content. I’m also learning new things from your comments.
I think sharing knowledge, learning new things, and helping others will help to develop a better world. Let’s share our knowledge to learn for everyone.🏆🏆🥇

Read more

How to make smart BMI Calculator App using Flutter

Creating Quiz Game App Using IONIC framework. was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

About a month ago I started my job as a trainee and my first task was to build a flutter app with my own preference which includes new ideas and something interesting.so I came up with the idea of building something for kids. With the help of my mentor I decided to create a simple gaming app which will help kids to improve their memory,concentration,attention to details and more.

So the idea was to build a matching game which will probably best for 2–3 year old ,but older or younger kids may enjoy it, too.

You may have heard the word “Flutter” by now.Flutter is Google’s portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single code base. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

If you’re new to flutter you can follow this link https://flutter.dev/?gclid=CjwKCAiAyc2BBhAaEiwA44wW5unel_dmlR4SCSiYoYz4fvOMOS6EEfB1TTf25srAmq8XMziXU3OhRoCeR4QAvD_BwE&gclsrc=aw.ds

Flutter provides variety of widgets which will help to create any kind of UI. So in this app it will be more than a UI that provide the user to access it.The basic thing you need to know when creating a matching game is Draggable and Drag target.

Lets start creating our flutter app…

I’m using VS code editor and you can use either android studio or VS code to create the app.Hope you have set up the environment for flutter and necessary extensions.

Creating a new project

1. Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
2. Select the Flutter: New Project command and press Enter.
3. Enter your desired Project name.
4. Select a Project location.

After creating our flutter project we can continue to work on our application.As I mentioned before we need to know about draggable and drag target in flutter.Basically in a matching game user must be able to drag a picture and the matched picture should accept the dragged picture if its correct.A widget will be movable around the screen with the help of Draggable. While the draggable allows a widget to be dragged anywhere the Drag Target will provide a destination to the draggable.(you can get a good idea about draggable and drag target using the above mentioned link)

you can use a set of images to the draggable and the matching images as the drag target.

You can add data directly to the source code,load json data or load the data from cloud firestore using firebase. To add firebase to your project you can follow this link https://firebase.google.com/docs/flutter/setup.

I have used cloud firestore to load images and other data to the project.For the background image loading I have used firebase storage.

Now we can create the draggable and drag target data list inside our project and load the firebase data. Simply what happens is that the draggable image will hold a data name and the drag target will check whether the accepted data is correct and will set the state to true or will return the image if the data name is wrong. Additionally I have added something interesting to the game here.When the user get a correct answer which means the accepted data is true marks will be added to the correct match.

You won’t get tired by playing a one match.so we can add more matches to continue.After finishing a game there will be a small dialog box to continue the next game.If the user wants to go to the next game they can simply click the OK button and the data for the next game will be automatically load to the screen.

Lets see how that happens.

This part was difficult so I had to get help from my mentor to implement it.Here we have used ChangeNotifierProvider to render a match.According to the flutter docs changeNotifier is a simple class included in the Flutter SDK which provides change notification to its listeners.when the change notifier gets updated values, it can call a method called ‘notifyListeners()’, and then any of it’s listeners will respond with an action.

Now we can add more reaction to our app to make it look more interesting.For that I have added a GIF for every correct answer.And we can add a push up notification to remind the user to play a game.We can use cloud messaging for that.

As the final touch up we can change our app launcher icon.You can change the launcher icon by following below steps.

1. Add your png file to the asset folder
2. Edit pubspec.yaml

1. Run the following commands

If you have followed the above steps you can see your icon has been changed to the one you wanted instead of the flutter icon.

If you’re planing to publish your app to the play store you have two possible formats to release.you can either build a release app bundle or build an APK.(APK stands for Android Package Kit and is the file format that Android uses to distribute and install apps)

I have build and APK and following commands will build it.

In your terminal,

1. flutter clean
2. flutter build apk

Now you can place the APK file on your device to install the app.

Hope you have enjoyed this article and learned something.

You can get the full source code from here : https://github.com/House-Of-Coders/trainee_play_room

Building a Matching Game using Flutter was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article highlights the steps needed to create an Amazon AWS Free Tier account, deploy a free tier EC2 with the latest WordPress website.

“The Free Tier allows users to consume minimal AWS resources free of charge for a period of 1 year.”

Ok, let’s create an AWS account.

01. Create an AWS Account

First, We should browse to https://aws.amazon.com. At the top right-hand corner click on ‘Create an AWS Account’

To create the AWS account it will ask your email, password and give your AWS account a name. Click continue when done.

Next, it will ask you the Account type you would like to create.

There are two options to choose you, select Professional if you intend to use this AWS account within your company, educational institution, or organization. Otherwise, select Personal.

Fill in the listed fields, click to acknowledge you have read and agreed to the AWS Customer Agreement. Then click ‘Create Account and Continue’.

you will need to enter your credit card details to able to create a free tiar AWS account. NOTE (if you use more than the Free Tier thresholds, Amazon will start to bill you.)

After payment method verification it will ask your cell phone number. AWS will confirm your identity by sending you a text message or giving you a voice call. Fill in the details and click on Send SMS.

Then you will receive a verification code via text message or voice call (depending on what you selected in the previous step) Enter the verification code that you have received.

Once you have entered the verification code correctly you will appear following windows.

There are 3 Support Plans you can choose. we will be selecting the Basic Plan. Click on Free.

That’s it. Your Amazon AWS Free Tier account has now been created.

02. launch AWS EC2 free instance

First, sign in the account we already created http://console.aws.amazon.com. then you can see the AWS Management Console as follows.

At the top left-hand corner click on ‘Services’ and select the ‘EC2’. Then click on the ‘Launch Instance’ button to create a new instance.

Now you have seen different AMIs (Amazon Machine Images). These are the snapshot of deferent VMs. We will be using Ubuntu Server 18.04 LTS (HVM).

To keep things simple, look for the AWS Marketplace option on the left-hand menu. The marketplace includes hundreds of pre-built machine configurations you can use.

use the search feature to look for “WordPress” setups, you’ll find the more than 100 deferent AMIs to choose. in the list find the “WordPress Base Version” option.

there is shown you the details for this configuration and hourly fees for different levels of instances as well. once you click on continue will show you the kind AWS instances you want to use.

We’ll select the t2.micro which is eligible for AWS free tier. Then select ‘Next: Configure Instance Details’ button to continue.

after select and instance type you get to review its configuration. if this is your first time configuration don’t go to change anything at this moment. leave the default settings

when you click on “next” to choose the storage you want. Your free tier will available 8 GB storage and AWS bill you for additional storages.

when you’re ready click on “Review and launch” and click on “Launch”

once you click on “launch” you will be prompted to select an existing key pair or create a new one. The key pair is what you’ll use to SSH into the instance.

I’ll assume you don’t already have a key pair created so choose the Create a new key pair option. Once you do provide a name, and click on the Download Key Pair button.

Once you have downloaded the key pair, click on the Launch Instances button. This will finally be launching the EC2 instance using all of the configurations you’ve provided.

will take a few minutes while AWS gets everything ready…

03. Access your WordPress instance and find its public IP

after your AWS instance deployed successfully, select on the “View Instance” and there will show your instance.

find your newly deployed instance. If you select it, you’ll notice it lists the instance’s public IP under its details

If you enter the IP address into your navigation bar, you’ll see the Aurora Instance ID verification prompt. it will ask the Instance ID of your WordPress Deployed VM. you can find it on the above Details window beside the public IP address.

Past the Instance ID and click on “Continue”

once you have entered the instance id as password correctly, click on the “(Optional) MySQL password” and past the instance id again.

Now you’ll see a brand new WordPress website yours.

Your WordPress website is ready to use now.

To login go to your WordPress website. Add /wp-admin to the end of its URL, enter the default username (aurora), and the password that you just copied (EC2 instance ID).

Host your Wordpress website for free on AWS — AWS Free Tier was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

Nowadays everybody wants an app for their business and so many companies and freelancers are willing to build them. However if you ever tried to get an app done, you’d notice there’s a huge price difference in certain options. Also you’d have probably herd confusing terms like “native”, “hybrid”, “PWA”. Let me walk you through these concepts so you’d know what to get next time.

Let’s Dive In

There are 2 main app variants,

1. Native Apps:

Both iOS & Android has a separate app building system. Apps built primarily utilising these systems are called native apps. Don’t get confused, every app is in the end built using these tools, but native apps purely rely on these technologies to build the app. In term of programming languages for, android it java & kotlin. For iOS it’s objective-c and swift. Anything else is not pure native.

2. Hybrid Apps

These apps uses a simple concept. Since every platform (android, iOS, blackberry, windows) can display a HTML5 website properly and HTML5 has grown to be a feature rich eco system (with even access to sensors like GPS), you can build a good app like experience inside the browser as well. Hybrid app platforms takes this bit further by providing custom build web page container native app (cordova, capacitor) which can be used to package HTML5 website as a mobile app. This combined with single page applications (SPA) we can build a pretty good native like mobile apps. You just need to code once and use it to package both iOS & Android (even other platforms) as against native apps. But this flexibility comes at the cost of performance and certain limitations. Ionic & Cordova are the leading frameworks of this category.

What about Flutter, ReactNative & NativeScript

There’s an another variant. Which is between these two worlds. It’s neither native or purely hybrid. Flutter/ ReactNative/ NativeScript apps falls under this category. All these aims to provide one major thing, that’s code once and deploy everywhere (at least to all mobile platforms). Why I say it’s in between is they partially converts your code into native code rather than just embedding.

If you are familiar with tech trends you’d know how amazing javascript has been performing over last few years. ReactNative is build upon this. ReactNative does not give you 100% portable codebase. What it does is, it uses a javascript engine to run all the application logic and converts UI code in to respective native version. The native UI communicates with javascript code (logic) via WebSockets.

Flutter takes a different approach. Rather than using javascript it uses dart, which finally converts in to native code.Which is amazing and very promising. It also uses a graphic engine(skia) to render the UI. Which makes sure app looks similar on all platforms. Flutter has another added advantage, which is it can build web application from the same code base, however this is still in beta.

Flutter Architecture : https://flutter.dev/docs/resources/architectural-overview

PWA

PWA is the new kid, which isn’t really an app. PWA is a web application which you can add to your home screen. It’s again a web application built using HTML/ Javascript and CSS with a small different of service worker. This service worker caches required assets locally and serves as needed to render the page. This ability let the web page render even without connectivity, essentially similar to mobile app, but much simpler to build and truly cross platform, it even works on desktops and laptops. But this is relatively new and people are still getting used to it. Most websites already supports this feature like Starbucks, Spotify, Pinterest, Outlook, Twitter. So we can safely assume this tech is here to stay.

Now to the tricky part,

What should I use?

I’ll tell you how I decide. I ask myself few questions.

1. Is this a very early stage of the product, which is done to see market response or to act as a prototype? If Yes, Hybrid(HTML5) is the best bet since it comes with the lowest cost and fastest shipping time.
2. Is it a very mature product (/concept), with enough funding and you are more concerned about making sure it loads even 1 second faster then pick native
3. If your app contains complex and lengthly computations pick native as it’s easy to optimize and provides best performance.
4. If your app is an audio/video related solution DO NOT USE hybrid(HTML5). It poses lots of restrictions. As an example you wouldn’t be able to do a simple auto play with audio or proper video fullscreen in certain situations. Best to do a proper study of native features you would need before start using hybrid tech.
5. If your app does lot of background processing and iOS is a main target, again DO NOT USE hybrid(HTML5), but you can use ReactNative/Flutter.
6. If you plan on using BLE/ NFC better use native.

When to use Flutter, ReactNative & NativeScript?

So you are already wondering, when should I use react native or flutter. Since there’s a huge buzz about them also. Well they suites all above scenarios, specially for cases I recommended native. They come with really good performance and can utilize almost all native functionalities. But there’s a catch, well two,

Limited dev experience: I’ve seen relatively less no of experienced react native and flutter devs out there. Also these two does let dev to pick and structure how the app is build. Which is good if the dev team is really good. If not it can lead to messy, buggy code easily compared to other techs. Also lack of devs with experience itself might increase the cost in the long run. I’d recommend this for early-mid stages of a product (to minimize cost) of if you have a good in house team to take care of the product. If outsourcing make sure they know what they are doing.

Don’t misunderstand what I’m saying. Both ReactNative and Flutter is stable enough for production. Instagram & FB Ad Manager uses ReactNative, Google Ad Manager uses Flutter.

Cost

Native > Native-Hybrid -> Hybrid

If we set the backend/api cost aside, cost for hybrid version should be less than half of the native price. Native-Hybrid will come in between but much less than native price for a normal product.

This article isn’t meant for devs, or it’s not there to explain and compare these techs in depth. It’s mainly focused on providing basic idea of these platforms to non-dev users who’s looking to get apps developed.

Hybrid vs Native Apps. When to use what? was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

Brief guide on creating Facebook Instant game that will tell you, “What animal you look like?” :D

Intro

Actual app development is done using standard html, javascript and css technologies. Facebook provides a javascript sdk to perform facebook related operations such as retrieving user info, profile picture ect.

Instant app package is basically a web application with some extra tweaks to work with facebook system. I’ll use a customised version of facebooks official sample from, https://github.com/fbsamples/fbinstant-samples. Refer the repo for more advanced examples with instant game platform.

Before proceeding get the source code from, https://github.com/databoxtech/article_fb_instant_game

If you open the source code, you will see below folder structure.

Template does few things to make our life easier,

1. Mock facebook SDK: we need to use facebook sdk to get users name and other details. But as we develop it’s a tedious task if we had to run this inside facebook always. What mock sdk does is it emulates how the actual sdk works and give us dummy responses where necessary.
2. Gulp Build System: Gulp automates most of the manual work like replacing mock sdk in production build. You can include more options like minifying, obfuscating into the mix (little advance topic)

Coding Time

First you need to install node dependencies. Goto the source code folder using terminal/ command line and run npm install. If you don’t have npm (node package manager) installed, refer this link to do so https://www.npmjs.com/get-npm

Once installed run npm run mock, this will start dev server and serve the game. Whenever you make any modification stop and run above command again (until I fix live reload)

When you run the mock server and open the URL in browser, you will see this dialog. It’s from the mock SDK informing you game loading has completed. At this point, it will call startGame javascript function in our code

At this point we hide our splash, and get users info. Getting users info other than name is not really needed for this game. Refer below code

We also show “Play” button. When play button is clicked showMyAnimal function is invoked.

Above function simply displays a random animal image along with the name.

Run npm run mock and check whether our application works as expected. Here’s a sample video of it.

Setup facebook

so far it’s been basic coding, now we have to configure some stuff on facebook.

Goto https://developers.facebook.com/apps/, you might have to verify your phone no. Click on “Create App” to create a new app (don’t use an existing one with android/ios/web enabled). Select the 3rd option(For everything else) in the given dialog and provide a name for the app when asked. I’ll use “AnimalMe” as name. Once done you will see below screen.

Click on “Instant Games” => “Set Up” and confirm the acceptance conditions.

Now we can try our app for real with facebook. Note the “App ID” from top bar, open the config.json file in our code folder and paste it at “PASTE_APP_ID_HERE”. Refer below screenshot,

Now run npm run dist and you should see something similar to below,

It should display your account information. If it works upto this point, it’s ready to be uploaded. Run the command npm run archive. This will create a zip file under the “archives” directory.

Now goto “Web Hosting” section, and click on “Upload Version” as shown below.

Then select the latest zip file on the archives folder and upload. Once done it will appear like this.

Now you can mouse over the “Status” area and push the build to production.

Once done visit the link “https://fb.gg/play/APP_ID_HERE” to try your game. Remember to replace APP_ID_HERE with your app id.

You are basically done with the basic process. However now you need to enable the live mode. To do that fill the required app details and provide necessary icons/ banners. Once complete flip the switch in top bar,

Entire workflow can be reviewed from below video. Good Luck!

Github Repo: https://github.com/databoxtech/article_fb_instant_game

Create a Facebook Game was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

Most small tech entrepreneurs struggle with different costs related to putting out an online product. However there are plenty of services out there which can be utilised as you are starting up. Some tools can even be used long term as well.

Trying to outlines most of the free stuff I’ve utilised to get projects started and during POC. Information on how to use these can be easily found on the web.

1. AWS: AWS free tier runs for one year. Plenty of time to start earning from your solution. I have deployed over dozens of web applications in AWS Free tier VMs & RDS for different clients. Apart from VM they have many other products with free usage up to one year such as RDS (database as a service). Consider these when you are designing your solution technically. Google Cloud and Azure also comes with a fairly good free tier. Better to explore this as well.
2. Google Firebase: Firebase also has a very attractive free tier. It’s a usage bound modal. Unless you grow beyond a point you can use it for free. Firebase offers hosting, real-time offline database, push notifications, analytics, a-b testing and many more under their free tier. Highly recommend for mobile apps
3. Google API: Most of google apis comes with a fairly large free usage tier. There are ton of api services including famous location & maps apis. Refer https://developers.google.com/apis-explorer
4. OneSignal: Free push notification service with fairly good admin interface. Under free plan you get unlimited mobile app push notifications and 60k web push notifications.
5. Adobe XD: I found this extremely useful when designing UI/UX. As it can link UIs and let you experience clicks and page transitions (easy to setup) its a very useful tool to have. Usually I ask my designer to use it to do the UI design (even when I’m outsourcing). There are other similar solutions out there.
6. Trello: Trello is a card based board to organise tasks. I use it to document, break things into tasks, track developments, report bugs. Even the free version is highly customisable. If you are dealing with a third party developer, better use this instead of simple excel sheets to track progress.
7. Bitbucket/ Github: To manage your source code efficiently. If you are a developer, source code management is a must. Git is the undoubted winner for source code management at the moment.
8. Azure DevOps: If you have a in house devs, this is a great toolkit. Which comes with unlimited free repos, simple boards for task organising, 20,000 free build minutes (CI/CD). Don’t ignore CI/CD as it can save lots of developer hours going into builds. Also it’s great to have frequent builds to see how things are progressing

Free Services to get your mobile/ web project started was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is a very common issue which everyone have faced at-least once in their career as a Business Analyst or a Product Owner. This also may have caused the responsible people for a project be really embarrassed and cost more than the project budget and caused extended timelines. So, how can we successfully identify a business or a project objective? Prior to answering that, we will see how it can go wrong.

Let’s say you are assigned to a new project and you get the project details from the sales team or the management of the company which you are working for. Now this will typically be an email or a phone call which can be summarized as below.

“Company ABC wants a new system with these features and they want it completed by this date.”

Then as a Business Analyst, you will be getting some more details from the sales team, then immediately start setting up meetings with the stakeholders, interviewing different users, understanding project scope, gathering and defining requirements and documenting them.

You will be working back and fourth with users and the development team to make sure you have captured all the requirements and to work on the design.

Once everything is finalized and accepted, the development will get started. However, depending on the Software Development Life Cycle methodology which you are practicing within the company, you may have intermediate deliveries, demos and whatnot.

Now you’re ready to complete the project. Let’s say you are doing a demo to the stakeholders and going through the features and what your team has developed.

During the demo, the stakeholders will go through the system with you. They will probably be impressed with what you have done. However, towards the end, you will get a question like “Everything looks good. But, how does the system address this certain issue we have for years now?” from a key stakeholder.

Immediately you will know that this is a new requirement and your response will probably be that this was not in the requirements which you have identified earlier. Then the stakeholder will say,

“Well, that was the main reason why we needed this system, to solve this certain issue”.

You now know this isn’t going to end well.

Because of this, you will not be able to complete the project then and all the time and effort you and the development team put on the project might be a waste. This will have many consequences.

So, what do you need to do? Before going right in to the requirements, you need to understand the objective of the project or why there is even a project like this. Once you understand that, your life will be much easier. This needs to be done at the very beginning.

To do that, you need to know about the following of the project.

1. The purpose
2. The objectives
3. The method of determining the success

The purpose

You need to know the purpose of the project. To get to know the purpose, you need to go back to the project details you got at the beginning.

“Company ABC wants a new system with these features and they want it completed by this date.”

You must ask WHY and understand why they need such a system before exploring the features. The firsthand information from the client will certainly help. An example can be as follows.

Company ABC is a small local business that provides printing solutions to the nearby area. They have been in the business for last two years and have a marginally profitable business going on. They are catering to about 25 customers daily. They noticed that the customers usually wait inside the shop premises for a prolonged periods of time to get the job done due to a limitation presented in the internal system, which allows only one computer to perform a specific function, and this is leading to customer dissatisfaction.

The objectives

Now need to understand the objectives of the project. You must break-down the utmost critical issues/ components which are trying to be solved here. Let’s see an example.

The implemented system must reduce the time that a customer spends inside the shop premises. By doing this, it is expected to see an increase in customer satisfaction, the number of daily customers and profit.

The method of determining the success

You must know how the success is seen after implementing the system. If not, you don’t know what you are looking for. Increase in number of daily customers can be any number.

Once the system is implemented, Company ABC must accommodate 50 customers daily, doubling the amount which can be accommodated now.

Above statement clearly defines how the increment in number should be. If you don’t know how it is determined, you can’t design, plan and implement a system effectively and it will ultimately leads to failure.

Knowing the answers to these questions will prevent time and money from going to waste, while probably saving you from embarrassment. Make sure you know and understand the project objective before you start gathering requirements. There will probably be lots of other requirements attached to the project but your priority should be to solve the issue that the project is supposed to solve.

Hope this helps you and good luck as a Business Analyst or a Product Owner!

Don’t forget to give a clap if you like this article.

Understanding the Project Objective was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

This will walk you through creating Protected/ Encrypted hls stream using ffmpeg and openssl.

ffmpeg is a complete, cross-platform solution to record, convert and stream audio and video. It includes libavcodec — the leading audio/video codec library.

openssl : The OpenSSL Project is a collaborative effort to develop a robust, commercial-grade, full-featured, and Open Source toolkit implementing the Secure Sockets Layer (SSL v2/v3) and Transport Layer Security (TLS v1) protocols as well as a full-strength general purpose cryptography library.

Protected HLS : is encrypted apple hls. It’s not a complete DRM solution. In this method segment files are encrypted using AES-128 bit

Im using a ubuntu 13.10 box.

Step 1 : Install openssl and ffmpeg

apt-get install openssl ffmpeg

Step 2 : segment your video file for hls playback.

ffmpeg -i $input -vcodec libx264 -acodec libvo_aacenc -b:v 128k -flags -global_header -map 0:0 -map 0:1 -f segment -segment_time 4 -segment_list_size 0 -segment_list list.m3u8 -segment_format mpegts stream%d.ts

Here $input is input video file. This command will create a list of streamxx.ts files and list.m3u8 file. You can open this m3u8 file in a hls supported player or on a android/ios devices through a web service to confirm segments are working. (Note: segments should be on the same folder as m3u8 file)

Step 3 : encrypt the segments. Create following bash script in the same folder and execute it to encrypt segments.

#!/bin/bash

keyFile=”video.key”
openssl rand 16 > $keyFile
encryptionKey=`cat $keyFile | hexdump -e ’16/1 “%02x”‘`

splitFilePrefix=”stream”
encryptedSplitFilePrefix=”enc/${splitFilePrefix}”

numberOfTsFiles=`ls ${splitFilePrefix}*.ts | wc -l`

for (( i=1; i<$numberOfTsFiles; i++ ))
do
initializationVector=`printf ‘%032x’ $i`
openssl aes-128-cbc -e -in ${splitFilePrefix}$i.ts -out ${encryptedSplitFilePrefix}$i.ts -nosalt -iv $initializationVector -K $encryptionKey

done

This will create a ‘enc’ folder and create encrypted segments in that folder.

Step 4 : move/copy video.key and list.m3u8 to enc folder and modify the list.m3u8 as follow (use gedit or notepad),

#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-KEY:METHOD=AES-128,URI=”video.key”
#EXT-X-TARGETDURATION:9

Just insert the bold line and leave the rest as it is.

All done, now simply open the m3u8 file using a supported player or iphone/android device. I tested this successfully on Android 4.3+ and iOS 9+. Good Luck.

Feel free to ask any questions you have

Originally published at dryize.wordpress.com.

Protected HLS using ffmpeg and openssl was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

First of all, this article is intended for those who are not really developers, but want to start off a new software product.

Let’s assume you have a super awesome idea, that you are willing to invest and build. Which hopefully will make you millions one day. So how would you start building it.

• Where would you start?
• How much will you spend on it?
• What technologies to use?

What I’m about to explain applies to solutions that’s not gonna scale to millions of user within 1 or 2 months. Well being optimistic is good, but do you wanna spend tens of thousands of valuable funds targeting a usage you are gonna get in months. When you can spend those money on other important stuff, until that level of scalability is required.

Rule 1: Build a solution that’s sufficient for now, but scalable to a certain extent. Do not over target scalability. Because scalability is not free. It will cost you a-lot more to build and maintain. Start simple which can cater your target for initial x months. But do discuss with your developer and have provision. You can always spend more and re-engineer it to cater millions when you are earning/ getting enough funds.

Rule 2: Keep things simple. Don’t over complicate with different or complex technologies. For users your solution just need to work. They don’t worry about whether it’s java or php or javascript. Pick technology stack that works, easy to implement and maintain. Don’t forget in early days you will be making lots of changes based on feedback, so be ready to adopt fast.

Rule 3: Keep maintenance free & cheap as possible. Solution is not everything. You need your funds to do marketing, sales and brand awareness. So make sure to utilize what’s free out there as much as possible (without losing above 1 & 2). Ex:

• AWS Free tier (EC2, RDS etc)
• Azure Bizpark
• Google Free usage (firebase hosting/ database)

All above are fairly enough to keep a decent solution running with almost no cost, until you scale to serve more users. Since all above are cloud, you can always scale as you need.

Over the years I have helped build solutions which ran 3–12months maintenance cost free, until they were getting enough usage to start paying actually. Can you imagine the relief it gives for a startup with limited funds.

So this is what I have learned and what I give out as my first advice when anybody talks to me about starting/ developing a product.

Always open for discussion, leave your comments in the comment section.

Good Luck to all entrepreneurs!!!

Things to remember when building a new software product was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.

Web socket, nodejs and socket.io are 3 of top topics/ buzz words. So you’d expect lots of articles, how to’s and guides on this. Surprisingly it seems not. I’m new to all three and wanted them for a project. So as usual to figure out best practices and common patterns I started searching. Apart from few hint in the direction articles and stuff I barely found anything.

So I’ve figured out things on my own and converged on two best possible methods per my opinion.

1. Authenticate on connecting using query param
2. Authenticate after connecting

Both have pros and cons of their own. Will get to that later after doing some perf as well.

I’ll walkthrough both methods using a angular 9 client as well. I assume you have basic knowledge on all these topics, if not you can refer the complete github code for more clarity.

I’m using Typescript for nodejs application as well.

1. Authenticate on connecting using query param

Below is the code snippet (ChatService)

Line 5: I have a separate auth service which does the temporary ws token validation. After my application authenticates, Its create short lived (<5min)access token for web socket authentication. For additional security you can bind IP address to the token also. This token is used in the query param when initiating web socket connection.

I use below code snippet to initiate web socket connection on Angular end.

const socket: Socket= new Socket({ url: `http://localhost:3000?token=${tokenData.token}`, options: {} });

Line 9/10: Inside the constructor I setup onConnection and onDisconnect handlers. onConnection is where the magic happens.

Line 15–23: Inside on connection if socket.conn.request._query[‘token’] is specified, user is authenticated using token and start listening to socket messages.

Line 25: If token is not specified, connection is immediately terminated

Line 32–35: This function setup message listener for specific socket and stores the connection in a dictionary for later communications.

That’s it. It’s simple and straightforward. However it’s bad practice and insecure to use security tokens in the URL. They are logged/ monitored by many intermediates. So avoid them much as possible.

Sending the token in the header is a option. But per my knowledge headers only works if polling as transport (https://socket.io/docs/client-api/#With-extraHeaders). I don’t want to restrict myself like that. Do you?

2. Authenticate after connecting

This is the interesting approach. What we do here is,

1. When client connects, we add it to a pending queue and schedule a auth grace period. Client should authenticate within this grace period. However until authenticate server will neither listen or response to any other events.
2. Once connection is established, client sends an auth request with the token. Server then validates the token and start listening to socket events (messages).
3. If client fails to authenticate within the grace period server terminates the connection.

Refer below code snippet

The code is mostly self explanatory. Key to notice,

Line 21–27: Setting grace period for auth by utilizing setTimeout

Line 30: Listen for ‘auth’ event

Line 46–55: Authenticate once user submits a token.

Line 36–39: Function to start listening to client event

Also notice that Im using 2 dictionaries to store authorized sockets and pending sockets. These are not essential. So shape per your requirement.

You can find entire code for this discussion along with below functionalities from the git hub.

• Typescript nodejs project (it was actually bit challenging to set this off even with the template I used)
• Google auth configured Angular/ Ionic
• JWT Token for http authentication

dryize/nodejs-socket.io-angular-auth

Finally, Im just getting into writing articles and I expect to publish the journey of learning as I learn different technologies. So please leave any pointers if there’s nay.

Don’t forget to clap if you like the article. Keeps me motivated. 🙂

Web socket authentication with nodejs, socket.io, Angular was originally published in Databox Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.