Menu hamburger icon

Posts for tutorial


Creating a Pokémon hybrid app with Angular 2 and Onsen UI

Angular 2 Pokedex App

A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.

In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.


Creating a Pokémon application using the Angular2 CLI

Angular 2 Pokedex App

We recently launched the beta of our Angular2 components for Onsen UI. Angular2 is a brand new framework and people are just starting to get familiar with it. We have decided to start a series of articles to help people get started with the framework. This article is the first in the series and will explain the very basics such as how to set up the environment and how to create and run a simple app.

We will be using the newly released Angular2 CLI tool since it makes it very easy to get started without having to fiddle with things like Webpack and setting up the testing environment and linting.

Since this is the summer of Pokémon, I decided to create a simple sample app that displays a list of Pokémon. The data is fetched from the public PokeAPI. The API is open source and available on GitHub. Please give it a star if you like it! :)

The current app is very simple, all you can do right now is see pictures of all the Pokémon and what their name and number is. We will expand this app in a later article to add more features such as routing and searching.


Develop a Monaca Project with Visual Studio Code

Visual Studio Code

Visual Studio Code is an open source code editor developed by Microsoft and based on Electron, a framework allows creating desktop GUI applications using the Node.js.

Visual Studio Code comes with tons of features like debugging, Git integration, syntax highlighting, IntelliSense and more. It is also highly customizable. On top of that, Microsoft recently announced Cordova Tools for Visual Studio Code. With Cordova Tools extension, you can build, debug and preview Cordova hybrid mobile apps on Visual Studio Code.

With that in mind, in this blog post, we will quickly explain how to create a Monaca hybrid application using Microsoft’s Visual Studio Code with Cordova Tools.


It's all about time: Building a performant Stopwatch with MobX and React - fast

MobX React Stopwatch

In recent posts we spoke a lot about developing React applications with Redux: It enables the users to easily make testable and structured applications. However, writing a Redux application produces a lot of boilerplate code. One framework alternative is MobX, which solves this problem by doing automation using observables.


Time Travel in React Redux apps using the Redux DevTools

Time Travel with the Redux DevTools

In the previous article we showed how to create a simple drawing application with React and manage the state of the app with a Redux store. Now we will talk about how to integrate the Redux DevTools to enable easy debugging and time travel.

The Redux DevTools records dispatched actions and the state of the Redux store at every point in time. This makes it possible to inspect the state and travel back in time to a previous application state without reloading the page or restarting the app.


Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI

Onsen UI Hot Reloading

One of the great things about React is that there are a lot of tools and libraries available. One of the most popular is the React Hot Reloader by Dan Abramov, who also created Redux. The React Hot Reloader enables developers to make code changes and apply these changes without the application losing its state. In this tutorial we will build a small application step by step to demonstrate the power of Webpack and React and also show how OnsenUI users can benefit from it.


Trying out JavaScript ES6 using Babel

Babel

ECMAScript 2015, commonly referred to as “ES6”, is the current version of the ECMAScript Language Specification standard. The support for this new ES6 features is on its way though it will take some time to be fully supported in modern browsers. This blog post will introduce how to use Babel, a JavaScript transpiler, for those who want to try out ES6 in advance.


Build a Places App with Foursquare and Google Maps using Onsen UI and AngularJS

OnsenUI-Places

In this tutorial we are going to learn how to use the Foursquare API and Google Static Maps API to create a Places App with Onsen UI and AngularJS. In this app we will be able to search for a particular place and filter the results by food, shops and outdoor places. There will be also an integrated static map which will lead to the Google Website once clicked.


Create your Kintone app using Monaca

Kintone by cybozu.com

Kintone by Cybozu lets you quickly and easily build your own customized business applications such as daily reports, minutes, time-card, and surveys. It also lets you create applications using Excel or CSV files to satisfy your own needs.

Kintone provides a lot of features in the web browser but here we focus on developing using Kintone API and Monaca to transform your custom business application into a hybrid mobile application.


Build a Hacker News Mobile App with Firebase

Firebase Logo

Firebase provides a realtime Backend as a Service (or BaaS) that allows the developer to sync data instantly between the backend and all connected devices. In addition to being a database that’s accessible from anywhere, they also have a very useful JavaScript API that let’s you listen for events for when items are changed, added or removed from the database. The company was recently acquired by Google.

I’m very excited by the possibilities Firebase has for mobile apps. Using Onsen UI, AngularJS and Firebase I’ve made a simple app to illustrate how it can be used. Instead of creating my own database, I’ve used the Hacker News API since it already has a lot of data and new items are added frequently so we can try out the live syncing functionality in Firebase.


Mocha + Chai.js unit testing for ES6 with Istanbul code coverage

Chai and mocha

Testing is very important for finding bugs, verifying the functionality and improving the general stability of a piece of software. Almost all (if not all) developers test their code in some way. One way to test would be to manually run the program and try out all the functions to see if everything is working as expected. Another (and better) way is to write automated tests that are run every time the code changes.


Integrate Charts in your AngularJS Hybrid Apps with NVD3

D3.js

There are many options out there if you want to display charts in hybrid apps. Since a hybrid app is basically a web application running HTML, JavaScript and CSS, you can use any JavaScript charting library or you can even generate charts in a backend and display them as static images.

In this article we will take a look at NVD3 which are reusable charts based on the D3 data visualization library. We will see how it can be used to create a chart using pure JavaScript and also how the chart can be wrapped in an AngularJS directive.


Tutorial: Onsen UI with ui-router

Onsen UI Theme Customization

AngularUI Router is perhaps one of the most used modules out there for AngularJS that allows you to organize the parts of your interface into a state machine. Onsen UI doesn’t use URL routing but navigates from one page to another programmatically using the custom elements. However, since in ui-router we can define state transitions and not only URL routes we are able to combine Onsen UI and ui-router in the same app. Learn here how to do it.


Tutorial: Let's make a "Favorite Star Button" in JavaScript using the Web Components API!

Recently we’ve started using the Web Components API for Onsen UI. The API gives the developer the power to create new tags and extend the HTML vocabulary. We’ve rewritten some of the simpler Onsen UI components as Web Components but we’re not going to stop at just that. The goal is to rewrite the core functionality of Onsen UI as Web Components and provide Angular 1.x support in the form of wrappers.

The reason why we’re doing this is that we don’t want the Onsen UI components to be usable only for AngularJS developers. We want you to be able to use Onsen UI regardless if you’re a Angular 1.x, React.js or a jQuery developer. We’re very excited about the upcoming Angular 2.0 as well which is built on top of Web Components standard.

In this tutorial we we’ll take a look at the API and implement a simple component. Let’s learn Web Components while making a “favorite button” / “favorite star”!


Tutorial: Customizing Onsen UI Themes

Onsen UI Theme Customization

Onsen UI has a wide set of premade themes, which cover a rich set of color combinations. Although the default colors look good, when creating an app with Onsen UI we recommend customizing the theme to give the app a personal touch. Branding is important since it differentiates your app from others and makes it easily recognizable.

How can the developer modify these themes, to give the Onsen UI components the desired colors? There are two ways to accomplish this.

The first one is to use our Theme Roller Tool, which provides, thanks to an intuitive graphical interface, an easy way to customize Onsen UI themes.

The second way to customize themes is by modifying and compiling the Stylus files. Using an automated gulp task and live reloading this approach also powerful and easier to integrate into a normal developer workflow.


Tutorial: create a sample app with Windows Phone 8.1 and Onsen UI

Onsen Windows

As you know, last week we announced the new version of Onsen UI, which offers Windows Phone support. If you have missed it, take a look here. We promised updates and guides about the new tools implemented to develop hybrid applications compatible with Windows Phone 8.1. That’s why, in this tutorial, we will explain how to develop a Cordova app based on Onsen UI and compatible with Windows Universal platform, which includes Windows Phone 8.1.