Categories
Software Technology

5 Key Steps in Moving your Web App to Mobile Platform

Websites have become a staple for businesses which seek out possibilities to engage with potential customers via an online presence. As millions of sites go online each day, there has been a significant development of the web market. What’s more, this has caused a change in the way marketing has been developing; goods and services are now at customer’s convenience who does not even have to leave the comfort of their home in order to make a purchase.

However, the 2010s have brought about a new wave of online interaction which came in the form of mobile devices. First, the smartphone was introduced as a way of increasing the utility of cellular devices. Second, the tablet influenced the way in which users access content. These devices were innovations that allowed PC-like processing speed and RAM in a much smaller, mobile device.
Needless to say, their popularity has been increasing exponentially, leading to the current situation where a mobile app has become as important as a website. Thus, for anyone looking for ways to transform a website into a mobile-friendly App, here are a few tips and guidelines to follow that will ensure a more efficient process and an impressive result.

1. Progressive Web Apps

In the past, apps and websites have been two fairly distinct domains. Of course, they often serve a similar purpose, but the development and creation were done separately.

Recently, however, web apps have come into play and a kind of merger between the two different formats, allowing owners to benefit from the best of both websites and mobile app features, has been observed. This should be the first step in any online business presence, as it also facilitates construction of a mobile version at a later stage.

As technology progresses and users are constantly on the lookout for more convenient online interfaces, implementing Progressive Web Apps (PWA) is a definite way to stand out from the competition. The main benefits include a faster browsing experience, more efficient site navigation and a user-friendly interface that fares better than traditional websites.

As an added bonus, Progressive Web Apps feature on a user’s home screen, meaning that they do not have to enter a search engine or internet browser to access a site. Moreover, the Progressive Web App also has functional offline capabilities, either through an offline mode or the capturing of cache data.

Overall, many are proud advocates of implementing PWA, as they seem to provide the means for the ultimate marriage between convenience and high-functioning sites. Apps generally suffer from a lack of content, but progressive Web Apps may just be the bridge that connects the two effectively.

2. Remove Any Unnecessary Elements

5 Key Steps in Moving your Web App to Mobile Platform - Remove Any Unnecessary Elements

The mobile device has a much smaller screen. For any website user there is nothing more annoying than having to sift through tons of unnecessary content that barely fits within the boundaries of the screen. If the same format is put into a mobile App, the results are disastrous.

Thus, ensure that all of the unneeded content is filtered out. Perhaps consider redesigning the App so that additional sections are created for such content. Whether it is marketing material, large advertisement banners or the promotion of a new product, try not to bombard users with too much information in too dense a space.
Instead, think about simplifying browsing experience. An exemplary app is easy to use, intuitive and slick in design. Overall, such an approach will increase performance across all devices, especially phones and tablets that are not exactly the latest releases.

3. Make the Font Bigger

Sometimes, it is the simple things that accumulate into one huge competitive advantage. Although often overlooked, creating a bigger font is crucial for a successful transition between a website and an app.

Websites are traditionally visited through personal computers and laptops. This creates a bigger screen in which more information is presented. To allocate space for such information, the website font is usually quite small, as the bigger screen allows for users to scroll through seamlessly.

When it comes to apps, much of that information is discarded, as explained in the previous section. The app resembles something more akin to a skeleton of the website, an easy to use format that encourages user-friendliness and familiarity. Thus, to ensure that the space is properly utilized, the font should be larger and easy to read within the confines of a small mobile phone or tablet.
The alternative leaves users with the impression of an ill-thought-out application that does not really utilize the space it has. Nothing is worse for a brand than a half-baked offering.

4. Test the Page on Applied 3G

5 Key Steps in Moving your Web App to Mobile Platform - Test the Page on Applied 3G

There is nothing more frustrating than an internet-based application that does not run at an appropriate speed. Moreover, as the app will now predominantly run over 3G networks, it is essential that the experience is similar to that of Wi-Fi.
Research shows that more people are using their cellular data as a method of connecting to the internet. As such, the App should be able to run compatibility over cellular data services – whether 3G or 4G network connections.

A simple test before launch should help find out whether the development has been successful and where the necessary holes in the operation lie. It may seem like a ‘no-brainer’, but this simple test can save a fortune in negative publicity and bad ratings. It’s better to be safe than sorry.

5. Use media-queries

If you don’t know much about media-queries – use the Bootstrap grid with “col-sm” classes. By attaching Bootstrap or any other CSS framework you can use its responsive out-of-the-box breakpoints without knowing what the media queries are. By using class “col-sm” you automatically set the breakpoint to 768px, which means your app will look much better on small devices such as tablets and smartphones. The change will kick in automatically and so it will autoscale to the device you are currently using.

Summing up

The mobile Application market is on the increase and certain empires have been built just on the back of a successful app that operates efficiently. Moreover, as the smartphone market develops, a well-thought-through mobile application may become the new face of a commercial online experience. Progressive Web Apps, in particular, are greeted with great excitement by organizations and developers as they provide a new way for companies to position themselves within everyday operation of a personal computer. Not only are they a means of increased browsing enjoyment and efficiency, but they now have a desktop presence, which means taking user interaction to a whole new level. The possibilities are endless and there may yet be more innovations that follow.

See also:

 
[contact-form-7 id=”13387″ title=”Contact download_8_reasons”]

Categories
Entrepreneurship Other Technology

Media Apps: How media companies use web and mobile apps

In days gone by, media was synonymous with a crisp morning paper and the aroma of ink. “Hot off the press” is still a common phrase for fresh news. Of course, this world has changed dramatically. The main source of revenue was paper sales and ads. This process was a staple of modern society and provided a focal point of news. The next revolution came in the form of the television, as media now became available at home. Instead of running down to the local store to pick up today’s newspaper, one simply had to tune into the morning and evening news bulletins.

Finally, the introduction of the internet has opened up new and exciting ways for the media to reach their target audience. Such is the nature of the medium that new and innovative measures have been made available to both the consumer and media corporations. The media conglomerates have benefited from a new wave of revenue, which explained further with four real-life examples.

media apps

CNN

A TV-based business model

Perhaps one of the most famous brands within the media industry, CNN is famous for its comprehensive coverage of international and American events. Of late, the network has been criticized for its political bias. However, that has not stopped the global powerhouse from obtaining a tremendous amount of market share within the international news and media market. In terms of revenue, CNN has developed a multi-layered stream that caters to its consumers around the globe. The CNN network achieves most of its revenue from the sale of television rights, as television organizations around the globe see its presence on cable and satellite packages as a drawcard.

Apps to help the growth

CNN has also made an attempt to keep up with the trends of the day, as they seek to enlarge their online presence through alternative media streams that differ from the traditional pen, paper, and television. Currently the CNN App is available on almost every mobile device. Its user-friendly design is primed to allow users to stay in the loop with current news events, both domestic and international. This has been developed as a new stream of revenue, as it serves to attract a market that is consistently connected to the web instead of a television screen or bookstore. They derive their revenue from advertising, as the attraction of traffic is a useful marketing tool for other entities.

CNN has introduced a new web-based forum that delivers content specially designed for high school age groups. Thus, the network has developed a user-friendly platform that is geared towards deriving future growth. Interestingly, the company seems to be willing to run the platform at a loss, as there are no adverts or other means of achieving an income. It seems to be an investment for the long run.

The development of a website that is linked with all the major social media sites is also a strategic segment of CNN’s business model. The idea is simple: draw enough traffic to the CNN website and achieve revenue from the advertising.

The Guardian

From ad-driven philosophy to the reader contribution model 

A well-trusted media source that attempts to cater to the newsfeed needs of society, The Guardian has lived through the advent of both television-based media and the current online craze. As such, it seeks to engage with its consumers in increasingly meaningful ways. The Guardian has changed its revenue strategy and succeeded in building a new business model, in which reader revenue from web and print subscriptions surpasses that of ad revenue. The Guardian was primarily ad-driven and wasn’t very open for a paywall model because of the belief journalism should be widely accessible. Now, half of the revenue comes from advertising, one-third from individual contributions and the rest from philanthropic donations. Advertising continues to grow, driven by programmatic and native ads, but reader revenue is expected to surpass advertising in the next several months.

Customized apps: Looking for niches

web and mobile apps

The Guardian business development strategy includes opening up for new target groups and new activities and support them with dedicated web and mobile applications.
An example of this kind of approach was The Guardian Soulmates platform. Soulmates app was an online dating web application with a mobile app version. Our Espeo developers had a pleasure to work with The Guardian colleagues on creating this application. The Guardian’s goal while building the Soulmates application was to extend brand awareness and increase its profits.

Lately, The Guardian has also developed, in partnership with Espeo, a dedicated web application that provides teachers with key information, such as finding lesson plans, work schemes, presentations, student activities, and assessments. Espeo took on the responsibility of updating the platform, one that implemented larger storage and increased capacity for traffic. Moreover, as it enjoys a reputable brand that has stood the test of time, The Guardian also boasts a favorable presence within the social media sphere, as attractions such as football news often go viral. Again, this leads to increased traffic on the site and revenue derived from advertising organizations.

The Daily Wire

A Unique Content Approach

Alternative media that takes advantage of the information age, the Daily Wire is a nod to what can be achieved with successful e-marketing campaigns and the presence of unique content. The network leverages on the individual fame of its employees in order to create a focal point of conservative media. Staying true to its new and edgy feel, the Daily Wire’s business model is also in tune with the demands of the current day. Weekly podcasts are offered by at least three of the more famous representatives, drawing a tremendous amount of following from individuals tuning in with the use of mobile devices. Moreover, they obtain revenue from advertising from within the content.

Personal brands and viral marketing

Social media pages and channels have also been a core part of the Daily Wire’s business model. The company uses YouTube to target a younger demographic and the content is shared on sites such as Facebook, Twitter and Instagram. This is another stream of advertising-based revenue that is the result of drawing traffic to thought-provoking content.

As with most news outlets, the Daily Wire runs a video and article-based website that is designed to function with social media plugins and the strength of its brand. Interestingly, most of the traffic is derived from the strength of the personal brands of its employees and partners. The network has achieved a new and exciting revenue stream through viral marketing. This revolution is more conceptual in nature (as opposed to innovative tech) but the results of having employees act as promotional assets allows the business to perform well above its expected income. This can be seen in the link between Ben Shapiro’s Twitter account and the influx of traffic to the site.

ESPN

The Power of sport-based news

Despite the fact that the company is primarily involved in the live coverage of sports – American sports in particular – the company is a major stakeholder in the sports media market, as it is the host to a variety of sports-based coverage and news. Digital adverts make up a substantial proportion of the company’s multi-billion-dollar revenue stream, and this is derived mainly from news coverage. Therefore, it is safe to place ESPN within the media category, and its media-based revenue may be summarized thusly.

Mobile App and Live-streaming

Media Revolution: How media companies utilize web and mobile apps

ESPN uses a website as a focal point that provides updates of sports news by the minute. This encourages traffic and translates into revenue from advertising. Moreover, they also have a presence on social media, with many millions of followers on a variety of platforms. Advertising is also achieved through a mobile app.

ESPN has been voted the most innovative company in 2017, an achievement that is largely due to the way the network interacts with its online audience. Moreover, the company spent more than 1 billion dollars in order to add a live-streaming option to their list of subsidiaries. Thus, through a platform that encourages an online migration, the company continues to open an international client base with the acquisition of subscription-based revenue.

Media Apps and their impact

The internet is nearly endless in the number of possibilities it provides for a variety of industries. As media continue to move away from traditional paper-based revenue streams, the internet is turning into a haven for the distribution of media content. With the new and innovative ways to increase revenue, which seem to spring out of nowhere, one almost gets the sense that media have just scraped the surface of internet-based potential: perhaps the best is yet to come.

Categories
Software Technology

5 Easy steps to run your C code from Angular app

As a front-end developer you’ve probably been hearing about WebAssembly for a long time. Below I will show you how in 5 simple steps you can start using the code written in C, calling it directly from the Angular component. I won’t write down what WebAssembly is but I will show you how to use it right away:

1. Download the Emscripten library from Github and install it

2. In the app.tsconfig.json change the module from es2015 to esnext.

3. Write your code in C

4. Compile it to .js and .wasm

5. And voila, you can already call the C code from Angular

The results are amazing. It’s two times faster than the vanilla JS Fibonacci method!

JS and WARM results

You probably don’t need WASM when you develop a simple login form, or another table on the page. But, once you have developed your own map implementation, or when you fall in love with CityBound, you will see that WASM is the right solution for you.

Categories
Software Technology

Automatic Jira Task Estimation based on the Azure Machine Learning Predictive Model

Machine Learning has been increasingly entering every area of our lives over recent  years. From the recognition of photos and voices to, intelligent hints and suggestions online and even in our cars. According to a study by mckinsey.com, by 2030, 30% of the work that people currently do will be taken over by machines. In software companies it will be even more so. Worse-case scenario – you’re afraid that they’ll make you redundant from your favorite job, and they’ll replace you with machines. Don’t think that. The machine will rather take over the basic work leaving you to focus on more innovative things. And this is how AI can support our daily administrative tasks…Let’s take a closer look to the Jira task estimation based on the Azure Machine Learning predictive model.

AI powered planning with Jira

We spend 2 hours twice a month estimating the backlog tasks. For a team of 5 people that is 10 hours, and on a monthly basis 20 hours of planning. It’s quite a lot, given that the programmer, hopefully, earns on average 30 USD per hour. Annually it means 8 thousands USD spent on planning alone. In this case, 4 additional people from different departments take part in the planning as they are responsible for the whole process of delivering the software to the client.

On the one hand, without planning, the project would certainly not look as it should. And inevitably, the level of complexity and structure would decline over time. On the other…few programmers like the so-called “Meeting Day”. It’s the day when you think of all the things you could be doing, but can’t  because you’re at a meeting.

Jira is a well-structured tool where many processes can be simplified, but maybe Jira could give something more just by itself. You have backlog of 200 tasks. You read the content of the task. After 5 seconds you know, more or less, how much time it will take you to complete each task (as long as the content is written legibly, concisely, and illustratively). Clear situation – the task is priced, you move on to the next task. This is another task in a row that you priced to 3 Story Points. You have already done 20 similar tasks.

Azure Machine Learning Planning  – Configuration Model

The first step to include Azure Machine Learning to our planning process is to export current tasks from Jira to CSV so that they can be analyzed. Unfortunately, Jira exports the CSV file in a way that is not compatible with what we expect. The file is very dirty (spaces, tabs, enters, html code). Azure ML cannot import it properly either. Additionally, the team valued the tasks according to the Fibonacci sequence on a scale of 0,1,2,3,5,8,13. For our calculations it is too big a gap – we will simplify it to the form of EASY(1), MEDIUM(3), DIFFICULT(5).
We export the data to a html file and then parse it using NodeJS to a format that we can accept.
https://gist.github.com/ssuperczynski/b08d87843674eb4be64cb0fe7f658456
After importing a new CSV file to Azure ML we get the following task distribution.

CSV file to Azure ML

Since our JS script only helped us to pre-prepare the file, we now have to further prepare it for more analysis.
Steps we have already taken:

  • merge title with description,
  • drop html tags (this step will be explained later),
  • replace numbers,
  • remove special chars.

Steps we need to take now:

  • remove duplicate chars,
  • convert to lower case,
  • stem the words: driver, drive, drove, driven, drives, driving becoming drive,
  • remove stopwords (that, did, and, should …).

Verification process

Further steps that I have not done, but they can significantly influence the final result. In order to verify the truthfulness of the estimate it is necessary to attach it one by one and verify the final effect.

  • Do not cut out html tags (the project has tasks for frontenders, where html tags sometimes have a key meaning in the estimation of the task).
  • Some of the tasks have French words – it is questionable whether they are significant, here we should make changes at the level of project management in Jira.
  • Separation of frontend and backend tasks. Currently, despite the fact that each task has its own EPIC, we do not attach it, so the front and back tasks are combined into one backlog.
  • The number of tasks is too small – the more tasks the better model

 
The current Azure ML scheme is as follows
Azure ML scheme
After making all the necessary modifications, the sentence that initially looked like this:
Create table to log user last logins. This omit issue with locks on user table
Is changed to:
creat tabl log user login omit issu lock user tabl
Below is a graph of word statistics for tasks larger than 5SP.

jira estimation

The next step is to analyze the words from two angles.
Unigram – a method that counts all single occurrences of words. In our case, the method may prove ineffective, because the content of “Change font under application form”. – having 1 SP and “add two new child forms under application form” has 5 SP points to the word “application form” which once has 1SP and another 5SP.
Bigram, Trigram, N-gram – based on N word statistics, where N is 2, 3 and so on.
I chose the N-gram method, which turned out to be much more effective.
In N-gram analysis we stop comparing strings, and switch to on hash – this comparison works faster, and because our database will continue to grow with time, comparisons will be faster.

feature hashing
jira task estimation

Once the N-grams analysis is created, we can create and train our model, taking 70% of the data as the data to train, and 30% as test data.

n grams
 
The last step is to give our scheme the ability to introduce content into the analysis, and to show the level of difficulty as simulated by the model.

Azure ML scheme web servives

The tests used were those of my colleagues from the project, who themselves gave me the content of the tasks for analysis.
Here are the results:

  •  oAuth Refresh token doesn’t work – Azure ML – easy – friends – easy
  • Add BBcode feature to the form – Azure ML – easy – friends easy
  • Fix the styles for upload button – Azure ML – easy – friends – easy
  • Message form refactor – Azure ML – difficult – friends – difficult
  • Random string method has many implementations – unify them into one – Azure ML – easy – friends – easy
request response 1
request response 2

Summing up

As you can see in the above 5 examples, the accuracy of our program was 100%, despite the fact that there are places where we can improve our model. Based on our tests overall accuracy was around 80%.

At the moment it can be used during planning – for tests, but in the near future to efficiently inform the customer how much the task will cost and whether it should be divided into pieces – and all this before planning.

The next step is to build a Jira plugin and include it right next to the task description.

See also: