9lessons Programming Blog - Tutorials about Angular, ReactJS, PHP, MySQL and Web Development
Showing posts with label Mobile. Show all posts
Showing posts with label Mobile. Show all posts
Friday, November 01, 2019

New Ionic 5 Angular 8 Display, Update and Delete Records with RxJS

This post is about displaying the API records with delete and update actions using new Ionic and Angular reactive programming. This is a continuation of Ionic Angular series and it explains to you how to distribute the data between the components using RxJS method like BehaviorSubject. All of the feed API responses/records storing in a reactive object, This help the application DOM works seamlessly with update and delete operations. Implement this to your side project and enrich your applications.

New Ionic 5 Angular 8 Update and Delete Records with RxJS

Tuesday, September 10, 2019

Ionic 5 and Angular 8: Restful API User Authentication Login and Signup using Guard and Resolver

This is a continuation of my previous article creating an Ionic Angular project with welcome and tabs home page. Today’s post explains how to implement login authentication system for your Ionic Angular application with guards and resolvers. It will show you how to log in with a user and store the user data and protect the routes, so it deals with token-based authentication. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication.

Ionic 5 and Angular 8:Create a Welcome Page with Login and Logout.

Sunday, August 18, 2019

Ionic 5 and Angular 8: Create a Welcome Page with Tabs Home Pages.

I received lots of tutorial requests from my readers in that most of them asked me, how to use Ionic 5 to create a welcome page with login and signup pages. Ionic updated there code base with latest Angular 8 features. Now we can implement the routes and guards pretty easy way. Ionic is recommending to use Capacitor to generate iOS and Android. This post will explain to you how to design an Ionic project structure with social project related pages like messages, feed, notifications, etc. Finally converting this web Ionic project to iOS and Android applications.

Ionic 5 and Angular 8:Create a Welcome Page with Login and Logout.

Saturday, August 26, 2017

One Million downloads of Entertainment APP shows Indian Craze for Bollywood and Entertainment

Celebrity Launch of APP LIKE by actor and Bollywood Heartthrob and Haider Star Shahid followed by his array of celebrity colleagues had taken the entire entertainment and tech industry by a wave of unmatchable innovation in the talent and entertainment. APP LIKE went viral in no time with massive downloads both on Android and IOS platforms and growing trends on social media platforms proved just one thing that no one can match the craze and madness of Indians when it comes to celebrating numerous talents and Bollywood spirits. Its been a week and APP LIKE has already reached a whooping number of one million downloads, a by product of Asia’s biggest live streaming APP company, BIGO LIVE, which is already enjoying 200 million downloads since its very launch.



Monday, August 21, 2017

Ionic 3 and Angular 4: Insert and Delete with Token Based Restful API

This is the continued series of article on developing a mobile app with Ionic and Angular JS. This post deals with updating and deleting any post on the application. This also explains how to show the loading image by making an Ajax call. While deleting a post, it will show an alert message to confirm whether to delete or not. This post is all about this. Hope you all make use of this series of articles on Ionic and Angular to build your own mobile app.

Ionic 3 and Angular 4: Insert and Delete with Token Based Restful API

Tuesday, August 08, 2017

Ionic Split Pane with Login and Logout System.

I received a tutorial request from one of my blog readers to implement Ionic Split Pane with the login system. Ionic has been improving and releasing new desktop layout features. This post is an enhancement to my previous application. SplitPane is the new component introduced in Ionic 2.2.0. This targets to create apps of any screen size like desktops and tablets. With this, it is easy to show a side menu with side-by-side navigation controllers. Let’s see how we do this, and follow the demo below for more details.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Wednesday, July 12, 2017

Ionic 3 and Angular 4: JSON Parsing with Token Based Restful API

We have covered most of the topics in building a mobile application using Ionic 3 and Angular JS 4. Today’s topic is to pull in data for news feed from a server and display it on your website. This is suggestible post since it does proper verification at the backend based on token. All it does is, it will verify system token and user token at the backend and then pulls data using feed API url. I have also added an extra code to the previous post for login authentication with PHP Restful API for showing alert messages. Please do follow the below video and code for your understanding.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Wednesday, June 28, 2017

Ionic 3 and Angular 4: Adding Custom Fonts like Open Sans and Font Awesome.

We all know that Ionic is the useful framework for building HTML 5 mobile applications. It is mainly designed for the front end. When it comes to look and feel of the Ionic website, you have to work more on your application branding standards. Ionic default icons are not up to current market standards. This tutorial is all about how to add custom downloaded fonts like open sans and font awesome for icons into the Ionic application. Let’s see how you use customized fonts in your Ionic website.

Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.

Thursday, June 22, 2017

Ionic 3 and Angular 4: PHP Restful API User Authentication for Login and Signup.

Here is the continued article on my previous post for creating a welcome page with login and logout. Today’s post explains how to implement login authentication system for your AngularJS applications. It will show you how to log in with a user and store the user session, so it deals with token based authentication. Since we are using token based authentication, it protects if any unauthorized request is made and notices for a new login if required. This makes your application’s authentication to be more secured compared with any other authentication system. Every user details will be stored in an external database and a PHP based API is used in the backend for handling this authentication. Hope you’ll find it more easily using this as your authentication system in your AngularJS projects. Let’s look into the live demo and follow the below code.

Ionic 3 and Angular 4:Login and Signup with PHP Restful API.

Monday, June 12, 2017

Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.

Most of the mobile applications starts with welcome page with login and signup buttons. A proper login or signup redirects to application home page and there you can navigate to different pages and finally you can end up with a logout action. Today’s tutorial is all about this. Here I am using AngularJS 4 and Ionic 3. The combination of AngularJS and Ionic in handling login is a straight forward process. This design is already explained in my previous posts using ReactJS navigations. Lets see how to set a starting page using Ionic 3 and AngularJS4 and learn basic understanding of how the navigation works.

Ionic 3 and Angular 4:Create a Welcome Page with Login and Logout.

Monday, April 24, 2017

React Native Router Navigations - Tutorial Part 3

This is again the continued post on React Native series. This post explains routing and navigation to different tabs in an application using React Native. Navigation is all about how the user can access possible sequences of pages in a web application. Routing is the encoding and decoding of URLs used in the application. Routing is supported by some set of rules. Each application must provide defined set of rules. Once the routing rules are defined, we can use the URLs containing view names and their parameters to navigate to different pages/tabs in the application.

React Native Router Navigations

Wednesday, April 19, 2017

Ionic 3 and Angular 4: Working with Signature Pad.

This tutorial explains how to upgrade to Ionic 3 and Angular 4 and how to use signature pad for your application. If you are working with some agreement related project or something which needs some written proof from the customers, we might in need of a signature pad. The combination of Ionic 3 and Angular 4 provides some better features to achieve signature pad. This will allow you to sign/draw something on the application and save that image as data on the screen. Using this tutorial, you can also make a signature pad with Ionic 2 and Angular 3. Why late? Let’s start this small, but most commonly used task in your application.

Ionic 2 and Angular 2: Using the Native Camera

Friday, April 07, 2017

Ionic 3 and Angular 2: Using the Native Camera, Take Multiple Photos with Delete Action.

Are you searching for easy camera access for taking multiple pictures in your mobile application? Then here is the post explaining on how to access camera and take pictures. In most recent days, this is achieved easily with the combination of Ionic framework and AngularJS. We have already discussed in my previous article, how easy it is to use pre-built it in components of Ionic with AngularJS and build awesome mobile apps. Today’s article explains Cordova plugin provided by Ionic framework to access camera , take picture and see the output. The most exciting thing about this article is, it explains you to upload multiple images you take in camera. Let’s follow the article and also the video tutorial on this.

Ionic 2 and Angular 2: Using the Native Camera

Sunday, April 02, 2017

React Native JSON Parsing and Helper Functions - Tutorial Part 2

This is the continuation of previous article Getting started with React Native Template Design – Tutorial Part I. Today’s article and video tutorial explains how to parse and render the json data using some of the best React Native packages. It explains how to make ajax calls using fetch. Fetch is the networking API, which is chosen by React Native to get the JSON data and render it in the page. I hope embedded videos with blog posts are more advantageous for you to learn. I appreciate to take any feedback if you have, so that I can make it better.

React Native Template Design

Sunday, March 26, 2017

Getting Started with React Native Template Design - Tutorial Part 1

We always look for apps that are faster to develop and run, React Native is one such emerging framework. Being focused on mobile development; React Native is an open source framework from Facebook which can be run on multiple platforms and devices such as iOS and Android. React Native is a javascript library. You do not have to learn iOS’ Swift or Java for Android, all you need to know is Javascript. I am going to present series of articles on React Native. This article explains making of native mobile template using React Native. Today, I am introducing video tutorials on Youtube for an easy learning.

React Native Template Design

Tuesday, January 17, 2017

Ionic 2 Mobile App using Angular 2 and TypeScript Tutorial

Ionic is an open-source front-end SDK framework made for building hybrid mobile apps on cross platforms. Ionic is used for developing hybrid mobile apps using web technologies like HTML 5, CSS, Cordova and Sass, it is made of AngularJS 2. Both ionic and AngularJS provides some pre- built in components, which allows us to easily develop mobile apps. Here is the demo for creating mobile app using AngularJS and typescript on ionic V2 framework. The demo used here is my 9lessons.info blog as a mobile app. Follow this tutorial to easily build mobile app.

Ionic Angular 2 typscript tutorial

Thursday, July 21, 2016

PixelPhone Enhance your Experience Getting Over the Default UI of your Android Smartphone

PixelPhone is an app for your Android device that replaces your default phone app to offer you a better experience. It has features that you don't usually get through your pre-installed phone & contact apps. Since its initiation some years back, the app has constantly refined and improved its features to better suit user's needs. Once you start using the app, you would not want to go back to the previous default version of your phone.

PixelPhone Enhance your Experience Getting

Sunday, September 20, 2015

Vanilla JS Browser Default Java Script.

Recent days many are discussing about Vanilla JS a ZERO KB framework, it is basically plain/default JavaScript like vanilla ice cream (default flavor) and it is not really a library or a framework. Nowadays JavaScript DOM methods has been improved a lot, it is very powerful in speed operations per second. So that you no need to use any external libraries like Jquery etc.. If you are working for simple mobile or web application, I suggest use following plain JavaScript scripts.

Getting Started with Vanilla JS

Sunday, January 25, 2015

Google Materialize a Responsive HTML5 Framework

Materialize is a Responsive CSS Framework based on Google’s Material Design Concepts. Materialize aims to bring material design to web which was initially made by Google for Android. In this tutorial I will explain what material design is and then we will build a blog home page using Materialize.

What is Design Language?
A design language(or design vocabulary) is an style that guides the design of a complement of products. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts.

Detect Shake in Phone using Jquery

Sunday, November 02, 2014

iOS Style Switch Button using CSS3 and Jquery.

I said earlier the mobile revolution has been started, now time to build mobile web application for your web projects. Many third party platforms like Apache Cordova and Phonegap are offering that you can convert web application into native mobile application. This tutorial will help you how to design iOS style switch button component using HTML, CSS and Jquery. Specially I love CSS :before and :after pseudo-elements, this helps you to minimize the HTML code.

Facebook Style Notification Popup using CSS and Jquery.

mailxengine Youtueb channel
Make in India
X