DEV Community: Anadea

pre-commit-config-shellcheck for syntax and semantic checks automation

Anadea — Wed, 21 Sep 2022 10:10:52 +0000

The reasoning

Second-checking of an already written code may be an exhausting and unreliable task for most of the programmers involved in custom software development. While refactoring the code a few days ago, we found some mistakes in shell code in the pre-commit config file. These errors have been there for a long time without any warnings. That's why we thought if these code checks either were more reliable or proceeded automatically. Thereafter, pre-commit-config-shellcheck was created for this very purpose.

What’s the difference

This tool will automatically detect and help you to resolve mistakes in your project’s .pre-commit-config.yaml file. All the syntax and most semantic checks are done for you. Also, you will receive bug fixing recommendations. This is done by automatic check of all the shell code entries in the config file with the other tool—Shellcheck.

How it works

Shellcheck

Shellcheck is a shell script static analysis tool. The main purpose of this tool is to find popular syntax mistakes as well as to point out corner cases that may cause scripts to fail under future circumstances while giving suggestions for fixing those.

File checking

All the checks of this tool are done on the .pre-commit-config.yaml file, but this file can’t be directly analyzed by Shellcheck due to the structure of the file, which includes not only shell code but other configuration points. We found the workaround for this in creating a list of temporary files with found shell entry points and checking them separately.

Subprocesses

The main way of using Shellcheck is through a terminal, and this tool doesn’t have an adaptor for different programming languages, so we use the Python subprocess module in order to perform checks on each temporary file. Then the output from subprocesses is collected and the tool forms a single pre-commit-config-shellcheck output with the list of warnings and their locations.

Example of usage and output:

; pre_commit_config_shellcheck.py .pre-commit-config.yaml                                                                                                                                                                               

In entry "seed-isort-config" on line 9:                                                                                                                                                                                                 
var = 42                                                                                                                                                                                                                                
    ^-- SC2283 (error): Remove spaces around = to assign (or use [ ] to compare, or quote '=' if literal).                                                                                                                              


In entry "seed-isort-config" on line 10:                                                                                                                                                                                                
echo '$var'                                                                                                                                                                                                                             
     ^----^ SC2016 (info): Expressions don't expand in single quotes, use double quotes for that.                                                                                                                                       

For more information:                                                                                                                                                                                                                   
  https://www.shellcheck.net/wiki/SC2283 -- Remove spaces around = to assign ...                                                                                                                                                        
  https://www.shellcheck.net/wiki/SC2016 -- Expressions don't expand in singl...                                                                                                                                                        

In entry "removestar" on line 19:                                                                                                                                                                                                       
removestar -i ${NAME}                                                                                                                                                                                                                   
              ^-----^ SC2086 (info): Double quote to prevent globbing and word splitting.                                                                                                                                               

Did you mean:                                                                                                                                                                                                                           
removestar -i "${NAME}"                                                                                                                                                                                                                 

For more information:                                                                                                                                                                                                                   
  https://www.shellcheck.net/wiki/SC2086 -- Double quote to prevent globbing ...

Easy to use

For the sake of keeping this tool simple for users, there are a few ways to use pre-commit-config-shellcheck:

As a command-line tool

$ pip install pre-commit-config-shellcheck
$ pre_commit_config_shellcheck.py .pre-commit-config.yaml

As the pre-commit hook

# .pre-commit-config.yaml
- repo: "https://github.com/Anadea/pre-commit-config-shellcheck"
  rev: "0.3.4"
  hooks:
    - id: "pre-commit-config-shellcheck"

And also as a GitHub action

- name: "pre-commit-config-shellcheck"
  uses: "action/pre-commit-config-shellcheck@0.3.4"
  id: "pre-commit-config-shellcheck"
  with:
    config: ".pre-commit-config.yaml"

Conclusion

Pre-commit-config-shellcheck was successfully created, tested and deployed for third-party usage according to the licensing. This tool, additional information and licensing can be found on GitHub.

Our experience with Three.js library

Anadea — Fri, 16 Sep 2022 13:17:50 +0000

In the flow of everyday tasks from customers, we constantly had to face mechanisms for working with complex animations or with complex graphic designs. As one of the possible ways to solve such problems, we chose to use the Three.js library, which has quite a wide range of configurational and practical usage.

Below, you will find the description of our experience and some experiments in using this library, along with the main features and the paths to reach the goals set with code examples.

Part I—Introduction

Since most of our Front end development projects are written in React, it was appropriate to experiment in the React space. But when we tried to integrate the code into the React component, we encountered many inconveniences caused by the specifics of Three.js and React working in tandem.

Yes, all of these incompatibilities could be bypassed if the code was played around with well, given the specifics of React. But why should we waste time on something that has been investigated before? So instead of the native Three.js, we advise to use a library which was developed specifically for React applications, React-three-fiber. It is installed via npm and has a clear documentation.

$ npm install three @react-three/fiber

There is only one drawback, or rather a nuance in it: the library works only with React version 18 or higher.

Despite the convenience of React-three-fiber, we still recommend you start exploring the 3D world with native Three.js. That’s because to navigate well in 3D and the possibilities of the library, first, you must learn the main concepts of the library: scene, camera, mesh, which consists of its geometry and material and lighting (ambient or point lights). You should understand how the XYZ axes are located and how to navigate the Three.js.

Part II—Loading 3D models

The library is most frequently used for uploading 3D models from designers of the page. Just uploading, showing and lighting isn’t so complicated and doesn’t require a lot of effort from the developer. You are able to add animation for the model, such as rotation on its axis. Or you can add a possibility to interact with the model via OrbitControls.

Our designer has drawn the company logo in Blender and had it in 3 formats: glb, fbx, obj. All of these formats are supported by Three.js and React-three-fiber.

3D logo - YouTube

youtube.com

The latter format gives us the possibility to upload the model without material (just a white) and color it using JavaScript. This way, you can make your model more interactive. It is possible to change the texture, make it more rough or metallic.

Color options - YouTube

youtube.com

Part III—3D models in JavaScript

This part is about creating a 3D model on the example of animated Earth.

Creating a 3D model using only code will require more effort and time than just uploading one. You need to have a basic knowledge of the library’s opportunities, geometry and material species, and a good 3D orientation. Certainly, you can find a lot of videos or articles about how it’s best to create one or another training model and how to interact with textures and animation. Having brought all parts together (knowledge, ideas and comments from the project team), we’ve created something interesting:

Earth and moon - YouTube

youtube.com

You can end up in outer space if you add to the code.

Earth and moon - perspective - YouTube

youtube.com

As we can see, the geometry is rather simple - it’s a sphere. However, the materials are more complex. Textures (special images) of Earth and Moon were used here. These are easily found on the Internet. You can use with Moon texture (moonTexture) or use Shaders to get complex texture, for example, atmosphere imitation. This aspect is tricky enough and should be approached individually, but you can find a lot of examples of code that can be adapted to your needs. That’s what we did.

As for animation, the Earth’s axis-turning was the easiest part. You should only set the axis and rotation speed.

useFrame(() => {
  ref.current.rotation.y += 0.002;
});

By the way, custom hooks from the React-three-fiber library like useFrame and useLoader are irreplaceable hooks for comfortable work with 3D in React apps. useFrame is used to work with animation; useLoader is used for uploading 3D models, maps, textures and vertices.

Rotating the Moon around the Earth by the circle trajectory was a more complex task. Here, you could use some math.

useFrame(() => {
  // circle trajectory
  let date = Date.now() * 0.0005 + 1;
  ref.current.position.set(
    Math.cos(date) * 2 + 0, 
    0, 
    Math.sin(date) * 2 + 0);
  // rotation
  ref.current.rotation.y += 0.004;
})

date sets sequential coefficients for changing coordinate values, and adjustment of the 0.0005 number can increase or slow down the rotation speed.

I set the Moon’s position x-y-z below, where y stays equal to zero because I want the trajectory to be horizontal, in the X plane. However, you can set y = Math.sin(date) * 2 + 0 and get the elliptical trajectory inclined at 45 degrees.

By the way, 0 in the end is the pivot coordinate, around which the mesh is rotating. We have a pivot at the Earth sphere (position 0-0-0). So, we can get different results by changing one or another parameter.

Stars are also moving according to the set direction. We’ll provide more details on it down the road.

The most challenging task was setting real coordinates by using latitudes and longitudes of specific places on Earth. Out of curiosity, we chose coordinates of a real flight around the world:

Kyiv-Dubai-Manila-Osaka-Honolulu-Seattle-London-Lviv

const pinsCoordinates = [
  { lat: 50.450001, lng: 30.523333 }, //Kyiv
  { lat: 25.276987, lng: 55.296249 }, //Dubai
  { lat: 14.599512, lng: 120.984222 }, //Manila
  { lat: 34.672314, lng: 135.484802 }, //Osaka
  { lat: 21.315603, lng: -157.858093 }, //Honolulu
  { lat: 47.608013, lng: -122.335167 }, //Seattle
  { lat: 51.509865, lng: -0.118092 }, //London
  { lat: 49.842957, lng: 24.031111 }, //Lviv
]

Meanwhile, xyz-coordinates should alter depending on the sphere sizes.

/* Getting coordinates x,y,z on the sphere by latitude and longitude.
   Sphere scale should be '1' */
function getCoordinates(lat, lng) {
  // convert latitude and longitude to Phi and Theta
  const Phi = (90 - lat) * (Math.PI / 180);
  const Theta = (lng + 180) * (Math.PI / 180);
  // r = radius of SphereGeometry (should be 1 to be better)
  // x = -r * (sin(Phi) * cos(Theta))
  // y = cos(Phi)
  // z = sin(Phi) * sin(Theta)
  const x = -(Math.sin(Phi) * Math.cos(Theta));
  const y = Math.cos(Phi);
  const z = Math.sin(Phi) * Math.sin(Theta);

  return { x, y, z };
}

As you can see, the function takes lat-lng pare and returns xyz coordinates for the subsequent pin on the sphere. By experimenting with the size and scale of the sphere, we discovered that to get the most precise coordinates, we better use radius and scale of 1 and adjust the initial sphere’s size by changing the distance from the Camera.

To get the imitation that all pins are a whole and rotate along with the Earth, you should group them using the tag. We can see the result once we remove the Earth. Adding the same rotation trajectory like that of the Earth complemented the imitation.

Pins; no Earth - YouTube

youtube.com

Below, see the example of the Pin’s component code:

const pinsXYZCoordinates = [];
pinsCoordinates.forEach((pin) => {
  const pinXYZ = getCoordinates(pin.lat, pin.lng);
  pinsXYZCoordinates.push(pinXYZ);
});

function Pins() {
  const ref = useRef();

  useFrame(() => {
    ref.current.rotation.y += 0.002;
  });

  return (
    <>
      <group ref={ref}>
        {pinsXYZCoordinates.map((pin) => {
          return (
            <mesh key={pin.x} position={[pin.x, pin.y, pin.z]}>
              <sphereGeometry args={[0.02, 30, 30]}></sphereGeometry>
              <meshStandardMaterial color={0xdc296c}></meshStandardMaterial>
            </mesh>
          );
        })}
      </group>
    </>
  );
}

Here, pins are small spheres of standard material and color. But you are free to use more complex geometries or upload your own 3D models at all.

Part IV—Complex animation along a given trajectory

Continuing the topic of animation, we managed to get a certain shape from random positioning points on the example of an outline of a country.

We haven’t found any service that draws the outlines of shapes, so we drew the shape of the country ourselves. It consists of 120 2D vectors Vector2(x,y) and is then divided into a given number of points. For clarity, we’ve left the static shape on the left.

Country outlines - YouTube

youtube.com

To make such an animation, we need to get the initial and the final 3D coordinates of each point. As the shape consists of 2D vectors, we transformed the point’s scope to an array of positions of each point - [[1.34, 2.34, 1.5], [1.62, 2.28, 1.5], . . . ].

The random coordinates were obtained quite easily, and the stars from Part III were distributed in the same way.

// creates 500 random coordinates for star-points 
const starVertices = [];
for (let i = 0; i < 500; i++) {
  const x = (Math.random() - 0.5) * 30;
  const y = (Math.random() - 0.5) * 20;
  const z = -Math.random() * 10;
  starVertices.push(x, y, z)
}

In this example, all points are separate Meshes (Components) which were added to the scene using Array.map(). This enables us to animate each point separately by a single line of code:

vector = new THREE.Vector3(x, y, z) // set the direction of mesh movement

useFrame(() => {
  // 0.008 - part of vector's path wich mesh goes by one frame
  ref.current.position.lerp(vector, 0.008)
})

So, this method can be used to move Mesh from one point to another.

Part V—Conclusion

The examples of using the Three.js library above are just a drop in the ocean of the library's capabilities. In this case, the official documentation won’t give a full understanding of 3D. We watched a lot of video tutorials, read a lot of articles on the Internet and made a lot of mistakes on the way to achieving the desired result. Another complication is that many examples are only applied to Three.js. Therefore, it was necessary to adjust the solution to React-three-fiber.

Overall, the library is very cool and 100% worth your attention.

MetricsCollector for Ruby on Rails

Anadea — Mon, 12 Sep 2022 14:23:40 +0000

From one point, we've started collecting some metrics from our projects in Ruby on Rails so that we could see the dynamic and statistics, because some problems catch your attention only when you can see them right in front of your eyes.

Above mentioned metrics included percent of test coverage provided by simplecov. With it, we could react in case of sharp decline because we were always trying to have at least 80% code to be covered with tests. Second metric we decided to look into were vulnerabilities, warnings and deprecations from the brakeman. That’s how we wouldn't miss the gaps in our projects. Furthermore, to follow best practices, score from rubycritic was also included.

And the last one is just a simple amount of code lines and files provided by the CLOC library. So that any implementation of big features would be visible in statistics.

As a result, we've understood that we are doing repetitive actions in different projects and with different frequency. And to avoid that, we have decided to automate the process of collecting all desired metrics so that a developer wouldn't waste time on this. Before, in order to collect metrics, they had to launch project, pull all updates, run all tests to get percent of test coverage, run the script that collects all metrics and then put all results into Google Documents that we kept for each project.

With a list of steps wrapped in MetricsCollector, we were able to create a job in the pipeline (in our case it runs on GitLab). The job creates artifacts for each gem presented in our tool, collects all results in a certain structure and moreover, it sends them into our messaging apps. On top of that, it sends the results into appropriate documents to google spreadsheets.

To use MetricsCollector, next should be done:

bundle exec metrics_collector

By default, it collects metrics from output of all included gems, generates results in json, csv file formats and besides that, shows results in the console to make it visible in pipeline:

Cloc total lines: 25000
Cloc total files: 600
Brakeman errors: 1
Brakeman warnings: 2
Brakeman ignored warnings: 1
Coverage: 82.44
Rubycritic score: 66.08

By including MetricsCollector in pipeline as a separate job, we were able to easily check metrics after every minor/major update of the project:

We've found it's also a nice addition to make it possible to download desired documents from artifacts:

But it's also not really convenient to get outputs from artifacts all the time, so we have integrated Slack into our tool. Since then, the pipelines in our projects send outputs right to our Slack channels of the corresponding projects.

Both files (csv, json) and text variants are sent at the same time just for convenience.

However, we thought that it would take ages to track any statistics right from Slack, so we have implemented integration with Google Spreadsheets. This made it really convenient to check for the whole history of collected metrics from one place.

It’s worth mentioning that it can upload metrics only to the first worksheet for now.

We’ve used spreadsheet’s official Ruby client so there is not that much of logic for populating worksheet:

# Initialize SpreadSheet service
@service = Google::Apis::SheetsV4::SheetsService.new
# Send metrics to the next not populated line in worksheet
@service.append_spreadsheet_value(@spreadsheet,'1:1', @request_body, value_input_option: 'USER_ENTERED' )

Since we plan to expand the gem in future, we have encapsulated gem handlers and file generators from business logic, so we won’t have to update old logic and could focus on implementing new sorts of metrics/output options.

As a result, we have automated repetitive actions, saved a lot of time from collecting all metrics manually and made the tool easily expandable.

That solution suits our needs perfectly, we will keep maintaining the tool in the future. It's open source so you can check the project in the GitHub repository of a custom software development company Anadea.

How to Verify Users' Passwords Using the Android KeyStore

Anadea — Tue, 08 Jan 2019 00:00:00 +0000

Everybody knows that security is a very important issue for users and therefore developers should take a proper care of it. There are many posts about Android security in the Internet - some them explain difference between cryptography algorithms, others are dedicated to basics of Android security. In this post I will spotlight a single use case Android developers may face in their work.

Let's assume that we develop an application and we need to identify users - I am talking about a regular login screen. We are developing a standalone application and so we cannot rely on backend user validation capability as we usually do. Of course, we need a secure authorization flow.

Image source: Knock Knock

Saving users' passwords is a bad practice and none of developers want to be responsible for compromising users' credentials. The point is that many users are likely to use the same password for many services. As a result, a compromised password in our application may be a key to many other services.

Resolving a security task in Android SDK

Let's try to find out what we can use to resolve a security task in Android SDK. The first tool that springs in our mind is the KeyStore API introduced in Android 4.3. We can use the KeyStore as a container to store cryptographic keys. The most significant benefit of the KeyStore is that it has access to Android System Keystore and it is maintained by a system process. In this way, we delegate keeping cryptographic keys to a system service.

What we are going to do:

Generate a key pair for asynchronous encryption and put it in the KeyStore.
Sign user password with Digital Signature. The Signature procedure will be initiated with the key from step 1.
Verify another user password with the Signature from step 2.

Stop talking and let's start coding!

First, we need to create a key pair with RSA specific parameters. To do this, we should start from creating parameters for RSA key, however we should do it a bit differently for Android M and above.

This is how we obtain specifications for Android SDK below M version:

And this chunk of code for Android version M and above:

Besides RSA specific parameters, we should know the following: "AndroidKeyStore" will be used to obtain the key pair from KeyStore and Certificate related to it. The key pair is going to be valid from 'start' date to 'end' date.

Having RSA specifications we can generate a KeyPair:

KeyPairGenerator is used to generate the KeyPair and add it to the Android KeyStore. We get an instance of KeyPairGenerator for RSA algorithm and pass "AndroidKeyStore" parameter to ensure to use Android System Keystore. Then, we initialize KeyPairGenerator with specifications we set before and eventually generateKeyPair method generates KeyPair and puts it into Android System Keystore.

New KeyPair will be generated every time we call 'generateKeyPair()' method. That's why, before generating another KeyPair, we should make sure that AndroidKeyStore doesn't already have a KeyPair with the same alias to prevent overriding last KeyPair and losing existing certificates.

We have the RSA KeyPair generated and ready to use it. Note, that we will use only private key for our purpose. Let's start using our AndroidKeyStore!

First, we obtain an instance of the KeyStore and pass "AndroidKeyStore" parameter to ensure to use Android System Keystore. Then we should finish initialization of the KeyStore with "load()" method. As soon as we have Android System Keystore, we can get the keys we generated before with ALIAS_VERIFY_SIGNATURE and cast the keys to the required type.

And now, let's suppose that a new user is created within our application and we have password in plain text. Do you remember that we are not going to persist user plain password anywhere for our authorization process? But we can use digital Signature facility provided with Signature class. Let's get down to signing user passwords.

In this method we use Signature class and it doesn't encrypt anything, but it signs our password with a private key from the Android KeyStore. As a result, we have a signature of the password and it is not sensitive information so that we can save the signature in SharedPreferences as it is. Please consider that we initiate Signature class for signing operation.

We are ready to perform the last step and to verify if another user password matches a registered one.

Again, we use Signature class facility to verify if provided input string and original password are identical. However, this time Signature class is initiated for verification purpose.

To wrap up, we have a secure way of data verification without persisting any sensitive information at all. Also, generated certificate is not kept by our application but by the Android KeyStore so it is senseless to hack the application to find a signing certificate.

References

In the post I used just a few chunks of code to express the whole idea, but you can dive into details of the whole class on GitHab: KeystoreSamples.

The following resources were used in the article:

Originally published at: anadea.info

Let’s connect

If you enjoyed this article, visit our blog: https://anadea.info/blog or follow us on Twitter.

How to Leverage the Project Management Triangle

Anadea — Mon, 18 Jun 2018 00:00:00 +0000

Being the project manager at a software development company, I often have to deal with the requests like "I want to do this app for a fixed price, can you do it?" or "Could you tell me a precise cost of my project?". Moreover, clients asking these questions may have just a brief idea of what they want to implement and they may not be sure about all the details of their project, however, they need the answer.

The only way to handle such situations is to introduce a clear process which lets us deliver a software product that meets technical requirements and at the same time achieve desired time / cost outcomes. Basically, this brings us to the necessity to find the right balance between the constraints faced in every IT project: scope, schedule and cost. This is also known as the Triple Constraint or the Project Management Triangle.

"In order to manage you have to measure it"

In this article, we will show you how to properly manage all three project constraints and maintain transparency throughout the software development lifecycle.

Let's review each constraint in detail.

Scope

Scope is the set of features and functionality required to complete the project. There are certain steps and activities needed to clearly define the scope and deliver it on time and within schedule and budget.

The first step is to create a specification document where we:

Break functionality into Epics and User Stories.
Write down scenarios for user stories.
Specify acceptance criteria for user stories.

The purpose of creating this document is to outline the requirements for all the features and make it clear where each feature starts and where it ends.

The second step is to create a design for the system (features). At this stage, all pages, screens, features and modules are accurately drawn so that all project participants can clearly understand how it will look like in the future.

Based on outcomes of these two steps, project manager creates a Work breakdown structure which records all features that need to be implemented. Now, the project has the list of items that can be estimated by a development team and this is the next step of the process.

Estimation of every feature includes the following activities:

1. Development of the feature

At this stage, a developer writes code based on specification document and design.

2. Feature testing

QA specialist ensures that the feature meets specified requirements and do not cause any negative impact on other parts of the system. If any issues are detected, quality engineer documents the issue (called 'bug') and addresses it to the development camp.

3. Bugfixing

Based on QA specialist's recommendations, developer fixes bugs or implements improvements initiated by QA.

In order to track progress on the development phase, project manager compares planned estimate with actual one so that there is a clear understanding if the project is on schedule or not.

Schedule

Once we have the Work breakdown structure with estimations, we can understand how long it will take us to implement the project given the allocated development team.

A tool which is used for this purpose is a Gantt chart. This chart makes it easy to visualize project management timelines by transforming task names, start dates, durations, and end dates into cascading horizontal bar charts.

We usually organize our work based on Agile (Scrum) framework and break project into iterations (Sprints). Duration of each Sprint is 2 weeks and it includes such activities as:

Sprint planning to plan the scope of work for a sprint.
Implementation of the scope (development and testing).
Daily standups to get the team synced on the sprint progress.
Demo meeting to show results of the sprint work.
Retrospective meeting to summarize the sprint results.

So, using Gantt chart allows all participants to know when feature development starts and when it ends.

Cost

The 3rd side of the project triangle is cost - the funds which should be paid for the Scope implementation within the planned Schedule. Cost is usually calculated by the following formula:

Service Hours (h) * Rate per hour ($) = Cost ($)

Project costs is a very sensitive aspect and should be tracked very carefully. For the budget tracking, we use a Burndown chart, a graphical representation of how project budget is spent versus planned funds baseline. Funds are shown on the vertical axis, with sprints on the horizontal one. This chart shows if we are staying within the budget scope or there is a risk to exceed it.

Change requests, e.g. adding new features or modifying UX flow, may significantly affect the budget. The Burndown chart will help to keep finger on the budget pulse and control budget throughout the project lifecycle.

Conclusion

Using Work breakdown structure, Gantt chart and Burndown chart allows us to maintain transparency and keep the balance between the key project management constraints - Scope, Schedule and Cost - during the development process. When you understand the actual state of things in your project, you can efficiently manage it and address issues if something goes wrong.

It doesn't matter how big or small your project is, it will have its own project management triangle which, when managed properly, can become a triangle of success for your business venture.

Let’s connect

If you enjoyed this article, visit our blog: https://anadea.info/blog or follow us on Twitter.

In-App Advertising Guide For Developers

Anadea — Thu, 17 May 2018 00:00:00 +0000

Advertising has always been a source of revenue for companies. Sometimes advertising supplemented subscription revenue, and other times the entire business was funded almost solely from advertising. The latter model is how open-airwave broadcasters made money in the past.

An advertisement-only business model is especially useful on the Internet, where people demand content for free. With a global landscape of competition, someone is always willing to offer a product for free, as long as they can generate advertising revenue.

Not only that, but mobile computing has grown rapidly since the inception of the iPhone in 2008. According to Pew Research, more than 50% of Americans have a tablet, and nearly 80% have a smartphone. They're also spending considerable amounts of time engaging with those apps every month.

Assuming you've decided to implement advertising for at least some of your app's revenue, what should you consider in your build?

Ad placement and type

The first thing to consider is where you will place your advertisements. This applies to both spatial and temporal placement. Will you use interstitial advertisements, such as between levels of a game? If you don't have transitions, such as an English-Korean dictionary, there is no suitable place for interstitial advertisements. In this latter case, it is better to have thin banner advertisements that display continually along an edge of the app.

Do you want banner adverts to expand to full screen after every 5 word lookups? Or every 10? Do you want to expand to full screen at all? It might be attractive for higher-paying advertisers, since they can reach a captive audience, but it might also alienate your users.

The type of advert you choose will impact your placement decisions, too. Video advertisements are certainly better interstitially, while push notifications might be best periodically throughout the day. You might also use different styles for different parts. If your app is a productivity app with a news feed, you might have banner adverts in the personal section and native advertisements in the news feed section.

Balance your needs and your customers' comfort

There are plenty of apps that become nearly unusable because there are too many ads. You will need to balance your revenue needs with the number of ads you display, especially if you use adverts that interrupt usage. Non-invasive banner ads may display continually, but you obviously cannot show a video every few seconds. For the latter type, it is especially important to keep data caps in mind too: not every customer has unlimited data, and many low-cap users will immediately delete your app if a video advertisement sucks up 5 megabytes of data.

Also avoid being too annoying. No one wants 20 notifications from an app when they wake up or finish work. If half of those notifications are simply advertisements, you risk distancing your customers and losing their trust.

Use the right tools

This is important for your sanity. Plenty of tools exist to keep you sane. Just on development, there are multiple SDKs for platforms, and if you want to develop for the widest audience, you will need to manage all of them. Then there is the advertising revenue management. And the analytics management. And the marketing management. Having the wrong tools will frustrate you, eventually leading to product breakdowns and frustrated customers.

Test everything

Software developers are intimate with testing. Non-developers may believe most developers spend their time pounding away at keyboards to write thousands of lines of code. Developers know they spend most of their time staring at code they wrote two days ago trying to figure out why it isn't working.

Testing doesn't vanish once the base product is finished. You need to test your advertising scheme. One trap developers often overlook is advert timing. If users move through your app faster or more frequently than you anticipated, they will be served ads much more than you intended. This simple oversight leads to dissatisfied customers and negative reviews.

You also want to make sure your ads are excitable from various devices (nothing raises a user's blood pressure faster than an interstitial advert that places the exit button off the screen). And they should look good on every display. With so many devices available, you need to test a lot to avoid leaving out some customers.

Consider alternative sources of income

In-app advertising is highly prevalent. Many apps derive 100% of their revenue from advertising. However, this is akin to the proverbial egg basket: you shouldn't completely rely on a single source of income. Consider other avenues of revenue, such as in-app purchases or an upgraded version that completely removes adverts for those willing to pay.

In fact, the app revenue landscape suggests in-app purchases make up the vast majority of non-advert-based revenue, while paid installs and subscriptions are a very small portion. Keeping this in mind, carefully consider your route to diversifying your revenue streams.

If you're more of a visual person, you can see all of this in an illustrative infographic here.

This is a guest post by Nick Andrew Rojas.

Let’s connect

If you enjoyed this article, visit our blog: https://anadea.info/blog or follow us on Twitter.