投稿時間:2023-03-28 16:24:27 RSSフィード2023-03-28 16:00 分まとめ(29件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
ROBOT	ロボスタ	『LOVOT』との生活を資生堂と共同実験　絆形成ホルモンが高く、ストレス低下が期待できることが判明　麻布大学が協力	https://robotstart.info/2023/03/28/lovot_shiseido_-oxytocin.html		2023-03-28 06:18:53
IT	ITmedia 総合記事一覧	[ITmedia ビジネスオンライン] さんぽセルの次は「醤油さし」　飲食店での“テロ行為”を防止	https://www.itmedia.co.jp/business/articles/2303/28/news130.html	itmedia	2023-03-28 15:27:00
IT	ITmedia 総合記事一覧	[ITmedia PC USER] Gloture、手のひらサイズのCeleron搭載ミニデスクトップPC	https://www.itmedia.co.jp/pcuser/articles/2303/28/news138.html	celeron	2023-03-28 15:17:00
TECH	Techable（テッカブル）	東亜道路工業、道路のたわみ量と路面性状を測定できる車両「MWD plus」を運用開始	https://techable.jp/archives/201153	mwdplus	2023-03-28 06:00:46
IT	情報システムリーダーのためのIT情報専門サイト IT Leaders	オルツ、音声認識の書き起こしを人手で修正する「AI GIJIROKU 100」、100%の精度を保証 | IT Leaders	https://it.impress.co.jp/articles/-/24642	オルツ、音声認識の書き起こしを人手で修正する「AIGIJIROKU」、の精度を保証ITLeadersオルツは年月日、議事録生成ツール「AIGIJIROKU」のオプション機能として、議事録の書き起こしにおいての精度を保証する「AIGIJIROKU」を提供すると発表した。	2023-03-28 15:55:00
IT	情報システムリーダーのためのIT情報専門サイト IT Leaders	パナソニック、顔認証クラウドの顔認証エンジンを強化、一度に100万人を照合可能に | IT Leaders	https://it.impress.co.jp/articles/-/24640	itleaders	2023-03-28 15:19:00
Docker	dockerタグが付けられた新着投稿 - Qiita	SynologyのNASでdocker環境のNginxをhttpsでを使ってみた	https://qiita.com/taro373/items/53737a3590e1daa12412	docker	2023-03-28 15:08:37
golang	Goタグが付けられた新着投稿 - Qiita	Go言語で説明する「カプセル化」について	https://qiita.com/atsutama/items/fe314c38f3f1ed8af8c8	説明	2023-03-28 15:06:07
技術ブログ	Hatena::Engineering	YAPC::Kyoto 2023ノベルティのPerl Poemを読み解く	https://developer.hatenastaff.com/entry/2023/03/28/153013	YAPCKyotoノベルティのPerlPoemを読み解くチーフエンジニア兼エンジニアリングマネージャのidtaraoです。	2023-03-28 15:30:13
海外TECH	DEV Community	Build your own CMS using low-code	https://dev.to/tooljet/build-your-own-cms-using-low-code-2lgo	Build your own CMS using low codeIn this tutorial We will build CMS Content Management System using the ToolJet which is a lowcode application development platform The CMS can be used to perform CRUD operations to the MongoDB which is used as the database for the NextJS application Table of ContentsOverviewPrerequisitesSetting up the databaseConnecting MongoDB to ToolJetBuilding the UI Queries and connecting themConnecting to NextJS app OverviewA content management system CMS is an application used for managing content creation and modification usually articles and blog posts containing images and videos WordPress CMS is one of the popular CMS CMSs make it easy to perform CRUD operations create read update and delete without coding knowledge ToolJet is a free and open source low code app development platform that allows you to build applications quickly and has more than datasources including MongoDB that will let you seamlessly perform operations on your database You can create a free account on ToolJet Cloud or run it on your local machine Many developers use databases like MongoDB and frameworks like NextJS for their full stack web applications Sometimes performing CRUD operations can be time taking for developers and can be hectic for someone who is not familiar with running database queries In this tutorial we will build an app using ToolJet that will solve these problems The CMS app will be connected to the MongoDB database to perform CRUD operation and the changes will be reflected on the NextJS application Want to use the app without going through the complete tutorial Import the exported application JSON file to your ToolJet account Here s the file Once imported the application you ll need to connect the MongoDB datasource using host details or connection string PrerequisitesMongoDB database You can set up the MongoDB database locally or use Atlas For this tutorial we are going to use Atlas ToolJet A free and open source low code platform that allows you to build applications quickly Sign up here NextJS app We will learn how to build one sample app using the command line later in this tutorial Setting up the databaseOnce you have created an account on MongoDB Atlas you ll be asked to enter the username and password for your database not the same as what you use to log into the MongoDB cloud Once done you ll be redirected to your project s database deployment where you can create manage Clusters You can create a new Cluster and choose a configuration according to your preference As you can see in the screenshot above we have Cluster deployed Go to the browse collections and create a new database cms with three collections posts authors and tags posts this collection will store all the blog posts informationauthors this collection will store information on all the authorstags this collection will store the tagsLet s insert at least one sample document in each collection For posts id the object id will be generated by MongoDB automatically title enter the title of the blog posts subtitle enter the subtitlecontent enter the content body of blog postscover enter the URL of the cover imageauthor name enter the name of the authortag name enter the tag namepublished on enter the date in DD MM YYYY formatThe data type of all the records should be string Similarly we will insert documents in authors and tags For authors id the object id will be generated by MongoDB automatically author name name of the authorauthor email email of the authorauthor image URL of author s headshot imageFor tags id the object id will be generated by MongoDB automatically tag name name of the tagOnce you have inserted the sample documents in all three collections we are good to go Our database is ready Now let s go to ToolJet and connect the database Connecting MongoDB to ToolJetLet s go to the ToolJet dashboard and create a new app Once you click the New App button an untitled app will open in the app builder You can rename the app from the toolbar On the left sidebar you ll find the third option for adding or editing datasources Click on the add datasource and a modal will pop up with a list of all the available datasources Select MongoDB from the list and enter the credentials for connecting For this tutorial we are using MongoDB Atlas to connect to MongoDB datasource using the connection string You can find your connection string by going to the MongoDB Atlas dashboard Go to Database Deployments on the Atlas and click on the Connect button next to the cluster name Cluster in our case A connection dialog will pop up to choose the method by which you want to connect click on the second option Connect your application Once you click on the second option you ll get the connection string click on the copy button next to it to copy the string The string that you ll copy will be like this mongodb srv testusername lt password gt cluster ncnial mongodb net retryWrites true amp w majority where testusername is the database username that we created before we will need to replace lt password gt with the password that we created for this database and then remove everything after net and add your database name in our case the name of the database is cms So the actual connection string will be mongodb srv testusername fakepassword cluster ncnial mongodb net cmsCopy paste the connection string on the ToolJet and click on the test connection button to test the connection before saving the datasource once the connection is successful then save the datasource Now that we have successfully connected the MongoDB database we can build the user interface of the CMS app Build the UI of the CMS appLet s start building the UI of the CMS application using ToolJet which is a low code application development platform The CMS application is a multi page application that will have the following pages All Posts New Post Edit Post View Post Authors and TagsIn the previous section we connected the MongoDB datasource to a new application Now all we need to do is build the UI and then create queries and connect them with the UI The very first thing we are going to do is create Pages in our application We can find the Pages option on the left sidebar from where we can add the pages to the application Let s add the following pages all postsnew postedit postview postauthors tagsBefore we begin with UI it is recommended to learn about ToolJet s app builder All Posts UIThe All Posts page will show the list of all the blog posts This is going to be the home page of the application and from this page we can navigate to other pages This page will use the listview component to show a list of blogs and buttons to navigate other pages Let s build the UI Let s drag a container on the canvas and increase its height to reach the bottom and its width to both sides You can click on the handle of the container to edit its properties Drag a text component and set its value to lt h gt All Posts lt h gt Yes we can use HTML tags inside the text component to format text value Drag a divider below the text component Now drag two button components above the right side of the divider and style the buttons For the first button we will set the button text to New Post and edit its Styles Set the button color to a text color to white ffffff loader color to white border radius to border color to aAdd an Event Handler to the New Post button choose switch page action and then select the new post from the dropdown Now whenever the button is clicked New Post page of the application will be loaded For the second button we will set the button text to Authors and Tags and edit its Styles Set the button color to white ffffff text color to a loader color to a border radius to border color to aAdd an Event Handler to the Authors amp Tags button choose switch page action and select the authors tags from the dropdown Now whenever the button is clicked Authors amp Tags page of the application will be loaded Now drag a listview component below the divider Go to its Styles and set the border color to white Let s add components inside the listview Remove the image component and add three text components and two buttons as shown in the image below Currently the listview looks very rough since we haven t styled the nested components text and buttons yet To make it look better we can add some styling to the components and some placeholder text until we create the query for the data to be loaded into the listview Let s edit the properties and styles of the nested text components and buttons text Text Title of the blog Font weight Bold Font size text Text By Author Font weight Lightertext Text Tag Font weight Lighterbutton Button text ️ Background color white Border radius Border color eeebutton Button text ️ Background color white Border radius Border color eeeFor the view ️and edit ️buttons inside listview we need to add event handlers On both buttons we need to add an event handler for set variable event that creates a variable selectedListViewIndex and the variable value will be listItem id this value will be there once we create the query Another event handler that we need to add is to switch the page for the edit button link edit post page and for the view button link view post page The UI of the All Posts page is almost finished now let s go ahead and build the queries and connect to the UI All Posts QueriesLet s build the required query for loading the data on All Posts page Since we are only loading the list of all the blogs from the database on the listview we need to build a single query postsGo to the query panel at the bottom of the app builder create a new MongoDB query and name it as postsSelect the Find Many Operation from the dropdown options and then enter the Collection name as posts which is the name of the collection in our cms db that we created in MongoDB AtlasFrom the Advanced section toggle on the Run query on application load option and then save the query This will execute the query every time the app is loaded Run the query to trigger it and we can check the data returned by the query from the inspector panel on the left sidebar authorsCreate a new MongoDB query and name it as authorsSelect the Find Many Operation from the dropdown options and then enter the Collection name as authors which is the name of the collection in our cms db that we created in MongoDB AtlasFrom the Advanced section toggle on the Run query on application load option and then save the query This will execute the query every time the app is loaded Run the query to trigger it and we can check the data returned by the query from the inspector panel on the left sidebar tagsCreate a new MongoDB query and name it as tagsSelect the Find Many Operation from the dropdown options and then enter the Collection name as tags which is the name of the collection in our cms db that we created in MongoDB AtlasFrom the Advanced section toggle on the Run query on application load option and then save the query This will execute the query every time the app is loaded Run the query to trigger it and we can check the data returned by the query from the inspector panel on the left sidebar All Posts Connecting queries data to UINow that we have the posts authors and tags data from the database we can populate the listview component Edit the properties of the ListView component and set the List data value to queries posts data The rows will be added to the listview but the actual data won t show up because the components inside the listview currently hold the placeholder values Let s remove the placeholder values from the components inside the ListView Go to the text component whose value is Title of the blog and set its value to listItem title Set the value of the second text component to By listItem author name listItem published on Set the value of the third text component to listItem tag name We are finally done with the All Posts page all we need to do now is build the UI of the remaining pages and then connect the queries New post UIThe New Post page will be used to create a new blog post and insert it into the collection posts Let s click on the New Post button on the top of the All Post page and switch to the new post page as we have already added the event handler to the button This page will use the container component as the body and we will nest components like text text input dropdown etc to create a form like structure for getting the input from the users Let s build the UI We are going to build a UI similar to the UI that we build for the All Posts page First we will drag a container component onto the canvas and then we will use the text component for the Title of the page i e New Post with a divider component below it On the right side of the divider we can simply copy and paste the Authors amp Tags button from the All posts page and paste it into the New Post page Change the button text to lt Back and add the event handler to switch the page to all postsNow we are going to drag components and build a form like structure below the divider component We are going to drag a text component set its value to Title set Font weight to Bold and Font Size to We will copy paste using keyboard shortcuts the Title text component more times and then change their text to Subtitle Content Cover Image Author and Tag respectively Now we will place the following components next to the headings Title text input component and set placeholder to TitleSubtitle text input component and set placeholder to SubtitleContent text area component and set placeholder to ContentCover Image text input component and set placeholder to Cover ImageAuthor dropdown component and set placeholder to AuthorTag dropdown component and set placeholder to TagSet the value of the border radius of all the input components to to make them look betterOur form is almost complete now at the bottom of the page we will add a button We will copy paste the button from the All Posts page and change the button text to Submit Remove the existing event handlers and add an event handler to switch the page to all posts We will add another event handler once we create the query for submitting the form The UI for creating a new blog post is ready now let s create the query for inserting the form values into the database New post Queries add postCreate a new MongoDB query and name it as add postSelect the Insert One Operation from the dropdown options and then enter the Collection name as posts which is the name of the collection in our cms db that we created in MongoDB AtlasIn the Document field enter the following title components textinput value subtitle components textinput value content components richtexteditor value cover components textinput value author name components dropdown value tag name components dropdown value published on moment format DD MM YYYY In the code snippet above we are dynamically getting values from the input components Go to the bottom of the query manager and add the event handler to run the query on the Query Success event and select the posts query Doing this will trigger the posts query every time this add post query is successful or simple words whenever the user submits the blog then the list of the blogs will be refreshed on the front end Finally Save the query New post Connecting queries data to UIOn this page all we need to do is connect the query that we created in the previous step to the submit button so that whenever the button gets clicked the query for inserting the post is triggered and then the page switches to the home page i e All Posts page Click on the handle of the Submit button and go to the Events section under its properties While building the UI we already added an event handler for switching the page to all posts now we need to add another event handler to Run the query on the On Click event gt Select the add post query Move the Run query event handler above the Switch Page event handler to ensure the query runs first and then the page switches to the home page Edit post UIThis page is going to be the clone of the New Post page we will replace the Submit button with the update button and will add another button for deleting the selected post Let s go Let s go to the New Post page and select the container Press ctrl cmnd c go back to the Edit Post page and press ctrl cmnd v doing this will clone the container entirely including the nested components from the New Post page Change the Title from New Post to Edit PostSet the default values of the following input components Default Value for Title s text input queries posts data filter post gt post id variables selectedListViewIndex title Default Value for Subtitle s text input queries posts data filter post gt post id variables selectedListViewIndex subtitle Default Value for Content s text area queries posts data filter post gt post id variables selectedListViewIndex content Default Value for Cover Image s text input queries posts data filter post gt post id variables selectedListViewIndex cover Default Value for Author s dropdown component queries posts data filter post gt post id variables selectedListViewIndex author name Option Value for Author s dropdown component queries authors data map i gt i author name Option Labels for Author s dropdown component queries authors data map i gt i author name Default Value for Tag s dropdown component queries posts data filter post gt post id variables selectedListViewIndex tag name Option Value for Tag s dropdown component queries tags data map i gt i tag Option Labels for Tag s dropdown component queries tags data map i gt i tag Let s go to Submit button and change the button text to Update We will keep both the event handlers as it is and will replace the query in the Run Query handler later once we build the query Copy the Back button from the top and paste it below next to the Update button Change the button text to Delete We will add the event handler in the next section when we create the query Go to the Styles change the button text and border color to red The UI of the Edit Post section is finished We also updated the default values of the components so that whenever a listItem is clicked from the homepage the details of the selected blog details get updated on the edit page field values Edit post queries delete postCreate a new query from the query panel and name it delete postSelect the Find one and delete Operation from the dropdown options and then enter the Collection name as postsIn the Filter field value enter title queries posts data filter post gt post id variables selectedListViewIndex title Scroll to the bottom add an event handler to run the query on the Query Success event and select the posts query and then Save the query update postCreate another MongoDB query from the query panel and name it update postSelect the Find one and update Operation from the dropdown options and then enter the Collection name as postsIn the Filter field value enter title queries posts data filter post gt post id variables selectedListViewIndex title In the Update field value enter set title components textinput value subtitle components textinput value content components richtexteditor value cover components textinput value author name components dropdown value tag name components dropdown value Scroll to the bottom add an event handler to run the query on the Query Success event and select the posts query and then Save the query Edit post Connecting queries data to UINow all we need to do is update the event handlers on the Update and Delete buttons Click on the handle of the Delete button to edit its properties Go to Events and change the query in the Run Query event to delete postSimilarly we will update the event handler of the Update button Open its properties go to Events and change the query in the Run Query event to update post View post UIThis page will be loaded when the ️ view button is clicked next to the item in the listview on the All Posts page Let s build the UI Go to the home page All Posts page and click on the ️ view post button next to the list item to load the view post pageOnce the view post page is loaded drag a container component onto the canvas Expand the container completely both vertically and horizontally to fit the entire canvas Go to either of the page New Post or Edit Post copy the back button and paste it on the view post page Drag a divider component below the button Now let s drag the following components and set their properties and styles text component for showing the Title text queries posts data filter post gt post id variables selectedListViewIndex title font weight bold font size text component for showing the Subtitle text queries posts data filter post gt post id variables selectedListViewIndex subtitle font weight bold font size text component for showing the Author text Author queries posts data filter post gt post id variables selectedListViewIndex author name font weight bold font size image component for displaying the Cover Image URL queries posts data filter post gt post id variables selectedListViewIndex cover text component for showing Content text queries posts data filter post gt post id variables selectedListViewIndex content font weight normal font size View post QueriesThis page doesn t requires any queries The data on this page is loaded using the queries that we created previously View post Connecting queries data to UIWe have already connected the data while building the UI We are using variables that we created previously to filter the data according the clicked list item For ex for loading the Title of the selected list view item we have set the value queries posts data filter post gt post id variables selectedListViewIndex title Authors amp Tags UIWe are finally at the last page of the application In this page we are going to display the list of all the author and all the tags From this page we can perform CRUD operations on authors and tags collection in database Let s build the UI Go to the homepage All Posts page of the application and click on the Authors amp Tags button on the page this will redirect you to the authors tags pageDrag a container onto the canvas and resize both vertically and horizontally it to fit the canvas Copy the back button from any of the other pages and paste it on the top right of this pageLet s add two text components use html tags to make them into Title Authors TagsAdd two divider components below the titles and two tables respectively Now we will be adding two buttons one for adding the authors into the database and the other for adding tags into the database We can copy the New Post button from the home page to keep the styling same Remove the event handlers and change the button text to Add Drag three modals somewhere below the container These modals will be shown when the following buttons are clicked Add button for Authors Add button for tags and View action button on Authors table Toggle off the Use default trigger button for all the three modals Go to the properties of Add button for Authors add an event handler to show the modal Click on the button to show the modal Once the modal loads click somewhere outside the modal then drag the components from the components library onto the modal text components Author Name Author Email and Author Image text input components name email image URLA button component for triggering the query that we will create in the next section set the button text to AddJust like the Add button for Authors we are going to add an event handler on the Add button for tags to trigger modal open the modal and add the following components inside the modal text input components TagA button component for triggering the queries that we will create in the next section set the button text to Add TagGo to the Authors Table add two Action buttons View and Remove On View action button we will add an event handler to show the modal and the Remove action button will trigger the query that will remove the selected author from the collection Click on the View button to show the modal add components inside the modal just like we have added components in the previous modals text components text components table selectedRow author name amp components table selectedRow author email keep the font weight bold for the first text component image component to display the author image components table selectedRow author image Go to the Tags Table and add one Action button Delete This action button will trigger the query that will remove the selected tag from the collection Authors amp Tags Queries add authorsCreate a new MongoDB query name it add author select insert one from the operations dropdown and enter authors in the collection field In the Document field enter author name components textinput value author email components textinput value author image components textinput value Go to the bottom and add an event handler to run authors query on Query Success Event Finally Save the query add tagsCreate a new MongoDB query name it add tag select insert one from the operations dropdown and enter tags in the collection field In the Document field enter tag components textinput value Go to the bottom and add an event handler to run tags query on Query Success Event Finally Save the query delete authorCreate a new MongoDB query name it delete author select delete one from the operations dropdown and enter authors in the collection field In the Filter field enter author name components table selectedRow author name Go to the bottom and add an event handler to run authors query on Query Success Event Finally Save the query delete tagCreate a new MongoDB query name it delete tag select delete one from the operations dropdown and enter tags in the collection field In the Filter field enter tag components table selectedRow tag Go to the bottom and add an event handler to run authors query on Query Success Event Finally Save the query Authors amp Tags Connecting queries data to UILet s connect the queries to the table components to display the data and the button components for triggering the insert and delete queries Go to the Author s table edit its properties and set table data to queries authors data The columns will be auto populated Enable the highlight selected row from the options and set the loading state of the table to queries delete author isLoading queries authors isLoading Edit Remove action button and add the event handler to run the delete author query This will remove the author from the database whenever the action button is clicked Click on the Add Authors button to show the modal inside modal there is a Add button for submitting the form Add the following event handlers to this button st event handler to run the query add authorthe next event handlers to control the component Components will be the three text inputs that are there in the modal and the Action will be Clear Adding these event handlers will clear the form as soon as the add author query is triggered last event handler for closing the modal Now we are going to add the event handlers to Add button for the Tags st event handler to run the query add tagthe next event handler to control the component Select the text input component that is there in the form and set the Action to Clear last event handler for closing the modal Finally go to the Tags table and set the table data to queries tags data The columns will be auto populated Enable the highlight selected row from the options and set the loading state of the table to queries delete tag isLoading queries tag isLoading Edit delete action button and add the event handler to run the delete tag query Connecting to NextJS appUsing the connection string we can connect the MongoDB Atlas database to any NextJS app In this section we will locally set up a NextJS application and then connect it to the MongoDB database to load the data on the front end Requirements MongoDB Atlas databaseNodeJS npm and npxVercel Optional if you want to deploy your NextJS app Building NextJS appGo to the terminal and enter the following command npx create next app example with mongodb nextblogWe are using the npx create next app command and are passing the example with mongodb parameter which will tell create next app to bootstrap our app with the MongoDB integration example Finally nextblog is the name of our application Executing this command will take a couple of seconds to download and install all the npm dependencies but once they re downloaded and installed navigate to your project directory by running cd nextblogInstall all the npm dependencies by running npm installNow let s start up our application To start our Next js app execute npm run devOnce the app is built successfully we can navigate to localhost to see our app live in action We will get an error similar to the one in the screenshot above because the app is built but we haven t connected our MongoDB database yet to the application So let s do that Connecting MongoDBOn the nextblog directory we can find the env local example file We can rename the file to env local and then edit it In this file we will need to enter the value for MONGODB URI and MONGODB DB variable MONGODB URI is nothing but the connection string till and MONGODB DB will be the name of the database Go to the beginning of the tutorial to learn how we can obtain the connection string from the Atlas The env local file will look like this As soon as you save these environment variables go to the browser and you ll see that the error is gone and with mongodb Next js app welcome page is loaded Querying MongoDB with Next jsThe first example we ll look at is building and exposing an API endpoint in our Next js application To create a new API endpoint route we will first need to create an api directory in our pages directory and then every file we create in this api directory will be treated as an individual API endpoint Let s go ahead and create the api directory and a new file in this directory called posts js This endpoint will return a list of all the blog posts from our posts collection in the MongoDB database The implementation for this route is as follows import connectToDatabase from lib mongodb export default async function handler req res const db await connectToDatabase const data await db collection posts find toArray res json data Go to the lib mongodb ts file and update the existing code to the following code import MongoClient from mongodb const MONGODB URI MONGODB DB process envif MONGODB URI throw new Error Please define the MONGODB URI environment variable inside env local if MONGODB DB throw new Error Please define the MONGODB DB environment variable inside env local Global is used here to maintain a cached connection across hot reloads in development This prevents connections growing exponentially during API Route usage let cached global mongoif cached cached global mongo conn null promise null export async function connectToDatabase if cached conn return cached conn if cached promise const opts useNewUrlParser true useUnifiedTopology true cached promise MongoClient connect MONGODB URI opts then client gt return client db client db MONGODB DB cached conn await cached promise return cached conn Now if we navigate to localhost api posts we ll see a result that looks like this Finally let s update the pages index ts file to use this JSON response and display the formatted data on the homepage import Head from next head import connectToDatabase from lib mongodb import InferGetServerSidePropsType from next import title from process export async function getServerSideProps context const db await connectToDatabase const data await db collection posts find toArray const allposts JSON parse JSON stringify data return props posts allposts export default function Home posts console log posts return lt div gt lt Head gt lt title gt Nextbnb lt title gt lt link rel icon href favicon ico gt lt link href dist tailwind min css rel stylesheet gt lt link gt lt Head gt lt div className md container md mx auto gt lt p gt All Posts lt p gt lt ul gt posts map post gt lt li key post id gt post title by post author name on post published on lt li gt lt ul gt lt div gt lt div gt Finally navigate to http localhost Tada Now you can see the posts collection data on the homepage of the application This is just the rough presentation of the data on the frontend you can make further changes to improve the UI Putting it all togetherIn this tutorial we walked through the MongoDB Atlas and created a database with three different collections learned how to quickly build a multipage application using ToolJet and finally we connected our MongoDB database to the Next js application and executed queries If you have any questions or feedback reach out through the ToolJet Slack community and let me know what you want to build with ToolJet and MongoDB	2023-03-28 06:21:33
海外TECH	DEV Community	Interface Extensions/Merging in TypeScript	https://dev.to/tomoy/interface-extendingmerging-in-typescript-3fjb	Interface Extensions Merging in TypeScriptTypeScript has the capability of extending and merging interfaces Our development will be more efficient by utilizing these advanced features Basic Usage of InterfacesInterfaces are similar to object type aliases Here is a comparison between an interface and an aliased object type type Vehicle wheels number maker string interface Vehicle wheels number maker string This type and interface can be used in almost the same way In this article I will dig deeper into the interface to introduce more advanced techniques Interface ExtensionsYou may notice that some interfaces sometimes look similar to each other when it comes to a big project If some interfaces have common properties it is a good time to extend one interface and make another one Let me show an example interface Vehicle wheels number maker string interface Car extends Vehicle power gas electricity interface Bicycle extends Vehicle folding boolean const myCar Car wheels maker Toyota power gas OKconst car Car wheels maker Honda power gas folding false Error Type wheels number maker string power gas folding boolean is not assignable to type Car Object literal may only specify known properties and folding does not exist in type Car const bicycle Bicycle wheels Error Property folding is missing in type wheels number but required in type Bicycle Both Car and Bicycle interfaces have common properties wheels required and a maker optional Therefore they can derive these properties from the Vehicle interface Cool You can avoid repetitive code by using this technique What If You Declare the Same Property in a Child Interface It is possible to declare the same name of the property again when making a descendant interface However it does not mean you can freely override the parent s property The rule is you can override a property as long as a new re declared property is assignable to the parent one Here is an example interface Vehicle wheels number maker string interface Car extends Vehicle power gas electricity interface ElectricCar extends Car power electricity OKinterface FuturisticCar extends Car power air Error Interface FuturisticCar incorrectly extends interface Car Types of property power are incompatible Type air is not assignable to type gas electricity As you can see above electricity is assignable to the literal union type gas electricity because electricity is included in the union type Thus it s possible to make ElectricCar by extending the Car interface On the other hand the TypeScript type checker yells at you when making the FuturisticCar interface because air is not included in gas electricity Interface MergingIn the previous section I explained what happens when you declare the same property while extending another interface Next guess what happens when you declare multiple interfaces with the same name interface Vehicle wheels number maker string interface Vehicle price number const vehicle Vehicle wheels maker Nissan price OKconst vehicle Vehicle maker Nissan price Error Property wheels is missing in type maker string price number but required in type Vehicle const vehicle Vehicle wheels maker Nissan Error Property price is missing in type wheels number maker string but required in type Vehicle In this example Vehicle is declared twice Since both interfaces have the same name TypeScript merges them into one interface As a result the final Vehicle interface has wheels maker and price properties Technically it is the same as declaring one Vehicle interface with the three properties But what if those interfaces have the same property name with different types Let s take a look at the example code below interface Vehicle wheels number maker string plate number interface Vehicle plate string Error Subsequent property declarations must have the same type Property plate must be of type number but here has type string It is not allowed to declare the same property with different types because it causes conflicts The TypeScript type checker will warn that subsequent property declarations must have the same type ConclusionInterface extensions allow developers to avoid repetitive code by deriving common properties from a parent interface When declaring the same property in a child interface it is only allowed if the new re declared property is assignable to the parent one Interface merging can be used to combine interfaces with the same name but it is not allowed to declare the same property with different types as it causes conflicts	2023-03-28 06:13:21
海外TECH	DEV Community	Top 5 MERN STACK projects to improve your practical understanding🚀	https://dev.to/documatic/top-5-mern-stack-projects-to-improve-your-practical-understanding-554k	Top MERN STACK projects to improve your practical understandingIn my journey to becoming a MERN STACK developer I have come to appreciate building projects as a study guide Building projects by far has been said to be an instrumental way of boosting your skills and having enough hands on experience as a beginner You want to improve your practical understanding of MERN stack development Are you familiar with the entire procedure for creating applications utilising frameworks What projects can you complete to prove your proficiency as a MERN stack developer There are plenty of MERN stack projects ideas available to enhance your practical knowledge of MERN STACK Development In this article I have listed a few interesting beginners projects to learn MERN STACK web development along with some details for getting started Before we get to talking about these projects Let s take a little break here to know what MERN Stack really is What technologies form this Stack and the market value of a MERN Stack Developer What is MERN STACK MERN Stack is a JavaScript Stack which comprises powerful and robust technologies used to develop scalable master web applications that includes backend front end and database components MERN Stack is a technology that is a user friendly full stack JavaScript framework for building applications and dynamic websites The main purpose of using MERN stack is to develop apps using JavaScript only MERN Stack consists of FOUR technologies which are M ONGODB Database is for preparing document database and is a NoSQL Non Structured Query Language Database SystemE xpress is used for developing Node js web frameworkR eact is for developing a client side JavaScript frameworkN ode JS is for developing the premier JavaScript web server Top MERN STACK projects to improve your practical understanding E Commerce WebsiteOne of the most popular MERN stack project suggestions for both newbies and experienced developers is an e commerce website This project serves multiple purposes both vendors and customers Customers Login Signup to buy itemsBrowser through and filter productsAdd Delete products from cart and wishlistUpdate their account detailsMake payment for items purchased etc VendorsLogin to their dashboardperform CRUD operations on productsManage users customers Receive and review orders etc Sample Repo Realtime Chat APPA RealTime Chat Application is one of the simplest MERN Stack Applications that enables you to make use of mailing functionalities Some common feature of this App includesUser Login SignupCreating Chat roomsInviting users to chatroom via emailAdd one o one chat with other usersSample Repo Public Blog AppIn a Public blog Application you gain experience on adding privileges to writers on the contents they see on their dashboard as well as controlling that of a super Admin Some features of this App includes Writers login SignupPerform CRUD operations on CategoriesPerform CRUD operation on Articles User right reserved Manage writers and content on App Admin right preserved Like Comment ArticlesFollow WritersBrowse Writers profilesFilter Articles based on writers categories etc Sample Repo Demo Application for Food DeliveryRestaurants and customers should be able to communicate more easily thanks to this app It must include an Admin Dashboard for Restaurant owners as well as a facing App for customers to order food Feature may include User Login SignupAdd Remove to from CartCheckout order and make payment Online or Pay on Delivery Admin should be able to perform CRUD operation on foodetc Sample Repo Demo Weather AppA Weather APP is one of the most prominent React Apps you can build in a few hours This basic App gives you exposure on using external API s It also involves a bit of state management to handle the data Some features of this App may include but not limited to Displaying the weather condition of the user s current location Search for the weather condition of a particular location Dynamic rendering of UI to suit weather conditionetc Sample Repo ConclusionIn this article we looked at what MERN STACK and the technologies involved The Apps listed here are based on personal experiences Are you a MERN stack developer which of the projects above have you built before Which ones would you like to add I will be glad to read them in the comments section Comment on their demo or repository links Happy Hacking Bentil hereAre you a MERN stack developer which of the projects above have you built before Which ones would you like to add Kindly share links to it or the repository This can help others as well Kindly Like Share and follow us for more	2023-03-28 06:06:09
医療系	医療介護 CBnews	機能評価係数II、標準病院群内の格差5.5倍に-23年度、厚労省が官報告示	https://www.cbnews.jp/news/entry/20230328154341	北見赤十字病院	2023-03-28 15:55:00
医療系	医療介護 CBnews	【感染症情報】RSウイルスが3週連続で増加-インフルエンザは減少	https://www.cbnews.jp/news/entry/20230328123039	医療機関	2023-03-28 15:10:00
金融	JPX マーケットニュース	[OSE]日経225オプションのコンプレッション取引の成立	https://www.jpx.co.jp/news/2040/20230328-01.html	日経	2023-03-28 16:00:00
金融	JPX マーケットニュース	[東証]新規上場の承認（TOKYO PRO Market）：ＧＴホールディングス（株）	https://www.jpx.co.jp/equities/products/tpm/issues/index.html	tokyopromarketgt	2023-03-28 15:30:00
金融	ニッセイ基礎研究所	「健康経営」における関心テーマの推移～全国紙に対する計量テキスト分析によるアプローチ	https://www.nli-research.co.jp/topics_detail1/id=74330?site=nli	例えば、「健康経営」「健康」「会社」「取り組む」「取り組み」「生産性」「管理」「実施」「支援」などが同時に使われる傾向があり、それらの記事では健康経営に関する取り組みが健康や生産性を意識して実施されていることが話題になっていた可能性が高い。	2023-03-28 15:17:19
海外ニュース	Japan Times latest articles	Hundreds of fencers issue plea to IOC over Russia, Belarus decision	https://www.japantimes.co.jp/sports/2023/03/28/more-sports/fencing-letter-ioc-russia/	Hundreds of fencers issue plea to IOC over Russia Belarus decisionThe decision to clear Russian and Belarusian athletes to participate in international fencing events was made on March at the FIE Extraordinary Congress	2023-03-28 15:27:17
ニュース	BBC News - Home	William Hill fined record £19.2m for failing to protect customers	https://www.bbc.co.uk/news/business-65091257?at_medium=RSS&at_campaign=KARANGA	betting	2023-03-28 06:46:10
ニュース	BBC News - Home	Teachers' strikes: NEU urges teachers to reject new pay deal	https://www.bbc.co.uk/news/education-65037422?at_medium=RSS&at_campaign=KARANGA	government	2023-03-28 06:40:33
マーケティング	MarkeZine	SHIBUYA109エンタテイメント 、KDDIらとメタバース上でファッションアイテムの販売を開始	http://markezine.jp/article/detail/41782	shibuya	2023-03-28 15:15:00
IT	週刊アスキー	有名駅弁を手掛ける駅弁調製元とコラボしたメニューなどをラインアップ！　京王百貨店新宿店「京王食の祭典 春の大食品祭」	https://weekly.ascii.jp/elem/000/004/130/4130382/	京王百貨店	2023-03-28 15:45:00
IT	週刊アスキー	『ゆるキャン△ 』新作スマホゲームの事前登録者数が50万人突破！	https://weekly.ascii.jp/elem/000/004/130/4130390/	enish	2023-03-28 15:40:00
IT	週刊アスキー	全6回！　「みなとみらいランチタイムコンサート」の2023年度ラインアップ公開	https://weekly.ascii.jp/elem/000/004/130/4130373/	横浜みなとみらいホール	2023-03-28 15:30:00
IT	週刊アスキー	Ploom Xに数量限定のカラーバリエーション「ディープスカイブルー」が登場　スターターキットやフロントパネルが4月4日より順次発売	https://weekly.ascii.jp/elem/000/004/130/4130407/	ploomshop	2023-03-28 15:30:00
IT	週刊アスキー	ドコモ、iOS 16.4でiPhoneのeSIMの「クイック転送」が可能に	https://weekly.ascii.jp/elem/000/004/130/4130418/	iosipados	2023-03-28 15:30:00
IT	週刊アスキー	資生堂パーラー、横浜髙島屋店、横浜そごう店などで「夢ノ叶」「さぬきひめ」をつかったパフェを提供	https://weekly.ascii.jp/elem/000/004/130/4130362/	宮崎県産	2023-03-28 15:10:00
IT	週刊アスキー	声優の神谷明さん出演決定！Switch『超探偵事件簿 レインコード』キャラトレーラー第2弾を公開	https://weekly.ascii.jp/elem/000/004/130/4130384/	発売予定	2023-03-28 15:10:00
マーケティング	AdverTimes	NTTデータ、法人コンサル＆マーケ事業本部 副事業本部長ほか（23年4月1日付）	https://www.advertimes.com/20230328/article415020/	法人	2023-03-28 06:14:09