electron.fw.png

Repository

What Will I Learn?

You will learn ElectronJs
You will learn AngularJs and AngularJs-Routing
You will learn create firebase project
You will learn create firebase setting
You will learn $routeProvider and config() method
You will learn when() and otherwise() methods
You will learn redirectTo

Requirements

text editor (I used visual studio code)
Basic javascript information
Basic electron information
Basic angularjs information

Difficulty

Basic

Tutorial Contents

Hello to everyone,

In this tutorial we will develop electronjs application from scratch, the user can access the article list and add articles after the user login to our desktop application.

We will use Firebase-Firestore services and Firebase-Authentication for data insertion and listing operations.

You will also learn the Angularjs Routing at the end of the tutorial.

Let's start coding.

Create Electron Application

Let's create the package.json file so that the electron code can work.

In package.json

{
  "name": "electron-firebase",
  "version": "1.0.0",
  "description": "build application using firebase with electronjs",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "electron"
  ],
  "author": "pckurdu",
  "license": "ISC"
}

So we set the main process for electronjs to main.js. In order to create a desktop application with electronjs, we need to write the necessary nodejs codes in main.js.

Let's create 800x600 window in mainjs.

In main.js

const {app, BrowserWindow,Menu,MenuItem} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))

   win.webContents.openDevTools()
}

app.on('ready', createWindow)

So when the application is opened the index.html page will open and the developer tool will open to help us.

We have created the minimal codes required for the desktop application using electronjs.

Let's create the index.html file and code it into the following code block.

In index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset ="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" 
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
      <script src="script.js"></script>
      <title>Firebase Application</title>
   </head>
<body>
<p>Hello Electron</p>
</body>

I have installed Bootstrap cdn and angularjs and angularjs-routing cdn to design and encode the application in the above html page.

I also defined the script.js file, which will write routing codes.

We write electron . to run the application in command prompt.

Create Firebase Project

Let's open the firebase website and create a new project.

We will use firebase in authentication and firestore services.

Let's set the login method of firebase authentication to email / password.

After the project is created, the firebase generates the config codes for us to use in our applications.

Since we use electronjs, we will use these settings for the web.

Create Firebase Settings

In order to use firebase in our web applications, we need firebase config codes.

we need to define these codes in the script field and place them on their html pages.

I have placed the config codes for the firebase project I created below on the index.html page.

In index.html

<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
     <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
     <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-firestore.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "your_api_key",
        authDomain: "your_firebase_projectId.firebaseapp.com",
        databaseURL: "https:// your_firebase_projectId.firebaseio.com",
        projectId: " your_firebase_projectId ",
        storageBucket: " your_firebase_projectId.appspot.com",
        messagingSenderId: "your_ messagingSenderId"
      };
      firebase.initializeApp(config);

      const auth=firebase.auth();
      const db=firebase.firestore();
      
    </script>

We need firebase-app.js cdn for firebase app so we can initialize our config object.

We need firebase-auth.js cdn for authentication, thus we can produce objects for authication operations.

For example
const auth=firebase.auth();

In order to use cloud firestore methods in our application, we need firebase-firestore.js cdn. We need to create object from firestore for database operations.

Now our application is ready to use firebase methods.

Routing Settings

The config() method is set to perform the routing settings in angularjs.

Since we are performing the routing process with routing, we can set pages according to the url address of the page.

We need a $routeProvider object to routing. Provides the necessary infrastructure for routing operations with the help of the when() method in the routeProvider object.

The otherwise() method in the routeProvider allows us to set the page to be redirected by default.

Let's do a forwarding process for a dashboard page and a login page.

var app=angular.module('myApp',['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
        .when('/',{
            templateUrl:'login.html',
            controller:'loginCtrl'
        })
        .when('/dashboard',{
            templateUrl:'dashboard.html',
            controller:'dashboardCtrl'
        })
        .otherwise({
            redirectTo:'/'
        })
});

RedirectTo feature '/' and '/dashboard' except the routing we want to direct the routing.

Proof of Work Done

https://github.com/pckurdu/Build-Application-Using-Firebase-With-Electronjs-Part-1

Thank you for your contribution @pckurdu.
After analyzing your tutorial we suggest the following points:

We suggest you enter comments in the sections of your code. Comments are very important to help less experienced readers better understand what they are developing.
Another suggestion is your tutorial to have some images of the results of what you are developing. The reader would have better precept than he is building.

Thank you for your work in developing this tutorial.
Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Chat with us on Discord.

[utopian-moderator]

Sort Order:

Trending

[-]

portugalcoin (72) · 6 years ago

$11.60

18 votes

utopian-io (71) · 6 years ago

Thank you for your review, @portugalcoin! Keep up the good work!

$0.00

paulag (73) · 6 years ago

its great to see more tutorials being posted on steem. Tweeted for extra visibility

1 vote

steem-ua (64) · 6 years ago

Hi @pckurdu!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @pckurdu!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Build Application Using Firebase With Electronjs(Part 1)

Repository

Electron Github Address

AngularJs Github Address

My Github Adress

This Project Github Address

What Will I Learn?

Requirements

Difficulty

Tutorial Contents

Create Electron Application

In package.json

In main.js

In index.html

Create Firebase Project

Create Firebase Settings

In index.html

Routing Settings

Proof of Work Done

Hi @pckurdu!