Google Excel as Database

How to implement this: 

• Go to Google Excel and enter your data as shown in below image.
  
• Click : File > Publish to web :  and you will see this dialog box , click Publish Button.
  

Now , you are ready to use your excel as database. Copy your excel document id (DOCUMENT_ID) which you get from url like this:

https://docs.google.com/spreadsheets/d/2nQ6aZvFzOpdPx6uSqWgFVGtnO_G9oiPhWzRHUCQlBU

    Api Endpoint: 

    https://exceldb.herokuapp.com/r/`DOCUMENT_ID`

Example:

curl -X GET \ https://excel-db.herokuapp.com/r/1QnQ6HZvFzOpFPx5uSqWgDVGtnO_G9oiPhWzRHUCQlBU \ -H 'cache-control: no-cache' \ -H 'postman-token: 4faaf4be-4759-2fda-04e4-c85f6e1aed43'

Response:

[

• {
  

  • id: "1",
  • title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  • body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"

  },
• {
  

  • id: "2",
  • title: "qui est esse",
  • body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"

  },
• {
  

  • id: "3",
  • title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
  • body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"

  },
• {
  

  • id: "4",
  • title: "eum et est occaecati",
  • body: "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"

  },
• {
  

  • id: "5",
  • title: "nesciunt quas odio",
  • body: "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"

  }

]

Views and Styling in React Native

React Native Views, JSX use and Styling :

This time we will cover the basic things needed  to create views and style components for mobile surfacely. Later on when we will  start to develop real functional app, then we can have deep knowledge about views. Before that have some overview and basic knowledge about Views and styling in React Native.

Rendering the  view is similar to React and we will feel easy if we are familiar to ReactJS and JSX.

React  component

render: function(){

return <div>hi ! </div>

}

React Native component

render: function(){

return <View>hi!</View>

}

When we write view in React , we use common HTML tags like <div>,<p>,<span>,etc. With React Native, all of these elements are replaced by platform specific React Components(as given below).

React    ReactNative

<div>    <View>

<span>    <Text>

<li><ul>   <ListView>

<img>    <Image>

There are other more components which we will discuss  later in each use.

On iOS, for instance, <View> component renders to a UIView, while on Andrioid it renders to a View.As components may vary from platform to platform, how we structure our React components becomes even more important when working in React Native.In React for web, we often have a mix of React components : some manage logic and their components, while other components render raw markup. If we want to mantain code and reuse it in React Native, it is somehow critical.

However the  components that render the view should be written sepreately like view.ios.js and view.android.js and the component that encapsulates the related logic can be reused. View component can be swapped out based on the platform.

Using JSX:

Just like in React, we use JSX(combining markup and JS into a single file) in React Native. JSX prioritizes the separation of concerns over the separation of technologies. In React Native, this is even more strictly enforced.

If you have never seen JSX before, do not worry , it is pretty simple and easy.

Let take a look in below example:

Pure Javascript component:

 var HelloMessage= React.createClass

({

    displayName: "HelloMessage",

  render: function render()

        {

return React.createElement

              (

"div",null,"Hello",this.props.name

              );

        }

});

React.render(React.createElement(HelloMessage,{name:"Kais"), mountNode);

JSX example:

var HelloMessage = React.createClass({

render: function(){

return <div>Hello {this.props.name}</div>;

}

});

React.render(<HelloMessage name="Kais"/>,mountNode);

Both will render following HTML on page:

<div>Hello Kais</div>

Styling:

React Native insists on the use of inline styles, which exits as JS objects.

Syntax looks like this:

//Define a style...

var style ={

backgroundColor: 'white',

fontSize: '16px'

};

//...and then apply it.

var tv=(

<Text style={style}>

A styled Text

</Text>);

** We will talk about styling more details in upcoming Posts. **

Introduction to React Native

What is React Native ?

PS; From this day. I will be writing the tutorials about  React-Native and create a full functional React Native  Mobile App.

React Native is a Javascript framework for writing real, natively rendering mobile applications for iOS and Android. Its based on React, Facebook's JS libary for building use interfaces , but instead of targeting the browser, it targets mobile platforms.In other word, Web Developers can now write mobile applications that look and feel truly "native" just using Javascript libary.
Just like React for the Web, React Native is the mixture of Javascript an JSX.It also exposes JS interfaces for platform APIs, so React Native apps can access platform features like the phone camera, or the user's location.
React Native currently supports both iOS and Android. And yes: you can really use React native to build prodcution-ready mobile applications!

Advantages of React Native 

Existing hybrid mobile app platforms like Cordova and Ionic uses JS, HTML and CSS and  webviews to render and it comes with drawbacks around performance.Additionally , they donot usually have access to the host platform's set of native UI elements and when these frameworks do try to mimic native UI elements, it seems some lagging and "feel" just a little off;

In contrast, React Native actually translates your markup to real, native UI elements, leveraging existing means of renering views on whatever platform you are working with. 
For developers accustomed to working on the Web with React,this means you can write mobile apps with the performance and look and feel of a native application, while using familiar tools. React Native also represents an improvement over normal mobile development in two other areas: the developer experience and cross-platform development potential.

Summary 

React Native is an exciting framework which enables web developers to create a native mobile applications for both android and iOS platform using their existing Javascript knowledge. It offers faster develpment and efficient codebase. If you are the person who is existed to try new things and create a full native application, then React Native can be of great choice....
Next post  will be related to React Native views and using JSX and how to implement that .