What is Ionic Framework

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. The more recent releases, known as Ionic 3 or simply "Ionic", are built on Angular. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

Installing Ionic

---

Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy as a native app. This means we need to install a few utilities to get developing.

Installing Node and NPM

The quickest way to get Node and NPM installed on your machine is through the NodeJS installer. After installing open a terminal and run npm --version and node --version to verify you have everything installed correctly.

Installing Ionic CLI

Run below command on your terminal

$ npm install -g ionic cordova

Note: The -g means this is a global install, so for Windows you will need to open an Admin command prompt. For Mac/Linux, you might need to run the command with sudo.

Creating Ionic App

---

To create a blank app run below command

ionic start helloWorld blank

• start will tell the CLI create a new app.
• helloWorld is the App name.
• blank is starter template

Along with the blank template, Ionic also provides the following official templates:

tabs : a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project

If you don’t specify a template at the start, you will be prompted to pick one.

Running our App

---

To run your app, cd into the directory that was created.

$ cd helloWorld
$ ionic serve

In the next article i'll go over the project structure created by the ionic start command

References

---

Official Ionic Framework Docs

try, /[a-zA-Z]{8}[_]{1}[0-9]{7}$/g

What is React JS

• React is a JavaScript library for building user interfaces.

React Components

• Everything in React is a component, and these usually take the form of JavaScript classes. You create a component by extending upon the React-Component class.
  Eg:

  class MyComponent extends React.Component {
      render() {
          return <h1>Hello world!</h1>;
      }
  }
  

• You then define the methods for the component. In our example, we only have render() method.

• Inside render() you’ll return a description of what you want React to draw on the page. In the case above, we simply want it to display an h1 tag with the text Hello world! inside it.

Props and States

• There are two types of data in React: props and state.

• The key difference is that state is private and can be changed from within the component itself. Props are external, and not controlled by the component itself. It’s passed down from components higher up the hierarchy, who also control the data.

• The difference between the two is a bit tricky to understand in the beginning, so don’t worry if you find it a bit confusing. i'll show you how to work with props and states in the next tutorial.

Setting Up

• First create a .html file

• Then import react like below

  <!-- ... other HTML ... -->
  
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin>    </script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  
  </body>
  

Add a DOM Container to the HTML

• Add an empty <div> tag to mark the spot where you want to display something with React. For example:

  <!-- ... existing HTML ... -->
  
  <div id="save_button_container"></div>
  
  <!-- ... existing HTML ... -->
  

• We gave this <div> a unique id HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.

Creating a React Component

• Create a file called save_button.js next to your HTML page.

• Add below code to save_button.js file

  'use strict';
  
  const e = React.createElement;
  
  class SaveButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = { saved: false };
    }
  
    render() {
      if (this.state.liked) {
        return 'You saved this.';
      }
  
      return e(
        'button',
        { onClick: () => this.setState({ saved: true }) },
        'Save'
      );
    }
  }
  
  //These two lines of code find the <div> we added to our HTML in the last step, and then display our “Save” button React component inside of it.
  const domContainer = document.querySelector('#save_button_container');
  ReactDOM.render(e(SaveButton), domContainer);
  

Loading our React Component

<!-- ... other HTML ... -->

  <!-- Load our React component. -->
  <script src="save_button.js"></script>

</body>

• Open the .html file you create using your favourite browser and you will see something like below:

Full Example

• index.html

  <html>
  <head>
      <title>React App</title>
  </head>
      <body>
          <h1>Welcome to my React App</h1>
          <div id="save_button_container"></div>
  
          <!-- Load React. -->
          <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
          <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
          <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  
          <!-- Load our React component. -->
          <script src="save_button.js"></script>
      </body>
  </html>
  

• save_button.js

  'use strict';
   
  const e = React.createElement;
   
  class SaveButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = { saved: false };
    }
   
    render() {
      if (this.state.liked) {
        return 'You saved this.';
      }
   
      return e(
        'button',
        { onClick: () => this.setState({ saved: true }) },
        'Save'
      );
    }
  }
   
  //These two lines of code find the <div> we added to our HTML in the last step, and then display our “Save” button React component inside of it.
  const domContainer = document.querySelector('#save_button_container');
  ReactDOM.render(e(SaveButton), domContainer);
  

Thanks for reading, in the next tutorial i'll talk about

• Props and States

In this post i'm showing you how to send emails via firebase cloud functions by SendGrid. SendGrid is a cloud based email service it has free tier which will help you to begin. Also we have to enable firebase billing to work this correctly, because firebase free plan only allow google services for outbound networking.

For this tutorial i'm assuming you have installed firebase sdk and log into your firebase account.

Setting up things

1. Open terminal & run firebase init to initilize firebase functions
2. We need two packages for this, add them via npm
   1. npm install @sendgrid/mail
   2. npm install cors
3. Now open index.js and put below code.

const functions = require('firebase-functions');

const admin = require('firebase-admin');
admin.initializeApp();

const SENDGRID_API_KEY = "PUT_YOUR_SENDGRID_API_KEY";

const sgMail = require('@sendgrid/mail');
const cors = require("cors")({
  origin: true
});

exports.sendEmail = functions.https.onRequest((req, res) => {
	return cors(req, res, () => {
  	const msg = {
      to: req.body.email,
      from: '[email protected]',
      subject:  'SUBJECT',
      templateId: 'd-02d153b9f48f490bb73bfcc6ad92d892', //SendGrid Template ID
      // SendGrid Template Variables
      dynamic_template_data: {
        name: req.body.name,
        event_name: req.body.event,
        date: req.body.date
      }
    };
    
    sgMail.send(msg).then(res => {
      res.send({
        success: true,
        message: res
      });
    }).catch(err => {
      res.send({
        success: false,
        error: err
      });
    });
  });
});

4. Now deploy our function by running firebase deploy --only functions

NOTE - To work this correctly, you must enable billing on your firebase account

Flutter Ecommerce App UI

Watch the full tutorial - https://youtu.be/bCAOaP5O2UY

Don't forget to subscribe the channel!

Redesigning Spotify Home Page Using Flutter

Watch full video on Youtube :point_right: https://youtu.be/HwDDF9e_vJQ

Link to Source Code can be found on YouTube Video description.

Give me support by 👇 👇
✅ Subscribe ✅ Share ✅ Comment & Stay Connected!

Important HTML Elements

1. Title Tag

<head> 
    <title>Page Title</title>
</head>

Best Practices

• Less than 512px (50-70 characters)
• Important keywords near the beginning
• Each title should be unique

2. Meta Description Tag

<head>
    <meta name="description"content="This is an example.">
</head>

Best Practices

• Best under 155 characters
• Each description should be unique
• Well written descriptions influenceclick-through rate

3. Images

<img src="img/keyword.jpg" alt="keyword" width="100" height="100">

4. Hyperlinks

1. Text Link

   <a href="https://www.example.com/webpage.html">Keyword in Anchor Text</a>
   

2. NoFollowed Link

   <a href="https://www.example.com/webpage.html" rel="nofollow">Keyword in Anchor Text</a>
   

3. Image Link

   <a href="https://www.example.com/webpage.html"><img src="/img/keyword.jpg" alt="keyword" width="100" height="100"></a>
   

Best Practices

• Preference: HTML links over JavaScript
• Use "nofollow" for paid links and un-trusted content
• For image links, the alt attribute serves as anchor text

5. HTTP Status Codes

• 200OK/Success
• 301Permanent Redirect
• 302Temporary Redirect
• 404Not Found
• 410Gone (permanently removed)
• 500Server Error
• 503Unavailable (retry later)

6. Webmaster Tools

1. Google Webmaster Tools - https://www.google.com/webmasters/tools/home
2. Bing Webmaster Tools - http://www.bing.com/toolbox/webmaster/
3. Yandex Webmaster - https://webmaster.yandex.com/

7. Canonicalization

Common Duplicate Homepage URLs

• https://www.example.com
• https://example.com
• https://www.example.com/index.html
• https://example.com/index.html
• https://example.com/index.html&sessid=123

Canonicalized URL Best Practices

• Preferred URL = https://example.com/
• Place the following in <head> section to indicate preferred URL:
• <link href="https://example.com/" rel="canonical" />

8. URL Best Practices

SEO Tips for URLs

• Choose shorter, human-readable URLs with descriptive keywords
• Exclude dynamic parameters when possible (see Canonicalization and Pagination)
• When possible, place content on the same subdomain to preserve authority
• Recommended: https://example.com/blog
• Less Ideal: https://blog.example.com

I'll post next part asap.
Thank you all for your time in reading this!

Angular JS is a client side MVC/MVVM Framework, this is created by google so most of developers adopted to angular js. This is very popular for single page web applications and also we can do lot of things using angular js. Ionic framework is best example that showing power of angular which is used to make Hybrid Mobile Applications using HTML, CSS and Javascripts only.

To install the Angular JS we want Node JS on our computer, and we use Angular CLI to create, test, build and deploy our angular app.

Installing Node JS

---

www.nodejs.org go to this website and download right package match to your OS. You can find out instructions on that page

Installing Angular

---

After installing node js we need to install Angular CLI, to install that open your terminal and run

npm install -g @angular/cli

Creating an Angular App

---

After installing Angular CLI, navigate to where you want to create angular project and then run following command in the terminal

ng new my-app //my-app is your project name

When you run this command it will ask you information about your app, for now just press enter, we can change these info later

Running our Angular App

---

Navigate to your app directory

cd my-app

After you navigating to app folder you can run your app using ng-serve command. When you run this command it will start a local server and when you made a change it will automatically reloads the app(auto reloading) this is a very useful feature.

ng serve --open

When you run above command it will automatically open the app using default web browser(http://localhost:4200/), if not try rerunning the command. On successful execution you can see like below

On the next step i'll show you how to edit our app. If you have any question just ask on lankadevelopers.com our members will help you.

Originally posted by @ciaompe
This is translated cause of most peoples are requesting an english version.

Source : https://angular.io/guide/quickstart

we are developing an API library for lankadevelopers once done we will create a public repository, then you can contribute to our repository. We are planing to create app using React Native. Thank you for your suggesting such a great idea.

Made with :hearts: in Sri Lanka

Hello guys,

I just published a NPM package to create keystore files simply for sign apk's, to generate a keystore, generally we use large command like below,

keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

within this package we just run simple command with two arguments like below,

kg key generate

It's pretty simple, star my github repo if you're love this package.
Installation guide can found on npm package page and github repo.

https://www.npmjs.com/package/keystore-generator

https://github.com/codingwithmrdev/keystore-generator

Thank you.

@root I will try to make tutorial in my free time

Cube Runner is a Hypercasual game, player have to move the cube and avoid hitting on walls. All scores are recorded on Leaderboard, Just download and run endlessly.

Google Play Link - [https://play.google.com/store/apps/details?id=com.codecraftapps.cuberunner](Click Here)

@ciaompe good idea bro

@ciaompe thanks bro

We would like to talk about nft bro

Good job

@lahirunc thanks

@root thanks bro

Flutter Ecommerce App UI

Watch the full tutorial - https://youtu.be/bCAOaP5O2UY

Don't forget to subscribe the channel!

We need Experienced 1 Flutter Developer & 1 Node JS developer for a freelance project.

• Project Time 2Months (Deadline is Fixed cannot extend)
• Good experience in Flutter, Provider State Management Required
• Rest API developing skills required for NodeJS Position
• AWS S3, Aroga Implementation

If you're interested drop a message to whats app - 077 55 80 646

Thanks.