How to: show code outline in Visual Studio?

 

.

1) View -> Open View

2) select (or type) Outline

3) You'll now get an Outline palette that shows full information on the class including properties and functions.

.

How to: run code directly from Git Hub

GitHub allows online users to share files but they cannot be directly loaded and executed. The solution to this ie for loading files such as JS and CSS is to load through RawGit. RawGit serves raw files directly from GitHub with proper Content-Type headers.

Steps:

First:- Sign up With GitHub

Second:- Creating a Repository on GitHub

Third:- Creating a GitHub Project to host JS and CSS files

Fourth:- Adding GitHub file or gist URL on RawGit for serving file on our Website.

REFERENCE: 

https://www.bloggerspice.com/2016/09/host-JavaScript-and-CSS-files-on-gitHub-through-rawgit.html

Code Igniter 3 REST Controller Project With Sqlite

1. Startup Project

This project is extended from the original tutorial at :

https://erthru.medium.com/membuat-restful-api-menggunakan-framework-codeigniter-3-f350755b1274
and
https://erthru.medium.com/membuat-restful-api-menggunakan-framework-codeigniter-3-part-2-163cadb32e3a

The author has provided a completed project codes at:
https://github.com/erthru/restCI
or
https://drive.google.com/file/d/1tYrLlnPb4Gc-9769LyoLOcYcVKf2tYl4/view?usp=sharing

2. Download codes

Download the code from the source at Step 1 above.

3. Upload codes

Upload the zip file to your server, extract the content and rename the folder as "restci".

4. Edit database configuration

Go into restci/application/config/ and edit the file database.php as follows:

'dsn' => '', 'hostname' => '', 'username' => '', 'password' => '', 'database' => './application/db/database.sqlite', 'dbdriver' => 'sqlite3', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE

5. Create Database

note: it is recommended to use DB Browser application to create the database. The application can be downloaded from https://sqlitebrowser.org/dl/

CREATE TABLE "tb_person" ( "id" INTEGER NOT NULL UNIQUE, "name" TEXT, "address" TEXT, "phone" TEXT, PRIMARY KEY("id" AUTOINCREMENT) )

6. Test Web Request

You should get a json output that shows no record in the database.

{"status":200,"error":false,"person":[]}

7. Test POST Request

Use a REST Client like POSTMAN to send POST Request according to the following settings:

Header content-type: application/json Body {"name":"suprianto","address":"jln testing","phone":"123"}

8. You should get a success response as follows:

{ "status": 200 "error": false "message": "Data person ditambahkan." }

9.Repeat Step 7

go to the url {{your serverpath}}/restci/index.php/person
Now you get the following json output:
{"status":200,"error":false,"person":[{"id":1,"name":"suprianto","address":"jln testing","phone":123}]}

10.Optional

If you want to hide the index.php string in the url, you can put .htaccess file in the restci folder. Put the following codes into the file. This requires Apache mod_rewrite enabled.

File: restci/.htaccess

<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> Now you can use the following url {{your serverpath}}//restci/person

11.Appendix

File: restci/application/controllers/TestApi.php

<?php // import library dari REST_Controller require APPPATH . 'libraries/REST_Controller.php'; // extends class dari REST_Controller class TestApi extends REST_Controller{ // constructor public function __construct(){ parent::__construct(); } public function index_get(){ // testing response $response['status']=200; $response['error']=false; $response['message']='Hai from response'; // tampilkan response $this->response($response); } public function user_get(){ // testing response $response['status']=200; $response['error']=false; $response['user']['username']='erthru'; $response['user']['email']='ersaka96@gmail.com'; $response['user']['detail']['full_name']='Suprianto D'; $response['user']['detail']['position']='Developer'; $response['user']['detail']['specialize']='Android,IOS,WEB,Desktop'; //tampilkan response $this->response($response); } } ?>

Sql Command: Person

create table tb_person ( id INT(20) PRIMARY KEY NOT NULL AUTO_INCREMENT, name TEXT, address TEXT, phone TEXT)

File: restci/application/models/PersonM.php

<?php // extends class Model class PersonM extends CI_Model { // response jika field ada yang kosong public function empty_response() { $response['status'] = 502; $response['error'] = true; $response['message'] = 'Field tidak boleh kosong'; return $response; } // function untuk insert data ke tabel tb_person public function add_person($name, $address, $phone) { if (empty($name) || empty($address) || empty($phone)) { return $this->empty_response(); } else { $data = array( "name" => $name, "address" => $address, "phone" => $phone ); $insert = $this ->db ->insert("tb_person", $data); if ($insert) { $response['status'] = 200; $response['error'] = false; $response['message'] = 'Data person ditambahkan.'; return $response; } else { $response['status'] = 502; $response['error'] = true; $response['message'] = 'Data person gagal ditambahkan.'; return $response; } } } // mengambil semua data person public function all_person() { $all = $this ->db ->get("tb_person") ->result(); $response['status'] = 200; $response['error'] = false; $response['person'] = $all; return $response; } // hapus data person public function delete_person($id) { if ($id == '') { return $this->empty_response(); } else { $where = array( "id" => $id ); $this ->db ->where($where); $delete = $this ->db ->delete("tb_person"); if ($delete) { $response['status'] = 200; $response['error'] = false; $response['message'] = 'Data person dihapus.'; return $response; } else { $response['status'] = 502; $response['error'] = true; $response['message'] = 'Data person gagal dihapus.'; return $response; } } } // update person public function update_person($id, $name, $address, $phone) { if ($id == '' || empty($name) || empty($address) || empty($phone)) { return $this->empty_response(); } else { $where = array( "id" => $id ); $set = array( "name" => $name, "address" => $address, "phone" => $phone ); $this ->db ->where($where); $update = $this ->db ->update("tb_person", $set); if ($update) { $response['status'] = 200; $response['error'] = false; $response['message'] = 'Data person diubah.'; return $response; } else { $response['status'] = 502; $response['error'] = true; $response['message'] = 'Data person gagal diubah.'; return $response; } } } } ?>

Machine Learning In JavaScript

 .

Machine Learning (ML)

Machine Learning is often considered equivalent with Artifical Intelligence.

This is not correct. Machine learning is a subset of Artificial Intelligence.

Machine Learning is a disipline of AI that uses data to perform supervised or unsupervised machine training.

What is Machine Learning?

ML systems combines Input to produce Predictions.

Key terminologies are:

• Labels
• Features
• Models
• Training
• Inference
• Functions

---

Machine Learning Labels

In Machine Learning terminology, the label is the thing we want to predict.

It is like the y in a linear graph:

y = ax + b

---

Machine Learning Features

In Machine Learning terminology, the features are the input.

They are like the x values in a linear graph:

y = ax + b

---

Machine Learning Models

A Model defines the relationship between the label (y) and the features (x).

There are three phases in the life of a model:

• Data Collection
• Training
• Inference

---

Data Collection

Machine Learning can teach a computer to solve many questions like:

• Is this cancer?
• Is this a banana?

Before Machine Learning can start, you need to collect some data.

If you want to predict house prices, you need to collect some information about house prices.

---

Machine Learning Training

The goal of training is to create a model that can answer our question. Like what is the expected price for a house?

---

Machine Learning Inference

Inference is when the trained model is used to infer (predict) values using live data. Like putting the model into production.

---

Using a Linear Regression Function

This Model predicts prices using a linear regression function:

Example

# Name the Axis
plt.title('House Prices vs Size')
plt.xlabel('Square Meters')
plt.ylabel('Price in Millions')

# Set x and y values
x = np.array([50,60,70,80,90,100,110,120,130,140,150,160])
y = np.array([7,8,8,9,9,9,9,10,11,14,14,15])

# Call Linear Regression Function
slope, intercept, r, p, std_err = stats.linregress(x, y)

# Plot Data
plt.scatter(x, y)
plt.plot(x, slope * x + intercept)
plt.show()

Try it Yourself »

In the example above, the slope and intercept is calculated by a function called linregress.

From Previous Chapter

A linear relationship is written as y = ax + b

Where:

• y is the price we want to predict
• a is the slope of the line
• x are the input values
• b is the intercept

---

With Machine Learning

With ML, a linear relationship is written as y = b + wx

Where:

• y is the label we want to predict
• w is the weight (the slope)
• x are the features (input values)
• b is the intercept

Sometimes there can be many features (input values) with different weights:

y = b + w1x1 + w2x2 + w3x3 + w4x4

.

https://web.archive.org/web/20210220012931/https://www.w3schools.com/ai/ai_machine_learning.asp

.

Artificial Intelligence In JavaScript

.

Artificial Intelligence

❮ PreviousNext ❯

AI in JavaScript

These days, several JavaScript AI framework are emerging.

JavaScript frameworks make it possible to execute AI tasks in the browser.

AI and JavaScript

Artificial Intelligence has changed the science of image processing, computer vision, and natural language applications.

Thanks to new AI libraries, JavaScript developers can now build machine learning and deep learning applications without Python or R. This way JavaScript can help developers to bring AI to the browser and to the web.

---

Is JavaScript Good for AI?

Most AI applications these days use R or Python.

But JavaScript has a great future as an AI language, and it even has a some advantages:

• JS is better known. All developers can use it.
• Security is built in. JS cannot access your files.
• JS is faster than Python.
• Modern JS compiles into machine code.
• Modern JS can use hardware acceleration.

---

WebGL API

WebGL is a JavaScript API for rendering 2d and 3D graphics in any browser.

WebGL can run on both integrated and stanalone graphic cards in any PC.

WebGL brings 3D graphics to the web browser. Major browser vendors Apple (Safari), Google (Chrome), Microsoft (Edge), and Mozilla (Firefox) are members of the WebGL Working Group.

WebGL 1.0 was released in March 2011.

WebGL 2.0 was released in January 2017.

---

TensorFlow Playground

TensorFlow Playground is a web application written in d3.js.

With TensorFlow Playground you can learn about Neural Networks (NN) without math.

In your own Web Browser you can create a Neural Network and see the result.

---

Plotting in JavaScript

Enter Equation:

Plotting provided by: Plotly

.

https://web.archive.org/web/20210220012909/https://www.w3schools.com/ai/ai_javascript.asp

.

[How To] Create PHP SLIM SQLITE project on Glitch.com

 

1. Register your Glitch account.

Go to https://glitch.com/

Click the sign up button.

You are allowed to register using your Google account.

2. Create a new project.

Select the option to import from GitHub.

Import from: https://github.com/infotechrazzi/phpslimsqlite

3. Add Glitch config file

Go to root folder.

Create glitch.json :

{

"install": "composer install",

"start": "composer start",

"watch": {

"ignore": [

"logs"

]

}

}

Create composer.json:

{

"scripts": {

"start": "php -S 0.0.0.0:8080 -t public index.php"

}

}

4. Run

You should get the following default output:

{"action":"none","actionstatus":"done","result":"HELLO"}

Done.

3 Best Alternatives to Adobe PhoneGap after shutdown

 .

On August 11, 2020, we witnessed the end of an era.

Adobe, the powerhouse behind Adobe PhoneGap has officially announced the PhoneGap is shutting down – and with it so is PhoneGap Build. And if that isn’t enough, in the same article, Adobe explains that they will also stop their investment in Apache Cordova. Although this may not come as a shock or a surprise for some, the announcement has made quite a ripple. And the most important question this announcement raises, are Ionic and React Native the best alternatives to PhoneGap?

So in this article, we will look into what PhoneGap is, what it does, and why was it such an important pillar in the development world. We will also compare PhoneGap and Apache Cordova to better understand the differences between the two technologies. Finally, we will do a quick recap on our knowledge about Ionic and React Native, and see if they truly are the best alternatives. Enjoy!

What is Adobe PhoneGap

PhoneGap is an open-source framework for developing cross-platform mobile applications. The project itself was initially started in 2008 by Nitobi, a Canadian web development company. During an iPhone Development Camp, the team at Nitoby tried to create a new technology that would bridge the gap between mobile and web technologies. Needless to say, the “experiment” was a success, and so PhoneGap came to life. And, yes, the name is a play on the words “Phone” and “Gap”.

In fact, this project was so successful that more and more contributors joined in. In 2011, Adobe acquired Nitobi, and the team’s only focus now was developing this revolutionizing new technology. As a part of the acquisition, Nitobi added the PhoneGap code to the Apache Software Foundation (ASF), under the new name of Apache Callback – now known as Apache Cordova. Since the team behind PhoneGap promised the framework will forever be free and open-source, Adobe introduced a different paid service based on PhoneGap, PhoneGap Build.

What is PhoneGap Build

PhoneGap Build at its core is a compiler based on the PhoneGap framework. In simple terms, a compiler is like a translator. It is a program that helps a device or a platform to read and execute statements from different programming languages – the software. 

In this case, specifically, a developer writes the code in HTML, CSS, and JavaScript and uploads it to PageGap Build. The system would then compile the code so that different mobile platforms – iOS, Android, and Windows.- understand and execute the code. In other words, it translates the web code into native code 

However, as PhoneGap Build is a paid service provided by Adobe, it also comes with other features. For one, teams can create projects in PhoneGap Build and collaborate with each other faster and smoother. The service also comes with Hydration, a tool that speeds up debugging by sending every update directly to the testers’ devices. 

Adobe PhoneGap vs Apache Cordova

Many of us often confuse Apache Cordova with PhoneGap, sometimes even thinking they are the same thing. And understandably so. At their core, Apache Cordova and Adobe PhoneGap are very similar, since they were “born” from the same project. However, the two technologies are not one and the same.

PhoneGap vs Cordova

Apache Cordova is actually the free, open-source fork of PhoneGap. This means that anyone can contribute to the project or use it to build applications. PhoneGap, on the other hand, is the Adobe-branded version, or simply put the paid version. So, while Apache Cordova is mainly maintained by the open-source community, PhoneGap is exclusively maintained by Adobe.

Why is Phone Gap shutting down

The answer to this question sums up in three little words – Progressive Web Applications or PWAs for short. Ever since PhoneGap was created back in 2008, its purpose was to break the barrier between the web and mobile technologies. But ever since progressive web applications hit the market, they evolved into a fierce competitor. Especially because of progressive web applications “live” in browsers. So, they are available for anyone, no matter the device, and they are indexed like every other website making them easier to find.

However, until recently progressive web apps were missing two key features – offline support and push notifications. But that is not the case anymore. Progressive web apps today have “workers” – built-in mechanisms that make PWAs work the way they do – that ensure the application is functional even when the device is offline. Moreover, push notifications for PWAs are now supported by all browsers except for Safari.

On top of that, the development process for PWAs is just so much simpler – no adjustments to the code, no containers or compilers, no pushing the app for review. Build once, deploy, and maintain, that’s it. Coincidentally or not, Adobe also stated a decline in PhoneGap usage. 

So considering everything, it really comes as no surprise that they shifted focus from PhoneGap and moved towards PWAs. As a result, Adobe stopped development for PhoneGap and its support for Apache Cordova. However, to give their customers a chance to migrate from Adobe PhoneGap to other alternatives, they will keep PhoneGap Build active until October 1st, 2020.

Apache Cordova after PhoneGap shuts down

While Adobe is dropping both technologies, Cordova still has a community behind it. And currently, Cordova powers many of the apps available in both Google Play and App Store. In other words, Cordova has nothing to worry about.

Additionally, PhoneGap and Cordova are part of the same initial project, based on the same technology. So migrating from PhoneGap to Cordova would be a smooth transition for both customers as well as developers. This is also the main reason why Cordova was Adobe’s first alternative suggestion. As for compiler alternatives to PhotoGap Build, there are plenty of Cordova-based options such as Monaca or Framework 7.

Ionic as an alternative to Adobe PhoneGap

Ionic is a mobile framework for cross-platform mobile development built as an alternative to PhoneGap from the beginning. Back in 2013, when Ionic was launched, PhoneGap was the go-to cross-platform solution. But developers were missing a UI library, and had to build everything from scratch. 

So, Ionic made use of the up and coming Angular framework and created that library for mobile developers. In simple terms, Ionic and PhoneGap are both based on Cordova. However, while PhoneGap uses vanilla Javascript, Ionic uses Angular – a well known and vastly used JavaScript frontend framework.

Ionic vs PhoneGap vs Cordova

The “battle” between Ionic and Adobe for the 1st place in cross-platform mobile development has been going on ever since 2013. But, now that PhoneGap is shutting down, Adobe is finally stepping down. In fact, recently, Adobe worked closely with the Ionic team to put together a migration plan for PhoneGap customers.

The full documentation is available online and comes with step-by-step instructions on how to migrate from PhoneGap Build to Ionic Appflow. Just like PhoneGap Build, Ionic’s Appflow is a DevOps tool allowing developers to build, deploy, and maintain applications from within one platform. And if the guide is not enough, Ionic also provides paid advisory services.

Other alternatives to PhoneGap

While Ionic seems like the best migration solution, there are plenty of cross-platform mobile development tools out there.Let’s take NativeScript for example. Much like PhoneGap, NativeScript works with vanilla JavaScript. But unlike PhoneGap, NativeScript also works with Javascript frameworks like Angular or VueJS. Another advantage this mobile development tool has is that NativeScript communicates directly with native components. In comparison, most cross-platform technologies need Java or Swift adjustments to do that.

Speaking of “almost” native technologies, our second alternative is of course React Native. React Native is the mobile cross-platform framework built by Facebook for its mobile application. This technology is based on ReactJS and is focused on performance and scalability above everything else. 

On top of that, React Native provides an almost perfect native feel, which in the eyes of any user is a big plus. While PhoneGap and React Native are rather different, this doesn’t mean one can’t migrate from PhoneGap to the latter. And with the enormous community behind React Native, it is almost a certainty that there will be someone there to help with the process. 

Conclusion

PhoneGap will forever be known as the pioneer of cross-platform mobile development. More importantly, PhoneGap provided both an example and an inspiration for mobile development technologies out there. But, with progressive web applications evolving to an almost native level, Adobe decided it is time to move on. As a result, PhoneGap development has stopped, and so is Adobe’s support for Apache Cordova.

However, PhoneGap customers still have until the 1st of October to migrate to different platforms. After that date, PhoneGap Build will also shut down. So far, Ionic seems like the best choice for the migration, as the Ionic team and Adobe worked closely on a migration guide. Two other alternatives, aside from Ionic, are React Native and NativeScript. Both technologies are excellent for building native-like applications and both benefit from a vast community. So migrating to either will not be an issue.

.

https://wiredelta.com/3-best-alternatives-to-adobe-phonegap-after-shutdown/